Unify emoji and sticker settings pages

src/qml/Settings/EmoticonEditorPage.qml

@@ -21,12 +21,14 @@ Kirigami.ScrollablePage {
     required property string shortcode
     required property var model
     required property var proxyModel
-    property bool newSticker: false
+    property bool newEmoticon: false
+    required property var emoticonType
 
     leftPadding: 0
     rightPadding: 0
 
-    title: newSticker ? i18nc("@title", "Add Sticker") : i18nc("@title", "Edit Sticker")
+    title: emoticonType === EmoticonFormCard.Stickers ? (newEmoticon ? i18nc("@title", "Add Sticker") : i18nc("@title", "Edit Sticker"))
+            : (newEmoticon ? i18nc("@title", "Add Emoji") : i18nc("@title", "Edit Emoji"))
 
     ColumnLayout {
         MobileForm.FormCard {
@@ -35,7 +37,7 @@ Kirigami.ScrollablePage {
             contentItem: ColumnLayout {
                 spacing: 0
                 MobileForm.FormCardHeader {
-                    title: i18n("Sticker")
+                    title: emoticonType === EmoticonFormCard.Stickers ? i18n("Sticker") : i18n("Emoji")
                 }
                 MobileForm.AbstractFormDelegate {
                     Layout.fillWidth: true
@@ -54,7 +56,7 @@ Kirigami.ScrollablePage {
                             height: Kirigami.Units.gridUnit * 4
 
                             Kirigami.Icon {
-                                source: "stickers"
+                                source: emoticonType === EmoticonFormCard.Stickers ? "stickers" : "preferences-desktop-emoticons"
                                 anchors.fill: parent
                                 visible: parent.status !== Image.Ready
                             }
@@ -116,10 +118,10 @@ Kirigami.ScrollablePage {
                     id: save
                     text: i18n("Save")
                     icon.name: "document-save"
-                    enabled: !root.newSticker || (image.source && shortcode.text && description.text)
+                    enabled: !root.newEmoticon || (image.source && shortcode.text && description.text)
                     onClicked: {
-                        if (root.newSticker) {
+                        if (root.newEmoticon) {
-                            model.addEmoticon(image.source, shortcode.text, description.text, "sticker")
+                            model.addEmoticon(image.source, shortcode.text, description.text, emoticonType === EmoticonFormCard.Stickers ? "sticker" : "emoticon")
                         } else {
                             if (description.text !== root.description) {
                                 root.model.setEmoticonBody(proxyModel.mapToSource(proxyModel.index(model.index, 0)).row, description.text)

src/qml/Settings/EmoticonFormCard.qml

@@ -0,0 +1,126 @@
+// SPDX-FileCopyrightText: 2023 Tobias Fella <tobias.fella@kde.org>
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+
+import org.kde.kirigami 2.19 as Kirigami
+import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+
+import org.kde.neochat 1.0
+
+MobileForm.FormCard {
+    id: emoticonFormCard
+
+    enum EmoticonType {
+        Emojis,
+        Stickers
+    }
+
+    property var emoticonType
+
+    Layout.topMargin: Kirigami.Units.largeSpacing
+    Layout.fillWidth: true
+    contentItem: ColumnLayout {
+        spacing: 0
+        MobileForm.FormCardHeader {
+            title: emoticonFormCard.emoticonType === EmoticonFormCard.Emojis ? i18n("Emojis") : i18n("Stickers")
+        }
+        Flow {
+            id: stickerFlow
+            Layout.fillWidth: true
+            Repeater {
+                model: EmoticonFilterModel {
+                    id: emoticonFilterModel
+                    sourceModel: AccountEmoticonModel {
+                        id: stickerModel
+                        connection: Controller.activeConnection
+                    }
+                    showStickers: emoticonFormCard.emoticonType === EmoticonFormCard.Stickers
+                    showEmojis: emoticonFormCard.emoticonType === EmoticonFormCard.Emojis
+                }
+
+                delegate: MobileForm.AbstractFormDelegate {
+                    id: stickerDelegate
+
+                    width: stickerFlow.width / 4
+                    height: width
+
+                    onClicked: pageSettingStack.pushDialogLayer(emoticonEditorPage, {
+                        description: model.body ?? "",
+                        index: model.index,
+                        url: model.url,
+                        shortcode: model.shortcode,
+                        model: stickerModel,
+                        proxyModel: emoticonFilterModel,
+                        emoticonType: emoticonFormCard.emoticonType
+                    }, {
+                        title: emoticonFormCard.emoticonType === EmoticonFormCard.Emojis ? i18nc("@title", "Edit Emoji") : i18nc("@title", "Edit Sticker")
+                    });
+
+                    contentItem: ColumnLayout {
+                        Image {
+                            source: model.url
+                            Layout.fillWidth: true
+                            sourceSize.height: parent.width * 0.8
+                            fillMode: Image.PreserveAspectFit
+                            autoTransform: true
+                            Kirigami.Icon {
+                                source: emoticonFormCard.emoticonType === EmoticonFormCard.Emojis ? "preferences-desktop-emoticons" : "stickers"
+                                anchors.fill: parent
+                                visible: parent.status !== Image.Ready
+                            }
+                        }
+                        QQC2.Label {
+                            id: descriptionLabel
+                            text: model.body ?? i18nc("As in 'This sticker/emoji has no description'", "No Description")
+                            horizontalAlignment: Qt.AlignHCenter
+                            Layout.fillWidth: true
+                            wrapMode: Text.Wrap
+                            maximumLineCount: 2
+                            elide: Text.ElideRight
+                        }
+                    }
+                    QQC2.Button {
+                        icon.name: "edit-delete"
+                        anchors.top: parent.top
+                        anchors.right: parent.right
+                        anchors.margins: Kirigami.Units.smallSpacing
+                        z: 2
+                        onClicked: stickerModel.deleteEmoticon(emoticonFilterModel.mapToSource(emoticonFilterModel.index(model.index, 0)).row)
+                    }
+                }
+            }
+            MobileForm.AbstractFormDelegate {
+                width: stickerFlow.width / 4
+                height: width
+
+                onClicked: pageSettingStack.pushDialogLayer(emoticonEditorPage, {
+                    description: "",
+                    index: -1,
+                    url: "",
+                    shortcode: "",
+                    model: stickerModel,
+                    proxyModel: emoticonFilterModel,
+                    newEmoticon: true,
+                    emoticonType: emoticonFormCard.emoticonType
+                }, {
+                    title: emoticonFormCard.emoticonType === EmoticonFormCard.Emojis ? i18nc("@title", "Add Emoji") : i18nc("@title", "Add Sticker")
+                });
+                contentItem: ColumnLayout {
+                    spacing: 0
+                    Kirigami.Icon {
+                        source: "list-add"
+                        Layout.fillWidth: true
+                    }
+                    QQC2.Label {
+                        text: emoticonFormCard.emoticonType === EmoticonFormCard.Emojis ? i18n("Add Emoji") : i18n("Add Sticker")
+                        horizontalAlignment: Qt.AlignHCenter
+                        Layout.fillWidth: true
+                    }
+                }
+            }
+        }
+    }
+}

src/qml/Settings/Emoticons.qml

@@ -1,120 +0,0 @@
-// SPDX-FileCopyrightText: 2021 Carson Black <uhhadd@gmail.com>
-// SPDX-License-Identifier: LGPL-2.0-or-later
-
-import QtQuick 2.15
-import QtQuick.Controls 2.15 as QQC2
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-
-import Qt.labs.platform 1.1
-
-import org.kde.kirigami 2.15 as Kirigami
-
-import org.kde.neochat 1.0
-
-Kirigami.ScrollablePage {
-    id: root
-
-    title: i18nc("@title:window", "Custom Emojis")
-
-    ListView {
-        anchors.fill: parent
-
-        model: CustomEmojiModel
-
-        Kirigami.PlaceholderMessage {
-            anchors.centerIn: parent
-            text: i18n("No custom inline stickers found")
-            visible: parent.model.count === 0
-        }
-
-        delegate: Kirigami.BasicListItem {
-            id: del
-
-            required property string name
-            required property url imageURL
-
-            text: name
-            reserveSpaceForSubtitle: true
-
-            leading: Image {
-                width: height
-                sourceSize.width: width
-                sourceSize.height: height
-                source: imageURL
-
-                Rectangle {
-                    anchors.fill: parent
-                    visible: parent.status === Image.Loading
-                    radius: height/2
-                    gradient: ShimmerGradient { }
-                }
-            }
-
-            trailing: QQC2.ToolButton {
-                width: height
-                icon.name: "delete"
-                onClicked: CustomEmojiModel.removeEmoji(del.name)
-            }
-        }
-    }
-
-    footer: QQC2.ToolBar {
-        Kirigami.Theme.colorSet: Kirigami.Theme.Window
-        Kirigami.ActionToolBar {
-            id: emojiCreator
-            alignment: Qt.AlignRight
-            rightPadding: Kirigami.Units.smallSpacing
-            width: parent.width
-            flat: false
-            property string name
-            actions: [
-                Kirigami.Action {
-                    displayComponent: QQC2.TextField {
-                        id: emojiField
-                        placeholderText: i18n("new_emoji_name_here")
-
-                        validator: RegularExpressionValidator {
-                            regularExpression: /[a-zA-Z_0-9]*/
-                        }
-                        onTextChanged: emojiCreator.name = text
-                    }
-                },
-                Kirigami.Action {
-                    text: i18n("Add Emoji...")
-
-                    enabled: emojiCreator.name.length > 0
-                    property var fileDialog: null
-                    icon.name: 'list-add'
-
-                    onTriggered: {
-                        if (this.fileDialog !== null) {
-                            return;
-                        }
-
-                        this.fileDialog = openFileDialog.createObject(QQC2.Overlay.overlay)
-
-                        this.fileDialog.chosen.connect((url) => {
-                            CustomEmojiModel.addEmoji(emojiCreator.name, url)
-                            this.fileDialog = null
-                        })
-                        this.fileDialog.onRejected.connect(() => {
-                            this.fileDialog = null
-                        })
-                        this.fileDialog.open()
-                    }
-                }
-            ]
-        }
-    }
-
-    Component {
-        id: openFileDialog
-
-        OpenFileDialog {
-            folder: StandardPaths.writableLocation(StandardPaths.PicturesLocation)
-            nameFilters: [i18n("Images (*.png *.gif *.webp)")]
-            parentWindow: root.Window.window
-        }
-    }
-}

src/qml/Settings/EmoticonsPage.qml

@@ -0,0 +1,33 @@
+// SPDX-FileCopyrightText: 2023 Tobias Fella <tobias.fella@kde.org>
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+
+import org.kde.kirigami 2.19 as Kirigami
+import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+
+import org.kde.neochat 1.0
+
+Kirigami.ScrollablePage {
+    id: root
+
+    title: emoticonType === EmoticonFormCard.Emojis ? i18n("Emojis") : i18n("Stickers")
+    leftPadding: 0
+    rightPadding: 0
+
+    ColumnLayout {
+        EmoticonFormCard {
+            emoticonType: EmoticonFormCard.Emojis
+        }
+        EmoticonFormCard {
+            emoticonType: EmoticonFormCard.Stickers
+        }
+    }
+
+    Component {
+        id: emoticonEditorPage
+        EmoticonEditorPage {}
+    }
+}

src/qml/Settings/SettingsPage.qml

@@ -33,17 +33,12 @@ Kirigami.CategorizedSettings {
             page: Qt.resolvedUrl("AccountsPage.qml")
         },
         Kirigami.SettingAction {
-            actionName: "customEmojis"
+            actionName: "emoticons"
-            text: i18n("Custom Emojis")
+            text: i18n("Stickers & Emojis")
             icon.name: "preferences-desktop-emoticons"
-            page: Qt.resolvedUrl("Emoticons.qml")
+            page: Qt.resolvedUrl("EmoticonsPage.qml")
-        },
-        Kirigami.SettingAction {
-            actionName: "stickers"
-            text: i18n("Stickers")
-            icon.name: "stickers"
-            page: Qt.resolvedUrl("StickersPage.qml")
         },
+
         Kirigami.SettingAction {
             actionName: "spellChecking"
             text: i18n("Spell Checking")

src/qml/Settings/StickersPage.qml

@@ -1,128 +0,0 @@
-// SPDX-FileCopyrightText: 2023 Tobias Fella <tobias.fella@kde.org>
-// SPDX-License-Identifier: GPL-2.0-or-later
-
-import QtQuick 2.15
-import QtQuick.Controls 2.15 as QQC2
-import QtQuick.Layouts 1.15
-
-import org.kde.kirigami 2.19 as Kirigami
-import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
-
-import org.kde.neochat 1.0
-
-Kirigami.ScrollablePage {
-    title: i18n("Stickers")
-    leftPadding: 0
-    rightPadding: 0
-
-    ColumnLayout {
-        MobileForm.FormCard {
-            Layout.topMargin: Kirigami.Units.largeSpacing
-            Layout.fillWidth: true
-            contentItem: ColumnLayout {
-                spacing: 0
-                MobileForm.FormCardHeader {
-                    title: i18n("Stickers")
-                }
-                Flow {
-                    id: stickerFlow
-                    Layout.fillWidth: true
-                    Repeater {
-                        model: EmoticonFilterModel {
-                            id: emoticonFilterModel
-                            sourceModel: AccountEmoticonModel {
-                                id: stickerModel
-                                connection: Controller.activeConnection
-                            }
-                            showStickers: true
-                            showEmojis: false
-                        }
-
-                        delegate: MobileForm.AbstractFormDelegate {
-                            id: stickerDelegate
-
-                            width: stickerFlow.width / 4
-                            height: width
-
-                            onClicked: pageSettingStack.pushDialogLayer(stickerEditorPage, {
-                                description: model.body ?? "",
-                                index: model.index,
-                                url: model.url,
-                                shortcode: model.shortcode,
-                                model: stickerModel,
-                                proxyModel: emoticonFilterModel
-                            }, {
-                                title: i18nc("@title", "Edit Sticker")
-                            });
-
-                            contentItem: ColumnLayout {
-                                Image {
-                                    source: model.url
-                                    Layout.fillWidth: true
-                                    sourceSize.height: parent.width * 0.8
-                                    fillMode: Image.PreserveAspectFit
-                                    autoTransform: true
-                                    Kirigami.Icon {
-                                        source: "stickers"
-                                        anchors.fill: parent
-                                        visible: parent.status !== Image.Ready
-                                    }
-                                }
-                                QQC2.Label {
-                                    id: descriptionLabel
-                                    text: model.body ?? i18nc("As in 'This sticker has no description'", "No Description")
-                                    horizontalAlignment: Qt.AlignHCenter
-                                    Layout.fillWidth: true
-                                    wrapMode: Text.Wrap
-                                    maximumLineCount: 2
-                                    elide: Text.ElideRight
-                                }
-                            }
-                            QQC2.Button {
-                                icon.name: "edit-delete"
-                                anchors.top: parent.top
-                                anchors.right: parent.right
-                                anchors.margins: Kirigami.Units.smallSpacing
-                                z: 2
-                                onClicked: stickerModel.deleteEmoticon(emoticonFilterModel.mapToSource(emoticonFilterModel.index(model.index, 0)).row)
-                            }
-                        }
-                    }
-                    MobileForm.AbstractFormDelegate {
-                        width: stickerFlow.width / 4
-                        height: width
-
-                        onClicked: pageSettingStack.pushDialogLayer(stickerEditorPage, {
-                            description: "",
-                            index: -1,
-                            url: "",
-                            shortcode: "",
-                            model: stickerModel,
-                            proxyModel: emoticonFilterModel,
-                            newSticker: true
-                        }, {
-                            title: i18nc("@title", "Add Sticker")
-                        });
-                        contentItem: ColumnLayout {
-                            spacing: 0
-                            Kirigami.Icon {
-                                source: "list-add"
-                                Layout.fillWidth: true
-                            }
-                            QQC2.Label {
-                                text: i18n("Add Sticker")
-                                horizontalAlignment: Qt.AlignHCenter
-                                Layout.fillWidth: true
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    Component {
-        id: stickerEditorPage
-        StickerEditorPage {}
-    }
-}

src/res.qrc

@@ -98,9 +98,9 @@
         <file alias="ThemeRadioButton.qml">qml/Settings/ThemeRadioButton.qml</file>
         <file alias="ColorScheme.qml">qml/Settings/ColorScheme.qml</file>
         <file alias="GeneralSettingsPage.qml">qml/Settings/GeneralSettingsPage.qml</file>
-        <file alias="Emoticons.qml">qml/Settings/Emoticons.qml</file>
+        <file alias="EmoticonsPage.qml">qml/Settings/EmoticonsPage.qml</file>
-        <file alias="StickersPage.qml">qml/Settings/StickersPage.qml</file>
+        <file alias="EmoticonEditorPage.qml">qml/Settings/EmoticonEditorPage.qml</file>
-        <file alias="StickerEditorPage.qml">qml/Settings/StickerEditorPage.qml</file>
+        <file alias="EmoticonFormCard.qml">qml/Settings/EmoticonFormCard.qml</file>
         <file alias="GlobalNotificationsPage.qml">qml/Settings/GlobalNotificationsPage.qml</file>
         <file alias="NotificationRuleItem.qml">qml/Settings/NotificationRuleItem.qml</file>
         <file alias="AppearanceSettingsPage.qml">qml/Settings/AppearanceSettingsPage.qml</file>