From 242538ddce37de41d924f12ab8a3637c264d231c Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Thu, 14 Jul 2022 17:42:12 +0900 Subject: [PATCH] refactor(client): rename menu(sidebar) -> navbar --- locales/ja-JP.yml | 1 + packages/client/src/components/launch-pad.vue | 4 ++-- packages/client/src/{menu.ts => navbar.ts} | 2 +- packages/client/src/pages/settings/index.vue | 16 +++++++++------- .../src/pages/settings/{menu.vue => navbar.vue} | 10 +++++----- .../src/pages/settings/statusbars.statusbar.vue | 1 - ...ebar-for-mobile.vue => navbar-for-mobile.vue} | 14 +++++++------- .../src/ui/_common_/{sidebar.vue => navbar.vue} | 12 ++++++------ packages/client/src/ui/classic.header.vue | 16 ++++++++-------- packages/client/src/ui/classic.sidebar.vue | 16 ++++++++-------- packages/client/src/ui/classic.vue | 1 - packages/client/src/ui/deck.vue | 10 +++++----- packages/client/src/ui/universal.vue | 10 +++++----- 13 files changed, 57 insertions(+), 56 deletions(-) rename packages/client/src/{menu.ts => navbar.ts} (98%) rename packages/client/src/pages/settings/{menu.vue => navbar.vue} (90%) rename packages/client/src/ui/_common_/{sidebar-for-mobile.vue => navbar-for-mobile.vue} (85%) rename packages/client/src/ui/_common_/{sidebar.vue => navbar.vue} (89%) diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 0e278bead..fd8aca868 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -887,6 +887,7 @@ beta: "ベータ" enableAutoSensitive: "自動NSFW判定" enableAutoSensitiveDescription: "利用可能な場合は、機械学習を利用して自動でメディアにNSFWフラグを設定します。この機能をオフにしても、インスタンスによっては自動で設定されることがあります。" activeEmailValidationDescription: "ユーザーのメールアドレスのバリデーションを、捨てアドかどうかや実際に通信可能かどうかなどを判定しより積極的に行います。オフにすると単に文字列として正しいかどうかのみチェックされます。" +navbar: "ナビゲーションバー" _sensitiveMediaDetection: description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てることができます。サーバーの負荷が少し増えます。" diff --git a/packages/client/src/components/launch-pad.vue b/packages/client/src/components/launch-pad.vue index a6025f8b2..4693df291 100644 --- a/packages/client/src/components/launch-pad.vue +++ b/packages/client/src/components/launch-pad.vue @@ -36,7 +36,7 @@ <script lang="ts" setup> import { } from 'vue'; import MkModal from '@/components/ui/modal.vue'; -import { menuDef } from '@/menu'; +import { navbarItemDef } from '@/navbar'; import { instanceName } from '@/config'; import { defaultStore } from '@/store'; import { i18n } from '@/i18n'; @@ -62,7 +62,7 @@ const modal = $ref<InstanceType<typeof MkModal>>(); const menu = defaultStore.state.menu; -const items = Object.keys(menuDef).filter(k => !menu.includes(k)).map(k => menuDef[k]).filter(def => def.show == null ? true : def.show).map(def => ({ +const items = Object.keys(navbarItemDef).filter(k => !menu.includes(k)).map(k => navbarItemDef[k]).filter(def => def.show == null ? true : def.show).map(def => ({ type: def.to ? 'link' : 'button', text: i18n.ts[def.title], icon: def.icon, diff --git a/packages/client/src/menu.ts b/packages/client/src/navbar.ts similarity index 98% rename from packages/client/src/menu.ts rename to packages/client/src/navbar.ts index 31b2ed597..03e00b1c1 100644 --- a/packages/client/src/menu.ts +++ b/packages/client/src/navbar.ts @@ -6,7 +6,7 @@ import { i18n } from '@/i18n'; import { ui } from '@/config'; import { unisonReload } from '@/scripts/unison-reload'; -export const menuDef = reactive({ +export const navbarItemDef = reactive({ notifications: { title: 'notifications', icon: 'fas fa-bell', diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue index 76410ec12..f970660a4 100644 --- a/packages/client/src/pages/settings/index.vue +++ b/packages/client/src/pages/settings/index.vue @@ -114,15 +114,15 @@ const menuDef = computed(() => [{ to: '/settings/theme', active: props.initialPage === 'theme', }, { - icon: 'fas fa-list-ul', + icon: 'fas fa-bars', + text: i18n.ts.navbar, + to: '/settings/navbar', + active: props.initialPage === 'navbar', + }, { + icon: 'fas fa-bars-progress', text: i18n.ts.statusbar, to: '/settings/statusbars', active: props.initialPage === 'statusbars', - }, { - icon: 'fas fa-list-ul', - text: i18n.ts.menu, - to: '/settings/menu', - active: props.initialPage === 'menu', }, { icon: 'fas fa-music', text: i18n.ts.sounds, @@ -225,7 +225,7 @@ const component = computed(() => { case 'theme': return defineAsyncComponent(() => import('./theme.vue')); case 'theme/install': return defineAsyncComponent(() => import('./theme.install.vue')); case 'theme/manage': return defineAsyncComponent(() => import('./theme.manage.vue')); - case 'menu': return defineAsyncComponent(() => import('./menu.vue')); + case 'navbar': return defineAsyncComponent(() => import('./navbar.vue')); case 'statusbars': return defineAsyncComponent(() => import('./statusbars.vue')); case 'sounds': return defineAsyncComponent(() => import('./sounds.vue')); case 'custom-css': return defineAsyncComponent(() => import('./custom-css.vue')); @@ -291,6 +291,8 @@ const headerActions = $computed(() => []); const headerTabs = $computed(() => []); definePageMetadata(INFO); +// w 890 +// h 700 </script> <style lang="scss" scoped> diff --git a/packages/client/src/pages/settings/menu.vue b/packages/client/src/pages/settings/navbar.vue similarity index 90% rename from packages/client/src/pages/settings/menu.vue rename to packages/client/src/pages/settings/navbar.vue index 076654c10..534112c3e 100644 --- a/packages/client/src/pages/settings/menu.vue +++ b/packages/client/src/pages/settings/navbar.vue @@ -1,7 +1,7 @@ <template> <div class="_formRoot"> <FormTextarea v-model="items" tall manual-save class="_formBlock"> - <template #label>{{ i18n.ts.menu }}</template> + <template #label>{{ i18n.ts.navbar }}</template> <template #caption><button class="_textButton" @click="addItem">{{ i18n.ts.addItem }}</button></template> </FormTextarea> @@ -23,7 +23,7 @@ import FormTextarea from '@/components/form/textarea.vue'; import FormRadios from '@/components/form/radios.vue'; import FormButton from '@/components/ui/button.vue'; import * as os from '@/os'; -import { menuDef } from '@/menu'; +import { navbarItemDef } from '@/navbar'; import { defaultStore } from '@/store'; import { unisonReload } from '@/scripts/unison-reload'; import { i18n } from '@/i18n'; @@ -45,11 +45,11 @@ async function reloadAsk() { } async function addItem() { - const menu = Object.keys(menuDef).filter(k => !defaultStore.state.menu.includes(k)); + const menu = Object.keys(navbarItemDef).filter(k => !defaultStore.state.menu.includes(k)); const { canceled, result: item } = await os.select({ title: i18n.ts.addItem, items: [...menu.map(k => ({ - value: k, text: i18n.ts[menuDef[k].title], + value: k, text: i18n.ts[navbarItemDef[k].title], })), { value: '-', text: i18n.ts.divider, }], @@ -81,7 +81,7 @@ const headerActions = $computed(() => []); const headerTabs = $computed(() => []); definePageMetadata({ - title: i18n.ts.menu, + title: i18n.ts.navbar, icon: 'fas fa-list-ul', }); </script> diff --git a/packages/client/src/pages/settings/statusbars.statusbar.vue b/packages/client/src/pages/settings/statusbars.statusbar.vue index 206979925..e19690209 100644 --- a/packages/client/src/pages/settings/statusbars.statusbar.vue +++ b/packages/client/src/pages/settings/statusbars.statusbar.vue @@ -86,7 +86,6 @@ import FormRadios from '@/components/form/radios.vue'; import FormButton from '@/components/ui/button.vue'; import FormRange from '@/components/form/range.vue'; import * as os from '@/os'; -import { menuDef } from '@/menu'; import { defaultStore } from '@/store'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/ui/_common_/sidebar-for-mobile.vue b/packages/client/src/ui/_common_/navbar-for-mobile.vue similarity index 85% rename from packages/client/src/ui/_common_/sidebar-for-mobile.vue rename to packages/client/src/ui/_common_/navbar-for-mobile.vue index e789ae5e0..8ac4c1150 100644 --- a/packages/client/src/ui/_common_/sidebar-for-mobile.vue +++ b/packages/client/src/ui/_common_/navbar-for-mobile.vue @@ -9,9 +9,9 @@ </MkA> <template v-for="item in menu"> <div v-if="item === '-'" class="divider"></div> - <component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}"> - <i class="icon fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span> - <span v-if="menuDef[item].indicated" class="indicator"><i class="icon fas fa-circle"></i></span> + <component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: navbarItemDef[item].active }]" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"> + <i class="icon fa-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ $ts[navbarItemDef[item].title] }}</span> + <span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon fas fa-circle"></i></span> </component> </template> <div class="divider"></div> @@ -37,7 +37,7 @@ import { computed, defineAsyncComponent, defineComponent, ref, toRef, watch } fr import { host } from '@/config'; import { search } from '@/scripts/search'; import * as os from '@/os'; -import { menuDef } from '@/menu'; +import { navbarItemDef } from '@/navbar'; import { openAccountMenu } from '@/account'; import { defaultStore } from '@/store'; @@ -45,9 +45,9 @@ export default defineComponent({ setup(props, context) { const menu = toRef(defaultStore.state, 'menu'); const otherMenuItemIndicated = computed(() => { - for (const def in menuDef) { + for (const def in navbarItemDef) { if (menu.value.includes(def)) continue; - if (menuDef[def].indicated) return true; + if (navbarItemDef[def].indicated) return true; } return false; }); @@ -57,7 +57,7 @@ export default defineComponent({ accounts: [], connection: null, menu, - menuDef: menuDef, + navbarItemDef: navbarItemDef, otherMenuItemIndicated, post: os.post, search, diff --git a/packages/client/src/ui/_common_/sidebar.vue b/packages/client/src/ui/_common_/navbar.vue similarity index 89% rename from packages/client/src/ui/_common_/sidebar.vue rename to packages/client/src/ui/_common_/navbar.vue index f082af9aa..4fb398014 100644 --- a/packages/client/src/ui/_common_/sidebar.vue +++ b/packages/client/src/ui/_common_/navbar.vue @@ -9,9 +9,9 @@ </MkA> <template v-for="item in menu"> <div v-if="item === '-'" class="divider"></div> - <component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}"> - <i class="icon fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span> - <span v-if="menuDef[item].indicated" class="indicator"><i class="icon fas fa-circle"></i></span> + <component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: navbarItemDef[item].active }]" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"> + <i class="icon fa-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ $ts[navbarItemDef[item].title] }}</span> + <span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon fas fa-circle"></i></span> </component> </template> <div class="divider"></div> @@ -35,7 +35,7 @@ <script lang="ts" setup> import { computed, defineAsyncComponent, ref, watch } from 'vue'; import * as os from '@/os'; -import { menuDef } from '@/menu'; +import { navbarItemDef } from '@/navbar'; import { $i, openAccountMenu as openAccountMenu_ } from '@/account'; import { defaultStore } from '@/store'; @@ -43,9 +43,9 @@ const iconOnly = ref(false); const menu = computed(() => defaultStore.state.menu); const otherMenuItemIndicated = computed(() => { - for (const def in menuDef) { + for (const def in navbarItemDef) { if (menu.value.includes(def)) continue; - if (menuDef[def].indicated) return true; + if (navbarItemDef[def].indicated) return true; } return false; }); diff --git a/packages/client/src/ui/classic.header.vue b/packages/client/src/ui/classic.header.vue index 57008aeae..131767c0e 100644 --- a/packages/client/src/ui/classic.header.vue +++ b/packages/client/src/ui/classic.header.vue @@ -7,9 +7,9 @@ </MkA> <template v-for="item in menu"> <div v-if="item === '-'" class="divider"></div> - <component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-click-anime v-tooltip="$ts[menuDef[item].title]" class="item _button" :class="item" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}"> - <i class="fa-fw" :class="menuDef[item].icon"></i> - <span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span> + <component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime v-tooltip="$ts[navbarItemDef[item].title]" class="item _button" :class="item" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"> + <i class="fa-fw" :class="navbarItemDef[item].icon"></i> + <span v-if="navbarItemDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span> </component> </template> <div class="divider"></div> @@ -43,7 +43,7 @@ import { defineAsyncComponent, defineComponent } from 'vue'; import { host } from '@/config'; import { search } from '@/scripts/search'; import * as os from '@/os'; -import { menuDef } from '@/menu'; +import { navbarItemDef } from '@/navbar'; import { openAccountMenu } from '@/account'; import MkButton from '@/components/ui/button.vue'; @@ -57,7 +57,7 @@ export default defineComponent({ host: host, accounts: [], connection: null, - menuDef: menuDef, + navbarItemDef: navbarItemDef, settingsWindowed: false, }; }, @@ -68,9 +68,9 @@ export default defineComponent({ }, otherNavItemIndicated(): boolean { - for (const def in this.menuDef) { + for (const def in this.navbarItemDef) { if (this.menu.includes(def)) continue; - if (this.menuDef[def].indicated) return true; + if (this.navbarItemDef[def].indicated) return true; } return false; }, @@ -113,7 +113,7 @@ export default defineComponent({ withExtraOperation: true, }, ev); }, - } + }, }); </script> diff --git a/packages/client/src/ui/classic.sidebar.vue b/packages/client/src/ui/classic.sidebar.vue index 6c0ce023e..172401f42 100644 --- a/packages/client/src/ui/classic.sidebar.vue +++ b/packages/client/src/ui/classic.sidebar.vue @@ -14,9 +14,9 @@ </MkA> <template v-for="item in menu"> <div v-if="item === '-'" class="divider"></div> - <component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-click-anime class="item _button" :class="item" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}"> - <i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span> - <span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span> + <component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="item" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"> + <i class="fa-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ $ts[navbarItemDef[item].title] }}</span> + <span v-if="navbarItemDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span> </component> </template> <div class="divider"></div> @@ -45,7 +45,7 @@ import { defineAsyncComponent, defineComponent } from 'vue'; import { host } from '@/config'; import { search } from '@/scripts/search'; import * as os from '@/os'; -import { menuDef } from '@/menu'; +import { navbarItemDef } from '@/navbar'; import { openAccountMenu } from '@/account'; import MkButton from '@/components/ui/button.vue'; import { StickySidebar } from '@/scripts/sticky-sidebar'; @@ -62,7 +62,7 @@ export default defineComponent({ host: host, accounts: [], connection: null, - menuDef: menuDef, + navbarItemDef: navbarItemDef, iconOnly: false, settingsWindowed: false, }; @@ -74,9 +74,9 @@ export default defineComponent({ }, otherNavItemIndicated(): boolean { - for (const def in this.menuDef) { + for (const def in this.navbarItemDef) { if (this.menu.includes(def)) continue; - if (this.menuDef[def].indicated) return true; + if (this.navbarItemDef[def].indicated) return true; } return false; }, @@ -131,7 +131,7 @@ export default defineComponent({ withExtraOperation: true, }, ev); }, - } + }, }); </script> diff --git a/packages/client/src/ui/classic.vue b/packages/client/src/ui/classic.vue index 70db7ed12..c42407f5b 100644 --- a/packages/client/src/ui/classic.vue +++ b/packages/client/src/ui/classic.vue @@ -47,7 +47,6 @@ import XCommon from './_common_/common.vue'; import { instanceName } from '@/config'; import { StickySidebar } from '@/scripts/sticky-sidebar'; import * as os from '@/os'; -import { menuDef } from '@/menu'; import { mainRouter } from '@/router'; import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata'; import { defaultStore } from '@/store'; diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue index 19a99a95a..f330c9981 100644 --- a/packages/client/src/ui/deck.vue +++ b/packages/client/src/ui/deck.vue @@ -69,12 +69,12 @@ import { v4 as uuid } from 'uuid'; import XCommon from './_common_/common.vue'; import { deckStore, addColumn as addColumnToStore, loadDeck } from './deck/deck-store'; import DeckColumnCore from '@/ui/deck/column-core.vue'; -import XSidebar from '@/ui/_common_/sidebar.vue'; -import XDrawerMenu from '@/ui/_common_/sidebar-for-mobile.vue'; +import XSidebar from '@/ui/_common_/navbar.vue'; +import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue'; import MkButton from '@/components/ui/button.vue'; import { getScrollContainer } from '@/scripts/scroll'; import * as os from '@/os'; -import { menuDef } from '@/menu'; +import { navbarItemDef } from '@/navbar'; import { $i } from '@/account'; import { i18n } from '@/i18n'; import { mainRouter } from '@/router'; @@ -105,8 +105,8 @@ const columns = deckStore.reactiveState.columns; const layout = deckStore.reactiveState.layout; const menuIndicated = computed(() => { if ($i == null) return false; - for (const def in menuDef) { - if (menuDef[def].indicated) return true; + for (const def in navbarItemDef) { + if (navbarItemDef[def].indicated) return true; } return false; }); diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue index 2edfb3f12..fe4fc425c 100644 --- a/packages/client/src/ui/universal.vue +++ b/packages/client/src/ui/universal.vue @@ -61,17 +61,17 @@ import { defineAsyncComponent, provide, onMounted, computed, ref, watch, Compute import XCommon from './_common_/common.vue'; import { instanceName } from '@/config'; import { StickySidebar } from '@/scripts/sticky-sidebar'; -import XDrawerMenu from '@/ui/_common_/sidebar-for-mobile.vue'; +import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue'; import * as os from '@/os'; import { defaultStore } from '@/store'; -import { menuDef } from '@/menu'; +import { navbarItemDef } from '@/navbar'; import { i18n } from '@/i18n'; import { $i } from '@/account'; import { Router } from '@/nirax'; import { mainRouter } from '@/router'; import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata'; const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue')); -const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/sidebar.vue')); +const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue')); const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue')); const DESKTOP_THRESHOLD = 1100; @@ -97,9 +97,9 @@ provideMetadataReceiver((info) => { }); const menuIndicated = computed(() => { - for (const def in menuDef) { + for (const def in navbarItemDef) { if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから - if (menuDef[def].indicated) return true; + if (navbarItemDef[def].indicated) return true; } return false; });