AkkomaGang/akkoma-fe
5
13
Fork 64
Code Issues 82 Pull requests 20 Projects Releases 1 Wiki Activity

emoji_input: show more suggestions

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/emoji_input/emoji_input.js
View file

@ -183,7 +183,7 @@ const EmojiInput = {
// Async: cancel if textAtCaret has changed during wait // Async: cancel if textAtCaret has changed during wait
if (this.textAtCaret !== newWord) return if (this.textAtCaret !== newWord) return
if (matchedSuggestions.length <= 0) return if (matchedSuggestions.length <= 0) return
this.suggestions = take(matchedSuggestions, 5) this.suggestions = take(matchedSuggestions, 25)
.map(({ imageUrl, ...rest }) => ({ .map(({ imageUrl, ...rest }) => ({
...rest, ...rest,
img: imageUrl || '' img: imageUrl || ''
@ -300,6 +300,9 @@ const EmojiInput = {
if (this.highlighted < 0) { if (this.highlighted < 0) {
this.highlighted = this.suggestions.length - 1 this.highlighted = this.suggestions.length - 1
} }
const panelBody = this.$refs['panel-body']
const highlighted = panelBody.children[this.highlighted]
highlighted.scrollIntoView({ block: 'nearest' })
e.preventDefault() e.preventDefault()
} else { } else {
this.highlighted = 0 this.highlighted = 0
@ -312,6 +315,9 @@ const EmojiInput = {
if (this.highlighted >= len) { if (this.highlighted >= len) {
this.highlighted = 0 this.highlighted = 0
} }
const panelBody = this.$refs['panel-body']
const highlighted = panelBody.children[this.highlighted]
highlighted.scrollIntoView({ block: 'nearest' })
e.preventDefault() e.preventDefault()
} else { } else {
this.highlighted = 0 this.highlighted = 0

6
src/components/emoji_input/emoji_input.vue
View file

@ -128,6 +128,12 @@
--postLink: var(--popoverPostLink, $fallback--link); --postLink: var(--popoverPostLink, $fallback--link);
--postFaintLink: var(--popoverPostFaintLink, $fallback--link); --postFaintLink: var(--popoverPostFaintLink, $fallback--link);
--icon: var(--popoverIcon, $fallback--icon); --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);
} }
} }