From ac4245dce1f2b957066ddc3cf10a1444fece7691 Mon Sep 17 00:00:00 2001
From: Kagami Sascha Rosylight <saschanaz@outlook.com>
Date: Wed, 5 Jul 2023 06:54:40 +0200
Subject: feat(frontend): allow cropping images on drive (#11092)

* feat(frontend): allow cropping images on drive

* nanka iroiro

* folder

---------

Co-authored-by: tamaina <tamaina@hotmail.co.jp>
---
 .../frontend/src/components/MkPostFormAttaches.vue  | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

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

diff --git a/packages/frontend/src/components/MkPostFormAttaches.vue b/packages/frontend/src/components/MkPostFormAttaches.vue
index 18fa142ebc..c50d025ab3 100644
--- a/packages/frontend/src/components/MkPostFormAttaches.vue
+++ b/packages/frontend/src/components/MkPostFormAttaches.vue
@@ -16,6 +16,7 @@
 
 <script lang="ts" setup>
 import { defineAsyncComponent } from 'vue';
+import * as misskey from 'misskey-js';
 import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
@@ -30,8 +31,9 @@ const props = defineProps<{
 const emit = defineEmits<{
 	(ev: 'update:modelValue', value: any[]): void;
 	(ev: 'detach', id: string): void;
-	(ev: 'changeSensitive'): void;
-	(ev: 'changeName'): void;
+	(ev: 'changeSensitive', file: misskey.entities.DriveFile, isSensitive: boolean): void;
+	(ev: 'changeName', file: misskey.entities.DriveFile, newName: string): void;
+	(ev: 'replaceFile', file: misskey.entities.DriveFile, newFile: misskey.entities.DriveFile): void;
 }>();
 
 let menuShowing = false;
@@ -85,8 +87,15 @@ async function describe(file) {
 	}, 'closed');
 }
 
-function showFileMenu(file, ev: MouseEvent) {
+async function crop(file: misskey.entities.DriveFile): Promise<void> {
+	const newFile = await os.cropImage(file, { aspectRatio: NaN });
+	emit('replaceFile', file, newFile);
+}
+
+function showFileMenu(file: misskey.entities.DriveFile, ev: MouseEvent): void {
 	if (menuShowing) return;
+
+	const isImage = file.type.startsWith('image/');
 	os.popupMenu([{
 		text: i18n.ts.renameFile,
 		icon: 'ti ti-forms',
@@ -99,7 +108,11 @@ function showFileMenu(file, ev: MouseEvent) {
 		text: i18n.ts.describeFile,
 		icon: 'ti ti-text-caption',
 		action: () => { describe(file); },
-	}, {
+	}, ...isImage ? [{
+		text: i18n.ts.cropImage,
+		icon: 'ti ti-crop',
+		action: () : void => { crop(file); },
+	}] : [], {
 		text: i18n.ts.attachCancel,
 		icon: 'ti ti-circle-x',
 		action: () => { detachMedia(file.id); },
-- 
cgit v1.2.3-freya


From 46f86a9146b4400f85253d9110e0d3be39e8fb9c Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 20 Jul 2023 20:17:40 +0900
Subject: :art:

---
 packages/frontend/src/components/MkMediaImage.vue       | 2 +-
 packages/frontend/src/components/MkPostFormAttaches.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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

diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue
index 9791a88f7c..05df5b7990 100644
--- a/packages/frontend/src/components/MkMediaImage.vue
+++ b/packages/frontend/src/components/MkMediaImage.vue
@@ -30,7 +30,7 @@
 		<div :class="$style.indicators">
 			<div v-if="['image/gif', 'image/apng'].includes(image.type)" :class="$style.indicator">GIF</div>
 			<div v-if="image.comment" :class="$style.indicator">ALT</div>
-			<div v-if="image.isSensitive" :class="$style.indicator" style="color: var(--warn);">NSFW</div>
+			<div v-if="image.isSensitive" :class="$style.indicator" style="color: var(--warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></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>
diff --git a/packages/frontend/src/components/MkPostFormAttaches.vue b/packages/frontend/src/components/MkPostFormAttaches.vue
index c50d025ab3..f419c75cad 100644
--- a/packages/frontend/src/components/MkPostFormAttaches.vue
+++ b/packages/frontend/src/components/MkPostFormAttaches.vue
@@ -5,7 +5,7 @@
 			<div :class="$style.file" @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)">
 				<MkDriveFileThumbnail :data-id="element.id" :class="$style.thumbnail" :file="element" fit="cover"/>
 				<div v-if="element.isSensitive" :class="$style.sensitive">
-					<i class="ti ti-alert-triangle" style="margin: auto;"></i>
+					<i class="ti ti-eye-exclamation" style="margin: auto;"></i>
 				</div>
 			</div>
 		</template>
-- 
cgit v1.2.3-freya

