mirror of
https://github.com/misskey-dev/misskey
synced 2024-11-25 15:46:39 +09:00
🎨
This commit is contained in:
syuilo
parent
676f026085
commit
63f7941073
@ -23,28 +23,43 @@
|
||||
<div>
|
||||
<a @click="drive">%fa:cloud%</a>
|
||||
</div>
|
||||
<div>
|
||||
<router-link to="/i/favorites">%fa:star%</router-link>
|
||||
</div>
|
||||
<div v-if="($store.state.i.isLocked || $store.state.i.carefulBot)">
|
||||
<a @click="followRequests">%fa:envelope R%<i v-if="$store.state.i.pendingReceivedFollowRequestsCount">{{ $store.state.i.pendingReceivedFollowRequestsCount }}</i></a>
|
||||
<div ref="notificationsButton" :class="{ active: showNotifications }" style="z-index:1;">
|
||||
<a @click="notifications">%fa:R bell%</a>
|
||||
</div>
|
||||
<div>
|
||||
<a @click="settings">%fa:cog%</a>
|
||||
</div>
|
||||
<div>
|
||||
<a @click="dark"><template v-if="$store.state.device.darkmode">%fa:moon%</template><template v-else>%fa:R moon%</template></a>
|
||||
</div>
|
||||
<div class="signout">
|
||||
<a @click="signout">%fa:power-off%</a>
|
||||
</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">
|
||||
<a @click="signout">%fa:power-off%</a>
|
||||
</div>
|
||||
<div>
|
||||
<router-link to="/i/favorites">%fa:star%</router-link>
|
||||
</div>
|
||||
<div v-if="($store.state.i.isLocked || $store.state.i.carefulBot)">
|
||||
<a @click="followRequests">%fa:envelope R%<i v-if="$store.state.i.pendingReceivedFollowRequestsCount">{{ $store.state.i.pendingReceivedFollowRequestsCount }}</i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav dark">
|
||||
<div>
|
||||
<a @click="dark"><template v-if="$store.state.device.darkmode">%fa:moon%</template><template v-else>%fa:R moon%</template></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<transition name="slide">
|
||||
<div class="notifications" v-if="showNotifications" ref="notifications">
|
||||
<mk-notifications/>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -56,12 +71,14 @@ import MkSettingsWindow from './settings-window.vue';
|
||||
import MkDriveWindow from './drive-window.vue';
|
||||
import MkMessagingWindow from './messaging-window.vue';
|
||||
import MkGameWindow from './game-window.vue';
|
||||
import contains from '../../../common/scripts/contains';
|
||||
|
||||
export default Vue.extend({
|
||||
data() {
|
||||
return {
|
||||
hasGameInvitations: false,
|
||||
connection: null
|
||||
connection: null,
|
||||
showNotifications: false
|
||||
};
|
||||
},
|
||||
|
||||
@ -130,6 +147,37 @@ export default Vue.extend({
|
||||
(this as any).os.signout();
|
||||
},
|
||||
|
||||
notifications() {
|
||||
this.showNotifications ? this.closeNotifications() : this.openNotifications();
|
||||
},
|
||||
|
||||
openNotifications() {
|
||||
this.showNotifications = true;
|
||||
Array.from(document.querySelectorAll('body *')).forEach(el => {
|
||||
el.addEventListener('mousedown', this.onMousedown);
|
||||
});
|
||||
},
|
||||
|
||||
closeNotifications() {
|
||||
this.showNotifications = false;
|
||||
Array.from(document.querySelectorAll('body *')).forEach(el => {
|
||||
el.removeEventListener('mousedown', this.onMousedown);
|
||||
});
|
||||
},
|
||||
|
||||
onMousedown(e) {
|
||||
e.preventDefault();
|
||||
if (
|
||||
!contains(this.$refs.notifications, e.target) &&
|
||||
this.$refs.notifications != e.target &&
|
||||
!contains(this.$refs.notificationsButton, e.target) &&
|
||||
this.$refs.notificationsButton != e.target
|
||||
) {
|
||||
this.closeNotifications();
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
dark() {
|
||||
this.$store.commit('device/set', {
|
||||
key: 'darkmode',
|
||||
@ -157,7 +205,7 @@ export default Vue.extend({
|
||||
width $width
|
||||
height 100%
|
||||
background var(--desktopHeaderBg)
|
||||
box-shadow var(--shadow)
|
||||
box-shadow var(--shadowRight)
|
||||
|
||||
&.left
|
||||
left 0
|
||||
@ -165,28 +213,6 @@ export default Vue.extend({
|
||||
&.right
|
||||
right 0
|
||||
|
||||
> .nav
|
||||
> *
|
||||
&.active
|
||||
box-shadow -4px 0 var(--primary) inset
|
||||
|
||||
> *
|
||||
display block
|
||||
width $width
|
||||
line-height 52px
|
||||
text-align center
|
||||
font-size 18px
|
||||
color var(--desktopHeaderFg)
|
||||
|
||||
&:hover
|
||||
color var(--desktopHeaderHoverFg)
|
||||
text-decoration none
|
||||
|
||||
> .nav.bottom
|
||||
position absolute
|
||||
bottom 64px
|
||||
left 0
|
||||
|
||||
> .post
|
||||
width $width
|
||||
height $width
|
||||
@ -219,15 +245,52 @@ export default Vue.extend({
|
||||
background var(--primaryDarken10) !important
|
||||
transition background 0s ease
|
||||
|
||||
.nav
|
||||
> *
|
||||
&.active
|
||||
box-shadow -4px 0 var(--primary) inset
|
||||
|
||||
> *
|
||||
display block
|
||||
width $width
|
||||
line-height 52px
|
||||
text-align center
|
||||
font-size 18px
|
||||
color var(--desktopHeaderFg)
|
||||
|
||||
&:hover
|
||||
background rgba(0, 0, 0, 0.05)
|
||||
color var(--desktopHeaderHoverFg)
|
||||
text-decoration none
|
||||
|
||||
&:active
|
||||
background rgba(0, 0, 0, 0.1)
|
||||
|
||||
> .nav.bottom
|
||||
position absolute
|
||||
bottom 128px
|
||||
left 0
|
||||
|
||||
> .account
|
||||
position absolute
|
||||
bottom 0
|
||||
bottom 64px
|
||||
left 0
|
||||
width $width
|
||||
height $width
|
||||
padding 14px
|
||||
|
||||
> *
|
||||
> .menu
|
||||
display none
|
||||
position absolute
|
||||
bottom 64px
|
||||
left 0
|
||||
background var(--desktopHeaderBg)
|
||||
|
||||
&:hover
|
||||
> .menu
|
||||
display block
|
||||
|
||||
> *:not(.menu)
|
||||
display block
|
||||
width 100%
|
||||
height 100%
|
||||
@ -237,4 +300,30 @@ export default Vue.extend({
|
||||
width 100%
|
||||
height 100%
|
||||
|
||||
> .dark
|
||||
position absolute
|
||||
bottom 0
|
||||
left 0
|
||||
width $width
|
||||
height $width
|
||||
|
||||
> .notifications
|
||||
position fixed
|
||||
top 0
|
||||
left $width
|
||||
width 350px
|
||||
height 100%
|
||||
overflow auto
|
||||
background var(--face)
|
||||
box-shadow var(--shadowRight)
|
||||
|
||||
.slide-enter-active,
|
||||
.slide-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.slide-enter, .slide-leave-to {
|
||||
transform: translateX(-16px);
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -124,11 +124,14 @@ export default (callback: (launch: (router: VueRouter, api?: (os: MiOS) => API)
|
||||
|
||||
//#region shadow
|
||||
const shadow = '0 3px 8px rgba(0, 0, 0, 0.2)';
|
||||
const shadowRight = '4px 0 4px rgba(0, 0, 0, 0.1)';
|
||||
if (os.store.state.settings.useShadow) document.documentElement.style.setProperty('--shadow', shadow);
|
||||
if (os.store.state.settings.useShadow) document.documentElement.style.setProperty('--shadowRight', shadowRight);
|
||||
os.store.watch(s => {
|
||||
return s.settings.useShadow;
|
||||
}, v => {
|
||||
document.documentElement.style.setProperty('--shadow', v ? shadow : 'none');
|
||||
document.documentElement.style.setProperty('--shadowRight', v ? shadowRight : 'none');
|
||||
});
|
||||
//#endregion
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user