graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-12-23 18:43:08 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(client): rename menu(sidebar) -> navbar

Browse source
This commit is contained in:
syuilo 2022-07-14 17:42:12 +09:00
parent 64be9baed0
commit 242538ddce
13 changed files with 57 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
locales/ja-JP.yml
View file

@ -887,6 +887,7 @@ beta: "ベータ"
enableAutoSensitive: "自動NSFW判定"
enableAutoSensitiveDescription: "利用可能な場合は、機械学習を利用して自動でメディアにNSFWフラグを設定します。この機能をオフにしても、インスタンスによっては自動で設定されることがあります。"
activeEmailValidationDescription: "ユーザーのメールアドレスのバリデーションを、捨てアドかどうかや実際に通信可能かどうかなどを判定しより積極的に行います。オフにすると単に文字列として正しいかどうかのみチェックされます。"
navbar: "ナビゲーションバー"
_sensitiveMediaDetection:
description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てることができます。サーバーの負荷が少し増えます。"

4
packages/client/src/components/launch-pad.vue
View file

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

2
packages/client/src/menu.ts → packages/client/src/navbar.ts
View file

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

16
packages/client/src/pages/settings/index.vue
View file

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

10
packages/client/src/pages/settings/menu.vue → packages/client/src/pages/settings/navbar.vue
View file

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

1
packages/client/src/pages/settings/statusbars.statusbar.vue
View file

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

14
packages/client/src/ui/_common_/sidebar-for-mobile.vue → packages/client/src/ui/_common_/navbar-for-mobile.vue
View file

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

12
packages/client/src/ui/_common_/sidebar.vue → packages/client/src/ui/_common_/navbar.vue
View file

@ -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;
});

16
packages/client/src/ui/classic.header.vue
View file

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

16
packages/client/src/ui/classic.sidebar.vue
View file

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

1
packages/client/src/ui/classic.vue
View file

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

10
packages/client/src/ui/deck.vue
View file

@ -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;
});

10
packages/client/src/ui/universal.vue
View file

@ -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;
});