From 23542530e1d196a7d7d9e655a0082c35b1b0cbc7 Mon Sep 17 00:00:00 2001 From: syuilo <4439005+syuilo@users.noreply.github.com> Date: Thu, 22 May 2025 14:57:35 +0900 Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E3=83=A2=E3=83=90=E3=82=A4?= =?UTF-8?q?=E3=83=AB=E3=83=87=E3=83=90=E3=82=A4=E3=82=B9=E3=81=A7=E6=8A=98?= =?UTF-8?q?=E3=82=8A=E3=81=9F=E3=81=9F=E3=81=BE=E3=82=8C=E3=81=9FUI?= =?UTF-8?q?=E3=81=AE=E5=B1=95=E9=96=8B=E8=A1=A8=E7=A4=BA=E3=81=AB=E5=85=A8?= =?UTF-8?q?=E7=94=BB=E9=9D=A2=E3=83=9A=E3=83=BC=E3=82=B8=E3=82=92=E4=BD=BF?= =?UTF-8?q?=E7=94=A8=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 1 + packages/frontend/src/components/MkFolder.vue | 60 ++++++- .../frontend/src/components/MkFolderPage.vue | 157 ++++++++++++++++++ packages/frontend/src/os.ts | 2 + .../frontend/src/pages/settings/other.vue | 4 + packages/frontend/src/preferences/def.ts | 3 + 6 files changed, 222 insertions(+), 5 deletions(-) create mode 100644 packages/frontend/src/components/MkFolderPage.vue diff --git a/CHANGELOG.md b/CHANGELOG.md index f49a4335b1..21ce5932b1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -32,6 +32,7 @@ - チャットなど、一部の機能は引き続き設定に関わらずWebsocket接続が行われます - Feat: 絵文字をミュート可能にする機能 - 絵文字（ユニコードの絵文字・カスタム絵文字）毎にミュートし、不可視化することができるようになりました +- Feat: モバイルデバイスで折りたたまれたUIの展開表示に全画面ページを使用できるように(実験的) - Enhance: メモリ使用量を軽減しました - Enhance: 画像の高品質なプレースホルダを無効化してパフォーマンスを向上させるオプションを追加 - Enhance: 招待されているが参加していないルームを開いたときに、招待を承認するかどうか尋ねるように diff --git a/packages/frontend/src/components/MkFolder.vue b/packages/frontend/src/components/MkFolder.vue index e86861c874..9f5bc8da6c 100644 --- a/packages/frontend/src/components/MkFolder.vue +++ b/packages/frontend/src/components/MkFolder.vue @@ -19,13 +19,42 @@ SPDX-License-Identifier: AGPL-3.0-only
- + +
-
+
+ + + + + + + +
+ +
+
+ +
+ + + + +
+ +
(), { defaultOpen: false, maxHeight: null, withSpacer: true, spacerMin: 14, spacerMax: 22, + canPage: true, }); const rootEl = useTemplateRef('rootEl'); +const asPage = props.canPage && deviceKind === 'smartphone' && prefer.s['experimental.enableFolderPageView']; const bgSame = ref(false); -const opened = ref(props.defaultOpen); -const openedAtLeastOnce = ref(props.defaultOpen); +const opened = ref(asPage ? false : props.defaultOpen); +const openedAtLeastOnce = ref(opened.value); //#region interpolate-sizeに対応していないブラウザ向け（TODO: 主要ブラウザが対応したら消す） function enter(el: Element) { @@ -126,7 +161,22 @@ function afterLeave(el: Element) { } //#endregion -function toggle() { +let pageId = pageFolderTeleportCount.value; +pageFolderTeleportCount.value += 1000; + +async function toggle() { + if (asPage && !opened.value) { + pageId++; + const { dispose } = await popup(MkFolderPage, { + pageId, + }, { + closed: () => { + opened.value = false; + dispose(); + }, + }); + } + if (!opened.value) { openedAtLeastOnce.value = true; } diff --git a/packages/frontend/src/components/MkFolderPage.vue b/packages/frontend/src/components/MkFolderPage.vue new file mode 100644 index 0000000000..6d9ee1af1d --- /dev/null +++ b/packages/frontend/src/components/MkFolderPage.vue @@ -0,0 +1,157 @@ + + + + + + + diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts index fea050e787..a513ae4902 100644 --- a/packages/frontend/src/os.ts +++ b/packages/frontend/src/os.ts @@ -790,3 +790,5 @@ export function launchUploader( }); }); } + +export const pageFolderTeleportCount = ref(0); diff --git a/packages/frontend/src/pages/settings/other.vue b/packages/frontend/src/pages/settings/other.vue index 83a6aa167c..7b6ad5e56e 100644 --- a/packages/frontend/src/pages/settings/other.vue +++ b/packages/frontend/src/pages/settings/other.vue @@ -96,6 +96,9 @@ SPDX-License-Identifier: AGPL-3.0-only + + +
@@ -157,6 +160,7 @@ const enableCondensedLine = prefer.model('enableCondensedLine'); const skipNoteRender = prefer.model('skipNoteRender'); const devMode = prefer.model('devMode'); const stackingRouterView = prefer.model('experimental.stackingRouterView'); +const enableFolderPageView = prefer.model('experimental.enableFolderPageView'); watch(skipNoteRender, async () => { await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true }); diff --git a/packages/frontend/src/preferences/def.ts b/packages/frontend/src/preferences/def.ts index 7b0628e937..27402a8e6a 100644 --- a/packages/frontend/src/preferences/def.ts +++ b/packages/frontend/src/preferences/def.ts @@ -417,4 +417,7 @@ export const PREF_DEF = { 'experimental.stackingRouterView': { default: false, }, + 'experimental.enableFolderPageView': { + default: false, + }, } satisfies PreferencesDefinition;