From e366adbb6ca83f526c71d26ed03e20790b21af74 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 15 Sep 2019 12:09:19 +0300 Subject: [PATCH 1/3] updated logic for padding with spaces, improved spam mode --- src/components/emoji_input/emoji_input.js | 29 +++++++++++++++++-- src/components/emoji_picker/emoji_picker.js | 2 +- src/components/emoji_picker/emoji_picker.scss | 4 ++- src/components/emoji_picker/emoji_picker.vue | 6 +++- 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 94af6e2f2..41ee239c5 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 8c60916b0..cb93f0c18 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 8c07fd276..094388987 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 8bc7c3825..b32d08622 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" > - +
Date: Sun, 15 Sep 2019 12:28:52 +0300 Subject: [PATCH 2/3] improved post form's icons at bottom display --- src/components/media_upload/media_upload.vue | 16 +++++---- .../post_status_form/post_status_form.vue | 36 +++++++++++++++---- 2 files changed, 38 insertions(+), 14 deletions(-) diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue index ac32ae835..1dda7bc13 100644 --- a/src/components/media_upload/media_upload.vue +++ b/src/components/media_upload/media_upload.vue @@ -31,12 +31,14 @@ diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 0e0b0e60e..89e51b977 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -159,6 +159,7 @@
@@ -316,6 +317,8 @@ .form-bottom-left { display: flex; flex: 1; + padding-right: 7px; + margin-right: 7px; } .text-format { @@ -325,19 +328,38 @@ } } - .poll-icon, .emoji-icon { + .media-upload-icon, .poll-icon, .emoji-icon { font-size: 26px; flex: 1; - .selected { - color: $fallback--lightText; - color: var(--lightText, $fallback--lightText); + i { + display: block; + width: 100%; + } + + &.selected, &:hover { + // needs to be specific to override icon default color + i, label { + color: $fallback--lightText; + color: var(--lightText, $fallback--lightText); + } } } + // Order is not necessary but a good indicator + .media-upload-icon { + order: 1; + text-align: left; + } + .emoji-icon { - flex: 0; - min-width: 50px; + order: 2; + text-align: center; + } + + .poll-icon { + order: 3; + text-align: right; } .icon-chart-bar { From 312e2aa14f044920cb8baa5e9bc296b992194dbd Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 15 Sep 2019 12:51:39 +0300 Subject: [PATCH 3/3] fix bottom-left icons being too damn wide --- src/components/post_status_form/post_status_form.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 89e51b977..b50607e6a 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -300,6 +300,7 @@ .post-status-form { .form-bottom { display: flex; + justify-content: space-between; padding: 0.5em; height: 32px; @@ -319,6 +320,7 @@ flex: 1; padding-right: 7px; margin-right: 7px; + max-width: 10em; } .text-format {