mirror of
https://iceshrimp.dev/limepotato/jormungandr-bite.git
synced 2024-11-14 14:07:38 -07:00
Improve drive
This commit is contained in:
syuilo
parent
0203be1600
commit
5182fe4a9c
5 changed files with 118 additions and 47 deletions
70
src/client/components/drive-select-dialog.vue
Normal file
70
src/client/components/drive-select-dialog.vue
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<XModalWindow ref="dialog"
|
||||
:width="800"
|
||||
:height="500"
|
||||
:with-ok-button="true"
|
||||
:ok-button-disabled="(type === 'file') && (selected.length === 0)"
|
||||
@click="cancel()"
|
||||
@close="cancel()"
|
||||
@ok="ok()"
|
||||
@closed="$emit('closed')"
|
||||
>
|
||||
<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;">({{ number(selected.length) }})</span>
|
||||
</template>
|
||||
<XDrive :multiple="multiple" @changeSelection="onChangeSelection" @selected="ok()" :select="type"/>
|
||||
</XModalWindow>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import XDrive from './drive.vue';
|
||||
import XModalWindow from '@/components/ui/modal-window.vue';
|
||||
import number from '@/filters/number';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
XDrive,
|
||||
XModalWindow,
|
||||
},
|
||||
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'file'
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
emits: ['done', 'closed'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
selected: []
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
ok() {
|
||||
this.$emit('done', this.selected);
|
||||
this.$refs.dialog.close();
|
||||
},
|
||||
|
||||
cancel() {
|
||||
this.$emit('done');
|
||||
this.$refs.dialog.close();
|
||||
},
|
||||
|
||||
onChangeSelection(xs) {
|
||||
this.selected = xs;
|
||||
},
|
||||
|
||||
number
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,72 +1,44 @@
|
|||
<template>
|
||||
<XModalWindow ref="dialog"
|
||||
:width="800"
|
||||
:height="500"
|
||||
:with-ok-button="true"
|
||||
:ok-button-disabled="(type === 'file') && (selected.length === 0)"
|
||||
@click="cancel()"
|
||||
@close="cancel()"
|
||||
@ok="ok()"
|
||||
<XWindow ref="window"
|
||||
:initial-width="800"
|
||||
:initial-height="500"
|
||||
:can-resize="true"
|
||||
@closed="$emit('closed')"
|
||||
>
|
||||
<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;">({{ number(selected.length) }})</span>
|
||||
{{ $t('drive') }}
|
||||
</template>
|
||||
<div>
|
||||
<XDrive :multiple="multiple" @changeSelection="onChangeSelection" @selected="ok()" :select="type"/>
|
||||
</div>
|
||||
</XModalWindow>
|
||||
<XDrive :initial-folder="initialFolder"/>
|
||||
</XWindow>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import XDrive from './drive.vue';
|
||||
import XModalWindow from '@/components/ui/modal-window.vue';
|
||||
import number from '@/filters/number';
|
||||
import XWindow from '@/components/ui/window.vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
XDrive,
|
||||
XModalWindow,
|
||||
XWindow,
|
||||
},
|
||||
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'file'
|
||||
initialFolder: {
|
||||
type: Object,
|
||||
required: false
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
emits: ['done', 'closed'],
|
||||
emits: ['closed'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
selected: []
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
ok() {
|
||||
this.$emit('done', this.selected);
|
||||
this.$refs.dialog.close();
|
||||
},
|
||||
|
||||
cancel() {
|
||||
this.$emit('done');
|
||||
this.$refs.dialog.close();
|
||||
},
|
||||
|
||||
onChangeSelection(xs) {
|
||||
this.selected = xs;
|
||||
},
|
||||
|
||||
number
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<div class="rghtznwe"
|
||||
:class="{ draghover }"
|
||||
@click="onClick"
|
||||
@contextmenu.stop="onContextmenu"
|
||||
@mouseover="onMouseover"
|
||||
@mouseout="onMouseout"
|
||||
@dragover.prevent.stop="onDragover"
|
||||
|
|
@ -27,8 +28,9 @@
|
|||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { faFolder, faFolderOpen } from '@fortawesome/free-regular-svg-icons';
|
||||
import { faFolder, faFolderOpen, faTrashAlt, faWindowRestore } from '@fortawesome/free-regular-svg-icons';
|
||||
import * as os from '@/os';
|
||||
import { faICursor } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
|
|
@ -241,6 +243,28 @@ export default defineComponent({
|
|||
value: this.folder.id
|
||||
});
|
||||
},
|
||||
|
||||
onContextmenu(e) {
|
||||
os.contextMenu([{
|
||||
text: this.$t('openInWindow'),
|
||||
icon: faWindowRestore,
|
||||
action: async () => {
|
||||
os.popup(await import('./drive-window.vue'), {
|
||||
initialFolder: this.folder
|
||||
}, {
|
||||
}, 'closed');
|
||||
}
|
||||
}, null, {
|
||||
text: this.$t('rename'),
|
||||
icon: faICursor,
|
||||
action: this.rename
|
||||
}, null, {
|
||||
text: this.$t('delete'),
|
||||
icon: faTrashAlt,
|
||||
danger: true,
|
||||
action: this.deleteFolder
|
||||
}], e);
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
props: {
|
||||
initFolder: {
|
||||
initialFolder: {
|
||||
type: Object,
|
||||
required: false
|
||||
},
|
||||
|
|
@ -151,8 +151,8 @@ export default defineComponent({
|
|||
this.connection.on('folderUpdated', this.onStreamDriveFolderUpdated);
|
||||
this.connection.on('folderDeleted', this.onStreamDriveFolderDeleted);
|
||||
|
||||
if (this.initFolder) {
|
||||
this.move(this.initFolder);
|
||||
if (this.initialFolder) {
|
||||
this.move(this.initialFolder);
|
||||
} else {
|
||||
this.fetch();
|
||||
}
|
||||
|
|
@ -639,6 +639,10 @@ export default defineComponent({
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.yfudmmck {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
> nav {
|
||||
display: block;
|
||||
z-index: 2;
|
||||
|
|
@ -698,6 +702,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
> .main {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
|
||||
&, * {
|
||||
|
|
|
|||
|
|
@ -245,7 +245,7 @@ export async function selectUser() {
|
|||
|
||||
export async function selectDriveFile(multiple: boolean) {
|
||||
return new Promise((resolve, reject) => {
|
||||
popup(defineAsyncComponent(() => import('@/components/drive-window.vue')), {
|
||||
popup(defineAsyncComponent(() => import('@/components/drive-select-dialog.vue')), {
|
||||
type: 'file',
|
||||
multiple
|
||||
}, {
|
||||
|
|
@ -260,7 +260,7 @@ export async function selectDriveFile(multiple: boolean) {
|
|||
|
||||
export async function selectDriveFolder(multiple: boolean) {
|
||||
return new Promise((resolve, reject) => {
|
||||
popup(defineAsyncComponent(() => import('@/components/drive-window.vue')), {
|
||||
popup(defineAsyncComponent(() => import('@/components/drive-select-dialog.vue')), {
|
||||
type: 'folder',
|
||||
multiple
|
||||
}, {
|
||||
|
|
|
|||
Loading…
Reference in a new issue