1
0
mirror of https://github.com/misskey-dev/misskey synced 2024-12-24 19:48:26 +09:00

Improve drive

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

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>

View File

@ -1,72 +1,44 @@
<template> <template>
<XModalWindow ref="dialog" <XWindow ref="window"
:width="800" :initial-width="800"
:height="500" :initial-height="500"
:with-ok-button="true" :can-resize="true"
:ok-button-disabled="(type === 'file') && (selected.length === 0)"
@click="cancel()"
@close="cancel()"
@ok="ok()"
@closed="$emit('closed')" @closed="$emit('closed')"
> >
<template #header> <template #header>
{{ multiple ? ((type === 'file') ? $t('selectFiles') : $t('selectFolders')) : ((type === 'file') ? $t('selectFile') : $t('selectFolder')) }} {{ $t('drive') }}
<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(selected.length) }})</span>
</template> </template>
<div> <XDrive :initial-folder="initialFolder"/>
<XDrive :multiple="multiple" @changeSelection="onChangeSelection" @selected="ok()" :select="type"/> </XWindow>
</div>
</XModalWindow>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import XDrive from './drive.vue'; import XDrive from './drive.vue';
import XModalWindow from '@/components/ui/modal-window.vue'; import XWindow from '@/components/ui/window.vue';
import number from '@/filters/number';
export default defineComponent({ export default defineComponent({
components: { components: {
XDrive, XDrive,
XModalWindow, XWindow,
}, },
props: { props: {
type: { initialFolder: {
type: String, type: Object,
required: false, required: false
default: 'file'
}, },
multiple: {
type: Boolean,
default: false
}
}, },
emits: ['done', 'closed'], emits: ['closed'],
data() { data() {
return { return {
selected: []
}; };
}, },
methods: { 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> </script>

View File

@ -2,6 +2,7 @@
<div class="rghtznwe" <div class="rghtznwe"
:class="{ draghover }" :class="{ draghover }"
@click="onClick" @click="onClick"
@contextmenu.stop="onContextmenu"
@mouseover="onMouseover" @mouseover="onMouseover"
@mouseout="onMouseout" @mouseout="onMouseout"
@dragover.prevent.stop="onDragover" @dragover.prevent.stop="onDragover"
@ -27,8 +28,9 @@
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; 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 * as os from '@/os';
import { faICursor } from '@fortawesome/free-solid-svg-icons';
export default defineComponent({ export default defineComponent({
props: { props: {
@ -241,6 +243,28 @@ export default defineComponent({
value: this.folder.id 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> </script>

View File

@ -64,7 +64,7 @@ export default defineComponent({
}, },
props: { props: {
initFolder: { initialFolder: {
type: Object, type: Object,
required: false required: false
}, },
@ -151,8 +151,8 @@ export default defineComponent({
this.connection.on('folderUpdated', this.onStreamDriveFolderUpdated); this.connection.on('folderUpdated', this.onStreamDriveFolderUpdated);
this.connection.on('folderDeleted', this.onStreamDriveFolderDeleted); this.connection.on('folderDeleted', this.onStreamDriveFolderDeleted);
if (this.initFolder) { if (this.initialFolder) {
this.move(this.initFolder); this.move(this.initialFolder);
} else { } else {
this.fetch(); this.fetch();
} }
@ -639,6 +639,10 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.yfudmmck { .yfudmmck {
display: flex;
flex-direction: column;
height: 100%;
> nav { > nav {
display: block; display: block;
z-index: 2; z-index: 2;
@ -698,6 +702,7 @@ export default defineComponent({
} }
> .main { > .main {
flex: 1;
overflow: auto; overflow: auto;
&, * { &, * {

View File

@ -245,7 +245,7 @@ export async function selectUser() {
export async function selectDriveFile(multiple: boolean) { export async function selectDriveFile(multiple: boolean) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
popup(defineAsyncComponent(() => import('@/components/drive-window.vue')), { popup(defineAsyncComponent(() => import('@/components/drive-select-dialog.vue')), {
type: 'file', type: 'file',
multiple multiple
}, { }, {
@ -260,7 +260,7 @@ export async function selectDriveFile(multiple: boolean) {
export async function selectDriveFolder(multiple: boolean) { export async function selectDriveFolder(multiple: boolean) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
popup(defineAsyncComponent(() => import('@/components/drive-window.vue')), { popup(defineAsyncComponent(() => import('@/components/drive-select-dialog.vue')), {
type: 'folder', type: 'folder',
multiple multiple
}, { }, {