refs #1035 Add refresh button for sidebar

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

@@ -1,24 +1,25 @@
 <template>
-<transition name="slide-detail">
-  <div id="side_bar" v-if="openSideBar" v-shortkey="shortcutEnabled ? {close: ['esc']} : {}" @shortkey="handleKey">
-    <div class="header">
-      <i class="el-icon-loading" v-show="loading"></i>
-      <i class="el-icon-close" @click="close"></i>
-    </div>
-    <div id="sidebar_scrollable">
-      <account-profile v-if="component === 1" v-on:change-loading="changeLoading"></account-profile>
-      <toot-detail v-else-if="component === 2"></toot-detail>
-      <div
-        class="loading"
-        v-loading="true"
-        :element-loading-text="$t('message.loading')"
-        element-loading-spinner="el-icon-loading"
-        :element-loading-background="backgroundColor"
-        v-else>
+  <transition name="slide-detail">
+    <div id="side_bar" v-if="openSideBar" v-shortkey="shortcutEnabled ? { close: ['esc'] } : {}" @shortkey="handleKey">
+      <div class="header">
+        <i class="el-icon-loading" v-show="loading"></i>
+        <i class="el-icon-refresh" @click="refresh"></i>
+        <i class="el-icon-close" @click="close"></i>
+      </div>
+      <div id="sidebar_scrollable">
+        <account-profile v-if="component === 1" v-on:change-loading="changeLoading"></account-profile>
+        <toot-detail v-else-if="component === 2"></toot-detail>
+        <div
+          class="loading"
+          v-loading="true"
+          :element-loading-text="$t('message.loading')"
+          element-loading-spinner="el-icon-loading"
+          :element-loading-background="backgroundColor"
+          v-else
+        ></div>
       </div>
     </div>
-  </div>
-</transition>
+  </transition>
 </template>
 
 <script>
@@ -38,7 +39,7 @@ export default {
       default: false
     }
   },
-  data () {
+  data() {
     return {
       loading: false
     }
@@ -49,21 +50,22 @@ export default {
       component: state => state.TimelineSpace.Contents.SideBar.component,
       backgroundColor: state => state.App.theme.background_color
     }),
-    shortcutEnabled: function () {
+    shortcutEnabled: function() {
       return !this.overlaid
     }
   },
-  beforeDestroy () {
+  beforeDestroy() {
     this.close()
   },
   methods: {
-    close () {
+    close() {
       this.$store.dispatch('TimelineSpace/Contents/SideBar/close')
     },
-    changeLoading (value) {
+    changeLoading(value) {
       this.loading = value
     },
-    handleKey (event) {
+    refresh() {},
+    handleKey(event) {
       switch (event.srcKey) {
         case 'close':
           this.close()
@@ -89,12 +91,17 @@ export default {
     border-top: solid 1px var(--theme-border-color);
     border-bottom: solid 1px var(--theme-border-color);
     text-align: right;
-    height: 30px;
+    height: 36px;
     box-sizing: border-box;
+    font-size: 18px;
 
     .el-icon-close {
       cursor: pointer;
     }
+
+    .el-icon-refresh {
+      cursor: pointer;
+    }
   }
 
   #sidebar_scrollable {
@@ -107,10 +114,12 @@ export default {
   }
 }
 
-.slide-detail-enter-active, .slide-detail-leave-active {
+.slide-detail-enter-active,
+.slide-detail-leave-active {
   transition: all 0.5s;
 }
-.slide-detail-enter, .slide-detail-leave-to {
+.slide-detail-enter,
+.slide-detail-leave-to {
   margin-right: -360px;
   opacity: 0;
 }