From cb2a92ee28c547be7093b39186f9afb90708fd08 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Fri, 22 Apr 2022 21:41:36 +0900
Subject: [PATCH] Fix design sidemenu and header

---
 src/renderer/components/GlobalHeader.vue      |  15 +-
 src/renderer/components/TimelineSpace.vue     |   1 -
 .../components/TimelineSpace/Contents.vue     |  30 ++--
 .../TimelineSpace/Contents/Home.vue           |   6 +-
 .../components/TimelineSpace/HeaderMenu.vue   |  13 +-
 .../components/TimelineSpace/SideMenu.vue     | 169 ++++++++++--------
 src/renderer/components/organisms/Toot.vue    |  32 ++--
 src/renderer/main.js                          |   4 +
 8 files changed, 151 insertions(+), 119 deletions(-)

diff --git a/src/renderer/components/GlobalHeader.vue b/src/renderer/components/GlobalHeader.vue
index d3d515ee..ddc9c2f8 100644
--- a/src/renderer/components/GlobalHeader.vue
+++ b/src/renderer/components/GlobalHeader.vue
@@ -87,7 +87,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-#global_header /deep/ {
+.account-menu :deep(.el-menu-item) {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  padding: 0 !important;
+}
+
+#global_header {
   .account-menu {
     height: 100%;
     position: fixed;
@@ -97,12 +104,6 @@ export default {
     padding-top: 24px;
     border: 0;
 
-    .el-tooltip {
-      outline: 0;
-      text-align: center;
-      padding: 0 !important;
-    }
-
     .avatar {
       width: 42px;
       height: 42px;
diff --git a/src/renderer/components/TimelineSpace.vue b/src/renderer/components/TimelineSpace.vue
index 8aa180b5..34f12005 100644
--- a/src/renderer/components/TimelineSpace.vue
+++ b/src/renderer/components/TimelineSpace.vue
@@ -178,7 +178,6 @@ export default {
     width: calc(100% - 180px);
     position: fixed;
     top: 0;
-    height: 48px;
     border-bottom: solid 1px var(--theme-border-color);
   }
 }
diff --git a/src/renderer/components/TimelineSpace/Contents.vue b/src/renderer/components/TimelineSpace/Contents.vue
index 09845931..b3f9d3fe 100644
--- a/src/renderer/components/TimelineSpace/Contents.vue
+++ b/src/renderer/components/TimelineSpace/Contents.vue
@@ -1,15 +1,7 @@
 <template>
-  <div
-    id="contents"
-    ref="contents"
-    :style="customWidth"
-    @mouseup="dragEnd"
-    @mousemove="resize"
-  >
+  <div id="contents" ref="contents" :style="customWidth" @mouseup="dragEnd" @mousemove="resize">
     <div
-      :class="
-        openSideBar ? 'timeline-wrapper-with-side-bar' : 'timeline-wrapper'
-      "
+      :class="openSideBar ? 'timeline-wrapper-with-side-bar' : 'timeline-wrapper'"
       v-loading="loading"
       :element-loading-text="$t('message.loading')"
       element-loading-spinner="el-icon-loading"
@@ -42,25 +34,25 @@ export default {
   data() {
     return {
       sidebarWidth: 360,
-      dragging: false,
+      dragging: false
     }
   },
   components: {
-    SideBar,
+    SideBar
   },
   computed: {
     ...mapState('TimelineSpace/Contents', {
-      loading: (state) => state.loading,
+      loading: state => state.loading
     }),
     ...mapState('TimelineSpace/Contents/SideBar', {
-      openSideBar: (state) => state.openSideBar,
+      openSideBar: state => state.openSideBar
     }),
     ...mapGetters('TimelineSpace/Modals', ['modalOpened']),
     customWidth: function () {
       return {
-        '--current-sidebar-width': `${this.sidebarWidth}px`,
+        '--current-sidebar-width': `${this.sidebarWidth}px`
       }
-    },
+    }
   },
   methods: {
     resize(event) {
@@ -75,8 +67,8 @@ export default {
     dragEnd() {
       this.dragging = false
       this.$refs.contents.style.setProperty('user-select', 'text')
-    },
-  },
+    }
+  }
 }
 </script>
 
@@ -84,7 +76,7 @@ export default {
 #contents {
   --current-sidebar-width: 360px;
 
-  padding-top: 49px;
+  padding-top: 53px;
   height: 100%;
   box-sizing: border-box;
   user-select: text;
diff --git a/src/renderer/components/TimelineSpace/Contents/Home.vue b/src/renderer/components/TimelineSpace/Contents/Home.vue
index 3c8b4621..edb17d6b 100644
--- a/src/renderer/components/TimelineSpace/Contents/Home.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Home.vue
@@ -31,7 +31,7 @@
 
     <div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
       <el-button type="primary" @click="upper" circle>
-        <font-awesome-icon icon="arrow-up" />
+        <font-awesome-icon icon="angle-up" class="icon" />
       </el-button>
     </div>
   </div>
@@ -307,6 +307,10 @@ export default {
     bottom: 20px;
     right: 20px;
     transition: all 0.5s;
+
+    .icon {
+      padding: 3px;
+    }
   }
 
   .upper-with-side-bar {
diff --git a/src/renderer/components/TimelineSpace/HeaderMenu.vue b/src/renderer/components/TimelineSpace/HeaderMenu.vue
index 19f26ce8..15f38596 100644
--- a/src/renderer/components/TimelineSpace/HeaderMenu.vue
+++ b/src/renderer/components/TimelineSpace/HeaderMenu.vue
@@ -11,7 +11,7 @@
       <el-button v-show="reloadable()" type="text" class="action" @click="reload" :title="$t('header_menu.reload')">
         <font-awesome-icon icon="rotate" />
       </el-button>
-      <el-popover placement="left-start" width="180" popper-class="theme-popover" trigger="click" v-model:visible="TLOptionVisible">
+      <el-popover v-if="TLOption()" placement="left-start" width="180" popper-class="theme-popover" trigger="click">
         <div>
           <el-form role="form" label-position="left" label-width="125px" size="default">
             <el-form-item for="show-reblogs" :label="$t('header_menu.option.show_reblogs')">
@@ -23,9 +23,11 @@
             <el-button type="primary" @click="applyTLOption">{{ $t('header_menu.option.apply') }}</el-button>
           </el-form>
         </div>
-        <el-button v-show="TLOption()" slot="reference" type="text" class="action" :title="$t('header_menu.option.title')">
-          <font-awesome-icon icon="sliders" />
-        </el-button>
+        <template #reference>
+          <el-button type="text" class="action" :title="$t('header_menu.option.title')">
+            <font-awesome-icon icon="sliders" />
+          </el-button>
+        </template>
       </el-popover>
       <el-button type="text" class="action" @click="settings" :title="$t('header_menu.settings')">
         <font-awesome-icon icon="gear" />
@@ -41,7 +43,6 @@ export default {
   name: 'header-menu',
   data() {
     return {
-      TLOptionVisible: false,
       showReblogs: true,
       showReplies: true
     }
@@ -177,7 +178,6 @@ export default {
         default:
           console.log('Not implemented')
       }
-      this.TLOptionVisible = false
     },
     TLOption() {
       switch (this.$route.name) {
@@ -211,6 +211,7 @@ export default {
 
     h1 {
       margin: 0;
+      line-height: 32px;
     }
   }
 
diff --git a/src/renderer/components/TimelineSpace/SideMenu.vue b/src/renderer/components/TimelineSpace/SideMenu.vue
index d2bce596..7f579908 100644
--- a/src/renderer/components/TimelineSpace/SideMenu.vue
+++ b/src/renderer/components/TimelineSpace/SideMenu.vue
@@ -12,7 +12,7 @@
           </div>
           <el-dropdown trigger="click" @command="handleProfile" :title="$t('side_menu.profile')">
             <span class="el-dropdown-link">
-              <font-awesome-icon icon="arrow-up" class="el-icon--right" />
+              <font-awesome-icon icon="angle-down" class="el-icon--right" />
             </span>
             <template #dropdown>
               <el-dropdown-menu>
@@ -47,10 +47,12 @@
         <div class="menu-item-icon">
           <font-awesome-icon icon="home" />
         </div>
-        <div>
-          <span>{{ $t('side_menu.home') }}</span>
-          <el-badge is-dot :hidden="!unreadHomeTimeline"> </el-badge>
-        </div>
+        <template #title>
+          <div>
+            <span>{{ $t('side_menu.home') }}</span>
+            <el-badge is-dot :hidden="!unreadHomeTimeline"> </el-badge>
+          </div>
+        </template>
       </el-menu-item>
       <el-menu-item
         :index="`/${id()}/notifications`"
@@ -62,10 +64,12 @@
         <div class="menu-item-icon">
           <font-awesome-icon icon="bell" />
         </div>
-        <div>
-          <span>{{ $t('side_menu.notification') }}</span>
-          <el-badge is-dot :hidden="!unreadNotifications"> </el-badge>
-        </div>
+        <template #title>
+          <div>
+            <span>{{ $t('side_menu.notification') }}</span>
+            <el-badge is-dot :hidden="!unreadNotifications"> </el-badge>
+          </div>
+        </template>
       </el-menu-item>
       <el-menu-item
         :index="`/${id()}/mentions`"
@@ -77,10 +81,12 @@
         <div class="menu-item-icon">
           <font-awesome-icon icon="at" />
         </div>
-        <div>
-          <span>{{ $t('side_menu.mention') }}</span>
-          <el-badge is-dot :hidden="!unreadMentions"> </el-badge>
-        </div>
+        <template #title>
+          <div>
+            <span>{{ $t('side_menu.mention') }}</span>
+            <el-badge is-dot :hidden="!unreadMentions"> </el-badge>
+          </div>
+        </template>
       </el-menu-item>
       <el-menu-item
         :index="`/${id()}/direct-messages`"
@@ -92,10 +98,12 @@
         <div class="menu-item-icon">
           <font-awesome-icon icon="envelope" />
         </div>
-        <div>
-          <span>{{ $t('side_menu.direct') }}</span>
-          <el-badge is-dot :hidden="!unreadDirectMessagesTimeline"> </el-badge>
-        </div>
+        <template #title>
+          <div>
+            <span>{{ $t('side_menu.direct') }}</span>
+            <el-badge is-dot :hidden="!unreadDirectMessagesTimeline"> </el-badge>
+          </div>
+        </template>
       </el-menu-item>
       <el-menu-item
         v-if="unreadFollowRequests"
@@ -107,10 +115,12 @@
         <div class="menu-item-icon">
           <font-awesome-icon icon="users" />
         </div>
-        <div>
-          <span>{{ $t('side_menu.follow_requests') }}</span>
-          <el-badge is-dot></el-badge>
-        </div>
+        <template #title>
+          <div>
+            <span>{{ $t('side_menu.follow_requests') }}</span>
+            <el-badge is-dot></el-badge>
+          </div>
+        </template>
       </el-menu-item>
       <el-menu-item
         :index="`/${id()}/favourites`"
@@ -122,9 +132,11 @@
         <div class="menu-item-icon">
           <font-awesome-icon icon="star" />
         </div>
-        <div>
-          <span>{{ $t('side_menu.favourite') }}</span>
-        </div>
+        <template #title>
+          <div>
+            <span>{{ $t('side_menu.favourite') }}</span>
+          </div>
+        </template>
       </el-menu-item>
       <el-menu-item
         :index="`/${id()}/bookmarks`"
@@ -136,9 +148,11 @@
         <div class="menu-item-icon">
           <font-awesome-icon icon="bookmark" />
         </div>
-        <div>
-          <span>{{ $t('side_menu.bookmark') }}</span>
-        </div>
+        <template #title>
+          <div>
+            <span>{{ $t('side_menu.bookmark') }}</span>
+          </div>
+        </template>
       </el-menu-item>
       <el-menu-item
         :index="`/${id()}/local`"
@@ -150,10 +164,12 @@
         <div class="menu-item-icon">
           <font-awesome-icon icon="users" />
         </div>
-        <div>
-          <span>{{ $t('side_menu.local') }}</span>
-          <el-badge is-dot :hidden="!unreadLocalTimeline"> </el-badge>
-        </div>
+        <template #title>
+          <div>
+            <span>{{ $t('side_menu.local') }}</span>
+            <el-badge is-dot :hidden="!unreadLocalTimeline"> </el-badge>
+          </div>
+        </template>
       </el-menu-item>
       <el-menu-item
         :index="`/${id()}/public`"
@@ -165,26 +181,32 @@
         <div class="menu-item-icon">
           <font-awesome-icon icon="globe" />
         </div>
-        <div>
-          <span>{{ $t('side_menu.public') }}</span>
-          <el-badge is-dot :hidden="!unreadPublicTimeline"> </el-badge>
-        </div>
+        <template #title>
+          <div>
+            <span>{{ $t('side_menu.public') }}</span>
+            <el-badge is-dot :hidden="!unreadPublicTimeline"> </el-badge>
+          </div>
+        </template>
       </el-menu-item>
       <el-menu-item :index="`/${id()}/search`" role="menuitem" :title="$t('side_menu.search')" class="menu-item">
         <div class="menu-item-icon">
           <font-awesome-icon icon="magnifying-glass" />
         </div>
-        <div>
-          <span>{{ $t('side_menu.search') }}</span>
-        </div>
+        <template #title>
+          <div>
+            <span>{{ $t('side_menu.search') }}</span>
+          </div>
+        </template>
       </el-menu-item>
       <el-menu-item :index="`/${id()}/hashtag`" role="menuitem" :title="$t('side_menu.hashtag')" class="menu-item">
         <div class="menu-item-icon">
           <font-awesome-icon icon="hashtag" />
         </div>
-        <div>
-          <span>{{ $t('side_menu.hashtag') }}</span>
-        </div>
+        <template #title>
+          <div>
+            <span>{{ $t('side_menu.hashtag') }}</span>
+          </div>
+        </template>
       </el-menu-item>
       <template v-if="enabledTimelines.tag">
         <template v-for="tag in tags" :key="tag.tagName">
@@ -198,9 +220,11 @@
             <div class="menu-item-icon">
               <font-awesome-icon icon="hashtag" size="sm" />
             </div>
-            <div>
-              <span>{{ tag.tagName }}</span>
-            </div>
+            <template #title>
+              <div>
+                <span>{{ tag.tagName }}</span>
+              </div>
+            </template>
           </el-menu-item>
         </template>
       </template>
@@ -208,9 +232,11 @@
         <div class="menu-item-icon">
           <font-awesome-icon icon="list-ul" />
         </div>
-        <div>
-          <span>{{ $t('side_menu.lists') }}</span>
-        </div>
+        <template #title>
+          <div>
+            <span>{{ $t('side_menu.lists') }}</span>
+          </div>
+        </template>
       </el-menu-item>
       <template v-if="enabledTimelines.list">
         <template v-for="list in lists" :key="list.id">
@@ -224,9 +250,11 @@
             <div class="menu-item-icon">
               <font-awesome-icon icon="list-ul" size="sm" />
             </div>
-            <div>
-              <span>{{ list.title }}</span>
-            </div>
+            <template #title>
+              <div>
+                <span>{{ list.title }}</span>
+              </div>
+            </template>
           </el-menu-item>
         </template>
       </template>
@@ -322,7 +350,7 @@ export default {
     flex-direction: row;
     align-content: center;
     align-items: flex-start;
-    justify-content: flex-end;
+    justify-content: space-between;
 
     .account {
       display: flex;
@@ -403,7 +431,13 @@ export default {
     }
   }
 
-  .timeline-menu /deep/ {
+  .timeline-menu :deep(.el-badge__content) {
+    background-color: #409eff;
+    border: none;
+    margin-left: 8px;
+  }
+
+  .timeline-menu {
     position: fixed;
     top: 82px;
     height: calc(100% - 82px);
@@ -411,12 +445,6 @@ export default {
     border: none;
     overflow: hidden;
 
-    .el-badge__content {
-      background-color: #409eff;
-      border: none;
-      margin-left: 4px;
-    }
-
     .menu-item-title {
       color: rgb(144, 147, 153);
       cursor: default;
@@ -435,6 +463,7 @@ export default {
 
     .menu-item {
       display: flex;
+      align-items: center;
 
       .menu-item-icon {
         text-align: center;
@@ -442,23 +471,23 @@ export default {
         width: 18px;
       }
     }
-  }
-
-  .timeline-menu:hover /deep/ {
-    overflow-y: auto;
-  }
-
-  .narrow-menu /deep/ {
-    width: 64px;
-
-    .el-menu-item {
-      margin-left: 4px;
+    .menu-item * {
+      vertical-align: middle;
     }
 
     .el-badge {
       vertical-align: top;
       line-height: 32px;
-      margin-left: -8px;
+      margin-left: 0px;
+    }
+  }
+
+  .narrow-menu {
+    width: 64px;
+    justify-content: flex-end;
+
+    .el-menu-item {
+      margin-left: 4px;
     }
   }
 
diff --git a/src/renderer/components/organisms/Toot.vue b/src/renderer/components/organisms/Toot.vue
index 82e19f30..fb77f9c4 100644
--- a/src/renderer/components/organisms/Toot.vue
+++ b/src/renderer/components/organisms/Toot.vue
@@ -755,15 +755,15 @@ export default {
       }
     }
 
-    .reblogger-name /deep/ {
+    .reblogger-name {
       font-size: calc(var(--base-font-size) * 0.86);
       cursor: pointer;
       margin: 0 4px;
+    }
 
-      .emojione {
-        max-width: 10px;
-        max-height: 10px;
-      }
+    .reblogger-name :deep(.emojione) {
+      max-width: 10px;
+      max-height: 10px;
     }
   }
 
@@ -772,7 +772,7 @@ export default {
     float: left;
     width: calc(100% - 52px);
 
-    .content-wrapper /deep/ {
+    .content-wrapper {
       font-size: var(--base-font-size);
       color: var(--theme-primary-color);
 
@@ -795,11 +795,11 @@ export default {
       .content p {
         unicode-bidi: plaintext;
       }
+    }
 
-      .emojione {
-        width: 20px;
-        height: 20px;
-      }
+    .content-wrapper :deep(.emojione) {
+      width: 20px;
+      height: 20px;
     }
 
     .toot-header {
@@ -812,14 +812,14 @@ export default {
         overflow: hidden;
         text-overflow: ellipsis;
 
-        .display-name /deep/ {
+        .display-name {
           font-weight: 800;
           color: var(--theme-primary-color);
+        }
 
-          .emojione {
-            max-width: 14px;
-            max-height: 14px;
-          }
+        .display-name :deep(.emojione) {
+          max-width: 14px;
+          max-height: 14px;
         }
 
         .acct {
@@ -908,6 +908,8 @@ export default {
 
     .tool-box {
       display: flex;
+      align-items: center;
+      margin: -6px 0 -6px 0;
 
       .fa-icon {
         vertical-align: bottom;
diff --git a/src/renderer/main.js b/src/renderer/main.js
index 6a5e5a6e..9a27ec65 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -6,6 +6,8 @@ import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
+  faAngleDown,
+  faAngleUp,
   faAnglesRight,
   faAnglesLeft,
   faHome,
@@ -78,6 +80,8 @@ import store from './store'
 import i18next from '~/src/config/i18n'
 
 library.add(
+  faAngleDown,
+  faAngleUp,
   faAnglesRight,
   faAnglesLeft,
   faHome,