mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-02 21:26:33 +02:00
Code Releases Activity

feat(frontend): ページのタブバーを下部に表示できるように

Browse Source
This commit is contained in:
syuilo
2025-08-04 20:03:34 +09:00
parent 2f13f923a8
commit bb56b3b4f1
8 changed files with 62 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
packages/frontend/src/components/MkTabs.vue
View File

@@ -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>

25
packages/frontend/src/components/global/PageWithHeader.vue
View File

@@ -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>