mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-11-27 13:53:09 +02:00
🎨
This commit is contained in:
syuilo
parent
63f7941073
commit
2582b8d132
2 changed files with 173 additions and 131 deletions
|
|
@ -1,62 +1,64 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="header" :class="$store.state.device.navbar">
|
<div class="header" :class="navbar">
|
||||||
<div class="post">
|
<div class="body">
|
||||||
<button @click="post" title="%i18n:@post%">%fa:pencil-alt%</button>
|
<div class="post">
|
||||||
</div>
|
<button @click="post" title="%i18n:@post%">%fa:pencil-alt%</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="nav" v-if="$store.getters.isSignedIn">
|
<div class="nav" v-if="$store.getters.isSignedIn">
|
||||||
<div class="home" :class="{ active: $route.name == 'index' }" @click="goToTop">
|
<div class="home" :class="{ active: $route.name == 'index' }" @click="goToTop">
|
||||||
<router-link to="/">%fa:home%</router-link>
|
<router-link to="/">%fa:home%</router-link>
|
||||||
|
</div>
|
||||||
|
<div class="deck" :class="{ active: $route.name == 'deck' }" @click="goToTop">
|
||||||
|
<router-link to="/deck">%fa:columns%</router-link>
|
||||||
|
</div>
|
||||||
|
<div class="messaging">
|
||||||
|
<a @click="messaging">%fa:comments%<template v-if="hasUnreadMessagingMessage">%fa:circle%</template></a>
|
||||||
|
</div>
|
||||||
|
<div class="game">
|
||||||
|
<a @click="game">%fa:gamepad%<template v-if="hasGameInvitations">%fa:circle%</template></a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="deck" :class="{ active: $route.name == 'deck' }" @click="goToTop">
|
|
||||||
<router-link to="/deck">%fa:columns%</router-link>
|
|
||||||
</div>
|
|
||||||
<div class="messaging">
|
|
||||||
<a @click="messaging">%fa:comments%<template v-if="hasUnreadMessagingMessage">%fa:circle%</template></a>
|
|
||||||
</div>
|
|
||||||
<div class="game">
|
|
||||||
<a @click="game">%fa:gamepad%<template v-if="hasGameInvitations">%fa:circle%</template></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav bottom" v-if="$store.getters.isSignedIn">
|
<div class="nav bottom" v-if="$store.getters.isSignedIn">
|
||||||
<div>
|
<div>
|
||||||
<a @click="drive">%fa:cloud%</a>
|
<a @click="drive">%fa:cloud%</a>
|
||||||
</div>
|
</div>
|
||||||
<div ref="notificationsButton" :class="{ active: showNotifications }" style="z-index:1;">
|
<div ref="notificationsButton" :class="{ active: showNotifications }">
|
||||||
<a @click="notifications">%fa:R bell%</a>
|
<a @click="notifications">%fa:R bell%</a>
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<a @click="settings">%fa:cog%</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>
|
||||||
<div>
|
<div>
|
||||||
<router-link to="/i/favorites">%fa:star%</router-link>
|
<a @click="settings">%fa:cog%</a>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="($store.state.i.isLocked || $store.state.i.carefulBot)">
|
</div>
|
||||||
<a @click="followRequests">%fa:envelope R%<i v-if="$store.state.i.pendingReceivedFollowRequestsCount">{{ $store.state.i.pendingReceivedFollowRequestsCount }}</i></a>
|
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="nav dark">
|
<transition :name="`slide-${navbar}`">
|
||||||
<div>
|
<div class="notifications" v-if="showNotifications" ref="notifications" :class="navbar">
|
||||||
<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/>
|
<mk-notifications/>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
|
|
@ -85,7 +87,11 @@ export default Vue.extend({
|
||||||
computed: {
|
computed: {
|
||||||
hasUnreadMessagingMessage(): boolean {
|
hasUnreadMessagingMessage(): boolean {
|
||||||
return this.$store.getters.isSignedIn && this.$store.state.i.hasUnreadMessagingMessage;
|
return this.$store.getters.isSignedIn && this.$store.state.i.hasUnreadMessagingMessage;
|
||||||
}
|
},
|
||||||
|
|
||||||
|
navbar(): string {
|
||||||
|
return this.$store.state.device.navbar;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
@ -204,52 +210,114 @@ export default Vue.extend({
|
||||||
z-index 1000
|
z-index 1000
|
||||||
width $width
|
width $width
|
||||||
height 100%
|
height 100%
|
||||||
background var(--desktopHeaderBg)
|
|
||||||
box-shadow var(--shadowRight)
|
|
||||||
|
|
||||||
&.left
|
&.left
|
||||||
left 0
|
left 0
|
||||||
|
box-shadow var(--shadowRight)
|
||||||
|
|
||||||
&.right
|
&.right
|
||||||
right 0
|
right 0
|
||||||
|
box-shadow var(--shadowLeft)
|
||||||
|
|
||||||
> .post
|
> .body
|
||||||
|
position fixed
|
||||||
|
top 0
|
||||||
|
z-index 1
|
||||||
width $width
|
width $width
|
||||||
height $width
|
height 100%
|
||||||
padding 12px
|
background var(--desktopHeaderBg)
|
||||||
|
|
||||||
> button
|
> .post
|
||||||
display inline-block
|
width $width
|
||||||
margin 0
|
height $width
|
||||||
padding 0
|
padding 12px
|
||||||
height 100%
|
|
||||||
width 100%
|
|
||||||
font-size 1.2em
|
|
||||||
font-weight normal
|
|
||||||
text-decoration none
|
|
||||||
color var(--primaryForeground)
|
|
||||||
background var(--primary) !important
|
|
||||||
outline none
|
|
||||||
border none
|
|
||||||
border-radius 100%
|
|
||||||
transition background 0.1s ease
|
|
||||||
cursor pointer
|
|
||||||
|
|
||||||
*
|
> button
|
||||||
pointer-events none
|
display inline-block
|
||||||
|
margin 0
|
||||||
|
padding 0
|
||||||
|
height 100%
|
||||||
|
width 100%
|
||||||
|
font-size 1.2em
|
||||||
|
font-weight normal
|
||||||
|
text-decoration none
|
||||||
|
color var(--primaryForeground)
|
||||||
|
background var(--primary) !important
|
||||||
|
outline none
|
||||||
|
border none
|
||||||
|
border-radius 100%
|
||||||
|
transition background 0.1s ease
|
||||||
|
cursor pointer
|
||||||
|
|
||||||
|
*
|
||||||
|
pointer-events none
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background var(--primaryLighten10) !important
|
||||||
|
|
||||||
|
&:active
|
||||||
|
background var(--primaryDarken10) !important
|
||||||
|
transition background 0s ease
|
||||||
|
|
||||||
|
> .nav.bottom
|
||||||
|
position absolute
|
||||||
|
bottom 128px
|
||||||
|
left 0
|
||||||
|
|
||||||
|
> .account
|
||||||
|
position absolute
|
||||||
|
bottom 64px
|
||||||
|
left 0
|
||||||
|
width $width
|
||||||
|
height $width
|
||||||
|
padding 14px
|
||||||
|
|
||||||
|
> .menu
|
||||||
|
display none
|
||||||
|
position absolute
|
||||||
|
bottom 64px
|
||||||
|
left 0
|
||||||
|
background var(--desktopHeaderBg)
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background var(--primaryLighten10) !important
|
> .menu
|
||||||
|
display block
|
||||||
|
|
||||||
&:active
|
> *:not(.menu)
|
||||||
background var(--primaryDarken10) !important
|
display block
|
||||||
transition background 0s ease
|
width 100%
|
||||||
|
height 100%
|
||||||
|
|
||||||
|
> .avatar
|
||||||
|
pointer-events none
|
||||||
|
width 100%
|
||||||
|
height 100%
|
||||||
|
|
||||||
|
> .dark
|
||||||
|
position absolute
|
||||||
|
bottom 0
|
||||||
|
left 0
|
||||||
|
width $width
|
||||||
|
height $width
|
||||||
|
|
||||||
|
> .notifications
|
||||||
|
position fixed
|
||||||
|
top 0
|
||||||
|
width 350px
|
||||||
|
height 100%
|
||||||
|
overflow auto
|
||||||
|
background var(--face)
|
||||||
|
|
||||||
|
&.left
|
||||||
|
left $width
|
||||||
|
box-shadow var(--shadowRight)
|
||||||
|
|
||||||
|
&.right
|
||||||
|
right $width
|
||||||
|
box-shadow var(--shadowLeft)
|
||||||
|
|
||||||
.nav
|
.nav
|
||||||
> *
|
> *
|
||||||
&.active
|
|
||||||
box-shadow -4px 0 var(--primary) inset
|
|
||||||
|
|
||||||
> *
|
> *
|
||||||
display block
|
display block
|
||||||
width $width
|
width $width
|
||||||
|
|
@ -266,64 +334,35 @@ export default Vue.extend({
|
||||||
&:active
|
&:active
|
||||||
background rgba(0, 0, 0, 0.1)
|
background rgba(0, 0, 0, 0.1)
|
||||||
|
|
||||||
> .nav.bottom
|
&.left
|
||||||
position absolute
|
.nav
|
||||||
bottom 128px
|
> *
|
||||||
left 0
|
&.active
|
||||||
|
box-shadow -4px 0 var(--primary) inset
|
||||||
|
|
||||||
> .account
|
&.right
|
||||||
position absolute
|
.nav
|
||||||
bottom 64px
|
> *
|
||||||
left 0
|
&.active
|
||||||
width $width
|
box-shadow 4px 0 var(--primary) inset
|
||||||
height $width
|
|
||||||
padding 14px
|
|
||||||
|
|
||||||
> .menu
|
.slide-left-enter-active,
|
||||||
display none
|
.slide-left-leave-active {
|
||||||
position absolute
|
|
||||||
bottom 64px
|
|
||||||
left 0
|
|
||||||
background var(--desktopHeaderBg)
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
> .menu
|
|
||||||
display block
|
|
||||||
|
|
||||||
> *:not(.menu)
|
|
||||||
display block
|
|
||||||
width 100%
|
|
||||||
height 100%
|
|
||||||
|
|
||||||
> .avatar
|
|
||||||
pointer-events none
|
|
||||||
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;
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slide-enter, .slide-leave-to {
|
.slide-left-enter, .slide-left-leave-to {
|
||||||
transform: translateX(-16px);
|
transform: translateX(-16px);
|
||||||
opacity: 0;
|
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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -125,13 +125,16 @@ export default (callback: (launch: (router: VueRouter, api?: (os: MiOS) => API)
|
||||||
//#region shadow
|
//#region shadow
|
||||||
const shadow = '0 3px 8px rgba(0, 0, 0, 0.2)';
|
const shadow = '0 3px 8px rgba(0, 0, 0, 0.2)';
|
||||||
const shadowRight = '4px 0 4px rgba(0, 0, 0, 0.1)';
|
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('--shadow', shadow);
|
||||||
if (os.store.state.settings.useShadow) document.documentElement.style.setProperty('--shadowRight', shadowRight);
|
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 => {
|
os.store.watch(s => {
|
||||||
return s.settings.useShadow;
|
return s.settings.useShadow;
|
||||||
}, v => {
|
}, v => {
|
||||||
document.documentElement.style.setProperty('--shadow', v ? shadow : 'none');
|
document.documentElement.style.setProperty('--shadow', v ? shadow : 'none');
|
||||||
document.documentElement.style.setProperty('--shadowRight', v ? shadowRight : 'none');
|
document.documentElement.style.setProperty('--shadowRight', v ? shadowRight : 'none');
|
||||||
|
document.documentElement.style.setProperty('--shadowLeft', v ? shadowLeft : 'none');
|
||||||
});
|
});
|
||||||
//#endregion
|
//#endregion
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue