2018-03-08 11:53:14 +01:00
|
|
|
<template>
|
|
|
|
<div id="global_header">
|
|
|
|
<el-menu
|
2018-10-23 01:49:53 +02:00
|
|
|
v-if="!hide"
|
2018-10-11 18:21:21 +02:00
|
|
|
:default-active="activeRoute()"
|
2018-03-10 15:21:09 +01:00
|
|
|
class="el-menu-vertical account-menu"
|
2018-03-21 04:22:45 +01:00
|
|
|
:collapse="true"
|
2018-10-11 18:21:21 +02:00
|
|
|
:router="true"
|
2018-04-13 02:09:51 +02:00
|
|
|
:background-color="themeColor"
|
2018-03-08 11:53:14 +01:00
|
|
|
text-color="#909399"
|
2018-10-21 04:17:59 +02:00
|
|
|
active-text-color="#ffffff"
|
|
|
|
role="menubar">
|
|
|
|
<el-menu-item :index="`/${account._id}/home`" v-for="(account, index) in accounts" v-bind:key="account._id" role="menuitem">
|
2018-04-22 09:36:58 +02:00
|
|
|
<i v-if="account.avatar === undefined || account.avatar === null || account.avatar === ''" class="el-icon-menu"></i>
|
2018-08-16 01:00:29 +02:00
|
|
|
<img v-else :src="account.avatar" class="avatar" :title="account.username + '@' + account.domain" />
|
2018-03-10 17:51:35 +01:00
|
|
|
<span slot="title">{{ account.domain }}</span>
|
2018-03-08 11:53:14 +01:00
|
|
|
</el-menu-item>
|
2018-10-21 04:17:59 +02:00
|
|
|
<el-menu-item index="/login" :title="$t('global_header.add_new_account')" role="menuitem">
|
2018-03-14 17:48:37 +01:00
|
|
|
<i class="el-icon-plus"></i>
|
|
|
|
<span slot="new">New</span>
|
|
|
|
</el-menu-item>
|
2018-03-08 11:53:14 +01:00
|
|
|
</el-menu>
|
2018-10-23 01:49:53 +02:00
|
|
|
<div :class="hide ? 'space no-global-header':'space with-global-header' ">
|
2018-03-21 02:41:53 +01:00
|
|
|
<router-view :key="$route.params.id"></router-view>
|
2018-03-08 11:53:14 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
2018-10-23 01:49:53 +02:00
|
|
|
</div>
|
2018-03-08 11:53:14 +01:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2018-03-08 15:08:33 +01:00
|
|
|
import { mapState } from 'vuex'
|
|
|
|
|
2018-03-08 11:53:14 +01:00
|
|
|
export default {
|
|
|
|
name: 'global-header',
|
2018-03-08 15:08:33 +01:00
|
|
|
computed: {
|
2018-10-23 01:49:53 +02:00
|
|
|
...mapState('GlobalHeader', {
|
|
|
|
accounts: state => state.accounts,
|
|
|
|
hide: state => state.hide
|
|
|
|
}),
|
2018-03-08 15:08:33 +01:00
|
|
|
...mapState({
|
2018-04-13 02:09:51 +02:00
|
|
|
themeColor: state => state.App.theme.global_header_color
|
2018-03-08 15:08:33 +01:00
|
|
|
})
|
|
|
|
},
|
2018-03-08 11:53:14 +01:00
|
|
|
created () {
|
2018-03-21 04:22:45 +01:00
|
|
|
this.initialize()
|
2018-03-08 11:53:14 +01:00
|
|
|
},
|
|
|
|
methods: {
|
2018-10-11 18:21:21 +02:00
|
|
|
activeRoute () {
|
|
|
|
return this.$route.path
|
|
|
|
},
|
2018-03-21 04:22:45 +01:00
|
|
|
async initialize () {
|
|
|
|
await this.$store.dispatch('GlobalHeader/removeShortcutEvents')
|
|
|
|
this.$store.dispatch('GlobalHeader/watchShortcutEvents')
|
|
|
|
try {
|
|
|
|
const accounts = await this.$store.dispatch('GlobalHeader/listAccounts')
|
2018-03-21 14:32:32 +01:00
|
|
|
if (this.$route.params.id === undefined) {
|
|
|
|
return this.$router.push({ path: `/${accounts[0]._id}/home` })
|
|
|
|
}
|
2018-03-21 04:22:45 +01:00
|
|
|
} catch (err) {
|
|
|
|
return this.$router.push({ path: '/login' })
|
|
|
|
}
|
2018-03-08 11:53:14 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
2018-04-01 05:10:54 +02:00
|
|
|
<style lang="scss" scoped>
|
|
|
|
#global_header /deep/ {
|
2018-03-10 15:21:09 +01:00
|
|
|
.account-menu {
|
2018-03-08 11:53:14 +01:00
|
|
|
height: 100%;
|
|
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
width: 65px;
|
2018-03-24 02:10:25 +01:00
|
|
|
padding-top: 24px;
|
2018-03-24 16:04:13 +01:00
|
|
|
|
|
|
|
.el-tooltip {
|
|
|
|
outline: 0;
|
2018-04-22 09:36:58 +02:00
|
|
|
text-align: center;
|
|
|
|
padding: 0 !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.avatar {
|
|
|
|
width: 42px;
|
|
|
|
height: 42px;
|
|
|
|
border-radius: 50%;
|
|
|
|
mix-blend-mode: overlay;
|
|
|
|
}
|
|
|
|
|
|
|
|
.is-active {
|
|
|
|
.avatar {
|
|
|
|
mix-blend-mode: normal;
|
|
|
|
}
|
2018-03-24 16:04:13 +01:00
|
|
|
}
|
2018-03-08 11:53:14 +01:00
|
|
|
}
|
|
|
|
|
2018-03-09 07:21:25 +01:00
|
|
|
.space {
|
2018-03-29 15:41:28 +02:00
|
|
|
height: 100%;
|
2018-03-08 11:53:14 +01:00
|
|
|
}
|
2018-10-23 01:49:53 +02:00
|
|
|
|
|
|
|
.no-global-header {
|
|
|
|
margin-left: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.with-global-header {
|
|
|
|
margin-left: 65px;
|
|
|
|
}
|
2018-03-08 11:53:14 +01:00
|
|
|
}
|
|
|
|
</style>
|