From 7c9fb5228b2436c0505c4b857864ef31672f75dc Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 13 Nov 2018 15:01:05 +0900
Subject: [PATCH] Improve usability

---
 .../app/common/views/widgets/photo-stream.vue | 23 +++++++++++--
 .../app/desktop/views/widgets/post-form.vue   | 32 ++++++++++++++++++-
 2 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/src/client/app/common/views/widgets/photo-stream.vue b/src/client/app/common/views/widgets/photo-stream.vue
index 72658707c..202633a3f 100644
--- a/src/client/app/common/views/widgets/photo-stream.vue
+++ b/src/client/app/common/views/widgets/photo-stream.vue
@@ -5,7 +5,13 @@
 
 		<p :class="$style.fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
 		<div :class="$style.stream" v-if="!fetching && images.length > 0">
-			<div v-for="image in images" :class="$style.img" :style="`background-image: url(${image.thumbnailUrl || image.url})`"></div>
+			<div v-for="image in images"
+				:class="$style.img"
+				:style="`background-image: url(${image.thumbnailUrl || image.url})`"
+				draggable="true"
+				@dragstart="onDragstart(image, $event)"
+				@dragend="onDragend"
+			></div>
 		</div>
 		<p :class="$style.empty" v-if="!fetching && images.length == 0">{{ $t('no-photos') }}</p>
 	</mk-widget-container>
@@ -31,6 +37,7 @@ export default define({
 			connection: null
 		};
 	},
+
 	mounted() {
 		this.connection = this.$root.stream.useSharedConnection('main');
 
@@ -44,9 +51,11 @@ export default define({
 			this.fetching = false;
 		});
 	},
+
 	beforeDestroy() {
 		this.connection.dispose();
 	},
+
 	methods: {
 		onDriveFileCreated(file) {
 			if (/^image\/.+$/.test(file.type)) {
@@ -54,6 +63,7 @@ export default define({
 				if (this.images.length > 9) this.images.pop();
 			}
 		},
+
 		func() {
 			if (this.props.design == 2) {
 				this.props.design = 0;
@@ -62,7 +72,16 @@ export default define({
 			}
 
 			this.save();
-		}
+		},
+
+		onDragstart(file, e) {
+			e.dataTransfer.effectAllowed = 'move';
+			e.dataTransfer.setData('mk_drive_file', JSON.stringify(file));
+		},
+
+		onDragend(e) {
+			this.browser.isDragSource = false;
+		},
 	}
 });
 </script>
diff --git a/src/client/app/desktop/views/widgets/post-form.vue b/src/client/app/desktop/views/widgets/post-form.vue
index 2e382dbe6..36cf30bbe 100644
--- a/src/client/app/desktop/views/widgets/post-form.vue
+++ b/src/client/app/desktop/views/widgets/post-form.vue
@@ -3,7 +3,10 @@
 	<mk-widget-container :show-header="props.design == 0">
 		<template slot="header"><fa icon="pencil-alt"/>{{ $t('title') }}</template>
 
-		<div class="lhcuptdmcdkfwmipgazeawoiuxpzaclc-body">
+		<div class="lhcuptdmcdkfwmipgazeawoiuxpzaclc-body"
+			@dragover.stop="onDragover"
+			@drop.stop="onDrop"
+		>
 			<div class="textarea">
 				<textarea
 					:disabled="posting"
@@ -130,6 +133,33 @@ export default define({
 			(this.$refs.uploader as any).upload(file);
 		},
 
+		onDragover(e) {
+			const isFile = e.dataTransfer.items[0].kind == 'file';
+			const isDriveFile = e.dataTransfer.types[0] == 'mk_drive_file';
+			if (isFile || isDriveFile) {
+				e.preventDefault();
+				e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
+			}
+		},
+
+		onDrop(e): void {
+			// ファイルだったら
+			if (e.dataTransfer.files.length > 0) {
+				e.preventDefault();
+				Array.from(e.dataTransfer.files).forEach(this.upload);
+				return;
+			}
+
+			//#region ドライブのファイル
+			const driveFile = e.dataTransfer.getData('mk_drive_file');
+			if (driveFile != null && driveFile != '') {
+				const file = JSON.parse(driveFile);
+				this.files.push(file);
+				e.preventDefault();
+			}
+			//#endregion
+		},
+
 		async emoji() {
 			const Picker = await import('../components/emoji-picker-dialog.vue').then(m => m.default);
 			const button = this.$refs.emoji;