feat(client): Implement default upload folder setting

Resolve #5985
This commit is contained in:
syuilo 2020-04-22 00:34:56 +09:00
parent e72011f1da
commit 1f998168e2
11 changed files with 140 additions and 208 deletions

View file

@ -239,6 +239,8 @@ drive: "ドライブ"
fileName: "ファイル名"
selectFile: "ファイルを選択"
selectFiles: "ファイルを選択"
selectFolder: "フォルダーを選択"
selectFolders: "フォルダーを選択"
renameFile: "ファイル名を変更"
folderName: "フォルダー名"
createFolder: "フォルダーを作成"

View file

@ -1,8 +1,11 @@
<template>
<x-window ref="window" @closed="() => { $emit('closed'); destroyDom(); }" :with-ok-button="true" :ok-button-disabled="selected.length === 0" @ok="ok()">
<template #header>{{ multiple ? $t('selectFiles') : $t('selectFile') }}<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ selected.length | number }})</span></template>
<x-window ref="window" :width="800" :height="500" @closed="() => { $emit('closed'); destroyDom(); }" :with-ok-button="true" :ok-button-disabled="(type === 'file') && (selected.length === 0)" @ok="ok()">
<template #header>
{{ multiple ? ((type === 'file') ? $t('selectFiles') : $t('selectFolders')) : ((type === 'file') ? $t('selectFile') : $t('selectFolder')) }}
<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ selected.length | number }})</span>
</template>
<div>
<x-drive :multiple="multiple" @change-selection="onChangeSelection" :select-mode="true"/>
<x-drive :multiple="multiple" @change-selection="onChangeSelection" :select="type"/>
</div>
</x-window>
</template>
@ -25,7 +28,7 @@ export default Vue.extend({
type: {
type: String,
required: false,
default: undefined
default: 'file'
},
multiple: {
type: Boolean,
@ -45,8 +48,8 @@ export default Vue.extend({
this.$refs.window.close();
},
onChangeSelection(files) {
this.selected = files;
onChangeSelection(xs) {
this.selected = xs;
}
}
});

View file

@ -42,11 +42,20 @@ import { faDownload, faLink, faICursor, faTrashAlt } from '@fortawesome/free-sol
export default Vue.extend({
i18n,
components: {
XFileThumbnail
},
props: {
file: {
type: Object,
required: true,
},
isSelected: {
type: Boolean,
required: false,
default: false,
},
selectMode: {
type: Boolean,
required: false,
@ -54,10 +63,6 @@ export default Vue.extend({
}
},
components: {
XFileThumbnail
},
data() {
return {
isDragging: false
@ -65,12 +70,10 @@ export default Vue.extend({
},
computed: {
// TODO: parent
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.size)}`;
}
@ -79,7 +82,7 @@ export default Vue.extend({
methods: {
onClick(ev) {
if (this.selectMode) {
this.browser.chooseFile(this.file);
this.$emit('chosen', this.file);
} else {
this.$root.menu({
items: [{

View file

@ -21,6 +21,7 @@
<p class="upload" v-if="$store.state.settings.uploadFolder == folder.id">
{{ $t('uploadFolder') }}
</p>
<button v-if="selectMode" class="checkbox _button" :class="{ checked: isSelected }" @click.prevent.stop="checkboxClicked"></button>
</div>
</template>
@ -36,6 +37,16 @@ export default Vue.extend({
folder: {
type: Object,
required: true,
},
isSelected: {
type: Boolean,
required: false,
default: false,
},
selectMode: {
type: Boolean,
required: false,
default: false,
}
},
@ -56,7 +67,12 @@ export default Vue.extend({
return this.folder.name;
}
},
methods: {
checkboxClicked(e) {
this.$emit('chosen', this.folder);
},
onClick() {
this.browser.move(this.folder);
},
@ -241,10 +257,24 @@ export default Vue.extend({
cursor: pointer;
}
* {
*:not(.checkbox) {
pointer-events: none;
}
> .checkbox {
position: absolute;
bottom: 8px;
right: 8px;
width: 16px;
height: 16px;
background: #fff;
border: solid 1px #000;
&.checked {
background: var(--accent);
}
}
&[data-draghover] {
&:after {
content: "";

View file

@ -3,9 +3,9 @@
<nav>
<div class="path" @contextmenu.prevent.stop="() => {}">
<x-nav-folder :class="{ current: folder == null }"/>
<template v-for="folder in hierarchyFolders">
<span class="separator"><fa :icon="faAngleRight"/></span>
<x-nav-folder :folder="folder" :key="folder.id"/>
<template v-for="f in hierarchyFolders">
<span class="separator" :key="f.id + ':separator'"><fa :icon="faAngleRight"/></span>
<x-nav-folder :folder="f" :key="f.id"/>
</template>
<span class="separator" v-if="folder != null"><fa :icon="faAngleRight"/></span>
<span class="folder current" v-if="folder != null">{{ folder.name }}</span>
@ -20,15 +20,15 @@
>
<div class="contents" ref="contents">
<div class="folders" ref="foldersContainer" v-if="folders.length > 0">
<x-folder v-for="folder in folders" :key="folder.id" class="folder" :folder="folder"/>
<x-folder v-for="f in folders" :key="f.id" class="folder" :folder="f" :select-mode="select === 'folder'" :is-selected="selectedFolders.some(x => x.id === f.id)" @chosen="chooseFolder"/>
<!-- 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, i) in 16" :key="i"></div>
<mk-button v-if="moreFolders">{{ $t('loadMore') }}</mk-button>
</div>
<div class="files" ref="filesContainer" v-if="files.length > 0">
<x-file v-for="file in files" :key="file.id" class="file" :file="file" :select-mode="selectMode"/>
<x-file v-for="file in files" :key="file.id" class="file" :file="file" :select-mode="select === 'file'" :is-selected="selectedFiles.some(x => x.id === file.id)" @chosen="chooseFile"/>
<!-- 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, i) in 16" :key="i"></div>
<mk-button v-if="moreFiles" @click="fetchMoreFiles">{{ $t('loadMore') }}</mk-button>
</div>
<div class="empty" v-if="files.length == 0 && folders.length == 0 && !fetching">
@ -81,10 +81,10 @@ export default Vue.extend({
required: false,
default: false
},
selectMode: {
type: Boolean,
select: {
type: String,
required: false,
default: false
default: null
}
},
@ -102,6 +102,7 @@ export default Vue.extend({
moreFolders: false,
hierarchyFolders: [],
selectedFiles: [],
selectedFolders: [],
uploadings: [],
connection: null,
@ -392,6 +393,25 @@ export default Vue.extend({
}
},
chooseFolder(folder) {
const isAlreadySelected = this.selectedFolders.some(f => f.id == folder.id);
if (this.multiple) {
if (isAlreadySelected) {
this.selectedFolders = this.selectedFolders.filter(f => f.id != folder.id);
} else {
this.selectedFolders.push(folder);
}
this.$emit('change-selection', this.selectedFolders);
} else {
if (isAlreadySelected) {
this.$emit('selected', folder);
} else {
this.selectedFolders = [folder];
this.$emit('change-selection', [folder]);
}
}
},
move(target) {
if (target == null) {
this.goRoot();

View file

@ -58,6 +58,9 @@ export default Vue.extend({
const data = new FormData();
data.append('file', blob);
data.append('i', this.$store.state.i.token);
if (this.$store.state.settings.uploadFolder) {
data.append('folderId', this.$store.state.settings.uploadFolder);
}
fetch(apiUrl + '/drive/files/create', {
method: 'POST',

View file

@ -1,6 +1,6 @@
<template>
<x-modal ref="modal" @closed="() => { $emit('closed'); destroyDom(); }">
<div class="ebkgoccj" :class="{ noPadding }" @keydown="onKeydown">
<div class="ebkgoccj" :class="{ noPadding }" @keydown="onKeydown" :style="{ width: `${width}px`, height: `${height}px` }">
<div class="header">
<button class="_button" v-if="withOkButton" @click="close()"><fa :icon="faTimes"/></button>
<span class="title">
@ -49,7 +49,17 @@ export default Vue.extend({
type: Boolean,
required: false,
default: false
}
},
width: {
type: Number,
required: false,
default: 400
},
height: {
type: Number,
required: false,
default: 400
},
},
data() {
@ -76,19 +86,12 @@ export default Vue.extend({
<style lang="scss" scoped>
.ebkgoccj {
width: 400px;
height: 400px;
background: var(--panel);
border-radius: var(--radius);
overflow: hidden;
display: flex;
flex-direction: column;
@media (max-width: 500px) {
width: 350px;
height: 350px;
}
> .header {
$height: 58px;
$height-narrow: 42px;

View file

@ -2,107 +2,57 @@
<section class="uawsfosz _card">
<div class="_title"><fa :icon="faCloud"/> {{ $t('drive') }}</div>
<div class="_content">
<mk-pagination :pagination="drivePagination" #default="{items}" class="drive" ref="drive">
<div class="file" v-for="(file, i) in items" :key="file.id" @click="selected = file" :class="{ selected: selected && (selected.id === file.id) }">
<x-file-thumbnail class="thumbnail" :file="file" fit="cover"/>
<div class="body">
<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>
<footer>
<span class="type"><x-file-type-icon :type="file.type" class="icon"/>{{ file.type }}</span>
<span class="separator"></span>
<span class="data-size">{{ file.size | bytes }}</span>
<span class="separator"></span>
<span class="created-at"><fa :icon="faClock"/><mk-time :time="file.createdAt"/></span>
<template v-if="file.isSensitive">
<span class="separator"></span>
<span class="nsfw"><fa :icon="faEyeSlash"/> {{ $t('nsfw') }}</span>
</template>
</footer>
</div>
</div>
</mk-pagination>
</div>
<div class="_footer">
<mk-button primary inline :disabled="selected == null" @click="download()"><fa :icon="faDownload"/> {{ $t('download') }}</mk-button>
<mk-button inline :disabled="selected == null" @click="del()"><fa :icon="faTrashAlt"/> {{ $t('delete') }}</mk-button>
<span>{{ $t('uploadFolder') }}: {{ uploadFolder ? uploadFolder.name : '-' }}</span>
<mk-button primary @click="chooseUploadFolder()"><fa :icon="faFolderOpen"/> {{ $t('selectFolder') }}</mk-button>
</div>
</section>
</template>
<script lang="ts">
import Vue from 'vue';
import { faCloud, faDownload } from '@fortawesome/free-solid-svg-icons';
import { faCloud, faFolderOpen } from '@fortawesome/free-solid-svg-icons';
import { faClock, faEyeSlash, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
import XFileTypeIcon from '../../components/file-type-icon.vue';
import XFileThumbnail from '../../components/drive-file-thumbnail.vue';
import MkButton from '../../components/ui/button.vue';
import MkPagination from '../../components/ui/pagination.vue';
import i18n from '../../i18n';
import { selectDriveFolder } from '../../scripts/select-drive-folder';
export default Vue.extend({
i18n,
components: {
XFileTypeIcon,
XFileThumbnail,
MkPagination,
MkButton,
},
data() {
return {
selected: null,
connection: null,
drivePagination: {
endpoint: 'drive/files',
limit: 10,
},
faCloud, faClock, faEyeSlash, faDownload, faTrashAlt
uploadFolder: null,
faCloud, faClock, faEyeSlash, faFolderOpen, faTrashAlt
}
},
created() {
this.connection = this.$root.stream.useSharedConnection('drive');
this.connection.on('fileCreated', this.onStreamDriveFileCreated);
this.connection.on('fileUpdated', this.onStreamDriveFileUpdated);
this.connection.on('fileDeleted', this.onStreamDriveFileDeleted);
},
beforeDestroy() {
this.connection.dispose();
async created() {
if (this.$store.state.settings.uploadFolder) {
this.uploadFolder = await this.$root.api('drive/folders/show', {
folderId: this.$store.state.settings.uploadFolder
});
}
},
methods: {
onStreamDriveFileCreated(file) {
this.$refs.drive.prepend(file);
},
onStreamDriveFileUpdated(file) {
// TODO
},
onStreamDriveFileDeleted(fileId) {
this.$refs.drive.remove(x => x.id === fileId);
},
download() {
window.open(this.selected.url, '_blank');
},
async del() {
const { canceled } = await this.$root.dialog({
type: 'warning',
text: this.$t('driveFileDeleteConfirm', { name: this.selected.name }),
showCancelButton: true
});
if (canceled) return;
this.$root.api('drive/files/delete', {
fileId: this.selected.id
chooseUploadFolder() {
selectDriveFolder(this.$root, false).then(async folder => {
await this.$store.dispatch('settings/set', { key: 'uploadFolder', value: folder ? folder.id : null });
this.$root.dialog({
type: 'success',
iconOnly: true, autoClose: true
});
if (this.$store.state.settings.uploadFolder) {
this.uploadFolder = await this.$root.api('drive/folders/show', {
folderId: this.$store.state.settings.uploadFolder
});
} else {
this.uploadFolder = null;
}
});
}
}
@ -111,102 +61,6 @@ export default Vue.extend({
<style lang="scss" scoped>
.uawsfosz {
> ._content {
max-height: 350px;
overflow: auto;
> .drive {
> .file {
display: grid;
margin: 0 auto;
grid-template-columns: 64px 1fr;
grid-column-gap: 10px;
cursor: pointer;
&.selected {
background: var(--accent);
box-shadow: 0 0 0 8px var(--accent);
color: #fff;
}
&:not(:last-child) {
margin-bottom: 16px;
}
> .thumbnail {
width: 64px;
height: 64px;
}
> .body {
display: block;
word-break: break-all;
padding-top: 4px;
> .name {
display: block;
margin: 0;
padding: 0;
font-size: 0.9em;
font-weight: bold;
word-break: break-word;
> .ext {
opacity: 0.5;
}
}
> .tags {
display: block;
margin: 4px 0 0 0;
padding: 0;
list-style: none;
font-size: 0.5em;
> .tag {
display: inline-block;
margin: 0 5px 0 0;
padding: 1px 5px;
border-radius: 2px;
}
}
> footer {
display: block;
margin: 4px 0 0 0;
font-size: 0.7em;
> .separator {
padding: 0 4px;
}
> .type {
opacity: 0.7;
> .icon {
margin-right: 4px;
}
}
> .data-size {
opacity: 0.7;
}
> .created-at {
opacity: 0.7;
> [data-icon] {
margin-right: 2px;
}
}
> .nsfw {
color: #bf4633;
}
}
}
}
}
}
}
</style>

View file

@ -3,6 +3,7 @@ import DriveWindow from '../components/drive-window.vue';
export function selectDriveFile($root: any, multiple) {
return new Promise((res, rej) => {
const w = $root.new(DriveWindow, {
type: 'file',
multiple
});
w.$once('selected', files => {

View file

@ -0,0 +1,13 @@
import DriveWindow from '../components/drive-window.vue';
export function selectDriveFolder($root: any, multiple) {
return new Promise((res, rej) => {
const w = $root.new(DriveWindow, {
type: 'folder',
multiple
});
w.$once('selected', folders => {
res(multiple ? folders : (folders.length === 0 ? null : folders[0]));
});
});
}

View file

@ -135,7 +135,7 @@ module.exports = {
output: {
path: __dirname + '/built/client/assets',
filename: `[name].${meta.version}.js`,
chunkFilename: '[hash:5].[id].js',
chunkFilename: '[fullhash].[id].js',
publicPath: `/assets/`
},
resolve: {
@ -155,7 +155,7 @@ module.exports = {
optimization: {
minimizer: [new TerserPlugin()]
},
cache: true,
cache: false,
devtool: false, //'source-map',
mode: isProduction ? 'production' : 'development'
};