From f4f9b3fa265df95ade97625cf2f870ded0825eb1 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Mon, 9 Apr 2018 19:43:31 +0300
Subject: small fixes

---
 src/components/notifications/notifications.vue | 62 ++++++++++----------------
 1 file changed, 24 insertions(+), 38 deletions(-)

(limited to 'src/components/notifications/notifications.vue')

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


From c214197cee192d9ae511d145d8e28cef8ae9a0d1 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Mon, 9 Apr 2018 20:44:37 +0300
Subject: Separate notification into its own component, fix follow notification
 type

---
 src/components/notification/notification.js     | 24 +++++++++++++++++
 src/components/notification/notification.vue    | 35 +++++++++++++++++++++++++
 src/components/notifications/notifications.js   | 12 +++------
 src/components/notifications/notifications.scss | 12 +++++++--
 src/components/notifications/notifications.vue  | 29 +-------------------
 5 files changed, 73 insertions(+), 39 deletions(-)
 create mode 100644 src/components/notification/notification.js
 create mode 100644 src/components/notification/notification.vue

(limited to 'src/components/notifications/notifications.vue')

diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
new file mode 100644
index 00000000..3a274374
--- /dev/null
+++ b/src/components/notification/notification.js
@@ -0,0 +1,24 @@
+import Status from '../status/status.vue'
+import StillImage from '../still-image/still-image.vue'
+import UserCardContent from '../user_card_content/user_card_content.vue'
+
+const Notification = {
+  data () {
+    return {
+      userExpanded: false
+    }
+  },
+  props: [
+    'notification'
+  ],
+  components: {
+    Status, StillImage, UserCardContent
+  },
+  methods: {
+    toggleUserExpanded () {
+      this.userExpanded = !this.userExpanded
+    }
+  }
+}
+
+export default Notification
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
new file mode 100644
index 00000000..74563ff9
--- /dev/null
+++ b/src/components/notification/notification.vue
@@ -0,0 +1,35 @@
+<template>
+  <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 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>
+      <div class="follow-text" v-if="notification.type === 'follow'">
+        <router-link :to="{ name: 'user-profile', params: { id: notification.action.user.id } }">@{{notification.action.user.screen_name}}</router-link>
+      </div>
+      <status v-else class="base04" :compact="true" :statusoid="notification.status" :noHeading="true"></status>
+    </div>
+  </div>
+</template>
+
+<script src="./notification.js"></script>
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 19f767ab..f8314bfc 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -1,14 +1,11 @@
-import Status from '../status/status.vue'
-import StillImage from '../still-image/still-image.vue'
-import UserCardContent from '../user_card_content/user_card_content.vue'
+import Notification from '../notification/notification.vue'
 
 import { sortBy, take, filter } from 'lodash'
 
 const Notifications = {
   data () {
     return {
-      visibleNotificationCount: 10,
-      userExpanded: false
+      visibleNotificationCount: 20
     }
   },
   computed: {
@@ -29,7 +26,7 @@ const Notifications = {
     }
   },
   components: {
-    Status, StillImage, UserCardContent
+    Notification
   },
   watch: {
     unseenCount (count) {
@@ -43,9 +40,6 @@ const Notifications = {
   methods: {
     markAsSeen () {
       this.$store.commit('markNotificationsAsSeen', this.visibleNotifications)
-    },
-    toggleUserExpanded () {
-      this.userExpanded = !this.userExpanded
     }
   }
 }
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 73a70a14..b0136426 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -41,7 +41,11 @@
       flex: 1;
       flex-wrap: nowrap;
       padding: 0.6em;
+      min-width: 0;
       .status-el {
+        .status {
+          padding: 0.25em 0;
+        }
         padding: 0;
         .status-content.media-body {
           margin: 0;
@@ -49,13 +53,18 @@
       }
     }
 
+    .follow-text {
+      padding: 0.5em 0;
+    }
+
     .status-el {
       flex: 1;
     }
 
     .notification-right {
       flex: 1;
-      margin-left: 0.8em;
+      padding-left: 0.8em;
+      min-width: 0;
     }
 
     .notification-details {
@@ -65,7 +74,6 @@
       position: relative;
       overflow: hidden;
       width: 100%;
-      padding: 0.5em;
       flex: 1;
       flex-wrap: nowrap;
 
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 99f00032..71fd2604 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -8,34 +8,7 @@
       </div>
       <div class="panel-body base03-border">
         <div v-for="notification in visibleNotifications" :key="notification" class="notification" :class='{"unseen": !notification.seen}'>
-          <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 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>
+          <notification :notification="notification"></notification>
         </div>
       </div>
     </div>
-- 
cgit v1.2.3-70-g09d2

