From 0e1ab69c33f155865adc27d940a2542ffdcec30a Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Wed, 22 Feb 2017 23:37:12 +0100
Subject: [PATCH] Show actual status in notifications when mentioned.

---
 src/components/conversation/conversation.vue  |  4 +-
 src/components/notifications/notifications.js |  4 ++
 .../notifications/notifications.scss          | 62 ++++++++++---------
 .../notifications/notifications.vue           | 34 +++++-----
 src/components/status/status.vue              | 10 +--
 5 files changed, 61 insertions(+), 53 deletions(-)

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 9675e69f..b1aff884 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="timeline panel panel-default base00-background">
+  <div class="timeline panel panel-default base00-background conversation">
     <div class="panel-heading base01-background base04">
       Conversation
       <div v-if="collapsable">
@@ -8,7 +8,7 @@
     </div>
     <div class="panel-body">
       <div class="timeline">
-        <status v-for="status in conversation" :key="status.id" v-bind:statusoid="status":expandable='false'></status>
+        <status v-for="status in conversation" :key="status.id" v-bind:statusoid="status" :expandable='false'></status>
       </div>
     </div>
   </div>
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index c8d5e212..390ade6a 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -1,4 +1,5 @@
 import { sortBy, take, filter } from 'lodash'
+import Status from '../status/status.vue'
 
 const Notifications = {
   data () {
@@ -6,6 +7,9 @@ const Notifications = {
       visibleNotificationCount: 10
     }
   },
+  components: {
+    Status
+  },
   computed: {
     notifications () {
       return this.$store.state.statuses.notifications
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 517afeaa..65efb103 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -1,42 +1,44 @@
 @import '../../_variables.scss';
 .notification {
-  padding: 0.4em 0 0 0.7em;
-  display: flex;
   border-bottom: 1px solid silver;
 
-  .text {
-    min-width: 0px;
-    word-wrap: break-word;
-    line-height:18px;
+  .notification-base {
+      padding: 0.4em 0 0 0.7em;
+      display: flex;
+      .avatar {
+          padding-top: 0.3em;
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+      }
 
-    .icon-retweet {
-      color: $green;
-    }
+      .text {
+          min-width: 0px;
+          word-wrap: break-word;
+          line-height:18px;
 
-    .icon-reply {
-      color: $blue;
-    }
+          .icon-retweet {
+              color: $green;
+          }
 
-    h1 {
-      margin: 0 0 0.3em;
-      padding: 0;
-      font-size: 1em;
-      line-height:20px;
-    }
+          .icon-reply {
+              color: $blue;
+          }
 
-    padding: 0.3em 0.8em 0.5em;
-    p {
-      margin: 0;
-      margin-top: 0;
-      margin-bottom: 0.3em;
-    }
-  }
+          h1 {
+              margin: 0 0 0.3em;
+              padding: 0;
+              font-size: 1em;
+              line-height:20px;
+          }
 
-  .avatar {
-    padding-top: 0.3em;
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
+          padding: 0.3em 0.8em 0.5em;
+          p {
+              margin: 0;
+              margin-top: 0;
+              margin-bottom: 0.3em;
+          }
+      }
   }
 
   &:last-child {
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 785cc019..c14abf27 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -4,24 +4,26 @@
       <div class="panel-heading base01-background base04">Notifications ({{unseenCount}}) <button @click.prevent="markAsSeen">Read!</button></div>
       <div class="panel-body">
         <div v-for="notification in visibleNotifications" class="notification" :class='{"base01-background": notification.seen}'>
-          <a :href="notification.action.user.statusnet_profile_url">
-            <img class='avatar' :src="notification.action.user.profile_image_url_original">
-          </a>
-          <div class='text'>
-            <timeago :since="notification.action.created_at" :auto-update="240"></timeago>
-            <div v-if="notification.type === 'favorite'">
-              <h1>{{ notification.action.user.name }}<br><i class="fa icon-star"></i> favorited your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
-              <p>{{ notification.status.text }}</p>
-            </div>
-            <div v-if="notification.type === 'repeat'">
-              <h1>{{ notification.action.user.name }}<br><i class="fa icon-retweet"></i> repeated your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
-              <p>{{ notification.status.text }}</p>
-            </div>
-            <div v-if="notification.type === 'mention'">
-              <h1>{{ notification.action.user.name }}<br><i class="fa icon-reply"></i> <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">mentioned</router-link> you</h1>
-              <p>{{ notification.status.text }}</p>
+          <div class="notification-base">
+            <a :href="notification.action.user.statusnet_profile_url">
+              <img class='avatar' :src="notification.action.user.profile_image_url_original">
+            </a>
+            <div class='text'>
+              <timeago :since="notification.action.created_at" :auto-update="240"></timeago>
+              <div v-if="notification.type === 'favorite'">
+                <h1>{{ notification.action.user.name }}<br><i class="fa icon-star"></i> favorited your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
+                  <p>{{ notification.status.text }}</p>
+              </div>
+              <div v-if="notification.type === 'repeat'">
+                <h1>{{ notification.action.user.name }}<br><i class="fa icon-retweet"></i> repeated your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
+                  <p>{{ notification.status.text }}</p>
+              </div>
+              <div v-if="notification.type === 'mention'">
+                <h1>{{ notification.action.user.name }}<br><i class="fa icon-reply"></i> <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">mentioned</router-link> you</h1>
+              </div>
             </div>
           </div>
+          <status v-if="notification.type === 'mention'" :statusoid="notification.action" :expandable="false"></status>
         </div>
       </div>
     </div>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index f111c2d5..b0f468e5 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="status-el base00-background" v-if="!status.deleted" v-bind:class="{ 'expanded-status': !expandable }">
+  <div class="status-el base00-background" v-if="!status.deleted">
     <template v-if="muted">
       <div class="media status container muted">
         <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
@@ -121,10 +121,6 @@
      }
  }
 
- .expanded-status {
-   border-left: 4px solid rgba(255, 48, 16, 0.65);
- }
-
  .status-actions {
      padding-top: 5px;
  }
@@ -160,4 +156,8 @@
    border-radius: 1em;
    margin-bottom: 1em;
  }
+
+ .conversation .status-el {
+   border-left: 4px solid rgba(255, 48, 16, 0.65);
+ }
 </style>