From 0fbc1b2121010c6beb6f0bcdaaca305d678c4cd5 Mon Sep 17 00:00:00 2001 From: Carl Schwan Date: Tue, 6 Dec 2022 23:40:25 +0100 Subject: [PATCH] Improve sizing of emoji delegate * 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 --- src/qml/Component/Emoji/EmojiDelegate.qml | 6 ++++++ src/qml/Component/Emoji/EmojiPicker.qml | 4 ++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/qml/Component/Emoji/EmojiDelegate.qml b/src/qml/Component/Emoji/EmojiDelegate.qml index a226e97a5..648a71ea2 100644 --- a/src/qml/Component/Emoji/EmojiDelegate.qml +++ b/src/qml/Component/Emoji/EmojiDelegate.qml @@ -15,6 +15,10 @@ QQC2.ItemDelegate { QQC2.ToolTip.text: emojiDelegate.name QQC2.ToolTip.visible: hovered QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay + leftInset: Kirigami.Units.smallSpacing + topInset: Kirigami.Units.smallSpacing + rightInset: Kirigami.Units.smallSpacing + bottomInset: Kirigami.Units.smallSpacing contentItem: Item { Kirigami.Heading { @@ -43,8 +47,10 @@ QQC2.ItemDelegate { background: Rectangle { color: emojiDelegate.checked ? Kirigami.Theme.highlightColor : Kirigami.Theme.backgroundColor + radius: Kirigami.Units.smallSpacing Rectangle { + radius: Kirigami.Units.smallSpacing anchors.fill: parent color: Kirigami.Theme.highlightColor opacity: emojiDelegate.hovered && !emojiDelegate.pressed ? 0.2 : 0 diff --git a/src/qml/Component/Emoji/EmojiPicker.qml b/src/qml/Component/Emoji/EmojiPicker.qml index 93c6a39a6..479a9df53 100644 --- a/src/qml/Component/Emoji/EmojiPicker.qml +++ b/src/qml/Component/Emoji/EmojiPicker.qml @@ -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 alias categoryCount: categories.count @@ -81,7 +81,7 @@ ColumnLayout { 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)) Layout.fillWidth: true Layout.fillHeight: true