emoji_input: show more suggestions

5 suggestions is really too little, so increase the limit and make the
list scrollable.
This commit is contained in:
novenary 2024-09-17 03:28:40 +03:00
parent 2765a5c163
commit 7b8429aa24
2 changed files with 13 additions and 1 deletions

View file

@ -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

View file

@ -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);
}
}