[Client] Improve post-form widget
This commit is contained in:
syuilo
parent
a4b2b093fc
commit
dd3f007582
|
|
@ -1,16 +1,48 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="mkw-post-form">
|
<div>
|
||||||
<template v-if="props.design == 0">
|
<mk-widget-container :show-header="props.design == 0">
|
||||||
<p class="title"><fa icon="pencil-alt"/>{{ $t('title') }}</p>
|
<template slot="header"><fa icon="pencil-alt"/>{{ $t('title') }}</template>
|
||||||
</template>
|
|
||||||
<textarea :disabled="posting" v-model="text" @keydown="onKeydown" :placeholder="placeholder"></textarea>
|
<div class="lhcuptdmcdkfwmipgazeawoiuxpzaclc-body">
|
||||||
<button @click="post" :disabled="posting">{{ $t('note') }}</button>
|
<div class="textarea">
|
||||||
|
<textarea
|
||||||
|
:disabled="posting"
|
||||||
|
v-model="text"
|
||||||
|
@keydown="onKeydown"
|
||||||
|
@paste="onPaste"
|
||||||
|
:placeholder="placeholder"
|
||||||
|
ref="text"
|
||||||
|
v-autocomplete="'text'"
|
||||||
|
></textarea>
|
||||||
|
<button class="emoji" @click="emoji" ref="emoji">
|
||||||
|
<fa :icon="['far', 'laugh']"/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="files" v-show="files.length != 0">
|
||||||
|
<x-draggable :list="files" :options="{ animation: 150 }">
|
||||||
|
<div v-for="file in files" :key="file.id">
|
||||||
|
<div class="img" :style="{ backgroundImage: `url(${file.thumbnailUrl})` }" :title="file.name"></div>
|
||||||
|
<img class="remove" @click="detachMedia(file.id)" src="/assets/desktop/remove.png" :title="$t('attach-cancel')" alt=""/>
|
||||||
|
</div>
|
||||||
|
</x-draggable>
|
||||||
|
</div>
|
||||||
|
<input ref="file" type="file" multiple="multiple" tabindex="-1" @change="onChangeFile"/>
|
||||||
|
<mk-uploader ref="uploader" @uploaded="attachMedia"/>
|
||||||
|
<footer>
|
||||||
|
<button @click="chooseFile"><fa icon="upload"/></button>
|
||||||
|
<button @click="chooseFileFromDrive"><fa icon="cloud"/></button>
|
||||||
|
<button @click="post" :disabled="posting" class="post">{{ $t('note') }}</button>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</mk-widget-container>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import define from '../../../common/define-widget';
|
import define from '../../../common/define-widget';
|
||||||
import i18n from '../../../i18n';
|
import i18n from '../../../i18n';
|
||||||
|
import insertTextAtCursor from 'insert-text-at-cursor';
|
||||||
|
import * as XDraggable from 'vuedraggable';
|
||||||
|
|
||||||
export default define({
|
export default define({
|
||||||
name: 'post-form',
|
name: 'post-form',
|
||||||
|
|
@ -19,12 +51,19 @@ export default define({
|
||||||
})
|
})
|
||||||
}).extend({
|
}).extend({
|
||||||
i18n: i18n('desktop/views/widgets/post-form.vue'),
|
i18n: i18n('desktop/views/widgets/post-form.vue'),
|
||||||
|
|
||||||
|
components: {
|
||||||
|
XDraggable
|
||||||
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
posting: false,
|
posting: false,
|
||||||
text: ''
|
text: '',
|
||||||
|
files: [],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
placeholder(): string {
|
placeholder(): string {
|
||||||
const xs = [
|
const xs = [
|
||||||
|
|
@ -38,6 +77,7 @@ export default define({
|
||||||
return xs[Math.floor(Math.random() * xs.length)];
|
return xs[Math.floor(Math.random() * xs.length)];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
func() {
|
func() {
|
||||||
if (this.props.design == 1) {
|
if (this.props.design == 1) {
|
||||||
|
|
@ -47,14 +87,68 @@ export default define({
|
||||||
}
|
}
|
||||||
this.save();
|
this.save();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
chooseFile() {
|
||||||
|
(this.$refs.file as any).click();
|
||||||
|
},
|
||||||
|
|
||||||
|
chooseFileFromDrive() {
|
||||||
|
this.$chooseDriveFile({
|
||||||
|
multiple: true
|
||||||
|
}).then(files => {
|
||||||
|
files.forEach(this.attachMedia);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
attachMedia(driveFile) {
|
||||||
|
this.files.push(driveFile);
|
||||||
|
this.$emit('change-attached-files', this.files);
|
||||||
|
},
|
||||||
|
|
||||||
|
detachMedia(id) {
|
||||||
|
this.files = this.files.filter(x => x.id != id);
|
||||||
|
this.$emit('change-attached-files', this.files);
|
||||||
|
},
|
||||||
|
|
||||||
onKeydown(e) {
|
onKeydown(e) {
|
||||||
if ((e.which == 10 || e.which == 13) && (e.ctrlKey || e.metaKey) && !this.posting && this.text) this.post();
|
if ((e.which == 10 || e.which == 13) && (e.ctrlKey || e.metaKey) && !this.posting && this.text) this.post();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
onPaste(e) {
|
||||||
|
Array.from(e.clipboardData.items).forEach((item: any) => {
|
||||||
|
if (item.kind == 'file') {
|
||||||
|
this.upload(item.getAsFile());
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
onChangeFile() {
|
||||||
|
Array.from((this.$refs.file as any).files).forEach(this.upload);
|
||||||
|
},
|
||||||
|
|
||||||
|
upload(file) {
|
||||||
|
(this.$refs.uploader as any).upload(file);
|
||||||
|
},
|
||||||
|
|
||||||
|
async emoji() {
|
||||||
|
const Picker = await import('../components/emoji-picker-dialog.vue').then(m => m.default);
|
||||||
|
const button = this.$refs.emoji;
|
||||||
|
const rect = button.getBoundingClientRect();
|
||||||
|
const vm = this.$root.new(Picker, {
|
||||||
|
x: button.offsetWidth + rect.left + window.pageXOffset,
|
||||||
|
y: rect.top + window.pageYOffset
|
||||||
|
});
|
||||||
|
vm.$once('chosen', emoji => {
|
||||||
|
insertTextAtCursor(this.$refs.text, emoji);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
post() {
|
post() {
|
||||||
this.posting = true;
|
this.posting = true;
|
||||||
|
|
||||||
this.$root.api('notes/create', {
|
this.$root.api('notes/create', {
|
||||||
text: this.text
|
text: this.text == '' ? undefined : this.text,
|
||||||
|
fileIds: this.files.length > 0 ? this.files.map(f => f.id) : undefined,
|
||||||
}).then(data => {
|
}).then(data => {
|
||||||
this.clear();
|
this.clear();
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
|
|
@ -63,66 +157,114 @@ export default define({
|
||||||
this.posting = false;
|
this.posting = false;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
clear() {
|
clear() {
|
||||||
this.text = '';
|
this.text = '';
|
||||||
|
this.files = [];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
|
.lhcuptdmcdkfwmipgazeawoiuxpzaclc-body
|
||||||
|
> .textarea
|
||||||
|
> .emoji
|
||||||
|
position absolute
|
||||||
|
top 0
|
||||||
|
right 0
|
||||||
|
padding 10px
|
||||||
|
font-size 18px
|
||||||
|
color var(--text)
|
||||||
|
opacity 0.5
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
color var(--textHighlighted)
|
||||||
|
opacity 1
|
||||||
|
|
||||||
.mkw-post-form
|
&:active
|
||||||
background #fff
|
color var(--primary)
|
||||||
overflow hidden
|
opacity 1
|
||||||
border solid 1px rgba(#000, 0.075)
|
|
||||||
border-radius 6px
|
|
||||||
|
|
||||||
> .title
|
> textarea
|
||||||
z-index 1
|
display block
|
||||||
margin 0
|
width 100%
|
||||||
padding 0 16px
|
max-width 100%
|
||||||
line-height 42px
|
min-width 100%
|
||||||
font-size 0.9em
|
padding 16px
|
||||||
font-weight bold
|
color var(--desktopPostFormTextareaFg)
|
||||||
color #888
|
outline none
|
||||||
box-shadow 0 1px rgba(#000, 0.07)
|
background var(--desktopPostFormTextareaBg)
|
||||||
|
border none
|
||||||
|
border-bottom solid 1px var(--faceDivider)
|
||||||
|
|
||||||
> [data-icon]
|
&:focus
|
||||||
margin-right 4px
|
& + .emoji
|
||||||
|
opacity 0.7
|
||||||
|
|
||||||
> textarea
|
> .files
|
||||||
display block
|
> div
|
||||||
width 100%
|
padding 4px
|
||||||
max-width 100%
|
|
||||||
min-width 100%
|
|
||||||
padding 16px
|
|
||||||
margin-bottom 28px + 16px
|
|
||||||
border none
|
|
||||||
border-bottom solid 1px #eee
|
|
||||||
|
|
||||||
> button
|
&:after
|
||||||
display block
|
content ""
|
||||||
position absolute
|
display block
|
||||||
bottom 8px
|
clear both
|
||||||
right 8px
|
|
||||||
margin 0
|
|
||||||
padding 0 10px
|
|
||||||
height 28px
|
|
||||||
color var(--primaryForeground)
|
|
||||||
background var(--primary) !important
|
|
||||||
outline none
|
|
||||||
border none
|
|
||||||
border-radius 4px
|
|
||||||
transition background 0.1s ease
|
|
||||||
cursor pointer
|
|
||||||
|
|
||||||
&:hover
|
> div
|
||||||
background var(--primaryLighten10) !important
|
float left
|
||||||
|
border solid 4px transparent
|
||||||
|
cursor move
|
||||||
|
|
||||||
&:active
|
&:hover > .remove
|
||||||
background var(--primaryDarken10) !important
|
display block
|
||||||
transition background 0s ease
|
|
||||||
|
> .img
|
||||||
|
width 64px
|
||||||
|
height 64px
|
||||||
|
background-size cover
|
||||||
|
background-position center center
|
||||||
|
|
||||||
|
> .remove
|
||||||
|
display none
|
||||||
|
position absolute
|
||||||
|
top -6px
|
||||||
|
right -6px
|
||||||
|
width 16px
|
||||||
|
height 16px
|
||||||
|
cursor pointer
|
||||||
|
|
||||||
|
> input[type=file]
|
||||||
|
display none
|
||||||
|
|
||||||
|
> footer
|
||||||
|
display flex
|
||||||
|
padding 8px
|
||||||
|
|
||||||
|
> button:not(.post)
|
||||||
|
color var(--text)
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
color var(--textHighlighted)
|
||||||
|
|
||||||
|
> .post
|
||||||
|
display block
|
||||||
|
margin 0 0 0 auto
|
||||||
|
padding 0 10px
|
||||||
|
height 28px
|
||||||
|
color var(--primaryForeground)
|
||||||
|
background var(--primary) !important
|
||||||
|
outline none
|
||||||
|
border none
|
||||||
|
border-radius 4px
|
||||||
|
transition background 0.1s ease
|
||||||
|
cursor pointer
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background var(--primaryLighten10) !important
|
||||||
|
|
||||||
|
&:active
|
||||||
|
background var(--primaryDarken10) !important
|
||||||
|
transition background 0s ease
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue