This commit is contained in:
syuilo 2018-02-23 07:56:35 +09:00
parent 0162f68cce
commit 2fbd7ff3c6
5 changed files with 20 additions and 18 deletions

View file

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

View file

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

View file

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

View file

@ -2,10 +2,10 @@
<div class="mk-drive"> <div class="mk-drive">
<nav> <nav>
<div class="path" @contextmenu.prevent.stop="() => {}"> <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"> <template v-for="folder in hierarchyFolders">
<span class="separator">%fa:angle-right%</span> <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> </template>
<span class="separator" v-if="folder != null">%fa:angle-right%</span> <span class="separator" v-if="folder != null">%fa:angle-right%</span>
<span class="folder current" v-if="folder != null">{{ folder.name }}</span> <span class="folder current" v-if="folder != null">{{ folder.name }}</span>
@ -24,13 +24,13 @@
<div class="selection" ref="selection"></div> <div class="selection" ref="selection"></div>
<div class="contents" ref="contents"> <div class="contents" ref="contents">
<div class="folders" ref="foldersContainer" v-if="folders.length > 0"> <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 --> <!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
<div class="padding" v-for="n in 16"></div> <div class="padding" v-for="n in 16"></div>
<button v-if="moreFolders">%i18n:desktop.tags.mk-drive-browser.load-more%</button> <button v-if="moreFolders">%i18n:desktop.tags.mk-drive-browser.load-more%</button>
</div> </div>
<div class="files" ref="filesContainer" v-if="files.length > 0"> <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 --> <!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
<div class="padding" v-for="n in 16"></div> <div class="padding" v-for="n in 16"></div>
<button v-if="moreFiles" @click="fetchMoreFiles">%i18n:desktop.tags.mk-drive-browser.load-more%</button> <button v-if="moreFiles" @click="fetchMoreFiles">%i18n:desktop.tags.mk-drive-browser.load-more%</button>
@ -57,10 +57,18 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import MkDriveWindow from './drive-window.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 contains from '../../../common/scripts/contains';
import contextmenu from '../../api/contextmenu'; import contextmenu from '../../api/contextmenu';
export default Vue.extend({ export default Vue.extend({
components: {
XNavFolder,
XFolder,
XFile
},
props: { props: {
initFolder: { initFolder: {
type: Object, type: Object,

View file

@ -19,9 +19,6 @@ import repostForm from './repost-form.vue';
import followButton from './follow-button.vue'; import followButton from './follow-button.vue';
import postPreview from './post-preview.vue'; import postPreview from './post-preview.vue';
import drive from './drive.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 postDetail from './post-detail.vue';
import settings from './settings.vue'; import settings from './settings.vue';
import calendar from './calendar.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-follow-button', followButton);
Vue.component('mk-post-preview', postPreview); Vue.component('mk-post-preview', postPreview);
Vue.component('mk-drive', drive); 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-post-detail', postDetail);
Vue.component('mk-settings', settings); Vue.component('mk-settings', settings);
Vue.component('mk-calendar', calendar); Vue.component('mk-calendar', calendar);