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

Improve sizing of emoji delegate

Browse Source 
* Use Kirigami.Units.gridUnit * 2.5 for normal emoji
* Use Kirigami.Units.gridUnit * 3 for custom emoji
* Add small background padding to delegate
* Add rounded hover effect

Signed-off-by: Carl Schwan <carl@carlschwan.eu>
This commit is contained in:
Carl Schwan
2022-12-06 23:40:25 +01:00
parent b5d8acf9de
commit 0fbc1b2121
2 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/qml/Component/Emoji/EmojiDelegate.qml
View File

@@ -15,6 +15,10 @@ QQC2.ItemDelegate {
QQC2.ToolTip.text: emojiDelegate.name QQC2.ToolTip.text: emojiDelegate.name
QQC2.ToolTip.visible: hovered QQC2.ToolTip.visible: hovered
QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
leftInset: Kirigami.Units.smallSpacing
topInset: Kirigami.Units.smallSpacing
rightInset: Kirigami.Units.smallSpacing
bottomInset: Kirigami.Units.smallSpacing
contentItem: Item { contentItem: Item {
Kirigami.Heading { Kirigami.Heading {
@@ -43,8 +47,10 @@ QQC2.ItemDelegate {
background: Rectangle { background: Rectangle {
color: emojiDelegate.checked ? Kirigami.Theme.highlightColor : Kirigami.Theme.backgroundColor color: emojiDelegate.checked ? Kirigami.Theme.highlightColor : Kirigami.Theme.backgroundColor
radius: Kirigami.Units.smallSpacing
Rectangle { Rectangle {
radius: Kirigami.Units.smallSpacing
anchors.fill: parent anchors.fill: parent
color: Kirigami.Theme.highlightColor color: Kirigami.Theme.highlightColor
opacity: emojiDelegate.hovered && !emojiDelegate.pressed ? 0.2 : 0 opacity: emojiDelegate.hovered && !emojiDelegate.pressed ? 0.2 : 0

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

@@ -20,7 +20,7 @@ ColumnLayout {
} }
} }
readonly property int categoryIconSize: 45 readonly property int categoryIconSize: Math.round(Kirigami.Units.gridUnit * 2.5)
readonly property var currentCategory: currentEmojiModel[categories.currentIndex].category readonly property var currentCategory: currentEmojiModel[categories.currentIndex].category
readonly property alias categoryCount: categories.count readonly property alias categoryCount: categories.count
@@ -81,7 +81,7 @@ ColumnLayout {
EmojiGrid { EmojiGrid {
id: emojiGrid id: emojiGrid
targetIconSize: root.categoryIconSize targetIconSize: root.currentCategory === EmojiModel.Custom ? Kirigami.Units.gridUnit * 3 : root.categoryIconSize // Custom emojis are bigger
model: searchField.text.length === 0 ? EmojiModel.emojis(root.currentCategory) : (root.includeCustom ? EmojiModel.filterModel(searchField.text, false) : EmojiModel.filterModelNoCustom(searchField.text, false)) 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.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true