helene/FoundKey
2
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve messaging form

Browse source
This commit is contained in:
syuilo 2020-02-06 19:22:15 +09:00
parent c7da2a4b5f
commit 630c531d99
2 changed files with 25 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
CHANGELOG.md
View file

@ -5,6 +5,10 @@ unreleased
-------------------- --------------------
### ✨Improvements ### ✨Improvements
* UIのアニメーションを無効にできるように * UIのアニメーションを無効にできるように
* トークで絵文字ピッカーを表示できるように
### 🐛Fixes
* トークでドライブからファイルを添付出来ない問題を修正
12.1.0 (2020/02/06) 12.1.0 (2020/02/06)
-------------------- --------------------

42
src/client/pages/messaging-room.form.vue
View file

@ -5,7 +5,7 @@
> >
<textarea <textarea
v-model="text" v-model="text"
ref="textarea" ref="text"
@keypress="onKeypress" @keypress="onKeypress"
@paste="onPaste" @paste="onPaste"
:placeholder="$t('input-message-here')" :placeholder="$t('input-message-here')"
@ -16,22 +16,20 @@
<button class="send _button" @click="send" :disabled="!canSend || sending" :title="$t('send')"> <button class="send _button" @click="send" :disabled="!canSend || sending" :title="$t('send')">
<template v-if="!sending"><fa :icon="faPaperPlane"/></template><template v-if="sending"><fa icon="spinner .spin"/></template> <template v-if="!sending"><fa :icon="faPaperPlane"/></template><template v-if="sending"><fa icon="spinner .spin"/></template>
</button> </button>
<button class="attach-from-local _button" @click="chooseFile" :title="$t('attach-from-local')"> <button class="_button" @click="chooseFile"><fa :icon="faPhotoVideo"/></button>
<fa :icon="faUpload"/> <button class="_button" @click="insertEmoji"><fa :icon="faLaughSquint"/></button>
</button>
<button class="attach-from-drive _button" @click="chooseFileFromDrive" :title="$t('attach-from-drive')">
<fa :icon="faCloud"/>
</button>
<input ref="file" type="file" @change="onChangeFile"/> <input ref="file" type="file" @change="onChangeFile"/>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import { faPaperPlane, faUpload, faCloud } from '@fortawesome/free-solid-svg-icons'; import { faPaperPlane, faPhotoVideo, faLaughSquint } from '@fortawesome/free-solid-svg-icons';
import i18n from '../i18n'; import insertTextAtCursor from 'insert-text-at-cursor';
import * as autosize from 'autosize'; import * as autosize from 'autosize';
import i18n from '../i18n';
import { formatTimeString } from '../../misc/format-time-string'; import { formatTimeString } from '../../misc/format-time-string';
import { selectFile } from '../scripts/select-file';
export default Vue.extend({ export default Vue.extend({
i18n, i18n,
@ -53,7 +51,7 @@ export default Vue.extend({
text: null, text: null,
file: null, file: null,
sending: false, sending: false,
faPaperPlane, faUpload, faCloud faPaperPlane, faPhotoVideo, faLaughSquint
}; };
}, },
computed: { computed: {
@ -80,7 +78,7 @@ export default Vue.extend({
} }
}, },
mounted() { mounted() {
autosize(this.$refs.textarea); autosize(this.$refs.text);
// 書きかけの投稿を復元 // 書きかけの投稿を復元
const draft = JSON.parse(localStorage.getItem('message_drafts') || '{}')[this.draftId]; const draft = JSON.parse(localStorage.getItem('message_drafts') || '{}')[this.draftId];
@ -160,14 +158,8 @@ export default Vue.extend({
} }
}, },
chooseFile() { chooseFile(e) {
(this.$refs.file as any).click(); selectFile(this, e.currentTarget || e.target, this.$t('selectFile'), false).then(file => {
},
chooseFileFromDrive() {
this.$chooseDriveFile({
multiple: false
}).then(file => {
this.file = file; this.file = file;
}); });
}, },
@ -227,6 +219,15 @@ export default Vue.extend({
localStorage.setItem('message_drafts', JSON.stringify(data)); localStorage.setItem('message_drafts', JSON.stringify(data));
}, },
async insertEmoji(ev) {
const vm = this.$root.new(await import('../components/emoji-picker.vue').then(m => m.default), {
source: ev.currentTarget || ev.target
}).$once('chosen', emoji => {
insertTextAtCursor(this.$refs.text, emoji);
vm.close();
});
}
} }
}); });
</script> </script>
@ -330,8 +331,7 @@ export default Vue.extend({
} }
} }
.attach-from-local, ._button {
.attach-from-drive {
margin: 0; margin: 0;
padding: 16px; padding: 16px;
font-size: 1em; font-size: 1em;