Merge pull request #3246 from h3poteto/align-icons

Fix align icons

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;

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')">
+      <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"
       >
+        <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">
+      <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">
+      <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"
       >
+        <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">
+      <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">
+      <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">
+      <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">
+      <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')">
+      <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')">
+      <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"
         >
+          <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')">
+      <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"
         >
+          <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/ {

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;
+        display: block;
-        padding: 0;
+        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 {
+        &:blank {
-        margin: 0 0 0 8px;
+          display: none;
+        }
       }
 
       .bookmarked {
-        margin: 0 0 0 8px;
         color: #ff5050;
       }