From 2fbd7ff3c68f0d4f4b19dd42f7058532ea6ee5b6 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 23 Feb 2018 07:56:35 +0900
Subject: :v:

---
 .../app/desktop/views/components/drive-file.vue    | 319 ---------------------
 .../app/desktop/views/components/drive-folder.vue  | 267 -----------------
 .../desktop/views/components/drive-nav-folder.vue  | 108 -------
 .../app/desktop/views/components/drive.file.vue    | 319 +++++++++++++++++++++
 .../app/desktop/views/components/drive.folder.vue  | 267 +++++++++++++++++
 .../desktop/views/components/drive.nav-folder.vue  | 108 +++++++
 src/web/app/desktop/views/components/drive.vue     |  16 +-
 src/web/app/desktop/views/components/index.ts      |   6 -
 8 files changed, 706 insertions(+), 704 deletions(-)
 delete mode 100644 src/web/app/desktop/views/components/drive-file.vue
 delete mode 100644 src/web/app/desktop/views/components/drive-folder.vue
 delete mode 100644 src/web/app/desktop/views/components/drive-nav-folder.vue
 create mode 100644 src/web/app/desktop/views/components/drive.file.vue
 create mode 100644 src/web/app/desktop/views/components/drive.folder.vue
 create mode 100644 src/web/app/desktop/views/components/drive.nav-folder.vue

