Improve drive

5 files changed, 118 insertions, 47 deletions

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
 		}, {