diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/emoji-input/emoji-input.js | 1 | ||||
| -rw-r--r-- | src/components/emoji-selector/emoji-selector.vue | 4 | ||||
| -rw-r--r-- | src/components/post_status_form/post_status_form.js | 27 | ||||
| -rw-r--r-- | src/components/post_status_form/post_status_form.vue | 48 |
4 files changed, 59 insertions, 21 deletions
diff --git a/src/components/emoji-input/emoji-input.js b/src/components/emoji-input/emoji-input.js index 99dba1cb..112fd148 100644 --- a/src/components/emoji-input/emoji-input.js +++ b/src/components/emoji-input/emoji-input.js @@ -108,7 +108,6 @@ const EmojiInput = { }, onEmoji (emoji) { const newValue = this.value.substr(0, this.caret) + emoji + this.value.substr(this.caret) - this.$refs.input.focus() this.$emit('input', newValue) this.caret += emoji.length setTimeout(() => { diff --git a/src/components/emoji-selector/emoji-selector.vue b/src/components/emoji-selector/emoji-selector.vue index 98d2642e..0630772c 100644 --- a/src/components/emoji-selector/emoji-selector.vue +++ b/src/components/emoji-selector/emoji-selector.vue @@ -92,6 +92,10 @@ &-search { padding: 5px; + + input { + width: 100%; + } } &-groups { diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index c65c27e2..8b0031de 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -2,6 +2,7 @@ import statusPoster from '../../services/status_poster/status_poster.service.js' import MediaUpload from '../media_upload/media_upload.vue' import ScopeSelector from '../scope_selector/scope_selector.vue' import EmojiInput from '../emoji-input/emoji-input.vue' +import EmojiSelector from '../emoji-selector/emoji-selector.vue' import fileTypeService from '../../services/file_type/file_type.service.js' import Completion from '../../services/completion/completion.js' import { take, filter, reject, map, uniqBy } from 'lodash' @@ -32,7 +33,8 @@ const PostStatusForm = { components: { MediaUpload, ScopeSelector, - EmojiInput + EmojiInput, + EmojiSelector }, mounted () { this.resize(this.$refs.textarea) @@ -233,6 +235,29 @@ const PostStatusForm = { onKeydown (e) { e.stopPropagation() }, + onEmoji (emoji) { + const newValue = this.newStatus.status.substr(0, this.caret) + emoji + this.newStatus.status.substr(this.caret) + this.newStatus.status = newValue + this.caret += emoji.length + setTimeout(() => { + this.updateCaretPos() + }) + }, + updateCaretPos () { + const elem = this.$refs.textarea + if (elem.createTextRange) { + const range = elem.createTextRange() + range.move('character', this.caret) + range.select() + } else { + if (elem.selectionStart) { + elem.focus() + elem.setSelectionRange(this.caret, this.caret) + } else { + elem.focus() + } + } + }, setCaret ({target: {selectionStart}}) { this.caret = selectionStart }, diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 1ce2b647..102cb484 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -20,25 +20,28 @@ v-model="newStatus.spoilerText" classname="form-control" /> - <textarea - ref="textarea" - @click="setCaret" - @keyup="setCaret" v-model="newStatus.status" :placeholder="$t('post_status.default')" rows="1" class="form-control" - @keydown="onKeydown" - @keydown.down="cycleForward" - @keydown.up="cycleBackward" - @keydown.shift.tab="cycleBackward" - @keydown.tab="cycleForward" - @keydown.enter="replaceCandidate" - @keydown.meta.enter="postStatus(newStatus)" - @keyup.ctrl.enter="postStatus(newStatus)" - @drop="fileDrop" - @dragover.prevent="fileDrag" - @input="resize" - @paste="paste" - :disabled="posting" - > - </textarea> + <div class="status-input-wrapper"> + <textarea + ref="textarea" + @click="setCaret" + @keyup="setCaret" v-model="newStatus.status" :placeholder="$t('post_status.default')" rows="1" class="form-control" + @keydown="onKeydown" + @keydown.down="cycleForward" + @keydown.up="cycleBackward" + @keydown.shift.tab="cycleBackward" + @keydown.tab="cycleForward" + @keydown.enter="replaceCandidate" + @keydown.meta.enter="postStatus(newStatus)" + @keyup.ctrl.enter="postStatus(newStatus)" + @drop="fileDrop" + @dragover.prevent="fileDrag" + @input="resize" + @paste="paste" + :disabled="posting" + > + </textarea> + <EmojiSelector @emoji="onEmoji" /> + </div> <div class="visibility-tray"> <span class="text-format" v-if="formattingOptionsEnabled"> <label for="post-content-type" class="select"> @@ -179,6 +182,13 @@ } } + .status-input-wrapper { + display: flex; + position: relative; + width: 100%; + flex-direction: column; + } + .attachments { padding: 0 0.5em; |