✌️
This commit is contained in:
parent
0162f68cce
commit
2fbd7ff3c6
5 changed files with 20 additions and 18 deletions
|
@ -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
|
|
@ -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%)
|
|
@ -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
|
||||
|
|
@ -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,
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in a new issue