FoundKeyGang/FoundKey
FoundKeyGang/FoundKey
7
19
Fork 22
Code Issues 37 Pull requests 4 Releases Activity

🎨

Browse source
This commit is contained in:
syuilo 2018-10-15 05:28:35 +09:00
parent 63f7941073
commit 2582b8d132
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
2 changed files with 173 additions and 131 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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>

3
src/client/app/init.ts
View file

@ -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