1 files changed, 24 insertions, 38 deletions
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 8e6f12b2..99f00032 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -8,46 +8,32 @@
       </div>
       <div class="panel-body base03-border">
         <div v-for="notification in visibleNotifications" :key="notification" class="notification" :class='{"unseen": !notification.seen}'>
-          <div>
-            <a :href="notification.action.user.statusnet_profile_url" target="_blank">
-              <StillImage class='avatar' :src="notification.action.user.profile_image_url_original"/>
+          <status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status>
+          <div class="non-mention" v-else>
+            <a :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
+              <StillImage class='avatar-compact' :src="notification.action.user.profile_image_url_original"/>
             </a>
-          </div>
-          <div class='text' style="width: 100%;">
-            <div v-if="notification.type === 'favorite'">
-              <h1>
-                <span :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
-                <i class="fa icon-star lit"></i>
-                <small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
-              </h1>
-              <div class="notification-gradient" :style="hiderStyle"></div>
-              <div class="notification-content" v-html="notification.status.statusnet_html"></div>
-            </div>
-            <div v-if="notification.type === 'repeat'">
-              <h1>
-                <span :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
-                <i class="fa icon-retweet lit"></i>
-                <small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
-              </h1>
-              <div class="notification-gradient" :style="hiderStyle"></div>
-              <div class="notification-content" v-html="notification.status.statusnet_html"></div>
-            </div>
-            <div v-if="notification.type === 'mention'">
-              <h1>
-                <span :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
-                <i class="fa icon-reply lit"></i>
-                <small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
-              </h1>
-              <status :compact="true" :statusoid="notification.status"></status>
-            </div>
-            <div v-if="notification.type === 'follow'">
-              <h1>
-                <span :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
-                <i class="fa icon-user-plus lit"></i>
-              </h1>
-              <div>
-                <router-link :to="{ name: 'user-profile', params: { id: notification.action.user.id } }">@{{ notification.action.user.screen_name }}</router-link> {{$t('notifications.followed_you')}}
+            <div class='notification-right'>
+              <div class="base03-border usercard" v-if="userExpanded">
+                <user-card-content :user="notification.action.user" :switcher="false"></user-card-content>
               </div>
+              <span class="notification-details">
+                <span class="username" :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
+                <span v-if="notification.type === 'favorite'">
+                  <i class="fa icon-star lit"></i>
+                  <small>{{$t('notifications.favorited_you')}}</small>
+                </span>
+                <span v-if="notification.type === 'repeat'">
+                  <i class="fa icon-retweet lit"></i>
+                  <small>{{$t('notifications.repeated_you')}}</small>
+                </span>
+                <span v-if="notification.type === 'follow'">
+                  <i class="fa icon-user-plus lit"></i>
+                  <small>{{$t('notifications.followed_you')}}</small>
+                </span>
+                <small class="timeago"><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
+              </span>
+              <status class="base04" :compact="true" :statusoid="notification.status" :noHeading="true"></status>
             </div>
           </div>
         </div>