From dc8763215ada27149e8b4370bb86b8fb6ad3a002 Mon Sep 17 00:00:00 2001
From: anatawa12 <anatawa12@icloud.com>
Date: Thu, 6 Jul 2023 08:49:07 +0900
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E7=94=BB=E5=83=8F=E3=82=92?=
 =?UTF-8?q?=E5=8B=95=E7=94=BB=E3=81=A8=E5=90=8C=E6=A7=98=E3=81=AB=E7=B0=A1?=
 =?UTF-8?q?=E5=8D=98=E3=81=AB=E9=9A=A0=E3=81=9B=E3=82=8B=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB=20(#11127)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: hide image easily

* docs(changelog): add 画像を動画と同様に簡単に隠せるように
---
 CHANGELOG.md                                     |  1 +
 .../frontend/src/components/MkMediaImage.vue     | 16 ++++++++++++++++
 2 files changed, 17 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f620dadce..ed725314b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,7 @@
 - Fix: sparkle内にリンクを入れるとクリック不能になる問題の修正
 - deck UIのカラムのメニューからアンテナとリストの編集画面を開けるように
 - ドライブファイルのメニューで画像をクロップできるように
+- 画像を動画と同様に簡単に隠せるように
 
 ### Server
 - JSON.parse の回数を削減することで、ストリーミングのパフォーマンスを向上しました
diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue
index b29871c36..df49bcb26 100644
--- a/packages/frontend/src/components/MkMediaImage.vue
+++ b/packages/frontend/src/components/MkMediaImage.vue
@@ -33,6 +33,7 @@
 			<div v-if="image.isSensitive" :class="$style.indicator" style="color: var(--warn);">NSFW</div>
 		</div>
 		<button :class="$style.menu" class="_button" @click.stop="showMenu"><i class="ti ti-dots" style="vertical-align: middle;"></i></button>
+		<i class="ti ti-eye-off" :class="$style.hide" @click.stop="hide = true"></i>
 	</template>
 </div>
 </template>
@@ -113,6 +114,21 @@ function showMenu(ev: MouseEvent) {
 	align-items: center;
 }
 
+.hide {
+	display: block;
+	position: absolute;
+	border-radius: 6px;
+	background-color: var(--fg);
+	color: var(--accentLighten);
+	font-size: 14px;
+	opacity: .5;
+	padding: 3px 6px;
+	text-align: center;
+	cursor: pointer;
+	top: 12px;
+	right: 12px;
+}
+
 .hiddenTextWrapper {
 	display: table-cell;
 	text-align: center;