2 files changed, 76 insertions, 4 deletions
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 281b0183..059028f9 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -1,4 +1,4 @@
-import { filter, sortBy } from 'lodash'
+import { find, filter, sortBy } from 'lodash'
 import { statusType } from '../../modules/statuses.js'
 import Status from '../status/status.vue'
 
@@ -8,6 +8,16 @@ const sortAndFilterConversation = (conversation) => {
 }
 
 const conversation = {
+  data () {
+    return {
+      highlight: null,
+      preview: {
+        x: 0,
+        y: 0,
+        status: null
+      }
+    }
+  },
   props: [
     'statusoid',
     'collapsable'
@@ -22,7 +32,6 @@ const conversation = {
       const conversationId = this.status.statusnet_conversation_id
       const statuses = this.$store.state.statuses.allStatuses
       const conversation = filter(statuses, { statusnet_conversation_id: conversationId })
-
       return sortAndFilterConversation(conversation)
     }
   },
@@ -41,6 +50,7 @@ const conversation = {
         const conversationId = this.status.statusnet_conversation_id
         this.$store.state.api.backendInteractor.fetchConversation({id: conversationId})
           .then((statuses) => this.$store.dispatch('addNewStatuses', { statuses }))
+          .then(() => this.setHighlight(this.statusoid.id))
       } else {
         const id = this.$route.params.id
         this.$store.state.api.backendInteractor.fetchStatus({id})
@@ -48,12 +58,38 @@ const conversation = {
           .then(() => this.fetchConversation())
       }
     },
-    focused: function (id) {
+    getReplies (id) {
+      let res = []
+      id = Number(id)
+      let i
+      for (i = 0; i < this.conversation.length; i++) {
+        if (Number(this.conversation[i].in_reply_to_status_id) === id) {
+          res.push({
+            name: `#${i}`,
+            id: this.conversation[i].id
+          })
+        }
+      }
+      return res
+    },
+    focused (id) {
       if (this.statusoid.retweeted_status) {
         return (id === this.statusoid.retweeted_status.id)
       } else {
         return (id === this.statusoid.id)
       }
+    },
+    setHighlight (id) {
+      this.highlight = Number(id)
+    },
+    setPreview (id, x, y) {
+      if (id) {
+        this.preview.x = x
+        this.preview.y = y
+        this.preview.status = find(this.conversation, { id: id })
+      } else {
+        this.preview.status = null
+      }
     }
   }
 }
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 726cfb65..e8d97f99 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -8,7 +8,17 @@
     </div>
     <div class="panel-body">
       <div class="timeline">
-        <status v-for="status in conversation" :key="status.id" :statusoid="status" :expandable='false' :focused="focused(status.id)" :inConversation='true'></status>
+        <status v-for="status in conversation" @goto="setHighlight" :key="status.id" @preview="setPreview"  :statusoid="status" :expandable='false' :focused="focused(status.id)" :inConversation='true' :highlight="highlight" :replies="getReplies(status.id)"></status>
+      </div>
+    </div>
+    <div class="status-preview base00-background base03-border" :style="{ left: preview.x + 'px', top: preview.y + 'px'}" v-if="preview.status">
+      <img class="avatar" :src="preview.status.user.profile_image_url_original">
+      <div class="text">
+        <h4>
+          {{ preview.status.user.name }}
+          <small><a>{{ preview.status.user.screen_name}}</a></small>
+        </h4>
+        <div @click.prevent="linkClicked" class="status-content" v-html="preview.status.statusnet_html"></div>
       </div>
     </div>
   </div>
@@ -21,4 +31,30 @@
     border-bottom-style: solid;
     border-bottom-width: 1px;
   }
+
+  .status-preview {
+    position: absolute;
+    max-width: 35em;
+    padding: 0.5em;
+    display: flex;
+    border-color: inherit;
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 4px;
+    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
+    .avatar {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+    }
+    .text {
+      h4 {
+        margin-bottom: 0.4em;
+        small {
+          font-weight: lighter;
+        }
+      }
+      padding: 0 0.5em 0.5em 0.5em;
+    }
+  }
 </style>