Components/Emoji/EmojiPicker.qml

0001 // SPDX-FileCopyrightText: 2022 Tobias Fella <tobias.fella@kde.org>
0002 // SPDX-License-Identifier: GPL-2.0-or-later
0003
0004 import QtQuick
0005 import QtQuick.Controls 2 as QQC2
0006 import QtQuick.Layouts
0007 import org.kde.kirigami 2 as Kirigami
0008 import org.kde.tokodon
0009
0010 ColumnLayout {
0011     id: root
0012
0013     readonly property var currentEmojiModel: EmojiModel.categories
0014     readonly property int categoryIconSize: Math.round(Kirigami.Units.gridUnit * 2.5)
0015     readonly property var currentCategory: currentEmojiModel[categories.currentIndex].category
0016     readonly property alias categoryCount: categories.count
0017
0018     signal chosen(string emoji)
0019
0020     function clearSearchField() {
0021         searchField.text = ""
0022     }
0023
0024     onActiveFocusChanged: if (activeFocus) {
0025         searchField.forceActiveFocus();
0026     }
0027
0028     spacing: 0
0029
0030     QQC2.ScrollView {
0031         Layout.fillWidth: true
0032         Layout.preferredHeight: root.categoryIconSize + QQC2.ScrollBar.horizontal.height
0033         QQC2.ScrollBar.horizontal.height: QQC2.ScrollBar.horizontal.visible ? QQC2.ScrollBar.horizontal.implicitHeight : 0
0034
0035         ListView {
0036             id: categories
0037             clip: true
0038             focus: true
0039             orientation: ListView.Horizontal
0040
0041             Keys.onReturnPressed: if (emojiGrid.count > 0) emojiGrid.focus = true
0042             Keys.onEnterPressed: if (emojiGrid.count > 0) emojiGrid.focus = true
0043
0044             KeyNavigation.down: emojiGrid.count > 0 ? emojiGrid : categories
0045             KeyNavigation.tab: emojiGrid.count > 0 ? emojiGrid : categories
0046
0047             keyNavigationEnabled: true
0048             keyNavigationWraps: true
0049             Keys.forwardTo: searchField
0050             interactive: width !== contentWidth
0051
0052             model: root.currentEmojiModel
0053             Component.onCompleted: categories.forceActiveFocus()
0054
0055             delegate: emojiDelegate
0056         }
0057     }
0058
0059     Kirigami.Separator {
0060         Layout.fillWidth: true
0061         Layout.preferredHeight: 1
0062     }
0063
0064     Kirigami.SearchField {
0065         id: searchField
0066         Layout.margins: Kirigami.Units.smallSpacing
0067         Layout.fillWidth: true
0068
0069         /**
0070          * The focus is manged by the parent and we don't want to use the standard
0071          * shortcut as it could block other SearchFields from using it.
0072          */
0073         focusSequence: ""
0074     }
0075
0076     EmojiGrid {
0077         id: emojiGrid
0078         targetIconSize: root.categoryIconSize  // Custom emojis are bigger
0079         model: searchField.text.length === 0 ? EmojiModel.emojis(AccountManager.selectedAccount, root.currentCategory) : EmojiModel.filterModel(AccountManager.selectedAccount, searchField.text)
0080         Layout.fillWidth: true
0081         Layout.fillHeight: true
0082         withCustom: true
0083         onChosen: root.chosen(unicode)
0084         header: categories
0085         Keys.forwardTo: searchField
0086     }
0087
0088     Component {
0089         id: emojiDelegate
0090         Kirigami.NavigationTabButton {
0091             width: root.categoryIconSize
0092             height: width
0093             checked: categories.currentIndex === model.index
0094             text: modelData ? modelData.emoji : ""
0095             QQC2.ToolTip.text: modelData ? modelData.name : ""
0096             QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
0097             QQC2.ToolTip.visible: hovered && QQC2.ToolTip.text !== ""
0098             onClicked: {
0099                 categories.currentIndex = index;
0100                 categories.focus = true;
0101             }
0102         }
0103     }
0104 }