Improve post form attaches; Fix #4673, Resolve #2327, Resolve #2145 [v11] (#4674)

* improve post form attaches

* Fix

* chain

* 右クリックでも反応するように

7 files changed, 161 insertions, 146 deletions

diff --git a/src/client/app/admin/views/drive.vue b/src/client/app/admin/views/drive.vue
index 1f35de100e..e4565b78fe 100644
--- a/src/client/app/admin/views/drive.vue
+++ b/src/client/app/admin/views/drive.vue
@@ -38,7 +38,7 @@
 				<div class="kidvdlkg" v-for="file in files">
 					<div @click="file._open = !file._open">
 						<div>
-							<div class="thumbnail" :style="thumbnail(file)"></div>
+							<x-file-thumbnail class="thumbnail" :file="file" fit="contain" @click="showFileMenu(file)"/>
 						</div>
 						<div>
 							<header>
@@ -75,10 +75,15 @@ import Vue from 'vue';
 import i18n from '../../i18n';
 import { faCloud, faTerminal, faSearch } from '@fortawesome/free-solid-svg-icons';
 import { faTrashAlt, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
+import XFileThumbnail from '../../common/views/components/drive-file-thumbnail.vue';
 
 export default Vue.extend({
 	i18n: i18n('admin/views/drive.vue'),
 
+	components: {
+		XFileThumbnail
+	},
+
 	data() {
 		return {
 			file: null,
@@ -151,13 +156,6 @@ export default Vue.extend({
 			});
 		},
 
-		thumbnail(file: any): any {
-			return {
-				'background-color': file.properties.avgColor || 'transparent',
-				'background-image': `url(${file.thumbnailUrl})`
-			};
-		},
-
 		async del(file: any) {
 			const process = async () => {
 				await this.$root.api('drive/files/delete', { fileId: file.id });
@@ -179,9 +177,9 @@ export default Vue.extend({
 			this.$root.api('drive/files/update', {
 				fileId: file.id,
 				isSensitive: !file.isSensitive
+			}).then(() => {
+				file.isSensitive = !file.isSensitive;
 			});
-
-			file.isSensitive = !file.isSensitive;
 		},
 
 		async show() {
diff --git a/src/client/app/common/views/components/drive-file-thumbnail.vue b/src/client/app/common/views/components/drive-file-thumbnail.vue
index c432de1721..1a3ef37193 100644
--- a/src/client/app/common/views/components/drive-file-thumbnail.vue
+++ b/src/client/app/common/views/components/drive-file-thumbnail.vue
@@ -105,9 +105,7 @@ export default Vue.extend({
 		},
 		isThumbnailAvailable(): boolean {
 			return this.file.thumbnailUrl
-				? this.file.thumbnailUrl.endsWith('?thumbnail')
-					? (this.is === 'image' || this.is === 'video')
-					: true
+				? (this.is === 'image' || this.is === 'video')
 				: false;
 		},
 		background(): string {
diff --git a/src/client/app/common/views/components/post-form-attaches.vue b/src/client/app/common/views/components/post-form-attaches.vue
new file mode 100644
index 0000000000..467e430ccf
--- /dev/null
+++ b/src/client/app/common/views/components/post-form-attaches.vue
@@ -0,0 +1,139 @@
+<template>
+<div class="skeikyzd" v-show="files.length != 0">
+	<x-draggable class="files" :list="files" :options="{ animation: 150 }">
+		<div v-for="file in files" :key="file.id" @click="showFileMenu(file, $event)" @contextmenu.prevent="showFileMenu(file, $event)">
+			<x-file-thumbnail :data-id="file.id" class="thumbnail" :file="file" fit="cover"/>
+			<img class="remove" @click.stop="detachMedia(file.id)" src="/assets/desktop/remove.png" :title="$t('attach-cancel')" alt=""/>
+			<div class="sensitive" v-if="file.isSensitive">
+				<fa class="icon" :icon="faExclamationTriangle"/>
+			</div>
+		</div>
+	</x-draggable>
+	<p class="remain">{{ 4 - files.length }}/4</p>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import * as XDraggable from 'vuedraggable';
+import XMenu from '../../../common/views/components/menu.vue';
+import { faTimesCircle, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import XFileThumbnail from './drive-file-thumbnail.vue'
+
+export default Vue.extend({
+	i18n: i18n('common/views/components/post-form-attaches.vue'),
+
+	components: {
+		XDraggable,
+		XFileThumbnail
+	},
+
+	props: {
+		files: {
+			type: Object,
+			required: true
+		},
+		detachMediaFn: {
+			type: Object,
+			required: false
+		}
+	},
+
+	data() {
+		return {
+			faExclamationTriangle
+		};
+	},
+
+	methods: {
+		detachMedia(id) {
+			if (this.detachMediaFn) this.detachMediaFn(id)
+			else if (this.$parent.detachMedia) this.$parent.detachMedia(id)
+		},
+		toggleSensitive(file) {
+			this.$root.api('drive/files/update', {
+				fileId: file.id,
+				isSensitive: !file.isSensitive
+			}).then(() => {
+				file.isSensitive = !file.isSensitive;
+			});
+		},
+		showFileMenu(file, ev: MouseEvent) {
+			this.$root.new(XMenu, {
+				items: [{
+					type: 'item',
+					text: file.isSensitive ? this.$t('unmark-as-sensitive') : this.$t('mark-as-sensitive'),
+					icon: file.isSensitive ? faEyeSlash : faEye,
+					action: () => { this.toggleSensitive(file) }
+				}, {
+					type: 'item',
+					text: this.$t('attach-cancel'),
+					icon: faTimesCircle,
+					action: () => { this.detachMedia(file.id) }
+				}],
+				source: ev.currentTarget || ev.target
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.skeikyzd
+	padding 4px
+
+	> .files
+		display flex
+		flex-wrap wrap
+
+		> div
+			width 64px
+			height 64px
+			margin 4px
+			cursor move
+
+			&:hover > .remove
+				display block
+
+			> .thumbnail
+				width 100%
+				height 100%
+				z-index 1
+				color var(--text)
+
+			> .remove
+				display none
+				position absolute
+				top -6px
+				right -6px
+				width 16px
+				height 16px
+				cursor pointer
+				z-index 1000
+
+			> .sensitive
+				display flex
+				position absolute
+				width 64px
+				height 64px
+				top 0
+				left 0
+				z-index 2
+				background rgba(17, 17, 17, .7)
+				color #fff
+
+				> .icon
+					margin auto
+
+	> .remain
+		display block
+		position absolute
+		top 8px
+		right 8px
+		margin 0
+		padding 0
+		color var(--primaryAlpha04)
+
+</style>
diff --git a/src/client/app/common/views/widgets/post-form.vue b/src/client/app/common/views/widgets/post-form.vue
index f1826cc59f..b30168b879 100644
--- a/src/client/app/common/views/widgets/post-form.vue
+++ b/src/client/app/common/views/widgets/post-form.vue
@@ -21,14 +21,7 @@
 					<fa :icon="['far', 'laugh']"/>
 				</button>
 			</div>
-			<div class="files" v-show="files.length != 0">
-				<x-draggable :list="files" :options="{ animation: 150 }">
-					<div v-for="file in files" :key="file.id">
-						<div class="img" :style="{ backgroundImage: `url(${file.thumbnailUrl})` }" :title="file.name"></div>
-						<img class="remove" @click="detachMedia(file.id)" src="/assets/desktop/remove.png" :title="$t('attach-cancel')" alt=""/>
-					</div>
-				</x-draggable>
-			</div>
+			<x-post-form-attaches class="files" :files="files" :detachMediaFn="detachMedia"/>
 			<input ref="file" type="file" multiple="multiple" tabindex="-1" @change="onChangeFile"/>
 			<mk-uploader ref="uploader" @uploaded="attachMedia"/>
 			<footer>
@@ -45,7 +38,7 @@
 import define from '../../../common/define-widget';
 import i18n from '../../../i18n';
 import insertTextAtCursor from 'insert-text-at-cursor';
-import * as XDraggable from 'vuedraggable';
+import XPostFormAttaches from '../components/post-form-attaches.vue';
 
 export default define({
 	name: 'post-form',
@@ -56,7 +49,7 @@ export default define({
 	i18n: i18n('desktop/views/widgets/post-form.vue'),
 
 	components: {
-		XDraggable
+		XPostFormAttaches
 	},
 
 	data() {
@@ -249,38 +242,6 @@ export default define({
 				& + .emoji
 					opacity 0.7
 
-	> .files
-		> div
-			padding 4px
-
-			&:after
-				content ""
-				display block
-				clear both
-
-			> div
-				float left
-				border solid 4px transparent
-				cursor move
-
-				&:hover > .remove
-					display block
-
-				> .img
-					width 64px
-					height 64px
-					background-size cover
-					background-position center center
-
-				> .remove
-					display none
-					position absolute
-					top -6px
-					right -6px
-					width 16px
-					height 16px
-					cursor pointer
-
 	> input[type=file]
 		display none
 
diff --git a/src/client/app/desktop/views/components/drive.vue b/src/client/app/desktop/views/components/drive.vue
index 7513f002a7..fcabb4b8eb 100644
--- a/src/client/app/desktop/views/components/drive.vue
+++ b/src/client/app/desktop/views/components/drive.vue
@@ -769,7 +769,6 @@ export default Vue.extend({
 	> .mk-uploader
 		height 100px
 		padding 16px
-		background #fff
 
 	> input
 		display none
diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index 6ba4d47087..fe39a17e67 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -27,15 +27,7 @@
 			<button class="emoji" @click="emoji" ref="emoji">
 				<fa :icon="['far', 'laugh']"/>
 			</button>
-			<div class="files" :class="{ with: poll }" v-show="files.length != 0">
-				<x-draggable :list="files" :options="{ animation: 150 }">
-					<div v-for="file in files" :key="file.id">
-						<div class="img" :style="{ backgroundImage: `url(${file.thumbnailUrl})` }" :title="file.name"></div>
-						<img class="remove" @click="detachMedia(file.id)" src="/assets/desktop/remove.png" :title="$t('attach-cancel')" alt=""/>
-					</div>
-				</x-draggable>
-				<p class="remain">{{ 4 - files.length }}/4</p>
-			</div>
+			<x-post-form-attaches class="files" :class="{ with: poll }" :files="files"/>
 			<mk-poll-editor v-if="poll" ref="poll" @destroyed="poll = false" @updated="onPollUpdate()"/>
 		</div>
 	</div>
@@ -65,7 +57,6 @@
 import Vue from 'vue';
 import i18n from '../../../i18n';
 import insertTextAtCursor from 'insert-text-at-cursor';
-import * as XDraggable from 'vuedraggable';
 import getFace from '../../../common/scripts/get-face';
 import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue';
 import { parse } from '../../../../../mfm/parse';
@@ -74,13 +65,14 @@ import { erase, unique } from '../../../../../prelude/array';
 import { length } from 'stringz';
 import { toASCII } from 'punycode';
 import extractMentions from '../../../../../misc/extract-mentions';
+import XPostFormAttaches from '../../../common/views/components/post-form-attaches.vue';
 
 export default Vue.extend({
 	i18n: i18n('desktop/views/components/post-form.vue'),
 
 	components: {
-		XDraggable,
-		MkVisibilityChooser
+		MkVisibilityChooser,
+		XPostFormAttaches
 	},
 
 	props: {
@@ -513,7 +505,7 @@ export default Vue.extend({
 
 		kao() {
 			this.text += getFace();
-		}
+		},
 	}
 });
 </script>
@@ -618,46 +610,6 @@ export default Vue.extend({
 					border-bottom solid 1px var(--primaryAlpha01) !important
 					border-radius 0
 
-				> .remain
-					display block
-					position absolute
-					top 8px
-					right 8px
-					margin 0
-					padding 0
-					color var(--primaryAlpha04)
-
-				> div
-					padding 4px
-
-					&:after
-						content ""
-						display block
-						clear both
-
-					> div
-						float left
-						border solid 4px transparent
-						cursor move
-
-						&:hover > .remove
-							display block
-
-						> .img
-							width 64px
-							height 64px
-							background-size cover
-							background-position center center
-
-						> .remove
-							display none
-							position absolute
-							top -6px
-							right -6px
-							width 16px
-							height 16px
-							cursor pointer
-
 			> .mk-poll-editor
 				background var(--desktopPostFormTextareaBg)
 				border solid 1px var(--primaryAlpha01)
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index 9c1072b4a3..6b26cdf890 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -21,13 +21,7 @@
 			</div>
 			<input v-show="useCw" ref="cw" v-model="cw" :placeholder="$t('annotations')" v-autocomplete="{ model: 'cw' }">
 			<textarea v-model="text" ref="text" :disabled="posting" :placeholder="placeholder" v-autocomplete="{ model: 'text' }"></textarea>
-			<div class="attaches" v-show="files.length != 0">
-				<x-draggable class="files" :list="files" :options="{ animation: 150 }">
-					<div class="file" v-for="file in files" :key="file.id">
-						<div class="img" :style="`background-image: url(${file.thumbnailUrl})`" @click="detachMedia(file)"></div>
-					</div>
-				</x-draggable>
-			</div>
+			<x-post-form-attaches class="attaches" :files="files"/>
 			<mk-poll-editor v-if="poll" ref="poll" @destroyed="poll = false" @updated="onPollUpdate()"/>
 			<mk-uploader ref="uploader" @uploaded="attachMedia" @change="onChangeUploadings"/>
 			<footer>
@@ -57,7 +51,6 @@
 import Vue from 'vue';
 import i18n from '../../../i18n';
 import insertTextAtCursor from 'insert-text-at-cursor';
-import * as XDraggable from 'vuedraggable';
 import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue';
 import getFace from '../../../common/scripts/get-face';
 import { parse } from '../../../../../mfm/parse';
@@ -66,11 +59,12 @@ import { erase, unique } from '../../../../../prelude/array';
 import { length } from 'stringz';
 import { toASCII } from 'punycode';
 import extractMentions from '../../../../../misc/extract-mentions';
+import XPostFormAttaches from '../../../common/views/components/post-form-attaches.vue';
 
 export default Vue.extend({
 	i18n: i18n('mobile/views/components/post-form.vue'),
 	components: {
-		XDraggable
+		XPostFormAttaches
 	},
 
 	props: {
@@ -264,8 +258,8 @@ export default Vue.extend({
 			this.$emit('change-attached-files', this.files);
 		},
 
-		detachMedia(file) {
-			this.files = this.files.filter(x => x.id != file.id);
+		detachMedia(id) {
+			this.files = this.files.filter(x => x.id != id);
 			this.$emit('change-attached-files', this.files);
 		},
 
@@ -481,32 +475,6 @@ export default Vue.extend({
 				min-width 100%
 				min-height 80px
 
-			> .attaches
-
-				> .files
-					display block
-					margin 0
-					padding 4px
-					list-style none
-
-					&:after
-						content ""
-						display block
-						clear both
-
-					> .file
-						display block
-						float left
-						margin 0
-						padding 0
-						border solid 4px transparent
-
-						> .img
-							width 64px
-							height 64px
-							background-size cover
-							background-position center center
-
 			> .mk-uploader
 				margin 8px 0 0 0
 				padding 8px