ユーザーページのノート一覧をタブにするなど

2025-01-15 01:31:14 +09:00 · 2023-02-10 17:11:10 +00:00 · 2023-02-10 17:11:10 +00:00 · d5927b9db7
commit d5927b9db7
parent e396a53027
4 changed files with 58 additions and 52 deletions
--- a/packages/frontend/src/components/global/MkPageHeader.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.vue
@ -5,7 +5,7 @@
 			<MkAvatar v-if="props.displayMyAvatar && $i" :class="$style.avatar" :user="$i" :link="true"/>
 		</div>
 		<template v-if="metadata">
-			<div v-if="!hideTitle" :class="$style.titleContainer" @click="showTabsPopup">
+			<div v-if="!hideTitle" :class="$style.titleContainer">
 				<MkAvatar v-if="metadata.avatar" :class="$style.titleAvatar" :user="metadata.avatar" indicator/>
 				<i v-else-if="metadata.icon" :class="[$style.titleIcon, metadata.icon]"></i>

@ -18,11 +18,13 @@
 				</div>
 			</div>
 			<div v-if="!narrow || hideTitle" :class="$style.tabs">
+				<div :class="$style.tabsInner">
+					<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = (el as HTMLElement)" v-tooltip.noDelay="tab.title" class="_button" :class="[$style.tab, { [$style.active]: tab.key != null && tab.key === props.tab }]" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)">
+						<i v-if="tab.icon" :class="[$style.tabIcon, tab.icon]"></i>
+						<span v-if="!tab.iconOnly" :class="$style.tabTitle">{{ tab.title }}</span>
+					</button>
+				</div>
 				<div ref="tabHighlightEl" :class="$style.tabHighlight"></div>
-				<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = (el as HTMLElement)" v-tooltip.noDelay="tab.title" class="_button" :class="[$style.tab, { [$style.active]: tab.key != null && tab.key === props.tab }]" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)">
-					<i v-if="tab.icon" :class="[$style.tabIcon, tab.icon]"></i>
-					<span v-if="!tab.iconOnly" :class="$style.tabTitle">{{ tab.title }}</span>
-				</button>
 			</div>
 		</template>
 		<div v-if="narrow || (actions && actions.length > 0)" :class="$style.buttonsRight">
@ -31,12 +33,14 @@
 			</template>
 		</div>
 	</div>
-	<div v-if="narrow && hasTabs" :class="$style.lower">
+	<div v-if="narrow && hasTabs" :class="[$style.lower, { [$style.slim]: narrow, [$style.thin]: thin_ }]">
 		<div :class="$style.tabs">
-			<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = (el as HTMLElement)" v-tooltip.noDelay="tab.title" class="_button" :class="[$style.tab, { [$style.active]: tab.key != null && tab.key === props.tab }]" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)">
-				<i v-if="tab.icon" :class="[$style.tabIcon, tab.icon]"></i>
-				<span v-if="!tab.iconOnly" :class="$style.tabTitle">{{ tab.title }}</span>
-			</button>
+			<div :class="$style.tabsInner">
+				<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = (el as HTMLElement)" v-tooltip.noDelay="tab.title" class="_button" :class="[$style.tab, { [$style.active]: tab.key != null && tab.key === props.tab }]" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)">
+					<i v-if="tab.icon" :class="[$style.tabIcon, tab.icon]"></i>
+					<span v-if="!tab.iconOnly" :class="$style.tabTitle">{{ tab.title }}</span>
+				</button>
+			</div>
 			<div ref="tabHighlightEl" :class="$style.tabHighlight"></div>
 		</div>
 	</div>
@ -46,7 +50,6 @@
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref, inject, watch, nextTick } from 'vue';
 import tinycolor from 'tinycolor2';
-import { popupMenu } from '@/os';
 import { scrollToTop } from '@/scripts/scroll';
 import { globalEvents } from '@/events';
 import { injectPageMetadata } from '@/scripts/page-metadata';
@ -95,22 +98,6 @@ const show = $computed(() => {
 	return !hideTitle || hasTabs || hasActions;
 });

-const showTabsPopup = (ev: MouseEvent) => {
-	if (!hasTabs) return;
-	if (!narrow) return;
-	ev.preventDefault();
-	ev.stopPropagation();
-	const menu = props.tabs.map(tab => ({
-		text: tab.title,
-		icon: tab.icon,
-		active: tab.key != null && tab.key === props.tab,
-		action: (ev) => {
-			onTabClick(tab, ev);
-		},
-	}));
-	popupMenu(menu, (ev.currentTarget ?? ev.target) as HTMLElement);
-};
-
 const preventDrag = (ev: TouchEvent) => {
 	ev.stopPropagation();
 };
