diff --git a/src/App.scss b/src/App.scss index ff7fb5dc6..e4c764bf0 100644 --- a/src/App.scss +++ b/src/App.scss @@ -131,6 +131,7 @@ input, textarea, .select { font-family: sans-serif; font-family: var(--inputFont, sans-serif); font-size: 14px; + margin: 0; padding: 8px .5em; box-sizing: border-box; display: inline-block; @@ -199,6 +200,7 @@ input, textarea, .select { } } + label::before { + flex-shrink: 0; display: inline-block; content: ''; transition: box-shadow 200ms; @@ -235,6 +237,7 @@ input, textarea, .select { } } + label::before { + flex-shrink: 0; display: inline-block; content: '✔'; transition: color 200ms; diff --git a/src/components/emoji-input/emoji-input.js b/src/components/emoji-input/emoji-input.js index 0955a37e3..cd0247df2 100644 --- a/src/components/emoji-input/emoji-input.js +++ b/src/components/emoji-input/emoji-input.js @@ -59,7 +59,8 @@ const EmojiInput = { input: undefined, highlighted: 0, caret: 0, - focused: false + focused: false, + blurTimeout: null } }, computed: { @@ -122,12 +123,12 @@ const EmojiInput = { this.$emit('input', newValue) this.caret = 0 }, - replaceText (e) { + replaceText (e, suggestion) { const len = this.suggestions.length || 0 if (this.textAtCaret.length === 1) { return } - if (len > 0) { - const suggestion = this.suggestions[this.highlighted] - const replacement = suggestion.replacement + if (len > 0 || suggestion) { + const chosenSuggestion = suggestion || this.suggestions[this.highlighted] + const replacement = chosenSuggestion.replacement const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement) this.$emit('input', newValue) this.highlighted = 0 @@ -173,13 +174,21 @@ const EmojiInput = { onBlur (e) { // Clicking on any suggestion removes focus from autocomplete, // preventing click handler ever executing. - setTimeout(() => { + this.blurTimeout = setTimeout(() => { this.focused = false this.setCaret(e) this.resize() }, 200) }, + onClick (e, suggestion) { + this.replaceText(e, suggestion) + }, onFocus (e) { + if (this.blurTimeout) { + clearTimeout(this.blurTimeout) + this.blurTimeout = null + } + this.focused = true this.setCaret(e) this.resize() diff --git a/src/components/emoji-input/emoji-input.vue b/src/components/emoji-input/emoji-input.vue index 8437a4959..b1f7afa55 100644 --- a/src/components/emoji-input/emoji-input.vue +++ b/src/components/emoji-input/emoji-input.vue @@ -6,7 +6,7 @@
+ {{ charactersLeft }} +
{{ charactersLeft }}
-{{ charactersLeft }}
@@ -304,10 +309,12 @@ } .form-post-body { - line-height:16px; + height: 16px; // Only affects the empty-height + line-height: 16px; resize: none; overflow: hidden; transition: min-height 200ms 100ms; + padding-bottom: 1.75em; min-height: 1px; box-sizing: content-box; } @@ -316,6 +323,23 @@ min-height: 48px; } + .main-input { + position: relative; + } + + .character-counter { + position: absolute; + bottom: 0; + right: 0; + padding: 0; + margin: 0 0.5em; + + &.error { + color: $fallback--cRed; + color: var(--cRed, $fallback--cRed); + } + } + .btn { cursor: pointer; } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 58402f7e2..440e19575 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -124,7 +124,7 @@