diff --git a/src/client/components/drive-select-dialog.vue b/src/client/components/drive-select-dialog.vue new file mode 100644 index 0000000000..5221bdbb63 --- /dev/null +++ b/src/client/components/drive-select-dialog.vue @@ -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> diff --git a/src/client/components/drive-window.vue b/src/client/components/drive-window.vue index d989d982d9..0806fc1808 100644 --- a/src/client/components/drive-window.vue +++ b/src/client/components/drive-window.vue @@ -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> diff --git a/src/client/components/drive.folder.vue b/src/client/components/drive.folder.vue index bf2c9b6494..5664fb8c62 100644 --- a/src/client/components/drive.folder.vue +++ b/src/client/components/drive.folder.vue @@ -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> diff --git a/src/client/components/drive.vue b/src/client/components/drive.vue index 2c3203b387..f25d25da01 100644 --- a/src/client/components/drive.vue +++ b/src/client/components/drive.vue @@ -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; &, * { diff --git a/src/client/os.ts b/src/client/os.ts index dc0eb77485..39032b61f1 100644 --- a/src/client/os.ts +++ b/src/client/os.ts @@ -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 }, {