rudeshark.net/src/client/app/desktop/views/components/ui.header.account.vue

295 lines
6.4 KiB
Vue
Raw Normal View History

2018-02-12 13:10:16 +01:00
<template>
2018-09-18 19:51:06 +02:00
<div class="account" v-hotkey.global="keymap">
2018-02-12 13:10:16 +01:00
<button class="header" :data-active="isOpen" @click="toggle">
2018-05-27 06:49:09 +02:00
<span class="username">{{ $store.state.i.username }}<template v-if="!isOpen">%fa:angle-down%</template><template v-if="isOpen">%fa:angle-up%</template></span>
<mk-avatar class="avatar" :user="$store.state.i"/>
2018-02-12 13:10:16 +01:00
</button>
2018-02-22 19:33:12 +01:00
<transition name="zoom-in-top">
<div class="menu" v-if="isOpen">
<ul>
<li>
2018-05-27 06:49:09 +02:00
<router-link :to="`/@${ $store.state.i.username }`">%fa:user%<span>%i18n:@profile%</span>%fa:angle-right%</router-link>
2018-02-22 19:33:12 +01:00
</li>
<li @click="drive">
2018-10-25 04:30:30 +02:00
<p>%fa:cloud%<span>%i18n:common.drive%</span>%fa:angle-right%</p>
2018-02-22 19:33:12 +01:00
</li>
2018-04-20 05:38:31 +02:00
<li>
<router-link to="/i/favorites">%fa:star%<span>%i18n:@favorites%</span>%fa:angle-right%</router-link>
</li>
2018-04-24 14:24:06 +02:00
<li @click="list">
2018-04-24 16:34:18 +02:00
<p>%fa:list%<span>%i18n:@lists%</span>%fa:angle-right%</p>
2018-04-24 14:24:06 +02:00
</li>
2018-10-13 13:11:00 +02:00
<li @click="followRequests" v-if="($store.state.i.isLocked || $store.state.i.carefulBot)">
2018-06-02 06:34:53 +02:00
<p>%fa:envelope R%<span>%i18n:@follow-requests%<i v-if="$store.state.i.pendingReceivedFollowRequestsCount">{{ $store.state.i.pendingReceivedFollowRequestsCount }}</i></span>%fa:angle-right%</p>
</li>
2018-02-22 19:33:12 +01:00
</ul>
<ul>
2018-04-12 17:07:13 +02:00
<li>
2018-04-29 10:22:45 +02:00
<router-link to="/i/customize-home">%fa:wrench%<span>%i18n:@customize%</span>%fa:angle-right%</router-link>
2018-04-12 17:07:13 +02:00
</li>
2018-02-22 19:33:12 +01:00
<li @click="settings">
2018-04-20 00:45:37 +02:00
<p>%fa:cog%<span>%i18n:@settings%</span>%fa:angle-right%</p>
2018-02-22 19:33:12 +01:00
</li>
2018-08-22 19:47:12 +02:00
<li v-if="$store.state.i.isAdmin">
<router-link to="/admin">%fa:terminal%<span>%i18n:@admin%</span>%fa:angle-right%</router-link>
2018-04-20 00:45:37 +02:00
</li>
</ul>
<ul>
<li @click="dark">
2018-05-23 22:28:46 +02:00
<p><span>%i18n:@dark%</span><template v-if="$store.state.device.darkmode">%fa:moon%</template><template v-else>%fa:R moon%</template></p>
2018-02-22 19:33:12 +01:00
</li>
</ul>
2018-08-22 19:47:12 +02:00
<ul>
<li @click="signout">
<p class="signout">%fa:power-off%<span>%i18n:@signout%</span></p>
</li>
</ul>
2018-02-22 19:33:12 +01:00
</div>
</transition>
2018-02-12 13:10:16 +01:00
</div>
</template>
<script lang="ts">
import Vue from 'vue';
2018-04-25 15:37:08 +02:00
import MkUserListsWindow from './user-lists-window.vue';
2018-06-02 09:13:32 +02:00
import MkFollowRequestsWindow from './received-follow-requests-window.vue';
2018-02-13 00:24:44 +01:00
import MkSettingsWindow from './settings-window.vue';
2018-02-18 15:51:41 +01:00
import MkDriveWindow from './drive-window.vue';
2018-02-12 13:10:16 +01:00
import contains from '../../../common/scripts/contains';
export default Vue.extend({
data() {
return {
2018-02-26 11:23:53 +01:00
isOpen: false
2018-02-12 13:10:16 +01:00
};
},
2018-09-18 19:51:06 +02:00
computed: {
keymap(): any {
return {
'a|m': this.toggle
};
}
},
2018-02-12 13:10:16 +01:00
beforeDestroy() {
this.close();
},
methods: {
toggle() {
this.isOpen ? this.close() : this.open();
},
open() {
this.isOpen = true;
Array.from(document.querySelectorAll('body *')).forEach(el => {
el.addEventListener('mousedown', this.onMousedown);
});
},
close() {
this.isOpen = false;
Array.from(document.querySelectorAll('body *')).forEach(el => {
el.removeEventListener('mousedown', this.onMousedown);
});
},
onMousedown(e) {
e.preventDefault();
if (!contains(this.$el, e.target) && this.$el != e.target) this.close();
return false;
},
drive() {
this.close();
2018-02-22 15:53:07 +01:00
(this as any).os.new(MkDriveWindow);
2018-02-12 13:10:16 +01:00
},
2018-04-25 05:36:54 +02:00
list() {
this.close();
2018-04-25 16:08:40 +02:00
const w = (this as any).os.new(MkUserListsWindow);
w.$once('choosen', list => {
this.$router.push(`i/lists/${ list.id }`);
});
2018-04-25 05:36:54 +02:00
},
2018-06-02 06:34:53 +02:00
followRequests() {
this.close();
(this as any).os.new(MkFollowRequestsWindow);
},
2018-02-12 13:10:16 +01:00
settings() {
this.close();
2018-02-22 15:53:07 +01:00
(this as any).os.new(MkSettingsWindow);
2018-02-26 11:23:53 +01:00
},
signout() {
(this as any).os.signout();
2018-04-20 00:45:37 +02:00
},
dark() {
2018-05-23 22:28:46 +02:00
this.$store.commit('device/set', {
key: 'darkmode',
value: !this.$store.state.device.darkmode
});
2018-02-12 13:10:16 +01:00
}
}
});
</script>
<style lang="stylus" scoped>
2018-09-27 15:55:17 +02:00
.account
2018-02-12 13:10:16 +01:00
> .header
display block
margin 0
padding 0
2018-09-27 08:19:11 +02:00
color var(--desktopHeaderFg)
2018-02-12 13:10:16 +01:00
border none
background transparent
cursor pointer
*
pointer-events none
&:hover
&[data-active='true']
2018-09-27 08:19:11 +02:00
color var(--desktopHeaderHoverFg)
2018-02-12 13:10:16 +01:00
> .avatar
filter saturate(150%)
> .username
display block
float left
margin 0 12px 0 16px
max-width 16em
line-height 48px
font-weight bold
font-family Meiryo, sans-serif
text-decoration none
2018-10-15 10:43:25 +02:00
@media (max-width 1100px)
display none
2018-02-12 13:10:16 +01:00
[data-fa]
margin-left 8px
> .avatar
display block
float left
min-width 32px
max-width 32px
min-height 32px
max-height 32px
margin 8px 8px 8px 0
border-radius 4px
transition filter 100ms ease
2018-10-15 10:43:25 +02:00
@media (max-width 1100px)
margin-left 8px
2018-02-12 13:10:16 +01:00
> .menu
2018-09-26 13:28:13 +02:00
$bgcolor = var(--face)
2018-02-12 13:10:16 +01:00
display block
position absolute
top 56px
right -2px
width 230px
font-size 0.8em
2018-04-20 00:45:37 +02:00
background $bgcolor
2018-02-12 13:10:16 +01:00
border-radius 4px
2018-04-29 01:51:17 +02:00
box-shadow 0 1px 4px rgba(#000, 0.25)
2018-02-12 13:10:16 +01:00
&:before
content ""
pointer-events none
display block
position absolute
top -28px
right 12px
border-top solid 14px transparent
border-right solid 14px transparent
2018-04-29 01:51:17 +02:00
border-bottom solid 14px rgba(#000, 0.1)
2018-02-12 13:10:16 +01:00
border-left solid 14px transparent
&:after
content ""
pointer-events none
display block
position absolute
top -27px
right 12px
border-top solid 14px transparent
border-right solid 14px transparent
2018-04-20 00:45:37 +02:00
border-bottom solid 14px $bgcolor
2018-02-12 13:10:16 +01:00
border-left solid 14px transparent
ul
display block
margin 10px 0
padding 0
list-style none
& + ul
padding-top 10px
2018-09-27 15:55:17 +02:00
border-top solid 1px var(--faceDivider)
2018-02-12 13:10:16 +01:00
> li
display block
margin 0
padding 0
> a
> p
display block
z-index 1
padding 0 28px
margin 0
line-height 40px
2018-09-27 15:55:17 +02:00
color var(--text)
2018-02-12 13:10:16 +01:00
cursor pointer
*
pointer-events none
2018-04-20 00:45:37 +02:00
> span:first-child
2018-04-20 05:38:31 +02:00
padding-left 22px
2018-04-20 00:45:37 +02:00
2018-06-02 06:34:53 +02:00
> span:nth-child(2)
> i
margin-left 4px
padding 2px 8px
font-size 90%
2018-06-02 08:51:43 +02:00
font-style normal
2018-09-26 13:19:35 +02:00
background var(--primary)
color var(--primaryForeground)
2018-06-02 06:34:53 +02:00
border-radius 8px
2018-04-20 00:45:37 +02:00
> [data-fa]:first-child
2018-02-12 13:10:16 +01:00
margin-right 6px
2018-04-20 00:45:37 +02:00
width 16px
2018-02-12 13:10:16 +01:00
2018-04-20 00:45:37 +02:00
> [data-fa]:last-child
2018-02-12 13:10:16 +01:00
display block
position absolute
top 0
right 8px
z-index 1
padding 0 20px
font-size 1.2em
line-height 40px
&:hover, &:active
text-decoration none
2018-09-26 13:19:35 +02:00
background var(--primary)
color var(--primaryForeground)
2018-02-12 13:10:16 +01:00
2018-02-22 19:33:12 +01:00
&:active
2018-09-26 13:19:35 +02:00
background var(--primaryDarken10)
2018-02-22 19:33:12 +01:00
2018-04-20 05:38:31 +02:00
&.signout
$color = #e64137
&:hover, &:active
background $color
color #fff
&:active
background darken($color, 10%)
2018-02-22 19:33:12 +01:00
.zoom-in-top-enter-active,
.zoom-in-top-leave-active {
transform-origin: center -16px;
}
2018-02-12 13:10:16 +01:00
</style>