app/ui/CategoryPage.qml

0001 /*
0002     SPDX-FileCopyrightText: 2019 Aleix Pol Gonzalez <aleixpol@kde.org>
0003
0004     SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
0005 */
0006
0007 import QtQuick 2.15
0008 import QtQuick.Layouts 1.3
0009 import org.kde.kirigami 2.15 as Kirigami
0010 import QtQuick.Controls 2.11 as QQC2
0011 import org.kde.plasma.emoji
0012
0013 Kirigami.ScrollablePage
0014 {
0015     id: view
0016     property alias model: emojiModel.sourceModel
0017     property string searchText: ""
0018     property alias category: filter.category
0019     property bool showSearch: false
0020     property bool showClearHistoryButton: false
0021     leftPadding: 0
0022     rightPadding: 0
0023
0024     Keys.onPressed: {
0025         if (event.key == Qt.Key_Escape) {
0026             Qt.quit()
0027         }
0028         if (event.text.length > 0 && !view.showSearch && event.modifiers === Qt.NoModifier) {
0029             // We want to prevent unprintable characters like backspace
0030             model = emoji
0031             searchText += /[\x00-\x1F\x7F]/.test(event.text) ? "" : event.text
0032             showSearch = true
0033             title = i18n("Search")
0034             category = ""
0035         }
0036     }
0037
0038     titleDelegate: RowLayout {
0039         Layout.fillWidth: true
0040         Layout.preferredWidth: view.width
0041         Kirigami.Heading {
0042             text: view.title
0043             textFormat: Text.PlainText
0044             Layout.fillWidth: true
0045         }
0046
0047         Kirigami.SearchField {
0048             id: searchField
0049             Layout.fillWidth: true
0050             text: view.searchText
0051             visible: view.showSearch
0052             inputMethodHints: Qt.ImhNoPredictiveText
0053             Keys.onEnterPressed: event => Keys.returnPressed(event)
0054             Keys.onReturnPressed: event => {
0055                 if (emojiView.count > 0) {
0056                     emojiView.itemAtIndex(0).Keys.returnPressed(event);
0057                 }
0058             }
0059             onTextChanged: {
0060                 forceActiveFocus()
0061                 emojiModel.search = text
0062                 if (emojiView.currentIndex < 0) {
0063                     Qt.callLater(function() {
0064                         emojiView.currentIndex = 0
0065                     })
0066                 }
0067             }
0068             Component.onCompleted: if (visible) Qt.callLater(forceActiveFocus)
0069             Keys.onEscapePressed: {
0070                 if (text) {
0071                     clear()
0072                 } else {
0073                     Qt.quit()
0074                 }
0075             }
0076             Keys.forwardTo: emojiView
0077         }
0078
0079         QQC2.ToolButton {
0080             visible: view.showClearHistoryButton
0081             text: i18n("Clear History")
0082             icon.name: "edit-clear-history"
0083             onClicked: { recentEmojiModel.clearHistory(); }
0084         }
0085     }
0086
0087     Shortcut {
0088         sequence: StandardKey.Copy
0089         enabled: emojiView.currentItem
0090         onActivated: {
0091             emojiView.currentItem.Keys.returnPressed(null)
0092         }
0093     }
0094
0095     Component {
0096         id: menuComponent
0097
0098         QQC2.Menu {
0099             required property QQC2.Label label
0100
0101             onClosed: destroy()
0102
0103             QQC2.MenuItem {
0104                 icon.name: "edit-copy"
0105                 text: i18nc("@item:inmenu", "Copy Character")
0106                 onClicked: {
0107                     CopyHelper.copyTextToClipboard(label.text);
0108                     window.showPassiveNotification(i18n("%1 copied to the clipboard", label.text));
0109                 }
0110             }
0111             QQC2.MenuItem {
0112                 icon.name: "edit-copy"
0113                 text: i18nc("@item:inmenu", "Copy Description")
0114                 onClicked: {
0115                     CopyHelper.copyTextToClipboard(label.QQC2.ToolTip.text);
0116                     window.showPassiveNotification(i18n("%1 copied to the clipboard", label.QQC2.ToolTip.text));
0117                 }
0118             }
0119         }
0120     }
0121
0122     GridView {
0123         id: emojiView
0124
0125         readonly property real desiredSize: Kirigami.Units.gridUnit * 3
0126         readonly property int columnsToHave: Math.ceil(width / desiredSize)
0127         readonly property int delayInterval: Math.min(300, columnsToHave * 10)
0128
0129         cellWidth: width/columnsToHave
0130         cellHeight: desiredSize
0131
0132         model: CategoryModelFilter {
0133             id: filter
0134             sourceModel: SearchModelFilter {
0135                 id: emojiModel
0136             }
0137         }
0138
0139         currentIndex: -1
0140         reuseItems: true
0141
0142         delegate: QQC2.Label {
0143             id: emojiLabel
0144             width: emojiView.cellWidth
0145             height: emojiView.cellHeight
0146
0147             font.pointSize: 25
0148             font.family: 'emoji' // Avoid monochrome fonts like DejaVu Sans
0149             fontSizeMode: model.display.length > 5 ? Text.Fit : Text.FixedSize
0150             minimumPointSize: 10
0151             text: model.display
0152             textFormat: Text.PlainText
0153             horizontalAlignment: Text.AlignHCenter
0154
0155             Accessible.name: model.toolTip
0156             Accessible.onPressAction: tapHandler.tapped(null, null)
0157             QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
0158             QQC2.ToolTip.text: model.toolTip
0159             QQC2.ToolTip.visible: hoverHandler.hovered
0160
0161             opacity: hoverHandler.hovered ? 0.7 : 1
0162             scale: tapHandler.pressed ? 0.6 : 1
0163
0164             Keys.onMenuPressed: contextMenuHandler.tapped(null, null)
0165             Keys.onReturnPressed: tapHandler.tapped(null, null)
0166
0167             HoverHandler {
0168                 id: hoverHandler
0169             }
0170
0171             TapHandler {
0172                 id: tapHandler
0173                 onTapped: window.report(model.display, model.toolTip)
0174             }
0175
0176             TapHandler {
0177                 acceptedButtons: Qt.LeftButton
0178                 acceptedDevices: PointerDevice.TouchScreen | PointerDevice.Stylus
0179                 onLongPressed: contextMenuHandler.tapped(null, null)
0180             }
0181
0182             TapHandler {
0183                 id: contextMenuHandler
0184                 acceptedButtons: Qt.RightButton
0185                 onTapped: {
0186                     const menu = menuComponent.createObject(emojiLabel, {
0187                         "label": emojiLabel,
0188                     });
0189                     menu.popup();
0190                 }
0191             }
0192
0193             Behavior on opacity {
0194                 OpacityAnimator {
0195                     duration: Kirigami.Units.longDuration
0196                 }
0197             }
0198
0199             Behavior on scale {
0200                 NumberAnimation {
0201                     duration: Kirigami.Units.longDuration
0202                 }
0203             }
0204         }
0205
0206         Kirigami.PlaceholderMessage {
0207             anchors.centerIn: parent
0208             width: parent.width - (Kirigami.Units.largeSpacing * 8)
0209             text: i18n("No recent Emojis")
0210             visible: emojiView.count === 0 && view.showClearHistoryButton
0211         }
0212     }
0213 }