diff --git a/src/client/app/desktop/views/components/ui.sidebar.vue b/src/client/app/desktop/views/components/ui.sidebar.vue index 8e586eb25..a41108073 100644 --- a/src/client/app/desktop/views/components/ui.sidebar.vue +++ b/src/client/app/desktop/views/components/ui.sidebar.vue @@ -23,28 +23,43 @@
%fa:cloud%
-
- %fa:star% -
-
- %fa:envelope R%{{ $store.state.i.pendingReceivedFollowRequestsCount }} +
+ %fa:R bell%
%fa:cog%
-
- -
-
- %fa:power-off% -
+ +
+ + + + +
+ +
+
@@ -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; +} diff --git a/src/client/app/init.ts b/src/client/app/init.ts index ad9909374..d5faf4557 100644 --- a/src/client/app/init.ts +++ b/src/client/app/init.ts @@ -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