refs #197 Manage unread notification when scrolling

src/renderer/components/TimelineSpace/Contents/Notifications.vue

@@ -1,5 +1,6 @@
 <template>
   <div id="notifications">
+    <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
     <div class="notifications" v-for="message in notifications" v-bind:key="message.id">
       <notification :message="message"></notification>
     </div>
@@ -19,7 +20,9 @@ export default {
     ...mapState({
       notifications: state => state.TimelineSpace.Contents.Notifications.notifications,
       lazyLoading: state => state.TimelineSpace.Contents.Notifications.lazyLoading,
-      backgroundColor: state => state.App.theme.background_color
+      backgroundColor: state => state.App.theme.background_color,
+      heading: state => state.TimelineSpace.Contents.Notifications.heading,
+      unread: state => state.TimelineSpace.Contents.Notifications.unreadNotifications
     })
   },
   mounted () {
@@ -32,9 +35,12 @@ export default {
     }
   },
   destroyed () {
+    this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', true)
+    this.$store.commit('TimelineSpace/Contents/Notifications/mergeNotifications')
     this.$store.commit('TimelineSpace/Contents/Notifications/archiveNotifications')
     if (document.getElementById('scrollable') !== undefined && document.getElementById('scrollable') !== null) {
       document.getElementById('scrollable').removeEventListener('scroll', this.onScroll)
+      document.getElementById('scrollable').scrollTop = 0
     }
   },
   methods: {
@@ -48,17 +54,40 @@ export default {
             })
           })
       }
+      // for unread control
+      if ((event.target.scrollTop > 10) && this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', false)
+      } else if ((event.target.scrollTop <= 10) && !this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', true)
+        this.$store.commit('TimelineSpace/Contents/Notifications/mergeNotifications')
+      }
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.loading-card {
-  height: 60px;
-}
+#notifications {
+  .unread {
+    position: fixed;
+    right: 24px;
+    top: 48px;
+    background-color: rgba(0, 0, 0, 0.7);
+    color: #ffffff;
+    padding: 4px 8px;
+    border-radius: 0 0 2px 2px;
 
-.loading-card:empty {
-  height: 0;
+    &:empty {
+      display: none;
+    }
+  }
+
+  .loading-card {
+    height: 60px;
+  }
+
+  .loading-card:empty {
+    height: 0;
+  }
 }
 </style>

src/renderer/store/TimelineSpace.js

@@ -77,11 +77,12 @@ const TimelineSpace = {
         })
       })
     },
-    startUserStreaming ({ state, commit }, account) {
+    startUserStreaming ({ state, commit, rootState }, account) {
       ipcRenderer.on('update-start-user-streaming', (event, update) => {
         commit('TimelineSpace/Contents/Home/appendTimeline', update, { root: true })
         // Sometimes archive old statuses
-        if (state.heading) {
+        // TODO: random
+        if (rootState.TimelineSpace.Contents.Home.heading) {
           commit('TimelineSpace/Contents/Home/archiveTimeline', null, { root: true })
         }
         commit('TimelineSpace/SideMenu/changeUnreadHomeTimeline', true, { root: true })
@@ -92,6 +93,9 @@ const TimelineSpace = {
           router.push(`/${account._id}/notifications`)
         }
         commit('TimelineSpace/Contents/Notifications/appendNotifications', notification, { root: true })
+        if (rootState.TimelineSpace.Contents.Notifications.heading) {
+          commit('TimelineSpace/Contents/Notifications/archiveNotifications', null, { root: true })
+        }
         commit('TimelineSpace/SideMenu/changeUnreadNotifications', true, { root: true })
       })
 

src/renderer/store/TimelineSpace/Contents/Notifications.js

@@ -4,18 +4,31 @@ const Notifications = {
   namespaced: true,
   state: {
     lazyLoading: false,
-    notifications: []
+    heading: true,
+    notifications: [],
+    unreadNotifications: []
   },
   mutations: {
     changeLazyLoading (state, value) {
       state.lazyLoading = value
     },
+    changeHeading (state, value) {
+      state.heading = value
+    },
     appendNotifications (state, notification) {
-      state.notifications = [notification].concat(state.notifications)
+      if (state.heading) {
+        state.notifications = [notification].concat(state.notifications)
+      } else {
+        state.unreadNotifications = [notification].concat(state.unreadNotifications)
+      }
     },
     updateNotifications (state, notifications) {
       state.notifications = notifications
     },
+    mergeNotifications (state) {
+      state.notifications = state.unreadNotifications.concat(state.notifications)
+      state.unreadNotifications = []
+    },
     insertNotifications (state, notifications) {
       state.notifications = state.notifications.concat(notifications)
     },
@@ -37,7 +50,7 @@ const Notifications = {
       state.notifications = []
     },
     archiveNotifications (state) {
-      state.notifications = state.notifications.slice(0, 40)
+      state.notifications = state.notifications.slice(0, 30)
     }
   },
   actions: {