src/qml/EmojiGrid.qml

0001 // SPDX-FileCopyrightText: 2022 Tobias Fella
0002 // SPDX-License-Identifier: GPL-2.0-or-later
0003
0004 import QtQuick
0005 import QtQuick.Controls as QQC2
0006 import org.kde.kirigami as Kirigami
0007 import org.kde.neochat
0008
0009 QQC2.ScrollView {
0010     id: root
0011
0012     property alias model: emojis.model
0013     property alias count: emojis.count
0014     required property int targetIconSize
0015     readonly property int emojisPerRow: emojis.width / targetIconSize
0016     required property bool withCustom
0017     readonly property var searchCategory: withCustom ? EmojiModel.Search : EmojiModel.SearchNoCustom
0018     required property QtObject header
0019     property bool stickers: false
0020
0021     signal chosen(string unicode)
0022     signal stickerChosen(int index)
0023
0024     onActiveFocusChanged: if (activeFocus) {
0025         emojis.forceActiveFocus();
0026     }
0027
0028     GridView {
0029         id: emojis
0030
0031         anchors.fill: parent
0032         anchors.rightMargin: parent.QQC2.ScrollBar.vertical.visible ? parent.QQC2.ScrollBar.vertical.width : 0
0033
0034         currentIndex: -1
0035         keyNavigationEnabled: true
0036         onActiveFocusChanged: if (activeFocus && currentIndex === -1) {
0037             currentIndex = 0;
0038         } else {
0039             currentIndex = -1;
0040         }
0041         onModelChanged: currentIndex = -1
0042
0043         cellWidth: emojis.width / root.emojisPerRow
0044         cellHeight: root.targetIconSize
0045
0046         KeyNavigation.up: root.header
0047
0048         clip: true
0049
0050         delegate: EmojiDelegate {
0051             id: emojiDelegate
0052             checked: emojis.currentIndex === model.index
0053             emoji: !!modelData ? modelData.unicode : model.url
0054             name: !!modelData ? modelData.shortName : model.body
0055
0056             width: emojis.cellWidth
0057             height: emojis.cellHeight
0058
0059             isImage: root.stickers
0060             Keys.onEnterPressed: clicked()
0061             Keys.onReturnPressed: clicked()
0062             onClicked: {
0063                 if (root.stickers) {
0064                     root.stickerChosen(model.index);
0065                 }
0066                 root.chosen(modelData.isCustom ? modelData.shortName : modelData.unicode);
0067                 EmojiModel.emojiUsed(modelData);
0068             }
0069             Keys.onSpacePressed: pressAndHold()
0070             onPressAndHold: {
0071                 if (EmojiModel.tones(modelData.shortName).length === 0) {
0072                     return;
0073                 }
0074                 let tones = tonesPopupComponent.createObject(emojiDelegate, {
0075                     shortName: modelData.shortName,
0076                     unicode: modelData.unicode,
0077                     categoryIconSize: root.targetIconSize
0078                 });
0079                 tones.open();
0080                 tones.forceActiveFocus();
0081             }
0082             showTones: !!modelData && EmojiModel.tones(modelData.shortName).length > 0
0083         }
0084
0085         Kirigami.PlaceholderMessage {
0086             anchors.centerIn: parent
0087             text: root.stickers ? i18n("No stickers") : i18n("No emojis")
0088             visible: emojis.count === 0
0089         }
0090     }
0091     Component {
0092         id: tonesPopupComponent
0093         EmojiTonesPicker {
0094             onChosen: root.chosen(emoji)
0095         }
0096     }
0097 }