From ef38a57d3490694d905ade91dfbe80772447cb38 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Fri, 22 Apr 2022 22:46:07 +0900
Subject: [PATCH] Fix design sidebar

---
 .../components/TimelineSpace/Contents.vue     |  4 +--
 .../TimelineSpace/Contents/SideBar.vue        | 21 ++++++++-----
 .../Contents/SideBar/AccountProfile.vue       | 20 +++++-------
 .../SideBar/AccountProfile/Timeline.vue       | 31 +++++++------------
 4 files changed, 33 insertions(+), 43 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Contents.vue b/src/renderer/components/TimelineSpace/Contents.vue
index b3f9d3fe..fee9d9a8 100644
--- a/src/renderer/components/TimelineSpace/Contents.vue
+++ b/src/renderer/components/TimelineSpace/Contents.vue
@@ -97,7 +97,7 @@ export default {
       background-color: var(--theme-border-color);
       height: calc(100% - 48px);
       position: fixed;
-      top: 48px;
+      top: 53px;
       right: var(--current-sidebar-width);
     }
 
@@ -124,7 +124,7 @@ export default {
 
   #side_bar {
     position: fixed;
-    top: 48px;
+    top: 52px;
     right: 0;
     width: var(--current-sidebar-width);
     height: calc(100% - 48px);
diff --git a/src/renderer/components/TimelineSpace/Contents/SideBar.vue b/src/renderer/components/TimelineSpace/Contents/SideBar.vue
index 697d3526..d740e196 100644
--- a/src/renderer/components/TimelineSpace/Contents/SideBar.vue
+++ b/src/renderer/components/TimelineSpace/Contents/SideBar.vue
@@ -1,9 +1,12 @@
 <template>
   <div class="side-bar" v-if="openSideBar">
     <div class="header">
-      <font-awesome-icon icon="spinner" />
-      <font-awesome-icon icon="rotate" />
-      <font-awesome-icon icon="xmark" />
+      <el-button type="text" @click="reload" class="action">
+        <font-awesome-icon icon="rotate" />
+      </el-button>
+      <el-button type="text" @click="close" class="action">
+        <font-awesome-icon icon="xmark" />
+      </el-button>
     </div>
     <div id="sidebar_scrollable">
       <account-profile v-if="component === 1" v-on:change-loading="changeLoading"></account-profile>
@@ -88,12 +91,14 @@ export default {
     box-sizing: border-box;
     font-size: 18px;
 
-    .el-icon-close {
-      cursor: pointer;
-    }
+    .action {
+      color: var(--theme-secondary-color);
+      padding: 0;
+      margin-left: 8px;
 
-    .el-icon-refresh {
-      cursor: pointer;
+      &:hover {
+        color: #409eff;
+      }
     }
   }
 
diff --git a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue
index 7fef93bf..f2532c0f 100644
--- a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue
+++ b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue
@@ -382,28 +382,16 @@ export default {
       }
     }
 
-    .username /deep/ {
+    .username {
       overflow: hidden;
       text-overflow: ellipsis;
       font-size: calc(var(--base-font-size) * 1.71);
       margin: 0 auto 12px auto;
-
-      .emojione {
-        max-width: 1em;
-        max-height: 1em;
-      }
     }
 
     .account {
       color: #409eff;
     }
-
-    .note {
-      & /deep/ .emojione {
-        max-width: 1.2em;
-        height: 1.2em;
-      }
-    }
   }
 
   .identity {
@@ -481,6 +469,12 @@ export default {
         width: 100%;
         text-align: left;
         line-height: 20px;
+        height: auto;
+        display: block;
+      }
+
+      .tab :deep(span) {
+        display: block;
       }
 
       .title {
diff --git a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.vue b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.vue
index 8cbc077e..0fbe677d 100644
--- a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.vue
+++ b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline.vue
@@ -1,18 +1,11 @@
 <template>
-  <div class="tabs" id="sidebar_tabs">
-    <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
-      <el-tab-pane label="Posts" name="posts"
-        ><Posts :account="account" :buffer="buffer" :filters="filters"
-      /></el-tab-pane>
+  <div id="sidebar_tabs">
+    <el-tabs :model-value="activeName" @tab-click="handleClick" class="tabs">
+      <el-tab-pane label="Posts" name="posts"><Posts :account="account" :buffer="buffer" :filters="filters" /></el-tab-pane>
       <el-tab-pane label="Posts and replies" name="posts_and_replies"
-        ><PostsAndReplies
-          :account="account"
-          :buffer="buffer"
-          :filters="filters"
-      /></el-tab-pane>
-      <el-tab-pane label="Media" name="media"
-        ><Media :account="account" :buffer="buffer" :filters="filters"
+        ><PostsAndReplies :account="account" :buffer="buffer" :filters="filters"
       /></el-tab-pane>
+      <el-tab-pane label="Media" name="media"><Media :account="account" :buffer="buffer" :filters="filters" /></el-tab-pane>
     </el-tabs>
   </div>
 </template>
@@ -29,19 +22,17 @@ export default {
   components: {
     Posts,
     PostsAndReplies,
-    Media,
+    Media
   },
   data() {
     return {
       activeName: 'posts',
       defaultBuffer: 200,
-      buffer: 200,
+      buffer: 200
     }
   },
   computed: {
-    ...mapGetters('TimelineSpace/Contents/SideBar/AccountProfile/Timeline', [
-      'filters',
-    ]),
+    ...mapGetters('TimelineSpace/Contents/SideBar/AccountProfile/Timeline', ['filters'])
   },
   mounted() {
     const timeline = document.getElementById('sidebar_tabs')
@@ -52,13 +43,13 @@ export default {
   methods: {
     handleClick(tab, event) {
       console.log(tab, event)
-    },
-  },
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-.tabs /deep/ {
+.tabs :deep() {
   .el-tabs__header {
     background-color: var(--theme-selected-background-color);
   }