limepotato/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2024-11-29 21:37:34 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve usability

Browse source
This commit is contained in:
syuilo 2018-11-13 15:01:05 +09:00
parent c1cc0a7537
commit 63b41ed68f
2 changed files with 52 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/client/app/common/views/widgets/photo-stream.vue
View file

@ -5,7 +5,13 @@
<p :class="$style.fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p> <p :class="$style.fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
<div :class="$style.stream" v-if="!fetching && images.length > 0"> <div :class="$style.stream" v-if="!fetching && images.length > 0">
<div v-for="image in images" :class="$style.img" :style="`background-image: url(${image.thumbnailUrl || image.url})`"></div> <div v-for="image in images"
:class="$style.img"
:style="`background-image: url(${image.thumbnailUrl || image.url})`"
draggable="true"
@dragstart="onDragstart(image, $event)"
@dragend="onDragend"
></div>
</div> </div>
<p :class="$style.empty" v-if="!fetching && images.length == 0">{{ $t('no-photos') }}</p> <p :class="$style.empty" v-if="!fetching && images.length == 0">{{ $t('no-photos') }}</p>
</mk-widget-container> </mk-widget-container>
@ -31,6 +37,7 @@ export default define({
connection: null connection: null
}; };
}, },
mounted() { mounted() {
this.connection = this.$root.stream.useSharedConnection('main'); this.connection = this.$root.stream.useSharedConnection('main');
@ -44,9 +51,11 @@ export default define({
this.fetching = false; this.fetching = false;
}); });
}, },
beforeDestroy() { beforeDestroy() {
this.connection.dispose(); this.connection.dispose();
}, },
methods: { methods: {
onDriveFileCreated(file) { onDriveFileCreated(file) {
if (/^image\/.+$/.test(file.type)) { if (/^image\/.+$/.test(file.type)) {
@ -54,6 +63,7 @@ export default define({
if (this.images.length > 9) this.images.pop(); if (this.images.length > 9) this.images.pop();
} }
}, },
func() { func() {
if (this.props.design == 2) { if (this.props.design == 2) {
this.props.design = 0; this.props.design = 0;
@ -62,7 +72,16 @@ export default define({
} }
this.save(); this.save();
} },
onDragstart(file, e) {
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('mk_drive_file', JSON.stringify(file));
},
onDragend(e) {
this.browser.isDragSource = false;
},
} }
}); });
</script> </script>

32
src/client/app/desktop/views/widgets/post-form.vue
View file

@ -3,7 +3,10 @@
<mk-widget-container :show-header="props.design == 0"> <mk-widget-container :show-header="props.design == 0">
<template slot="header"><fa icon="pencil-alt"/>{{ $t('title') }}</template> <template slot="header"><fa icon="pencil-alt"/>{{ $t('title') }}</template>
<div class="lhcuptdmcdkfwmipgazeawoiuxpzaclc-body"> <div class="lhcuptdmcdkfwmipgazeawoiuxpzaclc-body"
@dragover.stop="onDragover"
@drop.stop="onDrop"
>
<div class="textarea"> <div class="textarea">
<textarea <textarea
:disabled="posting" :disabled="posting"
@ -130,6 +133,33 @@ export default define({
(this.$refs.uploader as any).upload(file); (this.$refs.uploader as any).upload(file);
}, },
onDragover(e) {
const isFile = e.dataTransfer.items[0].kind == 'file';
const isDriveFile = e.dataTransfer.types[0] == 'mk_drive_file';
if (isFile || isDriveFile) {
e.preventDefault();
e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
}
},
onDrop(e): void {
// ファイルだったら
if (e.dataTransfer.files.length > 0) {
e.preventDefault();
Array.from(e.dataTransfer.files).forEach(this.upload);
return;
}
//#region ドライブのファイル
const driveFile = e.dataTransfer.getData('mk_drive_file');
if (driveFile != null && driveFile != '') {
const file = JSON.parse(driveFile);
this.files.push(file);
e.preventDefault();
}
//#endregion
},
async emoji() { async emoji() {
const Picker = await import('../components/emoji-picker-dialog.vue').then(m => m.default); const Picker = await import('../components/emoji-picker-dialog.vue').then(m => m.default);
const button = this.$refs.emoji; const button = this.$refs.emoji;