From 60e2db3f0d0afaec6eed8708001359125326a1a1 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Tue, 5 Apr 2022 21:06:19 +0900
Subject: [PATCH 1/3] Fix align side menu icons

---
 .../components/TimelineSpace/SideMenu.vue     | 196 ++++++++++++++----
 1 file changed, 151 insertions(+), 45 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/SideMenu.vue b/src/renderer/components/TimelineSpace/SideMenu.vue
index dcc74f88..56253b7c 100644
--- a/src/renderer/components/TimelineSpace/SideMenu.vue
+++ b/src/renderer/components/TimelineSpace/SideMenu.vue
@@ -41,66 +41,148 @@
       :class="collapse ? 'el-menu-vertical timeline-menu narrow-menu' : 'el-menu-vertical timeline-menu'"
       role="menu"
     >
-      <el-menu-item :index="`/${id()}/home`" role="menuitem" :title="$t('side_menu.home')">
-        <font-awesome-icon icon="home" />
-        <span>{{ $t('side_menu.home') }}</span>
-        <el-badge is-dot :hidden="!unreadHomeTimeline"> </el-badge>
+      <el-menu-item :index="`/${id()}/home`" role="menuitem" :title="$t('side_menu.home')" class="menu-item">
+        <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>
       </el-menu-item>
       <el-menu-item
         :index="`/${id()}/notifications`"
         role="menuitem"
         :title="$t('side_menu.notification')"
+        class="menu-item"
         v-if="enabledTimelines.notification"
       >
-        <font-awesome-icon icon="bell" />
-        <span>{{ $t('side_menu.notification') }}</span>
-        <el-badge is-dot :hidden="!unreadNotifications"> </el-badge>
+        <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>
       </el-menu-item>
-      <el-menu-item :index="`/${id()}/mentions`" role="menuitem" :title="$t('side_menu.mention')" v-if="enabledTimelines.mention">
-        <font-awesome-icon icon="at" />
-        <span>{{ $t('side_menu.mention') }}</span>
-        <el-badge is-dot :hidden="!unreadMentions"> </el-badge>
+      <el-menu-item
+        :index="`/${id()}/mentions`"
+        role="menuitem"
+        :title="$t('side_menu.mention')"
+        class="menu-item"
+        v-if="enabledTimelines.mention"
+      >
+        <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>
       </el-menu-item>
-      <el-menu-item :index="`/${id()}/direct-messages`" role="menuitem" :title="$t('side_menu.direct')" v-if="enabledTimelines.direct">
-        <font-awesome-icon icon="envelope" />
-        <span>{{ $t('side_menu.direct') }}</span>
-        <el-badge is-dot :hidden="!unreadDirectMessagesTimeline"> </el-badge>
+      <el-menu-item
+        :index="`/${id()}/direct-messages`"
+        role="menuitem"
+        :title="$t('side_menu.direct')"
+        class="menu-item"
+        v-if="enabledTimelines.direct"
+      >
+        <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>
       </el-menu-item>
       <el-menu-item
         v-if="unreadFollowRequests"
         :index="`/${id()}/follow-requests`"
         role="menuitem"
         :title="$t('side_menu.follow_requests')"
+        class="menu-item"
       >
-        <font-awesome-icon icon="users" />
-        <span>{{ $t('side_menu.follow_requests') }}</span>
-        <el-badge is-dot></el-badge>
+        <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>
       </el-menu-item>
-      <el-menu-item :index="`/${id()}/favourites`" role="menuitem" :title="$t('side_menu.favourite')" v-if="enabledTimelines.favourite">
-        <font-awesome-icon icon="star" />
-        <span>{{ $t('side_menu.favourite') }}</span>
+      <el-menu-item
+        :index="`/${id()}/favourites`"
+        role="menuitem"
+        :title="$t('side_menu.favourite')"
+        class="menu-item"
+        v-if="enabledTimelines.favourite"
+      >
+        <div class="menu-item-icon">
+          <font-awesome-icon icon="star" />
+        </div>
+        <div>
+          <span>{{ $t('side_menu.favourite') }}</span>
+        </div>
       </el-menu-item>
