From 448a933f7704a3392e0c249a2236f0178f9c5fe3 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 7 May 2023 18:18:32 +0900
Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=E3=83=A2=E3=83=87?=
 =?UTF-8?q?=E3=83=AC=E3=83=BC=E3=82=BF=E3=83=BC=E3=81=AF=E3=83=8E=E3=83=BC?=
 =?UTF-8?q?=E3=83=88=E3=81=AB=E6=B7=BB=E4=BB=98=E3=81=95=E3=82=8C=E3=81=9F?=
 =?UTF-8?q?=E7=94=BB=E5=83=8F=E4=B8=8A=E3=81=8B=E3=82=89=E7=9B=B4=E6=8E=A5?=
 =?UTF-8?q?NSFW=E8=A8=AD=E5=AE=9A=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |  1 +
 .../frontend/src/components/MkMediaImage.vue  | 29 +++++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index daa3f6c86c..1d2a0032e3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -49,6 +49,7 @@
 - データセーバーモードを追加
   * 画像が全て隠れた状態で表示されるようになります
 - 閲覧注意設定された画像は表示した状態でもそれが閲覧注意だと分かる表示をするように
+- モデレーターはノートに添付された画像上から直接NSFW設定できるように
 - 1枚だけのメディアリストの画像のアスペクト比を画像に応じて縦長にするように
 - プロフィール設定「追加情報」の項目の削除と並び替えができるように
 - 新しい実績を追加
diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue
index 0634ea5c0e..42dc9e79ff 100644
--- a/packages/frontend/src/components/MkMediaImage.vue
+++ b/packages/frontend/src/components/MkMediaImage.vue
@@ -23,6 +23,7 @@
 		<div v-if="image.isSensitive" :class="$style.indicator" style="color: var(--warn);">NSFW</div>
 	</div>
 	<button v-tooltip="i18n.ts.hide" :class="$style.hide" class="_button" @click="hide = true"><i class="ti ti-eye-off"></i></button>
+	<button :class="$style.menu" class="_button" @click.stop="showMenu"><i class="ti ti-dots"></i></button>
 </div>
 </template>
 
@@ -34,6 +35,8 @@ import bytes from '@/filters/bytes';
 import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
+import * as os from '@/os';
+import { iAmModerator } from '@/account';
 
 const props = defineProps<{
 	image: misskey.entities.DriveFile;
@@ -57,6 +60,17 @@ watch(() => props.image, () => {
 	deep: true,
 	immediate: true,
 });
+
+function showMenu(ev: MouseEvent) {
+	os.popupMenu([...(iAmModerator ? [{
+		text: i18n.ts.markAsSensitive,
+		icon: 'ti ti-eye-off',
+		action: () => {
+			os.apiWithDialog('drive/files/update', { fileId: props.image.id, isSensitive: true });
+		},
+	}] : [])], ev.currentTarget ?? ev.target);
+}
+
 </script>
 
 <style lang="scss" module>
@@ -106,6 +120,21 @@ watch(() => props.image, () => {
 	right: 12px;
 }
 
+.menu {
+	display: block;
+	position: absolute;
+	border-radius: 6px;
+	background-color: rgba(0, 0, 0, 0.3);
+	-webkit-backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--blur, blur(15px));
+	color: #fff;
+	font-size: 0.8em;
+	padding: 6px 8px;
+	text-align: center;
+	bottom: 12px;
+	right: 12px;
+}
+
 .imageContainer {
 	display: block;
 	cursor: zoom-in;