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: Show actual status in notifications when mentioned.

---
 src/components/notifications/notifications.js   |  4 ++
 src/components/notifications/notifications.scss | 62 +++++++++++++------------
 src/components/notifications/notifications.vue  | 34 +++++++-------
 3 files changed, 54 insertions(+), 46 deletions(-)

(limited to 'src/components/notifications')

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>
-- 
cgit v1.2.3-70-g09d2