-      <el-menu-item :index="`/${id()}/bookmarks`" role="menuitem" :title="$t('side_menu.bookmark')" v-if="enabledTimelines.bookmark">
-        <font-awesome-icon icon="bookmark" />
-        <span>{{ $t('side_menu.bookmark') }}</span>
+      <el-menu-item
+        :index="`/${id()}/bookmarks`"
+        role="menuitem"
+        :title="$t('side_menu.bookmark')"
+        class="menu-item"
+        v-if="enabledTimelines.bookmark"
+      >
+        <div class="menu-item-icon">
+          <font-awesome-icon icon="bookmark" />
+        </div>
+        <div>
+          <span>{{ $t('side_menu.bookmark') }}</span>
+        </div>
       </el-menu-item>
-      <el-menu-item :index="`/${id()}/local`" role="menuitem" :title="$t('side_menu.local')" v-if="enabledTimelines.local">
-        <font-awesome-icon icon="users" />
-        <span>{{ $t('side_menu.local') }}</span>
-        <el-badge is-dot :hidden="!unreadLocalTimeline"> </el-badge>
+      <el-menu-item
+        :index="`/${id()}/local`"
+        role="menuitem"
+        :title="$t('side_menu.local')"
+        class="menu-item"
+        v-if="enabledTimelines.local"
+      >
+        <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>
       </el-menu-item>
-      <el-menu-item :index="`/${id()}/public`" role="menuitem" :title="$t('side_menu.public')" v-if="enabledTimelines.public">
-        <font-awesome-icon icon="globe" />
-        <span>{{ $t('side_menu.public') }}</span>
-        <el-badge is-dot :hidden="!unreadPublicTimeline"> </el-badge>
+      <el-menu-item
+        :index="`/${id()}/public`"
+        role="menuitem"
+        :title="$t('side_menu.public')"
+        class="menu-item"
+        v-if="enabledTimelines.public"
+      >
+        <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>
       </el-menu-item>
-      <el-menu-item :index="`/${id()}/search`" role="menuitem" :title="$t('side_menu.search')">
-        <font-awesome-icon icon="magnifying-glass" />
-        <span>{{ $t('side_menu.search') }}</span>
+      <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>
       </el-menu-item>
-      <el-menu-item :index="`/${id()}/hashtag`" role="menuitem" :title="$t('side_menu.hashtag')">
-        <font-awesome-icon icon="hashtag" />
-        <span>{{ $t('side_menu.hashtag') }}</span>
+      <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>
       </el-menu-item>
       <template v-for="tag in tags" v-if="enabledTimelines.tag">
         <el-menu-item
@@ -109,14 +191,23 @@
           :key="tag.tagName"
           role="menuitem"
           :title="tag.tagName"
+          class="menu-item"
         >
-          <font-awesome-icon icon="hashtag" size="sm" />
-          <span>{{ tag.tagName }}</span>
+          <div class="menu-item-icon">
+            <font-awesome-icon icon="hashtag" size="sm" />
+          </div>
+          <div>
+            <span>{{ tag.tagName }}</span>
+          </div>
         </el-menu-item>
       </template>
-      <el-menu-item :index="`/${id()}/lists`" role="menuitem" :title="$t('side_menu.lists')">
-        <font-awesome-icon icon="list-ul" />
-        <span>{{ $t('side_menu.lists') }}</span>
+      <el-menu-item :index="`/${id()}/lists`" role="menuitem" :title="$t('side_menu.lists')" class="menu-item">
+        <div class="menu-item-icon">
+          <font-awesome-icon icon="list-ul" />
+        </div>
+        <div>
+          <span>{{ $t('side_menu.lists') }}</span>
+        </div>
       </el-menu-item>
       <template v-for="list in lists" v-if="enabledTimelines.list">
         <el-menu-item
@@ -125,9 +216,14 @@
           :key="list.id"
           role="menuitem"
           :title="list.title"
+          class="menu-item"
         >
