From cf026e4c72eda0708aef0109901098a7bf10ffa4 Mon Sep 17 00:00:00 2001 From: anatawa12 Date: Tue, 31 Oct 2023 17:28:13 +0900 Subject: [PATCH] feat: add tools to navbar (#12204) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: add tools to navbar * docs(changelog): ナビゲーションバーにツールを追加しました --- CHANGELOG.md | 1 + packages/frontend/src/navbar.ts | 9 ++- packages/frontend/src/ui/_common_/common.ts | 63 ++++++++++++--------- 3 files changed, 46 insertions(+), 27 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 51b96831fc..999f2e43db 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,6 +28,7 @@ - Feat: プラグイン・テーマを外部サイトから直接インストールできるようになりました - 外部サイトでの実装が必要です。詳細は Misskey Hub をご覧ください https://misskey-hub.net/docs/advanced/publish-on-your-website.html +- Feat: ナビゲーションバーにツールを追加しました - Enhance: スワイプしてタイムラインを再読込できるように - PCの場合は右上のボタンからでも再読込できます - Enhance: タイムラインの自動更新を無効にできるように diff --git a/packages/frontend/src/navbar.ts b/packages/frontend/src/navbar.ts index 7f182a98f7..e72a4dc316 100644 --- a/packages/frontend/src/navbar.ts +++ b/packages/frontend/src/navbar.ts @@ -6,7 +6,7 @@ import { computed, reactive } from 'vue'; import { $i } from '@/account.js'; import { miLocalStorage } from '@/local-storage.js'; -import { openInstanceMenu } from '@/ui/_common_/common.js'; +import { openInstanceMenu, openToolsMenu } from '@/ui/_common_/common.js'; import { lookup } from '@/scripts/lookup.js'; import * as os from '@/os.js'; import { i18n } from '@/i18n.js'; @@ -142,6 +142,13 @@ export const navbarItemDef = reactive({ openInstanceMenu(ev); }, }, + tools: { + title: i18n.ts.tools, + icon: 'ti ti-tool', + action: (ev) => { + openToolsMenu(ev); + }, + }, reload: { title: i18n.ts.reload, icon: 'ti ti-refresh', diff --git a/packages/frontend/src/ui/_common_/common.ts b/packages/frontend/src/ui/_common_/common.ts index 125d340fe7..ff6157f5f8 100644 --- a/packages/frontend/src/ui/_common_/common.ts +++ b/packages/frontend/src/ui/_common_/common.ts @@ -3,12 +3,42 @@ * SPDX-License-Identifier: AGPL-3.0-only */ +import type { MenuItem } from '@/types/menu.js'; import * as os from '@/os.js'; import { instance } from '@/instance.js'; import { host } from '@/config.js'; import { i18n } from '@/i18n.js'; import { $i } from '@/account.js'; +function toolsMenuItems(): MenuItem[] { + return [{ + type: 'link', + to: '/scratchpad', + text: i18n.ts.scratchpad, + icon: 'ti ti-terminal-2', + }, { + type: 'link', + to: '/api-console', + text: 'API Console', + icon: 'ti ti-terminal-2', + }, { + type: 'link', + to: '/clicker', + text: '🍪👈', + icon: 'ti ti-cookie', + }, ($i && ($i.isAdmin || $i.policies.canManageCustomEmojis)) ? { + type: 'link', + to: '/custom-emojis-manager', + text: i18n.ts.manageCustomEmojis, + icon: 'ti ti-icons', + } : undefined, ($i && ($i.isAdmin || $i.policies.canManageAvatarDecorations)) ? { + type: 'link', + to: '/avatar-decorations', + text: i18n.ts.manageAvatarDecorations, + icon: 'ti ti-sparkles', + } : undefined]; +} + export function openInstanceMenu(ev: MouseEvent) { os.popupMenu([{ text: instance.name ?? host, @@ -47,32 +77,7 @@ export function openInstanceMenu(ev: MouseEvent) { type: 'parent', text: i18n.ts.tools, icon: 'ti ti-tool', - children: [{ - type: 'link', - to: '/scratchpad', - text: i18n.ts.scratchpad, - icon: 'ti ti-terminal-2', - }, { - type: 'link', - to: '/api-console', - text: 'API Console', - icon: 'ti ti-terminal-2', - }, { - type: 'link', - to: '/clicker', - text: '🍪👈', - icon: 'ti ti-cookie', - }, ($i && ($i.isAdmin || $i.policies.canManageCustomEmojis)) ? { - type: 'link', - to: '/custom-emojis-manager', - text: i18n.ts.manageCustomEmojis, - icon: 'ti ti-icons', - } : undefined, ($i && ($i.isAdmin || $i.policies.canManageAvatarDecorations)) ? { - type: 'link', - to: '/avatar-decorations', - text: i18n.ts.manageAvatarDecorations, - icon: 'ti ti-sparkles', - } : undefined], + children: toolsMenuItems(), }, null, (instance.impressumUrl) ? { text: i18n.ts.impressum, icon: 'ti ti-file-invoice', @@ -105,3 +110,9 @@ export function openInstanceMenu(ev: MouseEvent) { align: 'left', }); } + +export function openToolsMenu(ev: MouseEvent) { + os.popupMenu(toolsMenuItems(), ev.currentTarget ?? ev.target, { + align: 'left', + }); +}