heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

Resolve #4272

Browse source
This commit is contained in:
syuilo 2019-02-17 01:50:17 +09:00
parent 230c204b48
commit 2e6652edce
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
2 changed files with 45 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -3,6 +3,7 @@ ChangeLog
unreleased unreleased
---------- ----------
* 横のナビゲーションバーの改善
* MIDIファイルがオーディオ扱いになる問題を修正 * MIDIファイルがオーディオ扱いになる問題を修正
* ミュートワードで正規表現を使えるように * ミュートワードで正規表現を使えるように
* デッキで無効になったタイムラインに警告を表示するように * デッキで無効になったタイムラインに警告を表示するように

75
src/client/app/desktop/views/components/ui.sidebar.vue
View file

@ -6,24 +6,16 @@
</div> </div>
<div class="nav" v-if="$store.getters.isSignedIn"> <div class="nav" v-if="$store.getters.isSignedIn">
<template v-if="$store.state.device.deckMode"> <template v-if="!$store.state.device.deckMode">
<div class="deck active" @click="goToTop"> <div class="home" :class="{ active: $route.name == 'index' }" @click="goToTop">
<router-link to="/"><fa icon="columns"/></router-link>
</div>
<div class="home">
<a @click="toggleDeckMode(false)"><fa icon="home"/></a>
</div>
</template>
<template v-else>
<div class="home active" @click="goToTop">
<router-link to="/"><fa icon="home"/></router-link> <router-link to="/"><fa icon="home"/></router-link>
</div> </div>
<div class="deck">
<a @click="toggleDeckMode(true)"><fa icon="columns"/></a>
</div>
</template> </template>
<div class="messaging"> <div class="featured" :class="{ active: $route.name == 'featured' }">
<a @click="messaging"><fa icon="comments"/><template v-if="hasUnreadMessagingMessage"><fa icon="circle"/></template></a> <router-link to="/featured"><fa :icon="faNewspaper"/></router-link>
</div>
<div class="explore" :class="{ active: $route.name == 'explore' }">
<router-link to="/explore"><fa :icon="faHashtag"/></router-link>
</div> </div>
<div class="game"> <div class="game">
<a @click="game"><fa icon="gamepad"/><template v-if="hasGameInvitations"><fa icon="circle"/></template></a> <a @click="game"><fa icon="gamepad"/><template v-if="hasGameInvitations"><fa icon="circle"/></template></a>
@ -37,17 +29,12 @@
<div ref="notificationsButton" :class="{ active: showNotifications }"> <div ref="notificationsButton" :class="{ active: showNotifications }">
<a @click="notifications"><fa :icon="['far', 'bell']"/></a> <a @click="notifications"><fa :icon="['far', 'bell']"/></a>
</div> </div>
<div class="messaging">
<a @click="messaging"><fa icon="comments"/><template v-if="hasUnreadMessagingMessage"><fa icon="circle"/></template></a>
</div>
<div> <div>
<a @click="settings"><fa icon="cog"/></a> <a @click="settings"><fa icon="cog"/></a>
</div> </div>
</div>
<div class="account">
<router-link :to="`/@${ $store.state.i.username }`">
<mk-avatar class="avatar" :user="$store.state.i"/>
</router-link>
<div class="nav menu">
<div class="signout"> <div class="signout">
<a @click="signout"><fa icon="power-off"/></a> <a @click="signout"><fa icon="power-off"/></a>
</div> </div>
@ -57,10 +44,19 @@
<div v-if="($store.state.i.isLocked || $store.state.i.carefulBot)"> <div v-if="($store.state.i.isLocked || $store.state.i.carefulBot)">
<a @click="followRequests"><fa :icon="['far', 'envelope']"/><i v-if="$store.state.i.pendingReceivedFollowRequestsCount">{{ $store.state.i.pendingReceivedFollowRequestsCount }}</i></a> <a @click="followRequests"><fa :icon="['far', 'envelope']"/><i v-if="$store.state.i.pendingReceivedFollowRequestsCount">{{ $store.state.i.pendingReceivedFollowRequestsCount }}</i></a>
</div> </div>
<div class="account">
<router-link :to="`/@${ $store.state.i.username }`">
<mk-avatar class="avatar" :user="$store.state.i"/>
</router-link>
</div> </div>
<div>
<template v-if="$store.state.device.deckMode">
<a @click="toggleDeckMode(false)"><fa icon="home"/></a>
</template>
<template v-else>
<a @click="toggleDeckMode(true)"><fa icon="columns"/></a>
</template>
</div> </div>
<div class="nav dark">
<div> <div>
<a @click="dark"><template v-if="$store.state.device.darkmode"><fa icon="moon"/></template><template v-else><fa :icon="['far', 'moon']"/></template></a> <a @click="dark"><template v-if="$store.state.device.darkmode"><fa icon="moon"/></template><template v-else><fa :icon="['far', 'moon']"/></template></a>
</div> </div>
@ -85,6 +81,7 @@ import MkDriveWindow from './drive-window.vue';
import MkMessagingWindow from './messaging-window.vue'; import MkMessagingWindow from './messaging-window.vue';
import MkGameWindow from './game-window.vue'; import MkGameWindow from './game-window.vue';
import contains from '../../../common/scripts/contains'; import contains from '../../../common/scripts/contains';
import { faNewspaper, faHashtag } from '@fortawesome/free-solid-svg-icons';
export default Vue.extend({ export default Vue.extend({
i18n: i18n('desktop/views/components/ui.sidebar.vue'), i18n: i18n('desktop/views/components/ui.sidebar.vue'),
@ -92,7 +89,8 @@ export default Vue.extend({
return { return {
hasGameInvitations: false, hasGameInvitations: false,
connection: null, connection: null,
showNotifications: false showNotifications: false,
faNewspaper, faHashtag
}; };
}, },
@ -278,29 +276,15 @@ export default Vue.extend({
> .nav.bottom > .nav.bottom
position absolute position absolute
bottom 128px bottom 0
left 0 left 0
> .account > .account
position absolute
bottom 64px
left 0
width $width width $width
height $width height $width
padding 14px padding 14px
> .menu > *
display none
position absolute
bottom 64px
left 0
background var(--desktopHeaderBg)
&:hover
> .menu
display block
> *:not(.menu)
display block display block
width 100% width 100%
height 100% height 100%
@ -310,13 +294,6 @@ export default Vue.extend({
width 100% width 100%
height 100% height 100%
> .dark
position absolute
bottom 0
left 0
width $width
height $width
> .notifications > .notifications
position fixed position fixed
top 0 top 0