Adapt list setting pages to new style

This commit is contained in:
Carl Schwan
2021-12-19 23:40:30 +01:00
parent 67bc66ee0c
commit de2fbadba5
3 changed files with 166 additions and 248 deletions

View File

@@ -13,92 +13,100 @@ import NeoChat.Settings 1.0
import NeoChat.Component 1.0 as Components
import NeoChat.Dialog 1.0
Kirigami.Page {
Kirigami.ScrollablePage {
title: i18nc('@title:window', 'Custom Emojis')
leftPadding: pageSettingStack.wideMode ? Kirigami.Units.smallSpacing : 0
topPadding: pageSettingStack.wideMode ? Kirigami.Units.smallSpacing : 0
bottomPadding: pageSettingStack.wideMode ? Kirigami.Units.smallSpacing : 0
rightPadding: pageSettingStack.wideMode ? Kirigami.Units.smallSpacing : 0
ListView {
model: CustomEmojiModel {
id: emojiModel
ColumnLayout {
id: column
anchors.fill: parent
Connections {
target: pageSettingStack
function onWideModeChanged() {
scroll.background.visible = pageSettingStack.wideMode
}
connection: Controller.activeConnection
}
QQC2.ScrollView {
id: scroll
Component.onCompleted: background.visible = pageSettingStack.wideMode
Layout.fillWidth: true
Layout.fillHeight: true
ListView {
clip: true
model: CustomEmojiModel {
id: emojiModel
connection: Controller.activeConnection
}
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: Components.ShimmerGradient { }
}
}
trailing: QQC2.ToolButton {
width: height
icon.name: "delete"
onClicked: emojiModel.removeEmoji(del.name)
}
}
}
Kirigami.PlaceholderMessage {
anchors.centerIn: parent
text: i18n("No custom inline stickers found")
visible: parent.model.count === 0
}
Loader {
active: pageSettingStack.wideMode
sourceComponent: addEmojiComponent
Layout.fillWidth: true
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: Components.ShimmerGradient { }
}
}
trailing: QQC2.ToolButton {
width: height
icon.name: "delete"
onClicked: emojiModel.removeEmoji(del.name)
}
}
}
footer: QQC2.ToolBar {
id: toolbar
width: parent.width
visible: !pageSettingStack.wideMode
height: visible ? implicitHeight : 0
contentItem: Loader {
active: !pageSettingStack.wideMode
sourceComponent: addEmojiComponent
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) => {
emojiModel.addEmoji(emojiField.text, url)
this.fileDialog = null
})
this.fileDialog.onRejected.connect(() => {
rej()
this.fileDialog = null
})
this.fileDialog.open()
}
}
]
}
}
@@ -109,48 +117,4 @@ Kirigami.Page {
folder: StandardPaths.writableLocation(StandardPaths.PicturesLocation)
}
}
property Component addEmojiComponent: RowLayout {
Item {
Layout.fillWidth: Qt.application.layoutDirection == Qt.LeftToRight
}
QQC2.TextField {
id: emojiField
placeholderText: i18n("new_emoji_name_here")
validator: RegularExpressionValidator {
regularExpression: /[a-zA-Z_0-9]*/
}
}
QQC2.Button {
text: i18n("Add Emoji...")
enabled: emojiField.text != ""
property var fileDialog: null
onClicked: {
if (this.fileDialog != null) {
return;
}
this.fileDialog = openFileDialog.createObject(QQC2.Overlay.overlay)
this.fileDialog.chosen.connect((url) => {
emojiModel.addEmoji(emojiField.text, url)
this.fileDialog = null
})
this.fileDialog.onRejected.connect(() => {
rej()
this.fileDialog = null
})
this.fileDialog.open()
}
}
Item {
Layout.fillWidth: Qt.application.layoutDirection == Qt.RightToLeft
}
}
}