forked from FoundKeyGang/FoundKey
syuilo
parent
e72011f1da
commit
1f998168e2
11 changed files with 140 additions and 208 deletions
|
|
@ -239,6 +239,8 @@ drive: "ドライブ"
|
|||
fileName: "ファイル名"
|
||||
selectFile: "ファイルを選択"
|
||||
selectFiles: "ファイルを選択"
|
||||
selectFolder: "フォルダーを選択"
|
||||
selectFolders: "フォルダーを選択"
|
||||
renameFile: "ファイル名を変更"
|
||||
folderName: "フォルダー名"
|
||||
createFolder: "フォルダーを作成"
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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: [{
|
||||
|
|
|
|||
|
|
@ -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: "";
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 => {
|
||||
|
|
|
|||
13
src/client/scripts/select-drive-folder.ts
Normal file
13
src/client/scripts/select-drive-folder.ts
Normal 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]));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -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'
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue