Merge branch 'develop' into 'feature/attachment-form-improvements'

# Conflicts:
#   src/components/attachment/attachment.js

src/components/attachment/attachment.js

@@ -20,4 +20,4 @@ const Attachment = {
   }
 }
 
-export default Attachment
+export default Attachment

src/components/attachment/attachment.vue

@@ -11,6 +11,8 @@
 
     <video v-if="type === 'video' && !nsfw" :src="attachment.url" controls></video>
 
+    <audio v-if="type === 'audio'" :src="attachment.url" controls></audio>
+
     <span v-if="type === 'unknown'">Don't know how to display this...</span>
 
     <div v-if="type === 'html' && attachment.oembed" class="oembed">
@@ -45,6 +47,10 @@
               width: 100%;
           }
 
+          audio {
+              width: 100%;
+          }
+
           img.media-upload {
               width: 100%;
               height: 100%;
@@ -94,7 +100,6 @@
 
               img {
                   width: 100%;
-                  flex: 1;
                   border: 1px solid;
                   border-radius: 0.5em;
                   width: 100%;

src/components/conversation/conversation.js

@@ -0,0 +1,48 @@
+import { find, filter, sortBy, toInteger } from 'lodash'
+import Status from '../status/status.vue'
+import apiService from '../../services/api/api.service.js'
+
+const conversation = {
+  computed: {
+    status () {
+      const id = toInteger(this.$route.params.id)
+      const statuses = this.$store.state.statuses.allStatuses
+      const status = find(statuses, {id})
+
+      return status
+    },
+    conversation () {
+      if (!this.status) {
+        return false
+      }
+
+      const conversationId = this.status.statusnet_conversation_id
+      const statuses = this.$store.state.statuses.allStatuses
+      const conversation = filter(statuses, { statusnet_conversation_id: conversationId })
+      return sortBy(conversation, 'id')
+    }
+  },
+  components: {
+    Status
+  },
+  created () {
+    this.fetchConversation()
+  },
+  methods: {
+    fetchConversation () {
+      if (this.status) {
+        const conversationId = this.status.statusnet_conversation_id
+        apiService.fetchConversation({id: conversationId})
+          .then((statuses) => this.$store.dispatch('addNewStatuses', { statuses }))
+          .then(() => this.$store.commit('updateTimestamps'))
+      } else {
+        const id = this.$route.params.id
+        apiService.fetchStatus({id})
+          .then((status) => this.$store.dispatch('addNewStatuses', { statuses: [status] }))
+          .then(() => this.fetchConversation())
+      }
+    }
+  }
+}
+
+export default conversation

src/components/conversation/conversation.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="timeline panel panel-default">
+    <div class="panel-heading">Status</div>
+    <div class="panel-body">
+      <div class="timeline">
+        <status v-for="status in conversation" :key="status.id" v-bind:statusoid="status"></status>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./conversation.js"></script>

src/components/hello/Hello.js

@@ -1,8 +0,0 @@
-export default {
-  name: 'hello',
-  data () {
-    return {
-      msg: 'Welcome to Your Vue.js app'
-    }
-  }
-}

src/components/hello/Hello.vue

@@ -1,44 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <h2>Essential Links</h2>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
-      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
-      <br>
-      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This template</a></li>
-    </ul>
-    <h2>Ecosystem</h2>
-    <ul>
-      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
-      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
-      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script src='./Hello.js'></script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h1, h2 {
-  font-weight: normal;
-}
-
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-
-a {
-  color: #42b983;
-}
-</style>

src/components/status/status.vue

@@ -20,7 +20,14 @@
           <small><a :href="status.user.statusnet_profile_url">{{status.user.screen_name}}</a></small>
           <small v-if="status.in_reply_to_screen_name"> &gt; <a :href="status.in_reply_to_profileurl">{{status.in_reply_to_screen_name}}</a></small>
           -
-          <small>{{status.created_at_parsed}}</small>
+          <small>
+            <router-link :to="{ name: 'conversation', params: { id: status.id } }">
+              {{status.created_at_parsed}}
+            </router-link>
+          </small>
+          <small v-if="!status.is_local" class="source_url">
+            <a :href="status.external_url" >Source</a>
+          </small>
         </h4>
 
         <div class="status-content" v-html="status.statusnet_html"></div>
@@ -51,13 +58,21 @@
 <script src="./status.js" ></script>
 
 <style lang="scss">
-  @import '../../_variables.scss';
-  .status-el {
+ @import '../../_variables.scss';
+ .status-el {
      hyphens: auto;
      overflow-wrap: break-word;
      word-wrap: break-word;
      word-break: break-word;
 
+     .source_url {
+       float: right;
+     }
+
+     .greentext {
+         color: green;
+     }
+
      a {
          display: inline-block;
          word-break: break-all;
@@ -67,13 +82,37 @@
          margin-top: 3px;
          margin-bottom: 3px;
      }
-  }
 
-  .status-actions {
+     p {
+         margin: 0;
+         margin-top: 0.2em;
+         margin-bottom: 0.5em;
+     }
+ }
+
+ .status-actions {
      padding-top: 5px;
-  }
+ }
 
-  .icon-reply:hover {
+ .icon-reply:hover {
      color: $blue;
-  }
+ }
+
+ .status .avatar {
+     width: 48px;
+ }
+
+ .status.compact .avatar {
+     width: 32px;
+ }
+
+ .status {
+     padding: 0.5em;
+     padding-right: 1em;
+     border-bottom: 1px solid silver;
+ }
+
+ .status-el:last-child .status {
+     border: none
+ }
 </style>

src/components/timeline/timeline.js

@@ -12,12 +12,13 @@ const Timeline = {
   created () {
     const store = this.$store
     const credentials = store.state.users.currentUser.credentials
+    const showImmediately = this.timeline.visibleStatuses.length === 0
 
     timelineFetcher.fetchAndUpdate({
       store,
       credentials,
       timeline: this.timelineName,
-      showImmediately: true
+      showImmediately
     })
   },
   methods: {