-          <font-awesome-icon icon="list-ul" size="sm" />
-          <span>{{ list.title }}</span>
+          <div class="menu-item-icon">
+            <font-awesome-icon icon="list-ul" size="sm" />
+          </div>
+          <div>
+            <span>{{ list.title }}</span>
+          </div>
         </el-menu-item>
       </template>
     </el-menu>
@@ -332,6 +428,16 @@ export default {
       line-height: 32px;
       font-size: 14px;
     }
+
+    .menu-item {
+      display: flex;
+
+      .menu-item-icon {
+        text-align: center;
+        padding-right: 2px;
+        width: 18px;
+      }
+    }
   }
 
   .timeline-menu:hover /deep/ {

From 686894349b69bf889f2409c02b78213d657ccd5d Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Tue, 5 Apr 2022 21:16:14 +0900
Subject: [PATCH 2/3] Fix align header menu icons

---
 src/renderer/components/TimelineSpace/HeaderMenu.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/renderer/components/TimelineSpace/HeaderMenu.vue b/src/renderer/components/TimelineSpace/HeaderMenu.vue
index a1e47e53..6104027f 100644
--- a/src/renderer/components/TimelineSpace/HeaderMenu.vue
+++ b/src/renderer/components/TimelineSpace/HeaderMenu.vue
@@ -215,7 +215,6 @@ export default {
   }
 
   .tools {
-    font-size: 18px;
     display: flex;
     justify-content: flex-end;
     align-items: center;

From 5385f3baf59252649e594766c2fc409e78025fe5 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Tue, 5 Apr 2022 22:56:52 +0900
Subject: [PATCH 3/3] Fix align toot action icons

---
 src/renderer/components/organisms/Toot.vue | 28 +++++++++++-----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/renderer/components/organisms/Toot.vue b/src/renderer/components/organisms/Toot.vue
index b06f07c9..4f5f72b4 100644
--- a/src/renderer/components/organisms/Toot.vue
+++ b/src/renderer/components/organisms/Toot.vue
@@ -151,9 +151,9 @@
           >
             <font-awesome-icon icon="retweet" size="sm" />
           </el-button>
-          <span class="count">
+          <div class="count" v-if="reblogsCount">
             {{ reblogsCount }}
-          </span>
+          </div>
           <el-button
             type="text"
             @click="changeFavourite(originalMessage)"
@@ -163,9 +163,9 @@
           >
             <font-awesome-icon icon="star" size="sm" />
           </el-button>
-          <span class="count">
+          <div class="count" v-if="favouritesCount">
             {{ favouritesCount }}
-          </span>
+          </div>
           <el-button
             @click="changeBookmark(originalMessage)"
             :class="originalMessage.bookmarked ? 'bookmarked' : 'bookmark'"
@@ -357,13 +357,13 @@ export default {
       if (this.originalMessage.reblogs_count > 0) {
         return this.originalMessage.reblogs_count
       }
-      return ''
+      return null
     },
     favouritesCount: function () {
       if (this.originalMessage.favourites_count > 0) {
         return this.originalMessage.favourites_count
       }
-      return ''
+      return null
     },
     isMyMessage: function () {
       return this.$store.state.TimelineSpace.account.accountId === this.originalMessage.account.id
@@ -951,15 +951,16 @@ export default {
     }
 
     .tool-box {
-      float: left;
+      display: flex;
 
       .fa-icon {
         vertical-align: bottom;
       }
 
       button {
-        margin: 0 8px;
-        padding: 0;
+        display: block;
+        padding: 0 8px;
+        margin: 0;
         color: #909399;
       }
 
@@ -974,15 +975,14 @@ export default {
       .count {
         font-size: 0.8em;
         color: #909399;
-        margin: 0 0 4px -8px;
-      }
+        margin: 0 0 0 -4px;
 
-      .bookmark {
-        margin: 0 0 0 8px;
+        &:blank {
+          display: none;
+        }
       }
 
       .bookmarked {
-        margin: 0 0 0 8px;
         color: #ff5050;
       }