diff --git a/package.json b/package.json index 7f5d569d9..914ca8938 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "calckey", - "version": "13.2.0-dev19", + "version": "13.2.0-dev20", "codename": "aqua", "repository": { "type": "git", diff --git a/packages/client/src/navbar.ts b/packages/client/src/navbar.ts index 256d9bd85..3f1ae2824 100644 --- a/packages/client/src/navbar.ts +++ b/packages/client/src/navbar.ts @@ -148,73 +148,4 @@ export const navbarItemDef = reactive({ location.reload(); }, }, - help: { - title: "help", - icon: "ph-question ph-bold ph-lg", - action: (ev) => { - os.popupMenu( - [ - { - text: instance.name ?? host, - type: "label", - }, - { - type: "link", - text: i18n.ts.instanceInfo, - icon: "ph-info ph-bold ph-lg", - to: "/about", - }, - { - type: "link", - text: i18n.ts.aboutMisskey, - icon: "ph-lightbulb ph-bold ph-lg", - to: "/about-calckey", - }, - { - type: "link", - text: i18n.ts._apps.apps, - icon: "ph-device-mobile ph-bold ph-lg", - to: "/apps", - }, - { - type: "button", - action: async () => { - defaultStore.set("tutorial", 0); - os.popup(XTutorial, {}, {}, "closed"); - }, - text: i18n.ts.replayTutorial, - icon: "ph-circle-wavy-question ph-bold ph-lg", - }, - null, - { - type: "parent", - text: i18n.ts.developer, - icon: "ph-code ph-bold ph-lg", - children: [ - { - type: "link", - to: "/api-console", - text: "API Console", - icon: "ph-terminal-window ph-bold ph-lg", - }, - { - text: i18n.ts.document, - icon: "ph-file-doc ph-bold ph-lg", - action: () => { - window.open("/api-doc", "_blank"); - }, - }, - { - type: "link", - to: "/scratchpad", - text: "AiScript Scratchpad", - icon: "ph-scribble-loop ph-bold ph-lg", - }, - ], - }, - ], - ev.currentTarget ?? ev.target, - ); - }, - }, }); diff --git a/packages/client/src/scripts/helpMenu.ts b/packages/client/src/scripts/helpMenu.ts new file mode 100644 index 000000000..56d3658e2 --- /dev/null +++ b/packages/client/src/scripts/helpMenu.ts @@ -0,0 +1,72 @@ +import { defaultStore } from "@/store"; +import { instance } from "@/instance"; +import { host } from "@/config"; +import * as os from "@/os"; +import XTutorial from "../components/MkTutorialDialog.vue"; +import { i18n } from "@/i18n"; + +export function openHelpMenu_(ev: MouseEvent) { + os.popupMenu( + [ + { + text: instance.name ?? host, + type: "label", + }, + { + type: "link", + text: i18n.ts.instanceInfo, + icon: "ph-info ph-bold ph-lg", + to: "/about", + }, + { + type: "link", + text: i18n.ts.aboutMisskey, + icon: "ph-lightbulb ph-bold ph-lg", + to: "/about-calckey", + }, + { + type: "link", + text: i18n.ts._apps.apps, + icon: "ph-device-mobile ph-bold ph-lg", + to: "/apps", + }, + { + type: "button", + action: async () => { + defaultStore.set("tutorial", 0); + os.popup(XTutorial, {}, {}, "closed"); + }, + text: i18n.ts.replayTutorial, + icon: "ph-circle-wavy-question ph-bold ph-lg", + }, + null, + { + type: "parent", + text: i18n.ts.developer, + icon: "ph-code ph-bold ph-lg", + children: [ + { + type: "link", + to: "/api-console", + text: "API Console", + icon: "ph-terminal-window ph-bold ph-lg", + }, + { + text: i18n.ts.document, + icon: "ph-file-doc ph-bold ph-lg", + action: () => { + window.open("/api-doc", "_blank"); + }, + }, + { + type: "link", + to: "/scratchpad", + text: "AiScript Scratchpad", + icon: "ph-scribble-loop ph-bold ph-lg", + }, + ], + }, + ], + ev.currentTarget ?? ev.target + ); +} diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts index b918d7ac7..d2350e2ed 100644 --- a/packages/client/src/store.ts +++ b/packages/client/src/store.ts @@ -91,6 +91,7 @@ export const defaultStore = markRaw( "favorites", "channels", "search", + "ui", ], }, visibility: { diff --git a/packages/client/src/ui/_common_/navbar-for-mobile.vue b/packages/client/src/ui/_common_/navbar-for-mobile.vue index c41e5276b..8ca760aa3 100644 --- a/packages/client/src/ui/_common_/navbar-for-mobile.vue +++ b/packages/client/src/ui/_common_/navbar-for-mobile.vue @@ -34,6 +34,9 @@ + @@ -44,6 +47,7 @@ import { computed, defineAsyncComponent, defineComponent, ref, toRef, watch } fr import * as os from '@/os'; import { navbarItemDef } from '@/navbar'; import { openAccountMenu as openAccountMenu_ } from '@/account'; +import { openHelpMenu_ } from '@/scripts/helpMenu' import { defaultStore } from '@/store'; import { i18n } from '@/i18n'; @@ -62,6 +66,10 @@ function openAccountMenu(ev: MouseEvent) { }, ev); } +function openHelpMenu(ev: MouseEvent) { + openHelpMenu_(ev); +} + function more() { os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {}, { }, 'closed'); @@ -160,6 +168,19 @@ function more() { } } + > .help { + position: relative; + display: block; + text-align: center; + width: 100%; + + > .icon { + display: inline-block; + width: 38px; + aspect-ratio: 1; + } + } + > .instance { position: relative; display: flex; diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue index 56817a0bf..4fea2b660 100644 --- a/packages/client/src/ui/_common_/navbar.vue +++ b/packages/client/src/ui/_common_/navbar.vue @@ -9,7 +9,7 @@
- {{ i18n.ts.timeline }} + {{ i18n.ts.timeline }}
- {{ i18n.ts.controlPanel }} + {{ i18n.ts.controlPanel }} - {{ i18n.ts.settings }} + {{ i18n.ts.settings }}
+ - @@ -65,6 +63,7 @@ import { computed, defineAsyncComponent, ref, watch } from 'vue'; import * as os from '@/os'; import { navbarItemDef } from '@/navbar'; import { $i, openAccountMenu as openAccountMenu_ } from '@/account'; +import { openHelpMenu_ } from '@/scripts/helpMenu' import { defaultStore } from '@/store'; import { i18n } from '@/i18n'; import { instance } from '@/instance'; @@ -126,6 +125,10 @@ function openAccountMenu(ev: MouseEvent) { }, ev); } +function openHelpMenu(ev: MouseEvent) { + openHelpMenu_(ev); +} + function more(ev: MouseEvent) { os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), { src: ev.currentTarget ?? ev.target, @@ -265,7 +268,7 @@ function more(ev: MouseEvent) { } } - > .account { + > .help { position: relative; display: block; text-align: center;