🎨
This commit is contained in:
syuilo
parent
63f7941073
commit
2582b8d132
2 changed files with 173 additions and 131 deletions
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<div class="header" :class="$store.state.device.navbar">
|
||||
<div class="header" :class="navbar">
|
||||
<div class="body">
|
||||
<div class="post">
|
||||
<button @click="post" title="%i18n:@post%">%fa:pencil-alt%</button>
|
||||
</div>
|
||||
|
|
@ -23,7 +24,7 @@
|
|||
<div>
|
||||
<a @click="drive">%fa:cloud%</a>
|
||||
</div>
|
||||
<div ref="notificationsButton" :class="{ active: showNotifications }" style="z-index:1;">
|
||||
<div ref="notificationsButton" :class="{ active: showNotifications }">
|
||||
<a @click="notifications">%fa:R bell%</a>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -54,9 +55,10 @@
|
|||
<a @click="dark"><template v-if="$store.state.device.darkmode">%fa:moon%</template><template v-else>%fa:R moon%</template></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<transition name="slide">
|
||||
<div class="notifications" v-if="showNotifications" ref="notifications">
|
||||
<transition :name="`slide-${navbar}`">
|
||||
<div class="notifications" v-if="showNotifications" ref="notifications" :class="navbar">
|
||||
<mk-notifications/>
|
||||
</div>
|
||||
</transition>
|
||||
|
|
@ -85,7 +87,11 @@ export default Vue.extend({
|
|||
computed: {
|
||||
hasUnreadMessagingMessage(): boolean {
|
||||
return this.$store.getters.isSignedIn && this.$store.state.i.hasUnreadMessagingMessage;
|
||||
}
|
||||
},
|
||||
|
||||
navbar(): string {
|
||||
return this.$store.state.device.navbar;
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
|
@ -204,14 +210,22 @@ export default Vue.extend({
|
|||
z-index 1000
|
||||
width $width
|
||||
height 100%
|
||||
background var(--desktopHeaderBg)
|
||||
box-shadow var(--shadowRight)
|
||||
|
||||
&.left
|
||||
left 0
|
||||
box-shadow var(--shadowRight)
|
||||
|
||||
&.right
|
||||
right 0
|
||||
box-shadow var(--shadowLeft)
|
||||
|
||||
> .body
|
||||
position fixed
|
||||
top 0
|
||||
z-index 1
|
||||
width $width
|
||||
height 100%
|
||||
background var(--desktopHeaderBg)
|
||||
|
||||
> .post
|
||||
width $width
|
||||
|
|
@ -245,27 +259,6 @@ 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
|
||||
|
|
@ -310,20 +303,66 @@ export default Vue.extend({
|
|||
> .notifications
|
||||
position fixed
|
||||
top 0
|
||||
left $width
|
||||
width 350px
|
||||
height 100%
|
||||
overflow auto
|
||||
background var(--face)
|
||||
|
||||
&.left
|
||||
left $width
|
||||
box-shadow var(--shadowRight)
|
||||
|
||||
.slide-enter-active,
|
||||
.slide-leave-active {
|
||||
&.right
|
||||
right $width
|
||||
box-shadow var(--shadowLeft)
|
||||
|
||||
.nav
|
||||
> *
|
||||
> *
|
||||
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)
|
||||
|
||||
&.left
|
||||
.nav
|
||||
> *
|
||||
&.active
|
||||
box-shadow -4px 0 var(--primary) inset
|
||||
|
||||
&.right
|
||||
.nav
|
||||
> *
|
||||
&.active
|
||||
box-shadow 4px 0 var(--primary) inset
|
||||
|
||||
.slide-left-enter-active,
|
||||
.slide-left-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.slide-enter, .slide-leave-to {
|
||||
.slide-left-enter, .slide-left-leave-to {
|
||||
transform: translateX(-16px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slide-right-enter-active,
|
||||
.slide-right-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.slide-right-enter, .slide-right-leave-to {
|
||||
transform: translateX(16px);
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -125,13 +125,16 @@ 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)';
|
||||
const shadowLeft = '-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);
|
||||
if (os.store.state.settings.useShadow) document.documentElement.style.setProperty('--shadowLeft', shadowLeft);
|
||||
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');
|
||||
document.documentElement.style.setProperty('--shadowLeft', v ? shadowLeft : 'none');
|
||||
});
|
||||
//#endregion
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue