enhance(client): ファイルと投票のdetailsデザインの改善

CHANGELOG_CHERRYPICK.md

@@ -76,6 +76,7 @@
 - 노트 액션 버튼 추가 및 편의성 향상
 - 데이터 세이버를 활성화하면 설정을 반영하기 위해 페이지를 새로 고치도록
 - 그룹 페이지의 전반적인 디자인 개선
+- 파일 및 투표의 details 디자인 개선
 - Fix: (Friendly) 플로팅 메뉴를 길게 눌렀을 때 프로필 이미지를 드래그 할 수 있는 문제
 - Fix: (Friendly) 타임라인이 변경되었을 때 네비게이션 바의 인디케이터가 사라지지 않는 문제
 - Fix: (Friendly) 모바일에서 헤더가 사라졌을 때 프로필 아이콘의 높이가 잘못 설정되는 문제

packages/frontend/src/components/MkDetailsButton.vue

@@ -0,0 +1,63 @@
+<template>
+<button class="_button" :class="$style.root" @mousedown="toggle">
+	<b>{{ modelValue ? i18n.ts._cw.hide : i18n.ts._cw.show }}</b>
+	<span v-if="!modelValue" :class="$style.label">{{ label }}</span>
+</button>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import * as misskey from 'cherrypick-js';
+import { concat } from '@/scripts/array';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	modelValue: boolean;
+	note: misskey.entities.Note;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'update:modelValue', v: boolean): void;
+}>();
+
+const label = computed(() => {
+	return concat([
+		props.note.files && props.note.files.length !== 0 ? [i18n.t('withNFiles', { n: props.note.files.length })] : [],
+		props.note.poll != null ? [i18n.ts.poll] : [],
+	] as string[][]).join(' / ');
+});
+
+const toggle = () => {
+	emit('update:modelValue', !props.modelValue);
+};
+</script>
+
+<style lang="scss" module>
+.root {
+	display: inline-block;
+	margin: 5px 0;
+	padding: 6px;
+	font-size: 0.7em;
+	color: var(--cwFg);
+	background: var(--cwBg);
+	border-radius: 5px;
+	transition: background-color .25s ease-in-out;
+
+	&:hover {
+		color: var(--cwBg);
+		background: var(--panel);
+	}
+}
+
+.label {
+	margin-left: 4px;
+
+	&:before {
+		content: '(';
+	}
+
+	&:after {
+		content: ')';
+	}
+}
+</style>

packages/frontend/src/components/MkSubNoteContent.vue

@@ -1,6 +1,6 @@
 <template>
 <div :class="[$style.root, { [$style.collapsed]: collapsed }]">
-	<div>
+	<div style="display: grid;">
 		<span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
 		<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
 		<MkA v-if="note.replyId" :class="$style.reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
@@ -18,16 +18,17 @@
 				</div>
 			</div>
 		</div>
-	</div>
-	<details v-if="note.files.length > 0">
-		<summary>({{ i18n.t('withNFiles', { n: note.files.length }) }})</summary>
+		<MkDetailsButton v-if="note.files.length > 0 || note.poll" v-model="showContent" :note="note"/>
+		<div v-show="showContent">
+			<div v-if="note.files.length > 0">
 				<MkMediaList v-if="note.disableRightClick" :mediaList="note.files" @contextmenu.prevent/>
 				<MkMediaList v-else :mediaList="note.files"/>
-	</details>
-	<details v-if="note.poll">
-		<summary>{{ i18n.ts.poll }}</summary>
+			</div>
+			<div v-if="note.poll">
 				<MkPoll :note="note"/>
-	</details>
+			</div>
+		</div>
+	</div>
 	<button v-if="collapsed" :class="$style.fade" class="_button" @click="collapsed = false">
 		<span :class="$style.fadeLabel">{{ i18n.ts.showMore }}</span>
 	</button>
@@ -40,11 +41,13 @@ import * as misskey from 'cherrypick-js';
 import * as os from '@/os';
 import MkMediaList from '@/components/MkMediaList.vue';
 import MkPoll from '@/components/MkPoll.vue';
+import MkDetailsButton from '@/components/MkDetailsButton.vue';
 import { i18n } from '@/i18n';
 import { $i } from '@/account';
 import { defaultStore } from '@/store';
 import { miLocalStorage } from '@/local-storage';
 
+const showContent = ref(false);
 const translation = ref<any>(null);
 const translating = ref(false);