Resolve #4272
This commit is contained in:
parent
230c204b48
commit
2e6652edce
2 changed files with 45 additions and 67 deletions
|
@ -3,6 +3,7 @@ ChangeLog
|
||||||
|
|
||||||
unreleased
|
unreleased
|
||||||
----------
|
----------
|
||||||
|
* 横のナビゲーションバーの改善
|
||||||
* MIDIファイルがオーディオ扱いになる問題を修正
|
* MIDIファイルがオーディオ扱いになる問題を修正
|
||||||
* ミュートワードで正規表現を使えるように
|
* ミュートワードで正規表現を使えるように
|
||||||
* デッキで無効になったタイムラインに警告を表示するように
|
* デッキで無効になったタイムラインに警告を表示するように
|
||||||
|
|
|
@ -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,30 +29,34 @@
|
||||||
<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="signout">
|
||||||
|
<a @click="signout"><fa icon="power-off"/></a>
|
||||||
<div class="account">
|
</div>
|
||||||
<router-link :to="`/@${ $store.state.i.username }`">
|
<div>
|
||||||
<mk-avatar class="avatar" :user="$store.state.i"/>
|
<router-link to="/i/favorites"><fa icon="star"/></router-link>
|
||||||
</router-link>
|
</div>
|
||||||
|
<div v-if="($store.state.i.isLocked || $store.state.i.carefulBot)">
|
||||||
<div class="nav menu">
|
<a @click="followRequests"><fa :icon="['far', 'envelope']"/><i v-if="$store.state.i.pendingReceivedFollowRequestsCount">{{ $store.state.i.pendingReceivedFollowRequestsCount }}</i></a>
|
||||||
<div class="signout">
|
</div>
|
||||||
<a @click="signout"><fa icon="power-off"/></a>
|
<div class="account">
|
||||||
</div>
|
<router-link :to="`/@${ $store.state.i.username }`">
|
||||||
<div>
|
<mk-avatar class="avatar" :user="$store.state.i"/>
|
||||||
<router-link to="/i/favorites"><fa icon="star"/></router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="($store.state.i.isLocked || $store.state.i.carefulBot)">
|
<div>
|
||||||
<a @click="followRequests"><fa :icon="['far', 'envelope']"/><i v-if="$store.state.i.pendingReceivedFollowRequestsCount">{{ $store.state.i.pendingReceivedFollowRequestsCount }}</i></a>
|
<template v-if="$store.state.device.deckMode">
|
||||||
</div>
|
<a @click="toggleDeckMode(false)"><fa icon="home"/></a>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<a @click="toggleDeckMode(true)"><fa icon="columns"/></a>
|
||||||
|
</template>
|
||||||
</div>
|
</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,44 +276,23 @@ export default Vue.extend({
|
||||||
|
|
||||||
> .nav.bottom
|
> .nav.bottom
|
||||||
position absolute
|
position absolute
|
||||||
bottom 128px
|
bottom 0
|
||||||
left 0
|
left 0
|
||||||
|
|
||||||
> .account
|
> .account
|
||||||
position absolute
|
width $width
|
||||||
bottom 64px
|
height $width
|
||||||
left 0
|
padding 14px
|
||||||
width $width
|
|
||||||
height $width
|
|
||||||
padding 14px
|
|
||||||
|
|
||||||
> .menu
|
> *
|
||||||
display none
|
|
||||||
position absolute
|
|
||||||
bottom 64px
|
|
||||||
left 0
|
|
||||||
background var(--desktopHeaderBg)
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
> .menu
|
|
||||||
display block
|
display block
|
||||||
|
|
||||||
> *:not(.menu)
|
|
||||||
display block
|
|
||||||
width 100%
|
|
||||||
height 100%
|
|
||||||
|
|
||||||
> .avatar
|
|
||||||
pointer-events none
|
|
||||||
width 100%
|
width 100%
|
||||||
height 100%
|
height 100%
|
||||||
|
|
||||||
> .dark
|
> .avatar
|
||||||
position absolute
|
pointer-events none
|
||||||
bottom 0
|
width 100%
|
||||||
left 0
|
height 100%
|
||||||
width $width
|
|
||||||
height $width
|
|
||||||
|
|
||||||
> .notifications
|
> .notifications
|
||||||
position fixed
|
position fixed
|
||||||
|
|
Loading…
Reference in a new issue