diff --git a/src/web/app/desktop/views/components/drive-file.vue b/src/web/app/desktop/views/components/drive-file.vue
deleted file mode 100644
index ffdf7ef57e..0000000000
--- a/src/web/app/desktop/views/components/drive-file.vue
+++ /dev/null
@@ -1,319 +0,0 @@
-<template>
-<div class="mk-drive-file"
-	:data-is-selected="isSelected"
-	:data-is-contextmenu-showing="isContextmenuShowing"
-	@click="onClick"
-	draggable="true"
-	@dragstart="onDragstart"
-	@dragend="onDragend"
-	@contextmenu.prevent.stop="onContextmenu"
-	:title="title"
->
-	<div class="label" v-if="os.i.avatar_id == file.id"><img src="/assets/label.svg"/>
-		<p>%i18n:desktop.tags.mk-drive-browser-file.avatar%</p>
-	</div>
-	<div class="label" v-if="os.i.banner_id == file.id"><img src="/assets/label.svg"/>
-		<p>%i18n:desktop.tags.mk-drive-browser-file.banner%</p>
-	</div>
-	<div class="thumbnail" ref="thumbnail" :style="`background-color: ${ background }`">
-		<img :src="`${file.url}?thumbnail&size=128`" alt="" @load="onThumbnailLoaded"/>
-	</div>
-	<p class="name">
-		<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }}</span>
-		<span class="ext" v-if="file.name.lastIndexOf('.') != -1">{{ file.name.substr(file.name.lastIndexOf('.')) }}</span>
-	</p>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import * as anime from 'animejs';
-import contextmenu from '../../api/contextmenu';
-import copyToClipboard from '../../../common/scripts/copy-to-clipboard';
-
-export default Vue.extend({
-	props: ['file'],
-	data() {
-		return {
-			isContextmenuShowing: false,
-			isDragging: false
-		};
-	},
-	computed: {
-		browser(): any {
-			return this.$parent;
-		},
-		isSelected(): boolean {
-			return this.browser.selectedFiles.some(f => f.id == this.file.id);
-		},
-		title(): string {
-			return `${this.file.name}\n${this.file.type} ${Vue.filter('bytes')(this.file.datasize)}`;
-		},
-		background(): string {
-			return this.file.properties.average_color
-				? `rgb(${this.file.properties.average_color.join(',')})'`
-				: 'transparent';
-		}
-	},
-	methods: {
-		onClick() {
-			this.browser.chooseFile(this.file);
-		},
-
-		onContextmenu(e) {
-			this.isContextmenuShowing = true;
-			contextmenu(e, [{
-				type: 'item',
-				text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.rename%',
-				icon: '%fa:i-cursor%',
-				onClick: this.rename
-			}, {
-				type: 'item',
-				text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copy-url%',
-				icon: '%fa:link%',
-				onClick: this.copyUrl
-			}, {
-				type: 'link',
-				href: `${this.file.url}?download`,
-				text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.download%',
-				icon: '%fa:download%',
-			}, {
-				type: 'divider',
-			}, {
-				type: 'item',
-				text: '%i18n:common.delete%',
-				icon: '%fa:R trash-alt%',
-				onClick: this.deleteFile
-			}, {
-				type: 'divider',
-			}, {
-				type: 'nest',
-				text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.else-files%',
-				menu: [{
-					type: 'item',
-					text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.set-as-avatar%',
-					onClick: this.setAsAvatar
-				}, {
-					type: 'item',
-					text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.set-as-banner%',
-					onClick: this.setAsBanner
-				}]
-			}, {
-				type: 'nest',
-				text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.open-in-app%',
-				menu: [{
-					type: 'item',
-					text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.add-app%...',
-					onClick: this.addApp
-				}]
-			}], {
-				closed: () => {
-					this.isContextmenuShowing = false;
-				}
-			});
-		},
-
-		onDragstart(e) {
-			e.dataTransfer.effectAllowed = 'move';
-			e.dataTransfer.setData('text', JSON.stringify({
-				type: 'file',
-				id: this.file.id,
-				file: this.file
-			}));
-			this.isDragging = true;
-
-			// 親ブラウザに対して、ドラッグが開始されたフラグを立てる
-			// (=あなたの子供が、ドラッグを開始しましたよ)
-			this.browser.isDragSource = true;
-		},
-
-		onDragend(e) {
-			this.isDragging = false;
-			this.browser.isDragSource = false;
-		},
-
-		onThumbnailLoaded() {
-			if (this.file.properties.average_color) {
-				anime({
-					targets: this.$refs.thumbnail,
-					backgroundColor: `rgba(${this.file.properties.average_color.join(',')}, 0)`,
-					duration: 100,
-					easing: 'linear'
-				});
-			}
-		},
-
-		rename() {
-			(this as any).apis.input({
-				title: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.rename-file%',
-				placeholder: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.input-new-file-name%',
-				default: this.file.name,
-				allowEmpty: false
-			}).then(name => {
-				(this as any).api('drive/files/update', {
-					file_id: this.file.id,
-					name: name
-				})
-			});
-		},
-
-		copyUrl() {
-			copyToClipboard(this.file.url);
-			(this as any).apis.dialog({
-				title: '%fa:check%%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copied%',
-				text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copied-url-to-clipboard%',
-				actions: [{
-					text: '%i18n:common.ok%'
-				}]
-			});
-		},
-
-		setAsAvatar() {
-			(this as any).apis.updateAvatar(this.file);
-		},
-
-		setAsBanner() {
-			(this as any).apis.updateBanner(this.file);
-		},
-
-		addApp() {
-			alert('not implemented yet');
-		},
-
-		deleteFile() {
-			alert('not implemented yet');
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-drive-file
-	padding 8px 0 0 0
-	height 180px
-	border-radius 4px
-
-	&, *
-		cursor pointer
-
-	&:hover
-		background rgba(0, 0, 0, 0.05)
-
-		> .label
-			&:before
-			&:after
-				background #0b65a5
-
-	&:active
-		background rgba(0, 0, 0, 0.1)
-
-		> .label
-			&:before
-			&:after
-				background #0b588c
-
-	&[data-is-selected]
-		background $theme-color
-
-		&:hover
-			background lighten($theme-color, 10%)
-
-		&:active
-			background darken($theme-color, 10%)
-
-		> .label
-			&:before
-			&:after
-				display none
-
-		> .name
-			color $theme-color-foreground
-
-	&[data-is-contextmenu-showing]
-		&:after
-			content ""
-			pointer-events none
-			position absolute
-			top -4px
-			right -4px
-			bottom -4px
-			left -4px
-			border 2px dashed rgba($theme-color, 0.3)
-			border-radius 4px
-
-	> .label
-		position absolute
-		top 0
-		left 0
-		pointer-events none
-
-		&:before
-			content ""
-			display block
-			position absolute
-			z-index 1
-			top 0
-			left 57px
-			width 28px
-			height 8px
-			background #0c7ac9
-
-		&:after
-			content ""
-			display block
-			position absolute
-			z-index 1
-			top 57px
-			left 0
-			width 8px
-			height 28px
-			background #0c7ac9
-
-		> img
-			position absolute
-			z-index 2
-			top 0
-			left 0
-
-		> p
-			position absolute
-			z-index 3
-			top 19px
-			left -28px
-			width 120px
-			margin 0
-			text-align center
-			line-height 28px
-			color #fff
-			transform rotate(-45deg)
-
-	> .thumbnail
-		width 128px
-		height 128px
-		margin auto
-
-		> img
-			display block
-			position absolute
-			top 0
-			left 0
-			right 0
-			bottom 0
-			margin auto
-			max-width 128px
-			max-height 128px
-			pointer-events none
-
-	> .name
-		display block
-		margin 4px 0 0 0
-		font-size 0.8em
-		text-align center
-		word-break break-all
-		color #444
-		overflow hidden
-
-		> .ext
-			opacity 0.5
-
-</style>
diff --git a/src/web/app/desktop/views/components/drive-folder.vue b/src/web/app/desktop/views/components/drive-folder.vue
deleted file mode 100644
index efb9df30f8..0000000000
--- a/src/web/app/desktop/views/components/drive-folder.vue
+++ /dev/null
@@ -1,267 +0,0 @@
-<template>
-<div class="mk-drive-folder"
-	:data-is-contextmenu-showing="isContextmenuShowing"
-	:data-draghover="draghover"
-	@click="onClick"
-	@mouseover="onMouseover"
-	@mouseout="onMouseout"
-	@dragover.prevent.stop="onDragover"
-	@dragenter.prevent="onDragenter"
-	@dragleave="onDragleave"
-	@drop.prevent.stop="onDrop"
-	draggable="true"
-	@dragstart="onDragstart"
-	@dragend="onDragend"
-	@contextmenu.prevent.stop="onContextmenu"
-	:title="title"
->
-	<p class="name">
-		<template v-if="hover">%fa:R folder-open .fw%</template>
-		<template v-if="!hover">%fa:R folder .fw%</template>
-		{{ folder.name }}
-	</p>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import contextmenu from '../../api/contextmenu';
-
-export default Vue.extend({
-	props: ['folder'],
-	data() {
-		return {
-			hover: false,
-			draghover: false,
-			isDragging: false,
-			isContextmenuShowing: false
-		};
-	},
-	computed: {
-		browser(): any {
-			return this.$parent;
-		},
-		title(): string {
-			return this.folder.name;
-		}
-	},
-	methods: {
-		onClick() {
-			this.browser.move(this.folder);
-		},
-
-		onContextmenu(e) {
-			this.isContextmenuShowing = true;
-			contextmenu(e, [{
-				type: 'item',
-				text: '%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.move-to-this-folder%',
-				icon: '%fa:arrow-right%',
-				onClick: this.go
-			}, {
-				type: 'item',
-				text: '%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.show-in-new-window%',
-				icon: '%fa:R window-restore%',
-				onClick: this.newWindow
-			}, {
-				type: 'divider',
-			}, {
-				type: 'item',
-				text: '%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.rename%',
-				icon: '%fa:i-cursor%',
-				onClick: this.rename
-			}, {
-				type: 'divider',
-			}, {
-				type: 'item',
-				text: '%i18n:common.delete%',
-				icon: '%fa:R trash-alt%',
-				onClick: this.deleteFolder
-			}], {
-				closed: () => {
-					this.isContextmenuShowing = false;
-				}
-			});
-		},
-
-		onMouseover() {
-			this.hover = true;
-		},
-
-		onMouseout() {
-			this.hover = false
-		},
-
-		onDragover(e) {
-			// 自分自身がドラッグされていない場合
-			if (!this.isDragging) {
-				// ドラッグされてきたものがファイルだったら
-				if (e.dataTransfer.effectAllowed === 'all') {
-					e.dataTransfer.dropEffect = 'copy';
-				} else {
-					e.dataTransfer.dropEffect = 'move';
-				}
-			} else {
-				// 自分自身にはドロップさせない
-				e.dataTransfer.dropEffect = 'none';
-			}
-			return false;
-		},
-
-		onDragenter() {
-			if (!this.isDragging) this.draghover = true;
-		},
-
-		onDragleave() {
-			this.draghover = false;
-		},
-
-		onDrop(e) {
-			this.draghover = false;
-
-			// ファイルだったら
-			if (e.dataTransfer.files.length > 0) {
-				Array.from(e.dataTransfer.files).forEach(file => {
-					this.browser.upload(file, this.folder);
-				});
-				return false;
-			};
-
-			// データ取得
-			const data = e.dataTransfer.getData('text');
-			if (data == null) return false;
-
-			// パース
-			// TODO: Validate JSON
-			const obj = JSON.parse(data);
-
-			// (ドライブの)ファイルだったら
-			if (obj.type == 'file') {
-				const file = obj.id;
-				this.browser.removeFile(file);
-				(this as any).api('drive/files/update', {
-					file_id: file,
-					folder_id: this.folder.id
-				});
-			// (ドライブの)フォルダーだったら
-			} else if (obj.type == 'folder') {
-				const folder = obj.id;
-				// 移動先が自分自身ならreject
-				if (folder == this.folder.id) return false;
-				this.browser.removeFolder(folder);
-				(this as any).api('drive/folders/update', {
-					folder_id: folder,
-					parent_id: this.folder.id
-				}).then(() => {
-					// something
-				}).catch(err => {
-					switch (err) {
-						case 'detected-circular-definition':
-							(this as any).apis.dialog({
-								title: '%fa:exclamation-triangle%%i18n:desktop.tags.mk-drive-browser-folder.unable-to-process%',
-								text: '%i18n:desktop.tags.mk-drive-browser-folder.circular-reference-detected%',
-								actions: [{
-									text: '%i18n:common.ok%'
-								}]
-							});
-							break;
-						default:
-							alert('%i18n:desktop.tags.mk-drive-browser-folder.unhandled-error% ' + err);
-					}
-				});
-			}
-
-			return false;
-		},
-
-		onDragstart(e) {
-			e.dataTransfer.effectAllowed = 'move';
-			e.dataTransfer.setData('text', JSON.stringify({
-				type: 'folder',
-				id: this.folder.id
-			}));
-			this.isDragging = true;
-
-			// 親ブラウザに対して、ドラッグが開始されたフラグを立てる
-			// (=あなたの子供が、ドラッグを開始しましたよ)
-			this.browser.isDragSource = true;
-		},
-
-		onDragend() {
-			this.isDragging = false;
-			this.browser.isDragSource = false;
-		},
-
-		go() {
-			this.browser.move(this.folder.id);
-		},
-
-		newWindow() {
-			this.browser.newWindow(this.folder);
-		},
-
-		rename() {
-			(this as any).apis.input({
-				title: '%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.rename-folder%',
-				placeholder: '%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.input-new-folder-name%',
-				default: this.folder.name
-			}).then(name => {
-				(this as any).api('drive/folders/update', {
-					folder_id: this.folder.id,
-					name: name
-				});
-			});
-		},
-
-		deleteFolder() {
-			alert('not implemented yet');
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-drive-folder
-	padding 8px
-	height 64px
-	background lighten($theme-color, 95%)
-	border-radius 4px
-
-	&, *
-		cursor pointer
-
-	*
-		pointer-events none
-
-	&:hover
-		background lighten($theme-color, 90%)
-
-	&:active
-		background lighten($theme-color, 85%)
-
-	&[data-is-contextmenu-showing]
-	&[data-draghover]
-		&:after
-			content ""
-			pointer-events none
-			position absolute
-			top -4px
-			right -4px
-			bottom -4px
-			left -4px
-			border 2px dashed rgba($theme-color, 0.3)
-			border-radius 4px
-
-	&[data-draghover]
-		background lighten($theme-color, 90%)
-
-	> .name
-		margin 0
-		font-size 0.9em
-		color darken($theme-color, 30%)
-
-		> [data-fa]
-			margin-right 4px
-			margin-left 2px
-			text-align left
-
-</style>
diff --git a/src/web/app/desktop/views/components/drive-nav-folder.vue b/src/web/app/desktop/views/components/drive-nav-folder.vue
deleted file mode 100644
index 44821087af..0000000000
--- a/src/web/app/desktop/views/components/drive-nav-folder.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-<div class="mk-drive-nav-folder"
-	:data-draghover="draghover"
-	@click="onClick"
-	@dragover.prevent.stop="onDragover"
-	@dragenter="onDragenter"
-	@dragleave="onDragleave"
-	@drop.stop="onDrop"
->
-	<template v-if="folder == null">%fa:cloud%</template>
-	<span>{{ folder == null ? '%i18n:desktop.tags.mk-drive-browser-nav-folder.drive%' : folder.name }}</span>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
-	props: ['folder'],
-	data() {
-		return {
-			hover: false,
-			draghover: false
-		};
-	},
-	computed: {
-		browser(): any {
-			return this.$parent;
-		}
-	},
-	methods: {
-		onClick() {
-			this.browser.move(this.folder);
-		},
-		onMouseover() {
-			this.hover = true;
-		},
-		onMouseout() {
-			this.hover = false;
-		},
-		onDragover(e) {
-			// このフォルダがルートかつカレントディレクトリならドロップ禁止
-			if (this.folder == null && this.browser.folder == null) {
-				e.dataTransfer.dropEffect = 'none';
-			// ドラッグされてきたものがファイルだったら
-			} else if (e.dataTransfer.effectAllowed == 'all') {
-				e.dataTransfer.dropEffect = 'copy';
-			} else {
-				e.dataTransfer.dropEffect = 'move';
-			}
-			return false;
-		},
-		onDragenter() {
-			if (this.folder || this.browser.folder) this.draghover = true;
-		},
-		onDragleave() {
-			if (this.folder || this.browser.folder) this.draghover = false;
-		},
-		onDrop(e) {
-			this.draghover = false;
-
-			// ファイルだったら
-			if (e.dataTransfer.files.length > 0) {
-				Array.from(e.dataTransfer.files).forEach(file => {
-					this.browser.upload(file, this.folder);
-				});
-				return false;
-			};
-
-			// データ取得
-			const data = e.dataTransfer.getData('text');
-			if (data == null) return false;
-
-			// パース
-			// TODO: Validate JSON
-			const obj = JSON.parse(data);
-
-			// (ドライブの)ファイルだったら
-			if (obj.type == 'file') {
-				const file = obj.id;
-				this.browser.removeFile(file);
-				(this as any).api('drive/files/update', {
-					file_id: file,
-					folder_id: this.folder ? this.folder.id : null
-				});
-			// (ドライブの)フォルダーだったら
-			} else if (obj.type == 'folder') {
-				const folder = obj.id;
-				// 移動先が自分自身ならreject
-				if (this.folder && folder == this.folder.id) return false;
-				this.browser.removeFolder(folder);
-				(this as any).api('drive/folders/update', {
-					folder_id: folder,
-					parent_id: this.folder ? this.folder.id : null
-				});
-			}
-
-			return false;
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-drive-nav-folder
-	&[data-draghover]
-		background #eee
-
-</style>
diff --git a/src/web/app/desktop/views/components/drive.file.vue b/src/web/app/desktop/views/components/drive.file.vue
new file mode 100644
index 0000000000..cc423477e9
--- /dev/null
+++ b/src/web/app/desktop/views/components/drive.file.vue
@@ -0,0 +1,319 @@
+<template>
+<div class="root file"
+	:data-is-selected="isSelected"
+	:data-is-contextmenu-showing="isContextmenuShowing"
+	@click="onClick"
+	draggable="true"
+	@dragstart="onDragstart"
+	@dragend="onDragend"
+	@contextmenu.prevent.stop="onContextmenu"
+	:title="title"
+>
+	<div class="label" v-if="os.i.avatar_id == file.id"><img src="/assets/label.svg"/>
+		<p>%i18n:desktop.tags.mk-drive-browser-file.avatar%</p>
+	</div>
+	<div class="label" v-if="os.i.banner_id == file.id"><img src="/assets/label.svg"/>
+		<p>%i18n:desktop.tags.mk-drive-browser-file.banner%</p>
+	</div>
+	<div class="thumbnail" ref="thumbnail" :style="`background-color: ${ background }`">
+		<img :src="`${file.url}?thumbnail&size=128`" alt="" @load="onThumbnailLoaded"/>
+	</div>
+	<p class="name">
+		<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }}</span>
+		<span class="ext" v-if="file.name.lastIndexOf('.') != -1">{{ file.name.substr(file.name.lastIndexOf('.')) }}</span>
+	</p>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as anime from 'animejs';
+import contextmenu from '../../api/contextmenu';
+import copyToClipboard from '../../../common/scripts/copy-to-clipboard';
+
+export default Vue.extend({
+	props: ['file'],
+	data() {
+		return {
+			isContextmenuShowing: false,
+			isDragging: false
+		};
+	},
+	computed: {
+		browser(): any {
+			return this.$parent;
+		},
+		isSelected(): boolean {
+			return this.browser.selectedFiles.some(f => f.id == this.file.id);
+		},
+		title(): string {
+			return `${this.file.name}\n${this.file.type} ${Vue.filter('bytes')(this.file.datasize)}`;
+		},
+		background(): string {
+			return this.file.properties.average_color
+				? `rgb(${this.file.properties.average_color.join(',')})`
+				: 'transparent';
+		}
+	},
+	methods: {
+		onClick() {
+			this.browser.chooseFile(this.file);
+		},
+
+		onContextmenu(e) {
+			this.isContextmenuShowing = true;
+			contextmenu(e, [{
+				type: 'item',
+				text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.rename%',
+				icon: '%fa:i-cursor%',
+				onClick: this.rename
+			}, {
+				type: 'item',
+				text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copy-url%',
+				icon: '%fa:link%',
+				onClick: this.copyUrl
+			}, {
+				type: 'link',
+				href: `${this.file.url}?download`,
+				text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.download%',
+				icon: '%fa:download%',
+			}, {
+				type: 'divider',
+			}, {
+				type: 'item',
+				text: '%i18n:common.delete%',
+				icon: '%fa:R trash-alt%',
+				onClick: this.deleteFile
+			}, {
+				type: 'divider',
+			}, {
+				type: 'nest',
+				text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.else-files%',
+				menu: [{
+					type: 'item',
+					text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.set-as-avatar%',
+					onClick: this.setAsAvatar
+				}, {
+					type: 'item',
+					text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.set-as-banner%',
+					onClick: this.setAsBanner
+				}]
+			}, {
+				type: 'nest',
+				text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.open-in-app%',
+				menu: [{
+					type: 'item',
+					text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.add-app%...',
+					onClick: this.addApp
+				}]
+			}], {
+				closed: () => {
+					this.isContextmenuShowing = false;
+				}
+			});
+		},
+
+		onDragstart(e) {
+			e.dataTransfer.effectAllowed = 'move';
+			e.dataTransfer.setData('text', JSON.stringify({
+				type: 'file',
+				id: this.file.id,
+				file: this.file
+			}));
+			this.isDragging = true;
+
+			// 親ブラウザに対して、ドラッグが開始されたフラグを立てる
+			// (=あなたの子供が、ドラッグを開始しましたよ)
+			this.browser.isDragSource = true;
+		},
+
+		onDragend(e) {
+			this.isDragging = false;
+			this.browser.isDragSource = false;
+		},
+
+		onThumbnailLoaded() {
+			if (this.file.properties.average_color) {
+				anime({
+					targets: this.$refs.thumbnail,
+					backgroundColor: `rgba(${this.file.properties.average_color.join(',')}, 0)`,
+					duration: 100,
+					easing: 'linear'
+				});
+			}
+		},
+
+		rename() {
+			(this as any).apis.input({
+				title: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.rename-file%',
+				placeholder: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.input-new-file-name%',
+				default: this.file.name,
+				allowEmpty: false
+			}).then(name => {
+				(this as any).api('drive/files/update', {
+					file_id: this.file.id,
+					name: name
+				})
+			});
+		},
+
+		copyUrl() {
+			copyToClipboard(this.file.url);
+			(this as any).apis.dialog({
+				title: '%fa:check%%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copied%',
+				text: '%i18n:desktop.tags.mk-drive-browser-file-contextmenu.copied-url-to-clipboard%',
+				actions: [{
+					text: '%i18n:common.ok%'
+				}]
+			});
+		},
+
+		setAsAvatar() {
+			(this as any).apis.updateAvatar(this.file);
+		},
+
+		setAsBanner() {
+			(this as any).apis.updateBanner(this.file);
+		},
+
+		addApp() {
+			alert('not implemented yet');
+		},
+
+		deleteFile() {
+			alert('not implemented yet');
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.root.file
+	padding 8px 0 0 0
+	height 180px
+	border-radius 4px
+
+	&, *
+		cursor pointer
+
+	&:hover
+		background rgba(0, 0, 0, 0.05)
+
+		> .label
+			&:before
+			&:after
+				background #0b65a5
+
+	&:active
+		background rgba(0, 0, 0, 0.1)
+
+		> .label
+			&:before
+			&:after
+				background #0b588c
+
+	&[data-is-selected]
+		background $theme-color
+
+		&:hover
+			background lighten($theme-color, 10%)
+
+		&:active
+			background darken($theme-color, 10%)
+
+		> .label
+			&:before
+			&:after
+				display none
+
+		> .name
+			color $theme-color-foreground
+
+	&[data-is-contextmenu-showing]
+		&:after
+			content ""
+			pointer-events none
+			position absolute
+			top -4px
+			right -4px
+			bottom -4px
+			left -4px
+			border 2px dashed rgba($theme-color, 0.3)
+			border-radius 4px
+
+	> .label
+		position absolute
+		top 0
+		left 0
+		pointer-events none
+
+		&:before
+			content ""
+			display block
+			position absolute
+			z-index 1
+			top 0
+			left 57px
+			width 28px
+			height 8px
+			background #0c7ac9
+
+		&:after
+			content ""
+			display block
+			position absolute
+			z-index 1
+			top 57px
+			left 0
+			width 8px
+			height 28px
+			background #0c7ac9
+
+		> img
+			position absolute
+			z-index 2
+			top 0
+			left 0
+
+		> p
+			position absolute
+			z-index 3
+			top 19px
+			left -28px
+			width 120px
+			margin 0
+			text-align center
+			line-height 28px
+			color #fff
+			transform rotate(-45deg)
+
+	> .thumbnail
+		width 128px
+		height 128px
+		margin auto
+
+		> img
+			display block
+			position absolute
+			top 0
+			left 0
+			right 0
+			bottom 0
+			margin auto
+			max-width 128px
+			max-height 128px
+			pointer-events none
+
+	> .name
+		display block
+		margin 4px 0 0 0
+		font-size 0.8em
+		text-align center
+		word-break break-all
+		color #444
+		overflow hidden
+
+		> .ext
+			opacity 0.5
+
+</style>
diff --git a/src/web/app/desktop/views/components/drive.folder.vue b/src/web/app/desktop/views/components/drive.folder.vue
new file mode 100644
index 0000000000..4e57d1ca66
--- /dev/null
+++ b/src/web/app/desktop/views/components/drive.folder.vue
@@ -0,0 +1,267 @@
+<template>
+<div class="root folder"
+	:data-is-contextmenu-showing="isContextmenuShowing"
+	:data-draghover="draghover"
+	@click="onClick"
+	@mouseover="onMouseover"
+	@mouseout="onMouseout"
+	@dragover.prevent.stop="onDragover"
+	@dragenter.prevent="onDragenter"
+	@dragleave="onDragleave"
+	@drop.prevent.stop="onDrop"
+	draggable="true"
+	@dragstart="onDragstart"
+	@dragend="onDragend"
+	@contextmenu.prevent.stop="onContextmenu"
+	:title="title"
+>
+	<p class="name">
+		<template v-if="hover">%fa:R folder-open .fw%</template>
+		<template v-if="!hover">%fa:R folder .fw%</template>
+		{{ folder.name }}
+	</p>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import contextmenu from '../../api/contextmenu';
+
+export default Vue.extend({
+	props: ['folder'],
+	data() {
+		return {
+			hover: false,
+			draghover: false,
+			isDragging: false,
+			isContextmenuShowing: false
+		};
+	},
+	computed: {
+		browser(): any {
+			return this.$parent;
+		},
+		title(): string {
+			return this.folder.name;
+		}
+	},
+	methods: {
+		onClick() {
+			this.browser.move(this.folder);
+		},
+
+		onContextmenu(e) {
+			this.isContextmenuShowing = true;
+			contextmenu(e, [{
+				type: 'item',
+				text: '%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.move-to-this-folder%',
+				icon: '%fa:arrow-right%',
+				onClick: this.go
+			}, {
+				type: 'item',
+				text: '%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.show-in-new-window%',
+				icon: '%fa:R window-restore%',
+				onClick: this.newWindow
+			}, {
+				type: 'divider',
+			}, {
+				type: 'item',
+				text: '%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.rename%',
+				icon: '%fa:i-cursor%',
+				onClick: this.rename
+			}, {
+				type: 'divider',
+			}, {
+				type: 'item',
+				text: '%i18n:common.delete%',
+				icon: '%fa:R trash-alt%',
+				onClick: this.deleteFolder
+			}], {
+				closed: () => {
+					this.isContextmenuShowing = false;
+				}
+			});
+		},
+
+		onMouseover() {
+			this.hover = true;
+		},
+
+		onMouseout() {
+			this.hover = false
+		},
+
+		onDragover(e) {
+			// 自分自身がドラッグされていない場合
+			if (!this.isDragging) {
+				// ドラッグされてきたものがファイルだったら
+				if (e.dataTransfer.effectAllowed === 'all') {
+					e.dataTransfer.dropEffect = 'copy';
+				} else {
+					e.dataTransfer.dropEffect = 'move';
+				}
+			} else {
+				// 自分自身にはドロップさせない
+				e.dataTransfer.dropEffect = 'none';
+			}
+			return false;
+		},
+
+		onDragenter() {
+			if (!this.isDragging) this.draghover = true;
+		},
+
+		onDragleave() {
+			this.draghover = false;
+		},
+
+		onDrop(e) {
+			this.draghover = false;
+
+			// ファイルだったら
+			if (e.dataTransfer.files.length > 0) {
+				Array.from(e.dataTransfer.files).forEach(file => {
+					this.browser.upload(file, this.folder);
+				});
+				return false;
+			}
+
+			// データ取得
+			const data = e.dataTransfer.getData('text');
+			if (data == null) return false;
+
+			// パース
+			// TODO: Validate JSON
+			const obj = JSON.parse(data);
+
+			// (ドライブの)ファイルだったら
+			if (obj.type == 'file') {
+				const file = obj.id;
+				this.browser.removeFile(file);
+				(this as any).api('drive/files/update', {
+					file_id: file,
+					folder_id: this.folder.id
+				});
+			// (ドライブの)フォルダーだったら
+			} else if (obj.type == 'folder') {
+				const folder = obj.id;
+				// 移動先が自分自身ならreject
+				if (folder == this.folder.id) return false;
+				this.browser.removeFolder(folder);
+				(this as any).api('drive/folders/update', {
+					folder_id: folder,
+					parent_id: this.folder.id
+				}).then(() => {
+					// something
+				}).catch(err => {
+					switch (err) {
+						case 'detected-circular-definition':
+							(this as any).apis.dialog({
+								title: '%fa:exclamation-triangle%%i18n:desktop.tags.mk-drive-browser-folder.unable-to-process%',
+								text: '%i18n:desktop.tags.mk-drive-browser-folder.circular-reference-detected%',
+								actions: [{
+									text: '%i18n:common.ok%'
+								}]
+							});
+							break;
+						default:
+							alert('%i18n:desktop.tags.mk-drive-browser-folder.unhandled-error% ' + err);
+					}
+				});
+			}
+
+			return false;
+		},
+
+		onDragstart(e) {
+			e.dataTransfer.effectAllowed = 'move';
+			e.dataTransfer.setData('text', JSON.stringify({
+				type: 'folder',
+				id: this.folder.id
+			}));
+			this.isDragging = true;
+
+			// 親ブラウザに対して、ドラッグが開始されたフラグを立てる
+			// (=あなたの子供が、ドラッグを開始しましたよ)
+			this.browser.isDragSource = true;
+		},
+
+		onDragend() {
+			this.isDragging = false;
+			this.browser.isDragSource = false;
+		},
+
+		go() {
+			this.browser.move(this.folder.id);
+		},
+
+		newWindow() {
+			this.browser.newWindow(this.folder);
+		},
+
+		rename() {
+			(this as any).apis.input({
+				title: '%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.rename-folder%',
+				placeholder: '%i18n:desktop.tags.mk-drive-browser-folder-contextmenu.input-new-folder-name%',
+				default: this.folder.name
+			}).then(name => {
+				(this as any).api('drive/folders/update', {
+					folder_id: this.folder.id,
+					name: name
+				});
+			});
+		},
+
+		deleteFolder() {
+			alert('not implemented yet');
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.root.folder
+	padding 8px
+	height 64px
+	background lighten($theme-color, 95%)
+	border-radius 4px
+
+	&, *
+		cursor pointer
+
+	*
+		pointer-events none
+
+	&:hover
+		background lighten($theme-color, 90%)
+
+	&:active
+		background lighten($theme-color, 85%)
+
+	&[data-is-contextmenu-showing]
+	&[data-draghover]
+		&:after
+			content ""
+			pointer-events none
+			position absolute
+			top -4px
+			right -4px
+			bottom -4px
+			left -4px
+			border 2px dashed rgba($theme-color, 0.3)
+			border-radius 4px
+
+	&[data-draghover]
+		background lighten($theme-color, 90%)
+
+	> .name
+		margin 0
+		font-size 0.9em
+		color darken($theme-color, 30%)
+
+		> [data-fa]
+			margin-right 4px
+			margin-left 2px
+			text-align left
+
+</style>
diff --git a/src/web/app/desktop/views/components/drive.nav-folder.vue b/src/web/app/desktop/views/components/drive.nav-folder.vue
new file mode 100644
index 0000000000..4c51285881
--- /dev/null
+++ b/src/web/app/desktop/views/components/drive.nav-folder.vue
@@ -0,0 +1,108 @@
+<template>
+<div class="root nav-folder"
+	:data-draghover="draghover"
+	@click="onClick"
+	@dragover.prevent.stop="onDragover"
+	@dragenter="onDragenter"
+	@dragleave="onDragleave"
+	@drop.stop="onDrop"
+>
+	<template v-if="folder == null">%fa:cloud%</template>
+	<span>{{ folder == null ? '%i18n:desktop.tags.mk-drive-browser-nav-folder.drive%' : folder.name }}</span>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: ['folder'],
+	data() {
+		return {
+			hover: false,
+			draghover: false
+		};
+	},
+	computed: {
+		browser(): any {
+			return this.$parent;
+		}
+	},
+	methods: {
+		onClick() {
+			this.browser.move(this.folder);
+		},
+		onMouseover() {
+			this.hover = true;
+		},
+		onMouseout() {
+			this.hover = false;
+		},
+		onDragover(e) {
+			// このフォルダがルートかつカレントディレクトリならドロップ禁止
+			if (this.folder == null && this.browser.folder == null) {
+				e.dataTransfer.dropEffect = 'none';
+			// ドラッグされてきたものがファイルだったら
+			} else if (e.dataTransfer.effectAllowed == 'all') {
+				e.dataTransfer.dropEffect = 'copy';
+			} else {
+				e.dataTransfer.dropEffect = 'move';
+			}
+			return false;
+		},
+		onDragenter() {
+			if (this.folder || this.browser.folder) this.draghover = true;
+		},
+		onDragleave() {
+			if (this.folder || this.browser.folder) this.draghover = false;
+		},
+		onDrop(e) {
+			this.draghover = false;
+
+			// ファイルだったら
+			if (e.dataTransfer.files.length > 0) {
+				Array.from(e.dataTransfer.files).forEach(file => {
+					this.browser.upload(file, this.folder);
+				});
+				return false;
+			};
+
+			// データ取得
+			const data = e.dataTransfer.getData('text');
+			if (data == null) return false;
+
+			// パース
+			// TODO: Validate JSON
+			const obj = JSON.parse(data);
+
+			// (ドライブの)ファイルだったら
+			if (obj.type == 'file') {
+				const file = obj.id;
+				this.browser.removeFile(file);
+				(this as any).api('drive/files/update', {
+					file_id: file,
+					folder_id: this.folder ? this.folder.id : null
+				});
+			// (ドライブの)フォルダーだったら
+			} else if (obj.type == 'folder') {
+				const folder = obj.id;
+				// 移動先が自分自身ならreject
+				if (this.folder && folder == this.folder.id) return false;
+				this.browser.removeFolder(folder);
+				(this as any).api('drive/folders/update', {
+					folder_id: folder,
+					parent_id: this.folder ? this.folder.id : null
+				});
+			}
+
+			return false;
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.root.nav-folder
+	&[data-draghover]
+		background #eee
+
+</style>
diff --git a/src/web/app/desktop/views/components/drive.vue b/src/web/app/desktop/views/components/drive.vue
index 0dcf077017..ffe0c68dec 100644
--- a/src/web/app/desktop/views/components/drive.vue
+++ b/src/web/app/desktop/views/components/drive.vue
@@ -2,10 +2,10 @@
 <div class="mk-drive">
 	<nav>
 		<div class="path" @contextmenu.prevent.stop="() => {}">
-			<mk-drive-nav-folder :class="{ current: folder == null }"/>
+			<x-nav-folder :class="{ current: folder == null }"/>
 			<template v-for="folder in hierarchyFolders">
 				<span class="separator">%fa:angle-right%</span>
-				<mk-drive-nav-folder :folder="folder" :key="folder.id"/>
+				<x-nav-folder :folder="folder" :key="folder.id"/>
 			</template>
 			<span class="separator" v-if="folder != null">%fa:angle-right%</span>
 			<span class="folder current" v-if="folder != null">{{ folder.name }}</span>
@@ -24,13 +24,13 @@
 		<div class="selection" ref="selection"></div>
 		<div class="contents" ref="contents">
 			<div class="folders" ref="foldersContainer" v-if="folders.length > 0">
-				<mk-drive-folder v-for="folder in folders" :key="folder.id" class="folder" :folder="folder"/>
+				<x-folder v-for="folder in folders" :key="folder.id" class="folder" :folder="folder"/>
 				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
 				<div class="padding" v-for="n in 16"></div>
 				<button v-if="moreFolders">%i18n:desktop.tags.mk-drive-browser.load-more%</button>
 			</div>
 			<div class="files" ref="filesContainer" v-if="files.length > 0">
-				<mk-drive-file v-for="file in files" :key="file.id" class="file" :file="file"/>
+				<x-file v-for="file in files" :key="file.id" class="file" :file="file"/>
 				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
 				<div class="padding" v-for="n in 16"></div>
 				<button v-if="moreFiles" @click="fetchMoreFiles">%i18n:desktop.tags.mk-drive-browser.load-more%</button>
@@ -57,10 +57,18 @@
 <script lang="ts">
 import Vue from 'vue';
 import MkDriveWindow from './drive-window.vue';
+import XNavFolder from './drive.nav-folder.vue';
+import XFolder from './drive.folder.vue';
+import XFile from './drive.file.vue';
 import contains from '../../../common/scripts/contains';
 import contextmenu from '../../api/contextmenu';
 
 export default Vue.extend({
+	components: {
+		XNavFolder,
+		XFolder,
+		XFile
+	},
 	props: {
 		initFolder: {
 			type: Object,
diff --git a/src/web/app/desktop/views/components/index.ts b/src/web/app/desktop/views/components/index.ts
index fc30bb729e..da59d9219e 100644
--- a/src/web/app/desktop/views/components/index.ts
+++ b/src/web/app/desktop/views/components/index.ts
@@ -19,9 +19,6 @@ import repostForm from './repost-form.vue';
 import followButton from './follow-button.vue';
 import postPreview from './post-preview.vue';
 import drive from './drive.vue';
-import driveFile from './drive-file.vue';
-import driveFolder from './drive-folder.vue';
-import driveNavFolder from './drive-nav-folder.vue';
 import postDetail from './post-detail.vue';
 import settings from './settings.vue';
 import calendar from './calendar.vue';
@@ -71,9 +68,6 @@ Vue.component('mk-repost-form', repostForm);
 Vue.component('mk-follow-button', followButton);
 Vue.component('mk-post-preview', postPreview);
 Vue.component('mk-drive', drive);
-Vue.component('mk-drive-file', driveFile);
-Vue.component('mk-drive-folder', driveFolder);
-Vue.component('mk-drive-nav-folder', driveNavFolder);
 Vue.component('mk-post-detail', postDetail);
 Vue.component('mk-settings', settings);
 Vue.component('mk-calendar', calendar);
-- 
cgit v1.2.3-freya