sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Use vuedraggable instead of vue-draggable-next

Browse Source 
Fix #6852
This commit is contained in:
syuilo
2020-12-05 12:50:09 +09:00
parent b4e5fe7e71
commit af5b4749b0
13 changed files with 148 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/client/components/post-form-attaches.vue
View File

@ -1,12 +1,14 @@
<template>
<div class="skeikyzd" v-show="files.length != 0">
<XDraggable class="files" :list="files" animation="150" delay="100" delay-on-touch-only="true">
<div v-for="file in files" :key="file.id" @click="showFileMenu(file, $event)" @contextmenu.prevent="showFileMenu(file, $event)">
<MkDriveFileThumbnail :data-id="file.id" class="thumbnail" :file="file" fit="cover"/>
<div class="sensitive" v-if="file.isSensitive">
<Fa class="icon" :icon="faExclamationTriangle"/>
<XDraggable class="files" v-model="_files" item-key="id" animation="150" delay="100" delay-on-touch-only="true">
<template #item="{element}">
<div @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)">
<MkDriveFileThumbnail :data-id="element.id" class="thumbnail" :file="element" fit="cover"/>
<div class="sensitive" v-if="element.isSensitive">
<Fa class="icon" :icon="faExclamationTriangle"/>
</div>
</div>
</div>
</template>
</XDraggable>
<p class="remain">{{ 4 - files.length }}/4</p>
</div>
@ -21,7 +23,7 @@ import * as os from '@/os';
export default defineComponent({
components: {
XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
MkDriveFileThumbnail
},
@ -36,7 +38,7 @@ export default defineComponent({
}
},
emits: ['updated', 'detach'],
emits: ['updated', 'detach', 'changeSensitive', 'changeName'],
data() {
return {
@ -46,6 +48,17 @@ export default defineComponent({
};
},
computed: {
_files: {
get() {
return this.files;
},
set(value) {
this.$emit('updated', value);
}
}
},
methods: {
detachMedia(id) {
if (this.detachMediaFn) {
@ -59,8 +72,7 @@ export default defineComponent({
fileId: file.id,
isSensitive: !file.isSensitive
}).then(() => {
file.isSensitive = !file.isSensitive;
this.$emit('updated', file);
this.$emit('changeSensitive', file, !file.isSensitive);
});
},
async rename(file) {
@ -76,8 +88,8 @@ export default defineComponent({
fileId: file.id,
name: result
}).then(() => {
this.$emit('changeName', file, result);
file.name = result;
this.$emit('updated', file);
});
},
showFileMenu(file, ev: MouseEvent) {

16
src/client/components/post-form.vue
View File

@ -36,7 +36,7 @@
</div>
<input v-show="useCw" ref="cw" class="cw" v-model="cw" :placeholder="$t('annotation')" @keydown="onKeydown">
<textarea v-model="text" class="text" :class="{ withCw: useCw }" ref="text" :disabled="posting" :placeholder="placeholder" @keydown="onKeydown" @paste="onPaste"></textarea>
<XPostFormAttaches class="attaches" :files="files" @updated="updateMedia" @detach="detachMedia"/>
<XPostFormAttaches class="attaches" :files="files" @updated="updateFiles" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
<XPollEditor v-if="poll" :poll="poll" @destroyed="poll = null" @updated="onPollUpdate"/>
<footer>
<button class="_button" @click="chooseFileFrom" v-tooltip="$t('attachFile')"><Fa :icon="faPhotoVideo"/></button>
@ -359,12 +359,20 @@ export default defineComponent({
});
},
detachMedia(id) {
detachFile(id) {
this.files = this.files.filter(x => x.id != id);
},
updateMedia(file) {
this.files[this.files.findIndex(x => x.id === file.id)] = file;
updateFiles(files) {
this.files = files;
},
updateFileSensitive(file, sensitive) {
this.files[this.files.findIndex(x => x.id === file.id)].isSensitive = sensitive;
},
updateFileName(file, name) {
this.files[this.files.findIndex(x => x.id === file.id)].name = name;
},
upload(file: File, name?: string) {