mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-10-31 23:31:48 +09:00
Code

🎨

Browse Source
This commit is contained in:
syuilo 2018-10-15 05:18:39 +09:00
parent 676f026085
commit 63f7941073
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
2 changed files with 129 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

163
src/client/app/desktop/views/components/ui.sidebar.vue
View File

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

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

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