@ -152,16 +139,16 @@ onMounted(() => {
 	calcBg();
 	globalEvents.on('themeChanged', calcBg);

-	watch(() => [props.tab, props.tabs], () => {
+	watch([() => props.tab, () => props.tabs], () => {
 		nextTick(() => {
 			const tabEl = props.tab ? tabRefs[props.tab] : undefined;
-			if (tabEl && tabHighlightEl && tabEl.parentElement) {
+			if (tabEl && tabHighlightEl && tabHighlightEl.parentElement) {
 				// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
 				// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
-				const parentRect = tabEl.parentElement.getBoundingClientRect();
+				const parentRect = tabHighlightEl.parentElement.getBoundingClientRect();
 				const rect = tabEl.getBoundingClientRect();
 				tabHighlightEl.style.width = rect.width + 'px';
-				tabHighlightEl.style.left = (rect.left - parentRect.left + tabEl.parentElement.scrollLeft) + 'px';
+				tabHighlightEl.style.left = (rect.left - parentRect.left + tabHighlightEl.parentElement.scrollLeft) + 'px';
 			}
 		});
 	}, {
@ -196,7 +183,6 @@ onUnmounted(() => {
 .upper,
 .lower {
 	width: 100%;
-	contain: strict;
 	background: transparent;
 }

@ -239,8 +225,14 @@ onUnmounted(() => {
 }

 .lower {
-	--height: 40px;
+	--height: 48px;
 	height: var(--height);
+
+	&.slim {
+		.tabsInner {
+			margin: 0 auto;
+		}
+	}
 }

 .buttons {
@ -357,18 +349,23 @@ onUnmounted(() => {

 .tabs {
 	display: flex;
-	justify-content: center;
 	position: relative;
 	margin: 0;
 	height: var(--height);
 	font-size: 0.8em;
-	overflow: auto;
-	white-space: nowrap;
+	overflow-x: auto;
+	overflow-y: hidden;
 	scrollbar-width: thin;
 }

-.tab {
+.tabsInner {
 	display: block;
+	height: var(--height);
+	white-space: nowrap;
+}
+
+.tab {
+	display: inline-block;
 	position: relative;
 	padding: 0 10px;
 	height: 100%;
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@ -101,9 +101,6 @@
 					<XActivity :key="user.id" :user="user"/>
 				</template>
 			</div>
-			<div>
-				<XUserTimeline :user="user"/>
-			</div>
 		</div>
 		<div v-if="!narrow" class="sub _gaps" style="container-type: inline-size;">
 			<XPhotos :key="user.id" :user="user"/>
@ -117,7 +114,6 @@
 import { defineAsyncComponent, computed, inject, onMounted, onUnmounted, watch } from 'vue';
 import calcAge from 's-age';
 import * as misskey from 'misskey-js';
-import XUserTimeline from './index.timeline.vue';
 import XNote from '@/components/MkNote.vue';
 import MkFollowButton from '@/components/MkFollowButton.vue';
 import MkContainer from '@/components/MkContainer.vue';
--- a/packages/frontend/src/pages/user/index.timeline.vue
+++ b/packages/frontend/src/pages/user/index.timeline.vue
@ -1,14 +1,16 @@
 <template>
-<MkStickyContainer>
-	<template #header>
-		<MkTab v-model="include" :class="$style.tab">
-			<option :value="null">{{ i18n.ts.notes }}</option>
-			<option value="replies">{{ i18n.ts.notesAndReplies }}</option>
-			<option value="files">{{ i18n.ts.withFiles }}</option>
-		</MkTab>
-	</template>
-	<XNotes :no-gap="true" :pagination="pagination"/>
-</MkStickyContainer>
+<MkSpacer :content-max="800" style="padding-top: 0">
+	<MkStickyContainer>
+		<template #header>
+			<MkTab v-model="include" :class="$style.tab">
+				<option :value="null">{{ i18n.ts.notes }}</option>
+				<option value="replies">{{ i18n.ts.notesAndReplies }}</option>
+				<option value="files">{{ i18n.ts.withFiles }}</option>
+			</MkTab>
+		</template>
+		<XNotes :no-gap="true" :pagination="pagination" :class="$style.tl"/>
+	</MkStickyContainer>
+</MkSpacer>
 </template>

 <script lang="ts" setup>
@ -42,4 +44,10 @@ const pagination = {
 	padding: calc(var(--margin) / 2) 0;
 	background: var(--bg);
 }
+
+.tl {
+	background: var(--bg);
+    border-radius: var(--radius);
+    overflow: clip;
+}
 </style>
--- a/packages/frontend/src/pages/user/index.vue
+++ b/packages/frontend/src/pages/user/index.vue
@ -5,7 +5,7 @@
 		<Transition name="fade" mode="out-in">
 			<div v-if="user">
 				<XHome v-if="tab === 'home'" :user="user"/>
-				<XActivity v-else-if="tab === 'activity'" :user="user"/>
+				<XTimeline v-else-if="tab === 'notes'" :user="user" />
 				<XAchievements v-else-if="tab === 'achievements'" :user="user"/>
 				<XReactions v-else-if="tab === 'reactions'" :user="user"/>
 				<XClips v-else-if="tab === 'clips'" :user="user"/>
@ -34,6 +34,7 @@ import { i18n } from '@/i18n';
 import { $i } from '@/account';

 const XHome = defineAsyncComponent(() => import('./home.vue'));
+const XTimeline = defineAsyncComponent(() => import('./index.timeline.vue'));
 const XActivity = defineAsyncComponent(() => import('./activity.vue'));
 const XAchievements = defineAsyncComponent(() => import('./achievements.vue'));
 const XReactions = defineAsyncComponent(() => import('./reactions.vue'));
@ -74,6 +75,10 @@ const headerTabs = $computed(() => user ? [{
 	key: 'home',
 	title: i18n.ts.overview,
 	icon: 'ti ti-home',
+}, {
+	key: 'notes',
+	title: i18n.ts.notes,
+	icon: 'ti ti-pencil',
 }, {
 	key: 'activity',
 	title: i18n.ts.activity,