From bb56b3b4f11837f2d3e564184a9243a9a98490d6 Mon Sep 17 00:00:00 2001 From: syuilo <4439005+syuilo@users.noreply.github.com> Date: Mon, 4 Aug 2025 20:03:34 +0900 Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E3=83=9A=E3=83=BC=E3=82=B8?= =?UTF-8?q?=E3=81=AE=E3=82=BF=E3=83=96=E3=83=90=E3=83=BC=E3=82=92=E4=B8=8B?= =?UTF-8?q?=E9=83=A8=E3=81=AB=E8=A1=A8=E7=A4=BA=E3=81=A7=E3=81=8D=E3=82=8B?= =?UTF-8?q?=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 + locales/index.d.ts | 4 +++ locales/ja-JP.yml | 1 + packages/frontend/src/components/MkTabs.vue | 21 ++++++++++++++-- .../src/components/global/PageWithHeader.vue | 25 +++++++++++++++++-- .../src/pages/settings/preferences.vue | 10 ++++++++ packages/frontend/src/preferences/def.ts | 3 +++ .../src/ui/_common_/mobile-footer-menu.vue | 2 +- 8 files changed, 62 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9888fe1cd1..e8fcb60a39 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,6 +25,7 @@ - `g` キーを連打する - URLに`?safemode=true`を付ける - PWAのショートカットで Safemode を選択して起動する +- Feat: ページのタブバーを下部に表示できるように - Enhance: コントロールパネルを検索できるように - Enhance: トルコ語 (tr-TR) に対応 - Fix: 一部の設定検索結果が存在しないパスになる問題を修正 diff --git a/locales/index.d.ts b/locales/index.d.ts index f77925b410..cafa9012b9 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -5871,6 +5871,10 @@ export interface Locale extends ILocale { * 利用できるリアクションを先頭に表示 */ "showAvailableReactionsFirstInNote": string; + /** + * ページのタブバーを下部に表示 + */ + "showPageTabBarBottom": string; "_chat": { /** * 送信者の名前を表示 diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 4d79b31b1b..4562cfe370 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1469,6 +1469,7 @@ _settings: contentsUpdateFrequency_description2: "リアルタイムモードがオンのときは、この設定に関わらずリアルタイムでコンテンツが更新されます。" showUrlPreview: "URLプレビューを表示する" showAvailableReactionsFirstInNote: "利用できるリアクションを先頭に表示" + showPageTabBarBottom: "ページのタブバーを下部に表示" _chat: showSenderName: "送信者の名前を表示" diff --git a/packages/frontend/src/components/MkTabs.vue b/packages/frontend/src/components/MkTabs.vue index 5c4a67b026..75cf84e918 100644 --- a/packages/frontend/src/components/MkTabs.vue +++ b/packages/frontend/src/components/MkTabs.vue @@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only --> @@ -59,6 +59,8 @@ import { prefer } from '@/preferences.js'; const props = withDefaults(defineProps<{ tabs?: Tab[]; tab?: string; + centered?: boolean; + tabHighlightUpper?: boolean; }>(), { tabs: () => ([] as Tab[]), }); @@ -169,6 +171,16 @@ onUnmounted(() => { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; + + &.centered { + text-align: center; + } +} + +@container (max-width: 450px) { + .tabs { + font-size: 80%; + } } .tabsInner { @@ -227,5 +239,10 @@ onUnmounted(() => { &.animate { transition: width 0.15s ease, left 0.15s ease; } + + &.tabHighlightUpper { + top: 0; + bottom: auto; + } } diff --git a/packages/frontend/src/components/global/PageWithHeader.vue b/packages/frontend/src/components/global/PageWithHeader.vue index d90afb652e..d368dee88a 100644 --- a/packages/frontend/src/components/global/PageWithHeader.vue +++ b/packages/frontend/src/components/global/PageWithHeader.vue @@ -6,14 +6,22 @@ SPDX-License-Identifier: AGPL-3.0-only @@ -26,6 +34,7 @@ import { useScrollPositionKeeper } from '@/composables/use-scroll-position-keepe import MkSwiper from '@/components/MkSwiper.vue'; import { useRouter } from '@/router.js'; import { prefer } from '@/preferences.js'; +import MkTabs from '@/components/MkTabs.vue'; const props = withDefaults(defineProps { return rest; }); +const pageHeaderPropsWithoutTabs = computed(() => { + const { reversed, tabs, ...rest } = props; + return rest; +}); + const tab = defineModel('tab'); const rootEl = useTemplateRef('rootEl'); @@ -68,4 +82,11 @@ defineExpose({ .body, .swiper { min-height: calc(100cqh - (var(--MI-stickyTop, 0px) + var(--MI-stickyBottom, 0px))); } + +.footerTabs { + background: color(from var(--MI_THEME-pageHeaderBg) srgb r g b / 0.75); + -webkit-backdrop-filter: var(--MI-blur, blur(15px)); + backdrop-filter: var(--MI-blur, blur(15px)); + border-top: solid 0.5px var(--MI_THEME-divider); +} diff --git a/packages/frontend/src/pages/settings/preferences.vue b/packages/frontend/src/pages/settings/preferences.vue index 7ee5f151fa..ed4f36c0e5 100644 --- a/packages/frontend/src/pages/settings/preferences.vue +++ b/packages/frontend/src/pages/settings/preferences.vue @@ -477,6 +477,14 @@ SPDX-License-Identifier: AGPL-3.0-only + + + + + + + + @@ -866,6 +874,7 @@ const animatedMfm = prefer.model('animatedMfm'); const disableShowingAnimatedImages = prefer.model('disableShowingAnimatedImages'); const keepScreenOn = prefer.model('keepScreenOn'); const enableHorizontalSwipe = prefer.model('enableHorizontalSwipe'); +const showPageTabBarBottom = prefer.model('showPageTabBarBottom'); const enablePullToRefresh = prefer.model('enablePullToRefresh'); const useNativeUiForVideoAudioPlayer = prefer.model('useNativeUiForVideoAudioPlayer'); const contextMenu = prefer.model('contextMenu'); @@ -925,6 +934,7 @@ watch([ useSystemFont, makeEveryTextElementsSelectable, enableHorizontalSwipe, + showPageTabBarBottom, enablePullToRefresh, reduceAnimation, showAvailableReactionsFirstInNote, diff --git a/packages/frontend/src/preferences/def.ts b/packages/frontend/src/preferences/def.ts index a83a3153d0..f6370c8c78 100644 --- a/packages/frontend/src/preferences/def.ts +++ b/packages/frontend/src/preferences/def.ts @@ -381,6 +381,9 @@ export const PREF_DEF = definePreferences({ showAvailableReactionsFirstInNote: { default: false, }, + showPageTabBarBottom: { + default: false, + }, plugins: { default: [] as Plugin[], mergeStrategy: (a, b) => { diff --git a/packages/frontend/src/ui/_common_/mobile-footer-menu.vue b/packages/frontend/src/ui/_common_/mobile-footer-menu.vue index e2993230be..7ab8a45f51 100644 --- a/packages/frontend/src/ui/_common_/mobile-footer-menu.vue +++ b/packages/frontend/src/ui/_common_/mobile-footer-menu.vue @@ -86,7 +86,7 @@ watch(rootEl, () => { box-sizing: border-box; background: var(--MI_THEME-navBg); color: var(--MI_THEME-navFg); - box-shadow: 0px 0px 6px 6px #0000000f; + border-top: solid 0.5px var(--MI_THEME-divider); } .item {