Whalebird-desktop-client-ma.../src/renderer/components/TimelineSpace/SideMenu.vue

229 lines
6.1 KiB
Vue
Raw Normal View History

<template>
<div id="side_menu">
2018-07-02 18:01:46 +02:00
<div :class="collapse ? 'profile-wrapper narrow-menu':'profile-wrapper'" style="-webkit-app-region: drag;">
<div class="profile-narrow" v-if="collapse">
<img :src="account.avatar" class="avatar" />
</div>
<div class="profile-wide" v-else>
<div>@{{ account.username }}
<el-dropdown trigger="click" @command="handleProfile">
<span class="el-dropdown-link">
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="edit">{{ $t("side_menu.edit_profile") }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<span>{{ account.domain }}</span>
2018-03-09 07:48:20 +01:00
</div>
2018-07-02 18:01:46 +02:00
<div class="collapse">
<el-button type="text" class="release-collapse" @click="releaseCollapse" v-if="collapse">
2018-07-02 18:01:46 +02:00
<i class="el-icon-arrow-right"></i>
</el-button>
<el-button type="text" class="do-collapse" @click="doCollapse" v-else>
2018-07-02 18:01:46 +02:00
<i class="el-icon-arrow-left"></i>
</el-button>
</div>
2018-03-09 07:48:20 +01:00
</div>
<el-menu
:default-active="activeRoute()"
:background-color="themeColor"
text-color="#909399"
2018-07-02 18:01:46 +02:00
:collapse="collapse"
active-text-color="#ffffff"
:router="true"
2018-07-02 18:01:46 +02:00
:class="collapse ? 'el-menu-vertical timeline-menu narrow-menu':'el-menu-vertical timeline-menu'">
<el-menu-item :index="`/${id()}/home`">
<icon name="home"></icon>
<span>{{ $t("side_menu.home") }}</span>
<el-badge is-dot :hidden="!unreadHomeTimeline">
</el-badge>
</el-menu-item>
<el-menu-item :index="`/${id()}/notifications`">
<icon name="bell"></icon>
<span>{{ $t("side_menu.notification") }}</span>
<el-badge is-dot :hidden="!unreadNotifications">
</el-badge>
</el-menu-item>
2018-03-13 15:56:23 +01:00
<el-menu-item :index="`/${id()}/favourites`">
<icon name="star"></icon>
<span>{{ $t("side_menu.favourite") }}</span>
</el-menu-item>
<el-menu-item :index="`/${id()}/local`">
<icon name="users"></icon>
<span>{{ $t("side_menu.local") }}</span>
<el-badge is-dot :hidden="!unreadLocalTimeline">
</el-badge>
</el-menu-item>
<el-menu-item :index="`/${id()}/public`">
<icon name="globe"></icon>
<span>{{ $t("side_menu.public") }}</span>
</el-menu-item>
<el-menu-item :index="`/${id()}/hashtag`">
<icon name="hashtag"></icon>
<span>{{ $t("side_menu.hashtag") }}</span>
</el-menu-item>
2018-04-15 13:22:27 +02:00
<el-menu-item :index="`/${id()}/search`">
<icon name="search"></icon>
<span>{{ $t("side_menu.search") }}</span>
2018-04-15 13:22:27 +02:00
</el-menu-item>
2018-06-16 08:33:52 +02:00
<el-menu-item :index="`/${id()}/lists`">
<icon name="list-ul"></icon>
<span>{{ $t("side_menu.lists") }}</span>
2018-06-16 08:33:52 +02:00
</el-menu-item>
<template v-for="list in lists">
2018-04-09 14:10:25 +02:00
<el-menu-item :index="`/${id()}/lists/${list.id}`" class="sub-menu" v-bind:key="list.id">
<span>#{{ list.title }}</span>
</el-menu-item>
</template>
</el-menu>
</div>
</template>
<script>
2018-03-09 07:48:20 +01:00
import { mapState } from 'vuex'
import { shell } from 'electron'
2018-03-09 07:48:20 +01:00
export default {
name: 'side-menu',
2018-03-09 07:48:20 +01:00
computed: {
...mapState({
account: state => state.TimelineSpace.account,
unreadHomeTimeline: state => state.TimelineSpace.SideMenu.unreadHomeTimeline,
unreadNotifications: state => state.TimelineSpace.SideMenu.unreadNotifications,
unreadLocalTimeline: state => state.TimelineSpace.SideMenu.unreadLocalTimeline,
lists: state => state.TimelineSpace.SideMenu.lists,
themeColor: state => state.App.theme.side_menu_color,
overrideActivePath: state => state.TimelineSpace.SideMenu.overrideActivePath,
collapse: state => state.TimelineSpace.SideMenu.collapse
})
},
created () {
this.$store.dispatch('TimelineSpace/SideMenu/readCollapse')
2018-03-09 07:48:20 +01:00
},
methods: {
activeRoute () {
if (this.overrideActivePath === null) {
return this.$route.path
} else {
return this.overrideActivePath
}
},
id () {
return this.$route.params.id
},
handleProfile (command) {
switch (command) {
case 'edit':
shell.openExternal(this.account.baseURL + '/settings/profile')
break
}
},
doCollapse () {
this.$store.dispatch('TimelineSpace/SideMenu/changeCollapse', true)
},
releaseCollapse () {
this.$store.dispatch('TimelineSpace/SideMenu/changeCollapse', false)
}
}
}
</script>
<style lang="scss" scoped>
#side_menu {
2018-03-09 07:48:20 +01:00
.profile-wrapper {
background-color: var(--theme-side-menu-color);
position: fixed;
top: 0;
left: 65px;
2018-03-09 09:36:57 +01:00
width: 180px;
2018-03-22 10:09:58 +01:00
height: 70px;
font-size: 16px;
display: flex;
2018-03-09 07:48:20 +01:00
2018-07-02 18:01:46 +02:00
.profile-wide {
2018-03-09 07:48:20 +01:00
color: #ffffff;
font-weight: bold;
2018-03-24 01:56:48 +01:00
padding: 20px 8px 10px 20px;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
.el-dropdown-link {
cursor: pointer;
}
2018-03-09 07:48:20 +01:00
}
2018-07-02 18:01:46 +02:00
.profile-narrow {
float: left;
.avatar {
width: 36px;
height: 36px;
border-radius: 50%;
margin: 18px 12px;
}
}
.collapse {
margin-top: 24px;
.do-collapse {
2018-07-04 17:53:51 +02:00
color: #dcdfe6;
2018-07-02 18:01:46 +02:00
padding: 0;
2018-07-04 17:53:51 +02:00
&:hover {
color: #409eff;
}
2018-07-02 18:01:46 +02:00
}
.release-collapse {
2018-07-04 17:53:51 +02:00
color: #dcdfe6;
2018-07-02 18:01:46 +02:00
padding: 0;
2018-07-04 17:53:51 +02:00
&:hover {
color: #409eff;
}
2018-07-02 18:01:46 +02:00
}
}
2018-03-09 07:48:20 +01:00
}
.timeline-menu /deep/ {
2018-03-09 07:48:20 +01:00
position: fixed;
2018-03-22 10:09:58 +01:00
top: 70px;
2018-03-09 07:48:20 +01:00
left: 65px;
2018-06-04 17:39:37 +02:00
height: calc(100% - 70px);
2018-03-09 09:36:57 +01:00
width: 180px;
border: none;
2018-06-04 17:39:37 +02:00
overflow-y: auto;
.el-badge__content {
background-color: #409eff;
border: none;
margin-left: 4px;
}
.menu-item-title {
color: rgb(144, 147, 153);
cursor: default;
}
.menu-item-title:hover {
background-color: inherit;
}
.sub-menu {
padding-left: 45px !important;
height: 32px;
line-height: 32px;
font-size: 14px;
}
}
2018-07-02 18:01:46 +02:00
.narrow-menu {
width: 76px;
}
}
</style>