diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 68b90c72..c1e79072 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -267,11 +267,11 @@ const conversation = { }, replies () { let i = 1 - + return reduce(this.conversation, (result, { id, in_reply_to_status_id }) => { - + const irid = in_reply_to_status_id - + if (irid) { result[irid] = result[irid] || [] result[irid].push({ @@ -414,6 +414,11 @@ const conversation = { }, toggleExpanded () { this.expanded = !this.expanded + this.$nextTick(() => { + if (!this.expanded) { + this.$el.scrollIntoView({ block: 'nearest' }) + } + }) }, getConversationId (statusId) { const status = this.$store.state.statuses.allStatusesObject[statusId] diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 61f1358a..934dd7ee 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -278,5 +278,8 @@ &.-expanded.status-fadein { margin: calc(var(--status-margin, $status-margin) / 2); } + + /* HACK: this value was picked arbitrarily and this is likely not even the right place */ + scroll-margin-block-start: calc(var(--navbar-height) * 2); } diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index 138a5b51..d6e5da53 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -183,7 +183,7 @@ const EmojiInput = { // Async: cancel if textAtCaret has changed during wait if (this.textAtCaret !== newWord) return if (matchedSuggestions.length <= 0) return - this.suggestions = take(matchedSuggestions, 5) + this.suggestions = take(matchedSuggestions, 25) .map(({ imageUrl, ...rest }) => ({ ...rest, img: imageUrl || '' @@ -300,6 +300,9 @@ const EmojiInput = { if (this.highlighted < 0) { this.highlighted = this.suggestions.length - 1 } + const panelBody = this.$refs['panel-body'] + const highlighted = panelBody.children[this.highlighted] + highlighted.scrollIntoView({ block: 'nearest' }) e.preventDefault() } else { this.highlighted = 0 @@ -312,6 +315,9 @@ const EmojiInput = { if (this.highlighted >= len) { this.highlighted = 0 } + const panelBody = this.$refs['panel-body'] + const highlighted = panelBody.children[this.highlighted] + highlighted.scrollIntoView({ block: 'nearest' }) e.preventDefault() } else { this.highlighted = 0 diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue index aeacf544..c4174c27 100644 --- a/src/components/emoji_input/emoji_input.vue +++ b/src/components/emoji_input/emoji_input.vue @@ -128,6 +128,12 @@ --postLink: var(--popoverPostLink, $fallback--link); --postFaintLink: var(--popoverPostFaintLink, $fallback--link); --icon: var(--popoverIcon, $fallback--icon); + + overflow-y: scroll; + scrollbar-gutter: stable; + scrollbar-width: thin; + max-height: calc((0.2em * 2 + 1px + 32px) * 5); + scroll-padding-block: calc((0.2em * 2 + 1px + 32px) * 2); } } diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 9a2307cb..1e53665d 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -31,7 +31,7 @@ const EmojiPicker = { data () { return { keyword: '', - activeGroup: 'standard', + activeGroup: 'recent', showingStickers: false, keepOpen: false } diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue index 146754db..a67115b6 100644 --- a/src/components/poll/poll_form.vue +++ b/src/components/poll/poll_form.vue @@ -24,6 +24,7 @@