From 0df6c7917217adb49697049e074934d798139509 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=8A=E3=81=95=E3=82=80=E3=81=AE=E3=81=B2=E3=81=A8?= <46447427+samunohito@users.noreply.github.com> Date: Mon, 18 Nov 2024 10:36:51 +0900 Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=E3=83=87=E3=83=83?= =?UTF-8?q?=E3=82=AD=E8=A1=A8=E7=A4=BA=E6=99=82=E3=81=AB=E3=82=B5=E3=82=A4?= =?UTF-8?q?=E3=83=89=E3=83=90=E3=83=BC=E3=82=92=E5=B1=95=E9=96=8B=E3=83=BB?= =?UTF-8?q?=E6=8A=98=E3=82=8A=E3=81=9F=E3=81=9F=E3=81=BF=E3=81=A7=E3=81=8D?= =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=20(#14983)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * enhance(frontend): デッキ表示時にサイドバーを展開・折りたたみできるように * wip * wip * Update navbar.vue * ✌️ * Update CHANGELOG.md * 🎨 --------- Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com> --- CHANGELOG.md | 1 + .../frontend/src/pages/settings/navbar.vue | 4 -- packages/frontend/src/ui/_common_/navbar.vue | 67 ++++++++++++++++++- 3 files changed, 65 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index aabd9f000ccf..53cb13d27300 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -27,6 +27,7 @@ - Enhance: ノート詳細画面にロールのバッジを表示 - Enhance: 過去に送信したフォローリクエストを確認できるように (Based on https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/663) +- Enhance: サイドバーを簡単に展開・折りたたみできるように ( #14981 ) - Fix: 通知の範囲指定の設定項目が必要ない通知設定でも範囲指定の設定がでている問題を修正 - Fix: Turnstileが失敗・期限切れした際にも成功扱いとなってしまう問題を修正 (Cherry-picked from https://github.com/MisskeyIO/misskey/pull/768) diff --git a/packages/frontend/src/pages/settings/navbar.vue b/packages/frontend/src/pages/settings/navbar.vue index b189db0f8fd4..c38cdc4fc24f 100644 --- a/packages/frontend/src/pages/settings/navbar.vue +++ b/packages/frontend/src/pages/settings/navbar.vue @@ -100,10 +100,6 @@ function reset() { })); } -watch(menuDisplay, async () => { - await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true }); -}); - const headerActions = computed(() => []); const headerTabs = computed(() => []); diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue index 8ae11efa2c66..8fc76741e3d8 100644 --- a/packages/frontend/src/ui/_common_/navbar.vue +++ b/packages/frontend/src/ui/_common_/navbar.vue @@ -56,6 +56,21 @@ SPDX-License-Identifier: AGPL-3.0-only + @@ -80,9 +95,11 @@ const otherMenuItemIndicated = computed(() => { return false; }); -const calcViewState = () => { - iconOnly.value = (window.innerWidth <= 1279) || (defaultStore.state.menuDisplay === 'sideIcon'); -}; +const forceIconOnly = window.innerWidth <= 1279; + +function calcViewState() { + iconOnly.value = forceIconOnly || (defaultStore.state.menuDisplay === 'sideIcon'); +} calcViewState(); @@ -92,6 +109,10 @@ watch(defaultStore.reactiveState.menuDisplay, () => { calcViewState(); }); +function toggleIconOnly() { + defaultStore.set('menuDisplay', iconOnly.value ? 'sideFull' : 'sideIcon'); +} + function openAccountMenu(ev: MouseEvent) { openAccountMenu_({ withExtraOperation: true, @@ -133,6 +154,38 @@ function more(ev: MouseEvent) { contain: strict; display: flex; flex-direction: column; + direction: rtl; // スクロールバーを左に表示したいため +} + +.top { + direction: ltr; +} + +.middle { + direction: ltr; +} + +.bottom { + direction: ltr; +} + +.toggleButton { + position: fixed; + bottom: 20px; + left: var(--nav-width); + z-index: 1001; + width: 16px; + height: 64px; + box-sizing: border-box; +} + +.toggleButtonShape { + position: absolute; + z-index: -1; + top: 0; + left: 0; + width: 16px; + height: 64px; } .root:not(.iconOnly) { @@ -363,6 +416,10 @@ function more(ev: MouseEvent) { position: relative; font-size: 0.9em; } + + .toggleButton { + left: var(--nav-width); + } } .root.iconOnly { @@ -563,5 +620,9 @@ function more(ev: MouseEvent) { font-size: 10px; } } + + .toggleButton { + left: var(--nav-icon-only-width); + } }