Unify emoji and sticker settings pages

This commit is contained in:
Tobias Fella
2023-05-30 22:45:16 +02:00
parent a2a27e78d1
commit 1f4b984664
7 changed files with 175 additions and 267 deletions

View File

@@ -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) {
model.addEmoticon(image.source, shortcode.text, description.text, "sticker")
if (root.newEmoticon) {
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)

View File

@@ -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
}
}
}
}
}
}

View File

@@ -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
}
}
}

View File

@@ -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 {}
}
}

View File

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

View File

@@ -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 {}
}
}

View File

@@ -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="StickersPage.qml">qml/Settings/StickersPage.qml</file>
<file alias="StickerEditorPage.qml">qml/Settings/StickerEditorPage.qml</file>
<file alias="EmoticonsPage.qml">qml/Settings/EmoticonsPage.qml</file>
<file alias="EmoticonEditorPage.qml">qml/Settings/EmoticonEditorPage.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>