63 lines
2.5 KiB
Diff
63 lines
2.5 KiB
Diff
|
From 7b8429aa24985bb53e5c0c8c26276e4d5e0b050f Mon Sep 17 00:00:00 2001
|
||
|
|
From: novenary <novenary@kwak.zip>
|
||
|
|
Date: Tue, 17 Sep 2024 03:28:40 +0300
|
||
|
|
Subject: [PATCH] emoji_input: show more suggestions
|
||
|
|
|
||
|
|
5 suggestions is really too little, so increase the limit and make the
|
||
|
|
list scrollable.
|
||
|
|
---
|
||
|
|
src/components/emoji_input/emoji_input.js | 8 +++++++-
|
||
|
|
src/components/emoji_input/emoji_input.vue | 6 ++++++
|
||
|
|
2 files changed, 13 insertions(+), 1 deletion(-)
|
||
|
|
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|