From 56f58dd088587c455226f1d8a7655246313da95b Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Thu, 19 Jul 2018 00:47:40 +0900
Subject: [PATCH 1/7] refs #441 Add scroll top button in home

---
 .../components/TimelineSpace/Contents.vue     |  2 +
 .../TimelineSpace/Contents/Home.vue           | 39 +++++++++++++------
 src/renderer/components/utils/scroll.js       | 37 ++++++++++++++++++
 3 files changed, 67 insertions(+), 11 deletions(-)
 create mode 100644 src/renderer/components/utils/scroll.js

diff --git a/src/renderer/components/TimelineSpace/Contents.vue b/src/renderer/components/TimelineSpace/Contents.vue
index f238596f..7961d1ec 100644
--- a/src/renderer/components/TimelineSpace/Contents.vue
+++ b/src/renderer/components/TimelineSpace/Contents.vue
@@ -35,6 +35,7 @@ export default {
     width: 100%;
     overflow: auto;
     transition: all 0.5s;
+    scroll-behavior: smooth;
   }
 
   .timeline-wrapper-with-side-bar {
@@ -42,6 +43,7 @@ export default {
     width: -webkit-calc(100% - 320px);
     overflow: auto;
     transition: all 0.5s;
+    scroll-behavior: smooth;
   }
 }
 </style>
diff --git a/src/renderer/components/TimelineSpace/Contents/Home.vue b/src/renderer/components/TimelineSpace/Contents/Home.vue
index e6e12d8c..6753455b 100644
--- a/src/renderer/components/TimelineSpace/Contents/Home.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Home.vue
@@ -1,21 +1,26 @@
 <template>
-  <div id="home">
-    <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
-    <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
-    </div>
-    <transition-group name="timeline" tag="div">
-      <div class="home-timeline" v-for="(message, index) in timeline" v-bind:key="index">
-        <toot :message="message" :filter="filter" :key="message.id" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
-      </div>
-    </transition-group>
-    <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
-    </div>
+<div id="home">
+  <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
+  <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
   </div>
+  <transition-group name="timeline" tag="div">
+    <div class="home-timeline" v-for="(message, index) in timeline" v-bind:key="index">
+      <toot :message="message" :filter="filter" :key="message.id" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
+    </div>
+  </transition-group>
+  <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
+  </div>
+  <div class="upper" v-show="!heading">
+    <el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
+    </el-button>
+  </div>
+</div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
 import Toot from './Cards/Toot'
+import scrollTop from '../../utils/scroll'
 
 export default {
   name: 'home',
@@ -118,6 +123,12 @@ export default {
       } finally {
         this.$store.commit('TimelineSpace/changeLoading', false)
       }
+    },
+    upper () {
+      scrollTop(
+        document.getElementById('scrollable'),
+        0
+      )
     }
   }
 }
@@ -146,6 +157,12 @@ export default {
   .loading-card:empty {
     height: 0;
   }
+
+  .upper {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+  }
 }
 </style>
 <style src="@/assets/timeline-transition.scss"></style>
diff --git a/src/renderer/components/utils/scroll.js b/src/renderer/components/utils/scroll.js
new file mode 100644
index 00000000..6b2eb86d
--- /dev/null
+++ b/src/renderer/components/utils/scroll.js
@@ -0,0 +1,37 @@
+/**
+ * Scroll to top of the element.
+ * @param element a target dom element
+ * @param point scroll target point of the element
+ **/
+export default function scrollTop (element, point = 0) {
+  const start = element.scrollTop
+  const range = start - point
+  // Progress of scroll: 0 ~ 100
+  let progress = 0
+
+  /**
+   * Scroll calling recursion.
+   **/
+  const move = function () {
+    progress++
+    const nextPos = start - range * (range / 200) * easeOut(progress / 100)
+
+    // Stop the recursion
+    if (nextPos <= 0) {
+      element.scrollTop = 0
+      return
+    }
+
+    element.scrollTop = nextPos
+    requestAnimationFrame(move)
+  }
+
+  requestAnimationFrame(move)
+}
+
+/**
+ * easeOut
+ **/
+const easeOut = function (p) {
+  return p * (2 - p)
+}

From ec6fba90243677e11eb6f3af55f5581554f04489 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Thu, 19 Jul 2018 21:35:13 +0900
Subject: [PATCH 2/7] refs #441 Add scroll top button in notification

---
 .../TimelineSpace/Contents/Notifications.vue  | 39 +++++++++++++------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Contents/Notifications.vue b/src/renderer/components/TimelineSpace/Contents/Notifications.vue
index 3a27c54b..a3cfa636 100644
--- a/src/renderer/components/TimelineSpace/Contents/Notifications.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Notifications.vue
@@ -1,21 +1,26 @@
 <template>
