Merge pull request #247 from h3poteto/iss-197

closes #197 Archive timeline and store unread timeline
h3poteto · Apr 21, 2018 · 89a7985 · 89a7985
2 parents efbb60f + 9d07f07
commit 89a7985
Show file tree

Hide file tree

Showing 13 changed files with 401 additions and 155 deletions.
diff --git a/src/renderer/components/TimelineSpace.vue b/src/renderer/components/TimelineSpace.vue
@@ -43,8 +43,8 @@ export default {
   methods: {
     async clear () {
       await this.$store.dispatch('TimelineSpace/clearAccount')
-      await this.$store.dispatch('TimelineSpace/clearTimeline')
-      await this.$store.dispatch('TimelineSpace/clearNotifications')
+      await this.$store.commit('TimelineSpace/Contents/Home/clearTimeline')
+      await this.$store.commit('TimelineSpace/Contents/Notifications/clearNotifications')
       await this.$store.dispatch('TimelineSpace/removeShortcutEvents')
       return 'clear'
     },
@@ -59,15 +59,15 @@ export default {
         })
       })
       try {
-        await this.$store.dispatch('TimelineSpace/fetchHomeTimeline', account)
+        await this.$store.dispatch('TimelineSpace/Contents/Home/fetchTimeline', account)
       } catch (err) {
         this.$message({
           message: 'Could not fetch timeline',
           type: 'error'
         })
       }
       try {
-        await this.$store.dispatch('TimelineSpace/fetchNotifications', account)
+        await this.$store.dispatch('TimelineSpace/Contents/Notifications/fetchNotifications', account)
       } catch (err) {
         this.$message({
           message: 'Could not fetch notification',

diff --git a/src/renderer/components/TimelineSpace/Contents/Favourites.vue b/src/renderer/components/TimelineSpace/Contents/Favourites.vue
@@ -49,6 +49,7 @@ export default {
     this.$store.commit('TimelineSpace/Contents/Favourites/updateFavourites', [])
     if (document.getElementById('scrollable') !== undefined && document.getElementById('scrollable') !== null) {
       document.getElementById('scrollable').removeEventListener('scroll', this.onScroll)
+      document.getElementById('scrollable').scrollTop = 0
     }
   },
   methods: {

diff --git a/src/renderer/components/TimelineSpace/Contents/Home.vue b/src/renderer/components/TimelineSpace/Contents/Home.vue
@@ -1,5 +1,6 @@
 <template>
   <div id="home">
+    <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
     <div class="home-timeline" v-for="(message, index) in timeline" v-bind:key="index">
       <toot :message="message" :key="message.id"></toot>
     </div>
@@ -17,9 +18,11 @@ export default {
   components: { Toot },
   computed: {
     ...mapState({
-      timeline: state => state.TimelineSpace.homeTimeline,
+      timeline: state => state.TimelineSpace.Contents.Home.timeline,
       lazyLoading: state => state.TimelineSpace.Contents.Home.lazyLoading,
-      backgroundColor: state => state.App.theme.background_color
+      backgroundColor: state => state.App.theme.background_color,
+      heading: state => state.TimelineSpace.Contents.Home.heading,
+      unread: state => state.TimelineSpace.Contents.Home.unreadTimeline
     })
   },
   mounted () {
@@ -32,13 +35,17 @@ export default {
     }
   },
   destroyed () {
-    this.$store.commit('TimelineSpace/archiveHomeTimeline')
+    this.$store.commit('TimelineSpace/Contents/Home/changeHeading', true)
+    this.$store.commit('TimelineSpace/Contents/Home/mergeTimeline')
+    this.$store.commit('TimelineSpace/Contents/Home/archiveTimeline')
     if (document.getElementById('scrollable') !== undefined && document.getElementById('scrollable') !== null) {
       document.getElementById('scrollable').removeEventListener('scroll', this.onScroll)
+      document.getElementById('scrollable').scrollTop = 0
     }
   },
   methods: {
     onScroll (event) {
+      // for lazyLoading
       if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('home').clientHeight - 10) && !this.lazyloading) {
         this.$store.dispatch('TimelineSpace/Contents/Home/lazyFetchTimeline', this.timeline[this.timeline.length - 1])
           .catch(() => {
@@ -48,17 +55,40 @@ export default {
             })
           })
       }
+      // for unread control
+      if ((event.target.scrollTop > 10) && this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Home/changeHeading', false)
+      } else if ((event.target.scrollTop <= 10) && !this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Home/changeHeading', true)
+        this.$store.commit('TimelineSpace/Contents/Home/mergeTimeline')
+      }
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.loading-card {
-  height: 60px;
-}
+#home {
+  .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;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  .loading-card {
+    height: 60px;
+  }
 
-.loading-card:empty {
-  height: 0;
+  .loading-card:empty {
+    height: 0;
+  }
 }
 </style>
diff --git a/src/renderer/components/TimelineSpace/Contents/Lists.vue b/src/renderer/components/TimelineSpace/Contents/Lists.vue
@@ -1,5 +1,6 @@
 <template>
-<div name="lists">
+<div name="lists" id="lists">
+  <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
   <div class="list-timeline" v-for="message in timeline" v-bind:key="message.id">
     <toot :message="message" v-on:update="updateToot"></toot>
   </div>
@@ -19,7 +20,9 @@ export default {
     ...mapState({
       timeline: state => state.TimelineSpace.Contents.Lists.timeline,
       lazyLoading: state => state.TimelineSpace.Contents.Lists.lazyLoading,
-      backgroundColor: state => state.App.theme.background_color
+      backgroundColor: state => state.App.theme.background_color,
+      heading: state => state.TimelineSpace.Contents.Lists.heading,
+      unread: state => state.TimelineSpace.Contents.Lists.unreadTimeline
     })
   },
   created () {
@@ -53,9 +56,13 @@ export default {
     this.$store.dispatch('TimelineSpace/Contents/Lists/stopStreaming')
   },
   destroyed () {
-    this.$store.commit('TimelineSpace/Contents/Lists/updateTimeline', [])
+    this.$store.commit('TimelineSpace/Contents/Lists/changeHeading', true)
+    this.$store.commit('TimelineSpace/Contents/Lists/mergeTimeline')
+    this.$store.commit('TimelineSpace/Contents/Lists/archiveTimeline')
+    this.$store.commit('TimelineSpace/Contents/Lists/clearTimeline')
     if (document.getElementById('scrollable') !== undefined && document.getElementById('scrollable') !== null) {
       document.getElementById('scrollable').removeEventListener('scroll', this.onScroll)
+      document.getElementById('scrollable').scrollTop = 0
     }
   },
   methods: {
@@ -88,17 +95,40 @@ export default {
           last: this.timeline[this.timeline.length - 1]
         })
       }
+      // for unread control
+      if ((event.target.scrollTop > 10) && this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Lists/changeHeading', false)
+      } else if ((event.target.scrollTop <= 10) && !this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Lists/changeHeading', true)
+        this.$store.commit('TimelineSpace/Contents/Lists/mergeTimeline')
+      }
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.loading-card {
-  height: 60px;
-}
+#lists {
+  .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;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  .loading-card {
+    height: 60px;
+  }
 
-.loading-card:empty {
-  height: 0;
+  .loading-card:empty {
+    height: 0;
+  }
 }
 </style>
diff --git a/src/renderer/components/TimelineSpace/Contents/Local.vue b/src/renderer/components/TimelineSpace/Contents/Local.vue
@@ -1,5 +1,6 @@
 <template>
   <div id="local">
+    <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
     <div class="local-timeline" v-for="message in timeline" v-bind:key="message.id">
       <toot :message="message" v-on:update="updateToot"></toot>
     </div>
@@ -19,7 +20,9 @@ export default {
     ...mapState({
       timeline: state => state.TimelineSpace.Contents.Local.timeline,
       lazyLoading: state => state.TimelineSpace.Contents.Local.lazyLoading,
-      backgroundColor: state => state.App.theme.background_color
+      backgroundColor: state => state.App.theme.background_color,
+      heading: state => state.TimelineSpace.Contents.Local.heading,
+      unread: state => state.TimelineSpace.Contents.Local.unreadTimeline
     })
   },
   created () {
@@ -42,9 +45,13 @@ export default {
     this.$store.dispatch('TimelineSpace/Contents/Local/stopLocalStreaming')
   },
   destroyed () {
-    this.$store.commit('TimelineSpace/Contents/Local/updateTimeline', [])
+    this.$store.commit('TimelineSpace/Contents/Local/changeHeading', true)
+    this.$store.commit('TimelineSpace/Contents/Local/mergeTimeline')
+    this.$store.commit('TimelineSpace/Contents/Local/archiveTimeline')
+    this.$store.commit('TimelineSpace/Contents/Local/clearTimeline')
     if (document.getElementById('scrollable') !== undefined && document.getElementById('scrollable') !== null) {
       document.getElementById('scrollable').removeEventListener('scroll', this.onScroll)
+      document.getElementById('scrollable').scrollTop = 0
     }
   },
   methods: {
@@ -78,17 +85,40 @@ export default {
             })
           })
       }
+      // for unread control
+      if ((event.target.scrollTop > 10) && this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Local/changeHeading', false)
+      } else if ((event.target.scrollTop <= 10) && !this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Local/changeHeading', true)
+        this.$store.commit('TimelineSpace/Contents/Local/mergeTimeline')
+      }
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.loading-card {
-  height: 60px;
-}
+#local {
+  .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;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  .loading-card {
+    height: 60px;
+  }
 
-.loading-card:empty {
-  height: 0;
+  .loading-card:empty {
+    height: 0;
+  }
 }
 </style>
diff --git a/src/renderer/components/TimelineSpace/Contents/Notifications.vue b/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>
@@ -17,9 +18,11 @@ export default {
   components: { Notification },
   computed: {
     ...mapState({
-      notifications: state => state.TimelineSpace.notifications,
+      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/archiveNotifications')
+    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;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  .loading-card {
+    height: 60px;
+  }
 
-.loading-card:empty {
-  height: 0;
+  .loading-card:empty {
+    height: 0;
+  }
 }
 </style>