HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Improve drive

Browse source
This commit is contained in:
syuilo 2020-11-03 10:27:00 +09:00
parent 7a5a541a4e
commit 1852d1cc6f
5 changed files with 118 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
src/client/components/drive-select-dialog.vue Normal file
View 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>

54
src/client/components/drive-window.vue
View file

@ -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>

26
src/client/components/drive.folder.vue
View file

@ -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>

11
src/client/components/drive.vue
View file

@ -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;
&, * {

4
src/client/os.ts
View file

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