ESCA111/neochat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use EmojiDialog popup in chatbar

Browse Source 
This converts the emoji dialog in the chatbar to be the same popup as for reactions. This includes:

- EmojiPicker and ReactionPicker were already similar and are made identical, as such ReactionPicker no longer needed
- Emoji dialog used for both reactions and chatbar emojis
- Add some parameters to allow for different use cases (include custom emojis and whether selection closes the popup)

![image](/uploads/c71bb5ffdc6914efad654998a886ade6/image.png)
This commit is contained in:
James Graham
2022-12-06 14:49:25 +00:00
parent 1ab5bdb600
commit b5d8acf9de
7 changed files with 62 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/qml/Component/Emoji/EmojiPicker.qml
View File

@@ -8,38 +8,52 @@ import org.kde.kirigami 2.15 as Kirigami
import org.kde.neochat 1.0
ColumnLayout {
id: emojiPicker
id: root
property bool includeCustom: false
readonly property var currentEmojiModel: {
if (includeCustom) {
EmojiModel.categoriesWithCustom
} else {
EmojiModel.categories
}
}
readonly property int categoryIconSize: 45
readonly property var currentCategory: EmojiModel.categoriesWithCustom[categories.currentIndex].category
readonly property int categoryCount: categories.count
readonly property var currentCategory: currentEmojiModel[categories.currentIndex].category
readonly property alias categoryCount: categories.count
signal chosen(string emoji)
spacing: 0
onActiveFocusChanged: if (activeFocus) categories.forceActiveFocus()
QQC2.ScrollView {
Layout.fillWidth: true
Layout.preferredHeight: root.categoryIconSize + QQC2.ScrollBar.horizontal.height
QQC2.ScrollBar.horizontal.height: QQC2.ScrollBar.horizontal.visible ? QQC2.ScrollBar.horizontal.implicitHeight : 0
Layout.preferredHeight: emojiPicker.categoryIconSize + QQC2.ScrollBar.horizontal.height
ListView {
id: categories
clip: true
focus: true
orientation: ListView.Horizontal
Keys.onReturnPressed: if (emojiGrid.count > 0) emojiGrid.focus = true
Keys.onEnterPressed: if (emojiGrid.count > 0) emojiGrid.focus = true
KeyNavigation.down: emojiGrid.count > 0 ? emojiGrid : categories
KeyNavigation.tab: emojiGrid.count > 0 ? emojiGrid : categories
keyNavigationEnabled: true
keyNavigationWraps: true
Keys.forwardTo: searchField
interactive: width !== contentWidth
model: EmojiModel.categoriesWithCustom
delegate: EmojiDelegate {
id: emojiDelegate
model: root.currentEmojiModel
Component.onCompleted: categories.forceActiveFocus()
width: emojiPicker.categoryIconSize
delegate: EmojiDelegate {
width: root.categoryIconSize
height: width
checked: categories.currentIndex === model.index
@@ -48,6 +62,7 @@ ColumnLayout {
onClicked: {
categories.currentIndex = index
categories.focus = true
}
}
}
@@ -66,14 +81,13 @@ ColumnLayout {
EmojiGrid {
id: emojiGrid
targetIconSize: emojiPicker.categoryIconSize
model: searchField.text.length === 0 ? EmojiModel.emojis(emojiPicker.currentCategory) : EmojiModel.filterModel(searchField.text, false)
targetIconSize: root.categoryIconSize
model: searchField.text.length === 0 ? EmojiModel.emojis(root.currentCategory) : (root.includeCustom ? EmojiModel.filterModel(searchField.text, false) : EmojiModel.filterModelNoCustom(searchField.text, false))
Layout.fillWidth: true
Layout.preferredHeight: 350
onChosen: emojiPicker.chosen(unicode)
withCustom: true
Layout.fillHeight: true
withCustom: root.includeCustom
onChosen: root.chosen(unicode)
header: categories
Keys.forwardTo: searchField
}
}