diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/emoji_input/emoji_input.js | 29 | ||||
| -rw-r--r-- | src/components/emoji_picker/emoji_picker.js | 2 | ||||
| -rw-r--r-- | src/components/emoji_picker/emoji_picker.scss | 4 | ||||
| -rw-r--r-- | src/components/emoji_picker/emoji_picker.vue | 6 | ||||
| -rw-r--r-- | src/i18n/en.json | 2 |
5 files changed, 36 insertions, 7 deletions
diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index 94af6e2f..41ee239c 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -178,14 +178,37 @@ const EmojiInput = { this.caret = 0 }, insert ({ insertion, spamMode }) { + const before = this.value.substring(0, this.caret) || '' + const after = this.value.substring(this.caret) || '' + + /* Using a bit more smart approach to padding emojis with spaces: + * - put a space before cursor if there isn't one already, unless we + * are at the beginning of post or in spam mode + * - put a space after emoji if there isn't one already unless we are + * in spam mode + * + * The idea is that when you put a cursor somewhere in between sentence + * inserting just ' :emoji: ' will add more spaces to post which might + * break the flow/spacing, as well as the case where user ends sentence + * with a space before adding emoji. + * + * Spam mode is intended for creating multi-part emojis and overall spamming + * them, masto seem to be rendering :emoji::emoji: correctly now so why not + */ + const isSpaceRegex = /\s/ + const spaceBefore = !isSpaceRegex.exec(before.slice(-1)) && before.length && !spamMode > 0 ? ' ' : '' + const spaceAfter = !isSpaceRegex.exec(after[0]) && !spamMode ? ' ' : '' + const newValue = [ - this.value.substring(0, this.caret), + before, + spaceBefore, insertion, - this.value.substring(this.caret) + spaceAfter, + after ].join('') this.spamMode = spamMode this.$emit('input', newValue) - const position = this.caret + insertion.length + const position = this.caret + (insertion + spaceAfter + spaceBefore).length this.$nextTick(function () { // Re-focus inputbox after clicking suggestion diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 8c60916b..cb93f0c1 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -27,7 +27,7 @@ const EmojiPicker = { methods: { onEmoji (emoji) { const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement - this.$emit('emoji', { insertion: ` ${value} `, spamMode: this.spamMode }) + this.$emit('emoji', { insertion: value, spamMode: this.spamMode }) }, highlight (key) { const ref = this.$refs['group-' + key] diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index 8c07fd27..09438898 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -15,7 +15,8 @@ line-height: normal; } .spam-mode-label { - padding: 7px; + padding: 0 7px; + display: flex; } .heading { @@ -104,6 +105,7 @@ flex: 1 1 1px; position: relative; overflow: auto; + user-select: none; mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat, linear-gradient(to bottom, white 0, transparent 100%) top no-repeat, linear-gradient(to top, white, white); diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index 8bc7c382..b32d0862 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -83,7 +83,11 @@ v-model="spamMode" type="checkbox" > - <label class="spam-mode-label" :for="labelKey + 'spam-mode'">{{ $t('emoji.spam') }}</label> + <label class="spam-mode-label" :for="labelKey + 'spam-mode'"> + <div class="spam-mode-label-text"> + {{ $t('emoji.spam') }} + </div> + </label> </div> </div> <div diff --git a/src/i18n/en.json b/src/i18n/en.json index e74469ed..7676e7a8 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -109,7 +109,7 @@ "emoji": { "stickers": "Stickers", "emoji": "Emoji", - "spam": "Keep open after adding emoji", + "spam": "Keep picker open, don't separate emoji with spaces", "search_emoji": "Search for an emoji", "add_emoji": "Insert emoji", "custom": "Custom emoji", |