enhance(frontend): 노트에 여러 장의 이미지가 있을 때 미디어 탭에서 이미지 수를 숫자로 표시함

kokonect-link · Jan 6, 2025 · 9492b1e · 9492b1e
1 parent 106e21f
commit 9492b1e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
@@ -34,6 +34,7 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2024xx](CHANGE
 
 ### Client
 - Enhance: 사용자 페이지에서 `이름`, `자기소개`, `팔로우 메시지`, `추가 정보`에 포함된 외부 이모지를 가져올 수 있음
+- Enhance: 노트에 여러 장의 이미지가 있을 때 미디어 탭에서 이미지 수를 숫자로 표시함
 - Fix: 노트 헤더의 사용자 이름을 클릭하면 페이지가 중복으로 이동됨
 - Fix: CherryPick 클라이언트 업데이트 알림이 잘못 반환될 수 있음
   - 출시 전 빌드 태그가 고려되지 않음(`alpha`, `beta`, `rc`)

diff --git a/packages/frontend/src/pages/user/index.timeline.files.files.vue b/packages/frontend/src/pages/user/index.timeline.files.files.vue
@@ -28,6 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		/>
 	</MkA>
 	<div v-if="files.files.length > 1" :class="$style.multiple">
+		<span style="font-size: initial; text-align: center; margin-right: 0.25em;">{{ files.files.length }}</span>
 		<i class="ti ti-box-multiple"></i>
 	</div>
 </div>
@@ -147,13 +148,16 @@ html[data-color-scheme=light] .visible {
 }
 
 .multiple {
+	display: flex;
+	align-items: center;
+	justify-content: center;
 	position: absolute;
 	top: 10px;
 	right: 10px;
 	font-size: 1.45em;
 	color: #fff;
 	opacity: .9;
-	filter: drop-shadow(0 0 1.5px #606060);
+	filter: drop-shadow(0 0 1.5px #6060608a);
 }
 
 @container (max-width: 785px) {