amechama/sharkey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Client] Improve post-form widget

Browse Source
This commit is contained in:
syuilo 2018-11-13 01:04:15 +09:00
parent a4b2b093fc
commit dd3f007582
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
1 changed files with 195 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

248
src/client/app/desktop/views/widgets/post-form.vue
View File

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