diff --git a/src/web/app/desktop/views/components/drive-file.vue b/src/web/app/desktop/views/components/drive.file.vue similarity index 98% rename from src/web/app/desktop/views/components/drive-file.vue rename to src/web/app/desktop/views/components/drive.file.vue index ffdf7ef57e..cc423477e9 100644 --- a/src/web/app/desktop/views/components/drive-file.vue +++ b/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 diff --git a/src/web/app/desktop/views/components/drive-folder.vue b/src/web/app/desktop/views/components/drive.folder.vue similarity index 99% rename from src/web/app/desktop/views/components/drive-folder.vue rename to src/web/app/desktop/views/components/drive.folder.vue index efb9df30f8..4e57d1ca66 100644 --- a/src/web/app/desktop/views/components/drive-folder.vue +++ b/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%) diff --git a/src/web/app/desktop/views/components/drive-nav-folder.vue b/src/web/app/desktop/views/components/drive.nav-folder.vue similarity index 97% rename from src/web/app/desktop/views/components/drive-nav-folder.vue rename to src/web/app/desktop/views/components/drive.nav-folder.vue index 44821087af..4c51285881 100644 --- a/src/web/app/desktop/views/components/drive-nav-folder.vue +++ b/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 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);