Mastodon
/
Whalebird-desktop-client-mac-linux-windows
mirror of https://github.com/h3poteto/whalebird-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix align side menu icons

This commit is contained in:
AkiraFukushima 2022-04-05 21:06:19 +09:00
parent 86e9997161
commit 60e2db3f0d
No known key found for this signature in database
GPG Key ID: B6E51BAC4DE1A957
1 changed files with 151 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
src/renderer/components/TimelineSpace/SideMenu.vue
View File

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