From d7085b17fec7c55339efacb9e072f2228e1fc97a Mon Sep 17 00:00:00 2001 From: syuilo Date: Tue, 3 Nov 2020 17:00:47 +0900 Subject: [PATCH] wip: Desktop UI --- src/client/components/ui/a.vue | 7 ++-- src/client/config.ts | 2 +- src/client/init.ts | 7 ++-- src/client/sidebar.ts | 29 +++++++++++---- src/client/store.ts | 2 +- src/client/ui/desktop.vue | 66 ++++++++++++++++++++++++++++++++++ 6 files changed, 100 insertions(+), 13 deletions(-) create mode 100644 src/client/ui/desktop.vue diff --git a/src/client/components/ui/a.vue b/src/client/components/ui/a.vue index 516cf02bd..384ee0259 100644 --- a/src/client/components/ui/a.vue +++ b/src/client/components/ui/a.vue @@ -10,7 +10,7 @@ import { faExpandAlt, faColumns, faExternalLinkAlt, faLink, faWindowMaximize } f import * as os from '@/os'; import copyToClipboard from '@/scripts/copy-to-clipboard'; import { router } from '@/router'; -import { deckmode, url } from '@/config'; +import { ui, url } from '@/config'; import { popout } from '@/scripts/popout'; export default defineComponent({ @@ -114,7 +114,10 @@ export default defineComponent({ if (this.$store.state.device.defaultSideView && this.sideViewHook && this.to !== '/') { return this.sideViewHook(this.to); } - if (this.$store.state.device.deckNavWindow && deckmode && this.to !== '/') { + if (this.$store.state.device.deckNavWindow && (ui === 'deck') && this.to !== '/') { + return this.window(); + } + if (ui === 'desktop') { return this.window(); } diff --git a/src/client/config.ts b/src/client/config.ts index 9c5e0f765..d0b74be04 100644 --- a/src/client/config.ts +++ b/src/client/config.ts @@ -13,5 +13,5 @@ export const langs = _LANGS_; export const getLocale = async () => Object.fromEntries((await entries(clientDb.i18n)) as [string, string][]); export const version = _VERSION_; export const instanceName = siteName === 'Misskey' ? host : siteName; -export const deckmode = localStorage.getItem('deckmode') === 'true'; +export const ui = localStorage.getItem('ui'); export const debug = localStorage.getItem('debug') === 'true'; diff --git a/src/client/init.ts b/src/client/init.ts index f93252e79..cc97947c0 100644 --- a/src/client/init.ts +++ b/src/client/init.ts @@ -4,13 +4,13 @@ import '@/style.scss'; -import { createApp, defineAsyncComponent } from 'vue'; +import { createApp } from 'vue'; import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; import widgets from './widgets'; import directives from './directives'; import components from '@/components'; -import { version, apiUrl, deckmode } from '@/config'; +import { version, apiUrl, ui } from '@/config'; import { store } from './store'; import { router } from './router'; import { applyTheme } from '@/scripts/theme'; @@ -154,7 +154,8 @@ stream.init(store.state.i); const app = createApp(await ( window.location.search === '?zen' ? import('@/ui/zen.vue') : !store.getters.isSignedIn ? import('@/ui/visitor.vue') : - deckmode ? import('@/ui/deck.vue') : + ui === 'deck' ? import('@/ui/deck.vue') : + ui === 'desktop' ? import('@/ui/desktop.vue') : import('@/ui/default.vue') ).then(x => x.default)); diff --git a/src/client/sidebar.ts b/src/client/sidebar.ts index 4b7acb0a6..1132431e1 100644 --- a/src/client/sidebar.ts +++ b/src/client/sidebar.ts @@ -2,8 +2,8 @@ import { faBell, faComments, faEnvelope } from '@fortawesome/free-regular-svg-ic import { faAt, faBroadcastTower, faCloud, faColumns, faDoorClosed, faFileAlt, faFireAlt, faGamepad, faHashtag, faListUl, faSatellite, faSatelliteDish, faSearch, faStar, faTerminal, faUserClock, faUsers } from '@fortawesome/free-solid-svg-icons'; import { computed } from 'vue'; import { store } from '@/store'; -import { deckmode } from '@/config'; import { search } from '@/scripts/search'; +import * as os from '@/os'; export const sidebarDef = { notifications: { @@ -119,12 +119,29 @@ export const sidebarDef = { show: computed(() => store.getters.isSignedIn), to: computed(() => `/@${store.state.i.username}/room`), }, - deck: { - title: deckmode ? 'undeck' : 'deck', + ui: { + title: 'switchUi', icon: faColumns, - action: () => { - localStorage.setItem('deckmode', (!deckmode).toString()); - location.reload(); + action: (ev) => { + os.modalMenu([{ + text: 'Default', + action: () => { + localStorage.setItem('ui', 'default'); + location.reload(); + } + }, { + text: 'Deck', + action: () => { + localStorage.setItem('ui', 'deck'); + location.reload(); + } + }, { + text: 'Desktop', + action: () => { + localStorage.setItem('ui', 'desktop'); + location.reload(); + } + }], ev.currentTarget || ev.target); }, }, }; diff --git a/src/client/store.ts b/src/client/store.ts index 5c6c71d4f..8b78824f7 100644 --- a/src/client/store.ts +++ b/src/client/store.ts @@ -36,7 +36,7 @@ export const defaultDeviceUserSettings = { 'announcements', 'search', '-', - 'deck', + 'ui', ], deck: { columns: [], diff --git a/src/client/ui/desktop.vue b/src/client/ui/desktop.vue new file mode 100644 index 000000000..0d266ae01 --- /dev/null +++ b/src/client/ui/desktop.vue @@ -0,0 +1,66 @@ + + + + + + +