-  <div id="notifications">
-    <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
-    <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
-    </div>
-    <transition-group name="timeline" tag="div">
-      <div class="notifications" v-for="message in notifications" v-bind:key="message.id">
-        <notification :message="message" :filter="filter"></notification>
-      </div>
-    </transition-group>
-    <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
-    </div>
+<div id="notifications">
+  <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
+  <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
   </div>
+  <transition-group name="timeline" tag="div">
+    <div class="notifications" v-for="message in notifications" v-bind:key="message.id">
+      <notification :message="message" :filter="filter"></notification>
+    </div>
+  </transition-group>
+  <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
+  </div>
+  <div class="upper" v-show="!heading">
+    <el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
+    </el-button>
+  </div>
+</div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
 import Notification from './Cards/Notification'
+import scrollTop from '../../utils/scroll'
 
 export default {
   name: 'notifications',
@@ -107,6 +112,12 @@ export default {
       } finally {
         this.$store.commit('TimelineSpace/changeLoading', false)
       }
+    },
+    upper () {
+      scrollTop(
+        document.getElementById('scrollable'),
+        0
+      )
     }
   }
 }
@@ -135,6 +146,12 @@ export default {
   .loading-card:empty {
     height: 0;
   }
+
+  .upper {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+  }
 }
 </style>
 <style src="@/assets/timeline-transition.scss"></style>

From c4a245686e6ab6907b625411602049f22738e57b Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Thu, 19 Jul 2018 21:46:04 +0900
Subject: [PATCH 3/7] refs #441 Add scroll top button in favourite

---
 .../TimelineSpace/Contents/Favourites.vue     | 44 +++++++++++++++----
 1 file changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Contents/Favourites.vue b/src/renderer/components/TimelineSpace/Contents/Favourites.vue
index e013d0ac..1a5b159a 100644
--- a/src/renderer/components/TimelineSpace/Contents/Favourites.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Favourites.vue
@@ -1,22 +1,32 @@
 <template>
-  <div id="favourites">
-    <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
-    </div>
-    <div class="fav" v-for="message in favourites" v-bind:key="message.id">
-      <toot :message="message" :filter="filter" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
-    </div>
-    <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
-    </div>
+<div id="favourites">
+  <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
   </div>
+  <div class="fav" v-for="message in favourites" v-bind:key="message.id">
+    <toot :message="message" :filter="filter" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
+  </div>
+  <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
+  </div>
+  <div class="upper" v-show="!heading">
+    <el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
+    </el-button>
+  </div>
+</div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
 import Toot from './Cards/Toot'
+import scrollTop from '../../utils/scroll'
 
 export default {
   name: 'favourites',
   components: { Toot },
+  data () {
+    return {
+      heading: true
+    }
+  },
   computed: {
     ...mapState({
       backgroundColor: state => state.App.theme.background_color,
@@ -77,6 +87,12 @@ export default {
             })
           })
       }
+      // for upper
+      if ((event.target.scrollTop > 10) && this.heading) {
+        this.heading = false
+      } else if ((event.target.scrollTop <= 10) && !this.heading) {
+        this.heading = true
+      }
     },
     async reload () {
       this.$store.commit('TimelineSpace/changeLoading', true)
@@ -107,6 +123,12 @@ export default {
       } finally {
         this.$store.commit('TimelineSpace/changeLoading', false)
       }
+    },
+    upper () {
+      scrollTop(
+        document.getElementById('scrollable'),
+        0
+      )
     }
   }
 }
@@ -120,4 +142,10 @@ export default {
 .loading-card:empty {
   height: 0;
 }
+
+.upper {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+}
 </style>

From 5966a71b8fd192b0daeea16e32357346620ec3ce Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Thu, 19 Jul 2018 21:51:54 +0900
Subject: [PATCH 4/7] refs #441 Add scroll top button in local

---
 .../TimelineSpace/Contents/Local.vue          | 39 +++++++++++++------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Contents/Local.vue b/src/renderer/components/TimelineSpace/Contents/Local.vue
index 58d3dcd8..7afcfd88 100644
--- a/src/renderer/components/TimelineSpace/Contents/Local.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Local.vue
@@ -1,21 +1,26 @@
 <template>
-  <div id="local">
-    <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
-    <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
-    </div>
-    <transition-group name="timeline" tag="div">
-      <div class="local-timeline" v-for="message in timeline" v-bind:key="message.id">
-        <toot :message="message" :filter="filter" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
-      </div>
-    </transition-group>
-    <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
-    </div>
+<div id="local">
+  <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
+  <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
   </div>
+  <transition-group name="timeline" tag="div">
+    <div class="local-timeline" v-for="message in timeline" v-bind:key="message.id">
+      <toot :message="message" :filter="filter" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
+    </div>
+  </transition-group>
+  <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
+  </div>
+  <div class="upper" v-show="!heading">
+    <el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
+    </el-button>
+  </div>
+</div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
 import Toot from './Cards/Toot'
+import scrollTop from '../../utils/scroll'
 
 export default {
   name: 'local',
@@ -117,6 +122,12 @@ export default {
       } finally {
         this.$store.commit('TimelineSpace/changeLoading', false)
       }
+    },
+    upper () {
+      scrollTop(
+        document.getElementById('scrollable'),
+        0
+      )
     }
   }
 }
