fix(frontend): ユーザー概要ページのファイルの項目のデザイン改良 (#16063)

5 files changed, 16 insertions, 49 deletions

diff --git a/packages/frontend/src/components/MkContainer.vue b/packages/frontend/src/components/MkContainer.vue
index 6bf55388af..d4f338e4c8 100644
--- a/packages/frontend/src/components/MkContainer.vue
+++ b/packages/frontend/src/components/MkContainer.vue
@@ -48,7 +48,6 @@ const props = withDefaults(defineProps<{
 	thin?: boolean;
 	naked?: boolean;
 	foldable?: boolean;
-	onUnfold?: () => boolean; // return false to prevent unfolding
 	scrollable?: boolean;
 	expanded?: boolean;
 	maxHeight?: number | null;
@@ -103,8 +102,6 @@ const omitObserver = new ResizeObserver((entries, observer) => {
 });
 
 function showMore() {
-	if (props.onUnfold && !props.onUnfold()) return;
-
 	ignoreOmit.value = true;
 	omitted.value = false;
 }
diff --git a/packages/frontend/src/components/MkNoteMediaGrid.vue b/packages/frontend/src/components/MkNoteMediaGrid.vue
index 764d9f6a32..7e900b28fa 100644
--- a/packages/frontend/src/components/MkNoteMediaGrid.vue
+++ b/packages/frontend/src/components/MkNoteMediaGrid.vue
@@ -100,6 +100,7 @@ const showingFiles = ref<Set<string>>(new Set());
 	font-size: 0.8em;
 	text-align: center;
 	padding: 8px;
+	border-radius: calc(var(--MI-radius) / 2);
 	box-sizing: border-box;
 	color: #fff;
 	background: rgba(0, 0, 0, 0.5);
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index 23f740ddd0..ea77444afd 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -138,7 +138,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkInfo v-else-if="$i && $i.id === user.id">{{ i18n.ts.userPagePinTip }}</MkInfo>
 					<template v-if="narrow">
 						<MkLazy>
-							<XFiles :key="user.id" :user="user" @unfold="emit('unfoldFiles')"/>
+							<XFiles :key="user.id" :user="user" @showMore="emit('showMoreFiles')"/>
 						</MkLazy>
 						<MkLazy>
 							<XActivity :key="user.id" :user="user"/>
@@ -152,7 +152,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 			</div>
 			<div v-if="!narrow" class="sub _gaps" style="container-type: inline-size;">
-				<XFiles :key="user.id" :user="user" @unfold="emit('unfoldFiles')"/>
+				<XFiles :key="user.id" :user="user" @showMore="emit('showMoreFiles')"/>
 				<XActivity :key="user.id" :user="user"/>
 			</div>
 		</div>
@@ -217,7 +217,7 @@ const props = withDefaults(defineProps<{
 });
 
 const emit = defineEmits<{
-	(ev: 'unfoldFiles'): void;
+	(ev: 'showMoreFiles'): void;
 }>();
 
 const router = useRouter();
diff --git a/packages/frontend/src/pages/user/index.files.vue b/packages/frontend/src/pages/user/index.files.vue
index 6c3b8408fb..58f6b0ca45 100644
--- a/packages/frontend/src/pages/user/index.files.vue
+++ b/packages/frontend/src/pages/user/index.files.vue
@@ -4,13 +4,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkContainer :max-height="300" :foldable="true" :onUnfold="unfoldContainer">
+<MkContainer>
 	<template #icon><i class="ti ti-photo"></i></template>
 	<template #header>{{ i18n.ts.files }}</template>
 	<div :class="$style.root">
 		<MkLoading v-if="fetching"/>
-		<div v-if="!fetching && notes.length > 0" :class="$style.stream">
-			<MkNoteMediaGrid v-for="note in notes" :note="note"/>
+		<div v-if="!fetching && notes.length > 0" class="_gaps_s">
+			<div :class="$style.stream">
+				<MkNoteMediaGrid v-for="note in notes" :note="note"/>
+			</div>
+			<MkButton rounded full @click="emit('showMore')">{{ i18n.ts.showMore }} <i class="ti ti-arrow-right"></i></MkButton>
 		</div>
 		<p v-if="!fetching && notes.length == 0" :class="$style.empty">{{ i18n.ts.nothing }}</p>
 	</div>
@@ -21,6 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { onMounted, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import { misskeyApi } from '@/utility/misskey-api.js';
+import MkButton from '@/components/MkButton.vue';
 import MkContainer from '@/components/MkContainer.vue';
 import { i18n } from '@/i18n.js';
 import MkNoteMediaGrid from '@/components/MkNoteMediaGrid.vue';
@@ -30,17 +34,12 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'unfold'): void;
+	(ev: 'showMore'): void;
 }>();
 
 const fetching = ref(true);
 const notes = ref<Misskey.entities.Note[]>([]);
 
-function unfoldContainer(): boolean {
-	emit('unfold');
-	return false;
-}
-
 onMounted(() => {
 	misskeyApi('users/notes', {
 		userId: props.user.id,
@@ -62,39 +61,9 @@ onMounted(() => {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
 	grid-gap: 6px;
-}
-
-.img {
-	position: relative;
-	height: 128px;
-	border-radius: 6px;
-	overflow: clip;
-}
 
-.empty {
-	margin: 0;
-	padding: 16px;
-	text-align: center;
-}
-
-.sensitiveImg {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	filter: brightness(0.7);
-}
-.sensitive {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	display: grid;
-  place-items: center;
-	font-size: 0.8em;
-	color: #fff;
-	cursor: pointer;
+	>:nth-child(n+9) {
+		display: none;
+	}
 }
 </style>
diff --git a/packages/frontend/src/pages/user/index.vue b/packages/frontend/src/pages/user/index.vue
index d4f36271ad..11e26b26f9 100644
--- a/packages/frontend/src/pages/user/index.vue
+++ b/packages/frontend/src/pages/user/index.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <PageWithHeader v-model:tab="tab" :tabs="headerTabs" :actions="headerActions" :swipable="true">
 	<div v-if="user">
-		<XHome v-if="tab === 'home'" :user="user" @unfoldFiles="() => { tab = 'files'; }"/>
+		<XHome v-if="tab === 'home'" :user="user" @showMoreFiles="() => { tab = 'files'; }"/>
 		<XNotes v-else-if="tab === 'notes'" :user="user"/>
 		<XFiles v-else-if="tab === 'files'" :user="user"/>
 		<XActivity v-else-if="tab === 'activity'" :user="user"/>