✌️

src/web/app/desktop/views/components/drive.file.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="mk-drive-file"
+<div class="root file"
 	:data-is-selected="isSelected"
 	:data-is-contextmenu-showing="isContextmenuShowing"
 	@click="onClick"
@@ -51,7 +51,7 @@ export default Vue.extend({
 		},
 		background(): string {
 			return this.file.properties.average_color
-				? `rgb(${this.file.properties.average_color.join(',')})'`
+				? `rgb(${this.file.properties.average_color.join(',')})`
 				: 'transparent';
 		}
 	},
@@ -188,7 +188,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-drive-file
+.root.file
 	padding 8px 0 0 0
 	height 180px
 	border-radius 4px

src/web/app/desktop/views/components/drive.folder.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="mk-drive-folder"
+<div class="root folder"
 	:data-is-contextmenu-showing="isContextmenuShowing"
 	:data-draghover="draghover"
 	@click="onClick"
@@ -124,7 +124,7 @@ export default Vue.extend({
 					this.browser.upload(file, this.folder);
 				});
 				return false;
-			};
+			}
 
 			// データ取得
 			const data = e.dataTransfer.getData('text');
@@ -220,7 +220,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-drive-folder
+.root.folder
 	padding 8px
 	height 64px
 	background lighten($theme-color, 95%)

src/web/app/desktop/views/components/drive.nav-folder.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="mk-drive-nav-folder"
+<div class="root nav-folder"
 	:data-draghover="draghover"
 	@click="onClick"
 	@dragover.prevent.stop="onDragover"
@@ -101,7 +101,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-drive-nav-folder
+.root.nav-folder
 	&[data-draghover]
 		background #eee
 

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,

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);