diff options
| -rw-r--r-- | CHANGELOG.md | 1 | ||||
| -rw-r--r-- | locales/index.d.ts | 4 | ||||
| -rw-r--r-- | locales/ja-JP.yml | 1 | ||||
| -rw-r--r-- | packages/frontend/src/components/MkTabs.vue | 21 | ||||
| -rw-r--r-- | packages/frontend/src/components/global/PageWithHeader.vue | 25 | ||||
| -rw-r--r-- | packages/frontend/src/pages/settings/preferences.vue | 10 | ||||
| -rw-r--r-- | packages/frontend/src/preferences/def.ts | 3 | ||||
| -rw-r--r-- | packages/frontend/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 --> <template> -<div :class="$style.tabs"> +<div :class="[$style.tabs, { [$style.centered]: props.centered }]"> <div :class="$style.tabsInner"> <button v-for="t in tabs" :ref="(el) => tabRefs[t.key] = (el as HTMLElement)" v-tooltip.noDelay="t.title" @@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only </div> <div ref="tabHighlightEl" - :class="[$style.tabHighlight, { [$style.animate]: prefer.s.animation }]" + :class="[$style.tabHighlight, { [$style.animate]: prefer.s.animation, [$style.tabHighlightUpper]: tabHighlightUpper }]" ></div> </div> </template> @@ -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; + } } </style> 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 <template> <div ref="rootEl" :class="[$style.root, reversed ? '_pageScrollableReversed' : '_pageScrollable']"> <MkStickyContainer> - <template #header><MkPageHeader v-model:tab="tab" v-bind="pageHeaderProps"/></template> + <template #header> + <MkPageHeader v-if="prefer.s.showPageTabBarBottom && (props.tabs?.length ?? 0) > 0" v-bind="pageHeaderPropsWithoutTabs"/> + <MkPageHeader v-else v-model:tab="tab" v-bind="pageHeaderProps"/> + </template> <div :class="$style.body"> <MkSwiper v-if="prefer.s.enableHorizontalSwipe && swipable && (props.tabs?.length ?? 1) > 1" v-model:tab="tab" :class="$style.swiper" :tabs="props.tabs"> <slot></slot> </MkSwiper> <slot v-else></slot> </div> - <template #footer><slot name="footer"></slot></template> + <template #footer> + <slot name="footer"></slot> + <div v-if="prefer.s.showPageTabBarBottom && (props.tabs?.length ?? 0) > 0" :class="$style.footerTabs"> + <MkTabs v-model:tab="tab" :tabs="props.tabs" :centered="true" :tabHighlightUpper="true"/> + </div> + </template> </MkStickyContainer> </div> </template> @@ -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<PageHeaderProps & { reversed?: boolean; @@ -40,6 +49,11 @@ const pageHeaderProps = computed(() => { return rest; }); +const pageHeaderPropsWithoutTabs = computed(() => { + const { reversed, tabs, ...rest } = props; + return rest; +}); + const tab = defineModel<string>('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); +} </style> 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 </MkPreferenceContainer> </SearchMarker> + <SearchMarker :keywords="['tabs', 'tabbar', 'bottom', 'under']"> + <MkPreferenceContainer k="showPageTabBarBottom"> + <MkSwitch v-model="showPageTabBarBottom"> + <template #label><SearchLabel>{{ i18n.ts._settings.showPageTabBarBottom }}</SearchLabel></template> + </MkSwitch> + </MkPreferenceContainer> + </SearchMarker> + <SearchMarker :keywords="['swipe', 'horizontal', 'tab']"> <MkPreferenceContainer k="enableHorizontalSwipe"> <MkSwitch v-model="enableHorizontalSwipe"> @@ -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 { |