Backport #4674 (#4708)

locales/en-US.yml

@@ -877,7 +877,6 @@ desktop/views/components/post-form.vue:
   posting: "Posting"
   attach-media-from-local: "Attach media from your device"
   attach-media-from-drive: "Attach media from your Drive"
-  attach-cancel: "Cancel attachment"
   insert-a-kao: "v('ω')v"
   create-poll: "Create a poll"
   text-remain: "{} characters remaining"
@@ -970,6 +969,10 @@ common/views/components/password-settings.vue:
   not-match: "The new passwords do not match"
   changed: "Password changed"
   failed: "Failed to change password"
+common/views/components/post-form-attaches.vue:
+  attach-cancel: "Remove Attachment"
+  mark-as-sensitive: "Mark as 'sensitive'"
+  unmark-as-sensitive: "Unmark as 'sensitive'"
 desktop/views/components/sub-note-content.vue:
   private: "This post is private"
   deleted: "This post has been deleted"

locales/ja-JP.yml

@@ -967,7 +967,6 @@ desktop/views/components/post-form.vue:
   posting: "投稿中"
   attach-media-from-local: "PCからメディアを添付"
   attach-media-from-drive: "ドライブからメディアを添付"
-  attach-cancel: "添付取り消し"
   insert-a-kao: "v('ω')v"
   create-poll: "アンケートを作成"
   text-remain: "残り{}文字"
@@ -1073,6 +1072,11 @@ common/views/components/password-settings.vue:
   changed: "パスワードを変更しました"
   failed: "パスワード変更に失敗しました"
 
+common/views/components/post-form-attaches.vue:
+  attach-cancel: "添付取り消し"
+  mark-as-sensitive: "閲覧注意に設定"
+  unmark-as-sensitive: "閲覧注意を解除"
+
 desktop/views/components/sub-note-content.vue:
   private: "この投稿は非公開です"
   deleted: "この投稿は削除されました"

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 && file.properties.avgColor.length == 3 ? `rgb(${file.properties.avgColor.join(',')})` : '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() {
@@ -244,7 +242,7 @@ export default Vue.extend({
 
 		> div:nth-child(1)
 			> .thumbnail
-				display block
+				display flex
 				width 64px
 				height 64px
 				background-size cover

src/client/app/common/views/components/post-form-attaches.vue

@@ -0,0 +1,140 @@
+<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)
+				background-color: rgba(128, 128, 128, 0.3)
+
+			> .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>

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-post-form-attaches class="files" :files="files" :detachMediaFn="detachMedia"/>
-				<x-draggable :list="files" :options="{ animation: 150 }">
-					<div v-for="file in files" :key="file.id">
-						<div class="img" :style="{ backgroundImage: `url(${file.thumbnailUrl || '/assets/thumbnail-not-available.png'})` }" :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>
 			<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,35 +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
-
-				> .img
-					width 64px
-					height 64px
-					background-size cover
-					background-position center center
-					background-color: rgba(128, 128, 128, 0.3)
-
-				> .remove
-					position absolute
-					top -6px
-					right -6px
-					width 16px
-					height 16px
-					cursor pointer
-
 	> input[type=file]
 		display none
 

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

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-post-form-attaches class="files" :files="files" :detachMediaFn="detachMedia"/>
-				<x-draggable :list="files" :options="{ animation: 150 }">
-					<div v-for="file in files" :key="file.id">
-						<div class="img" :style="{ backgroundImage: `url(${file.thumbnailUrl || '/assets/thumbnail-not-available.png'})` }" :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>
 			<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: {

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-post-form-attaches class="attaches" :files="files"/>
-				<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 || '/assets/thumbnail-not-available.png'})`" @click="detachMedia(file)"></div>
-					</div>
-				</x-draggable>
-			</div>
 			<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) {
+		detachMedia(id) {
-			this.files = this.files.filter(x => x.id != file.id);
+			this.files = this.files.filter(x => x.id != id);
 			this.$emit('change-attached-files', this.files);
 		},
 
@@ -481,33 +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
-							background-color: rgba(128, 128, 128, 0.3)
-
 			> .mk-uploader
 				margin 8px 0 0 0
 				padding 8px