@@ -145,6 +156,12 @@ export default {
   .loading-card:empty {
     height: 0;
   }
+
+  .upper {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+  }
 }
 </style>
 <style src="@/assets/timeline-transition.scss"></style>

From 66979e1156b140ab90ae5abcb7ffeb8f540818c4 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Thu, 19 Jul 2018 21:57:54 +0900
Subject: [PATCH 5/7] refs #441 Add scroll top button in public

---
 .../TimelineSpace/Contents/Public.vue         | 39 +++++++++++++------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Contents/Public.vue b/src/renderer/components/TimelineSpace/Contents/Public.vue
index 800dfd79..75344906 100644
--- a/src/renderer/components/TimelineSpace/Contents/Public.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Public.vue
@@ -1,21 +1,26 @@
 <template>
-  <div id="public">
-    <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
-    <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
-    </div>
-    <transition-group name="timeline" tag="div">
-      <div class="public-timeline" v-for="message in timeline" v-bind:key="message.id">
-        <toot :message="message" :filter="filter" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
-      </div>
-    </transition-group>
-    <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
-    </div>
+<div id="public">
+  <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
+  <div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
   </div>
+  <transition-group name="timeline" tag="div">
+    <div class="public-timeline" v-for="message in timeline" v-bind:key="message.id">
+      <toot :message="message" :filter="filter" v-on:update="updateToot" v-on:delete="deleteToot"></toot>
+    </div>
+  </transition-group>
+  <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
+  </div>
+  <div class="upper" v-show="!heading">
+    <el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
+    </el-button>
+  </div>
+</div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
 import Toot from './Cards/Toot'
+import scrollTop from '../../utils/scroll'
 
 export default {
   name: 'public',
@@ -140,6 +145,12 @@ export default {
       } finally {
         this.$store.commit('TimelineSpace/changeLoading', false)
       }
+    },
+    upper () {
+      scrollTop(
+        document.getElementById('scrollable'),
+        0
+      )
     }
   }
 }
@@ -168,6 +179,12 @@ export default {
   .loading-card:empty {
     height: 0;
   }
+
+  .upper {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+  }
 }
 </style>
 <style src="@/assets/timeline-transition.scss"></style>

From fff15da06126561fe7dacf16053fd297b7bf6454 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Thu, 19 Jul 2018 22:02:19 +0900
Subject: [PATCH 6/7] refs #441 Add scroll top button in tag

---
 .../TimelineSpace/Contents/Hashtag/Tag.vue      | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue b/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
index 655f0ba5..4fb6193d 100644
--- a/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
@@ -9,12 +9,17 @@
     </div>
   </transition-group>
   <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
+  <div class="upper" v-show="!heading">
+    <el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
+    </el-button>
+  </div>
 </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
 import Toot from '../Cards/Toot'
+import scrollTop from '../../../utils/scroll'
 
 export default {
   name: 'tag',
@@ -151,6 +156,12 @@ export default {
       } finally {
         this.$store.commit('TimelineSpace/changeLoading', false)
       }
+    },
+    upper () {
+      scrollTop(
+        document.getElementById('scrollable'),
+        0
+      )
     }
   }
 }
@@ -178,5 +189,11 @@ export default {
 .loading-card:empty {
   height: 0;
 }
+
+.upper {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+}
 </style>
 <style src="@/assets/timeline-transition.scss"></style>

From 5f6b26cedd7a1aa0dd81366f91a640d3b49d7ae4 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Thu, 19 Jul 2018 22:05:21 +0900
Subject: [PATCH 7/7] refs #441 Add scroll top button in list

---
 .../TimelineSpace/Contents/Lists/Show.vue       | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue b/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
index 50f48c76..a97b5835 100644
--- a/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
@@ -9,12 +9,17 @@
     </div>
   </transition-group>
   <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
+  <div class="upper" v-show="!heading">
+    <el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
+    </el-button>
+  </div>
 </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
 import Toot from '../Cards/Toot'
+import scrollTop from '../../../utils/scroll'
 
 export default {
   name: 'list',
@@ -147,6 +152,12 @@ export default {
       } finally {
         this.$store.commit('TimelineSpace/changeLoading', false)
       }
+    },
+    upper () {
+      scrollTop(
+        document.getElementById('scrollable'),
+        0
+      )
     }
   }
 }
@@ -174,5 +185,11 @@ export default {
 .loading-card:empty {
   height: 0;
 }
+
+.upper {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+}
 </style>
 <style src="@/assets/timeline-transition.scss"></style>