From dc8763215ada27149e8b4370bb86b8fb6ad3a002 Mon Sep 17 00:00:00 2001
From: anatawa12 <anatawa12@icloud.com>
Date: Thu, 6 Jul 2023 08:49:07 +0900
Subject: feat(frontend): 画像を動画と同様に簡単に隠せるように (#11127)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: hide image easily

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

(limited to 'packages/frontend/src/components/MkMediaImage.vue')

diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue
index b29871c363..df49bcb26d 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;
-- 
cgit v1.2.3-freya