From 7eed6d985246f0ba7527c625bf86cc94ed8c1bbc Mon Sep 17 00:00:00 2001 From: Florian RICHER Date: Mon, 1 Jan 2024 18:26:04 +0100 Subject: [PATCH] Split into files from tutorial --- src/contents/ui/AddEditSheet.qml | 91 ++++++++++++++++ src/contents/ui/KountdownDelegate.qml | 54 ++++++++++ src/contents/ui/main.qml | 147 +++++--------------------- src/resources.qrc | 2 + 4 files changed, 172 insertions(+), 122 deletions(-) create mode 100644 src/contents/ui/AddEditSheet.qml create mode 100644 src/contents/ui/KountdownDelegate.qml diff --git a/src/contents/ui/AddEditSheet.qml b/src/contents/ui/AddEditSheet.qml new file mode 100644 index 0000000..49f6ec6 --- /dev/null +++ b/src/contents/ui/AddEditSheet.qml @@ -0,0 +1,91 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 as Controls +import QtQuick.Layouts 1.15 +import org.kde.kirigami 2.20 as Kirigami + +// Overlay sheets appear over a part of the window +Kirigami.OverlaySheet { + id: addEditSheet + + // Sheet mode + property string mode: "add" + + property int index: -1 + property alias name: nameField.text + property alias description: descriptionField.text + property alias kdate: dateField.text + + // Signals can be read and certain actions performed when these happen + signal added(string name, string description, var kdate) + signal edited(int index, string name, string description, var kdate) + signal removed(int index) + + header: Kirigami.Heading { + // i18nc is useful for adding context for translators + text: mode === "add" ? i18nc("@title:window", "Add kountdown") : + i18nc("@title:window", "Edit kountdown") + } + // Form layouts help align and structure a layout with several inputs + Kirigami.FormLayout { + // Textfields let you input text in a thin textbox + Controls.TextField { + id: nameField + // Provides label attached to the textfield + Kirigami.FormData.label: i18nc("@label:textbox", "Name:") + // Placeholder text is visible before you enter anything + placeholderText: i18n("Event name (required)") + // What to do after input is accepted (i.e. pressed enter) + // In this case, it moves the focus to the next field + onAccepted: descriptionField.forceActiveFocus() + } + Controls.TextField { + id: descriptionField + Kirigami.FormData.label: i18nc("@label:textbox", "Description:") + placeholderText: i18n("Optional") + onAccepted: dateField.forceActiveFocus() + } + Controls.TextField { + id: dateField + Kirigami.FormData.label: i18nc("@label:textbox", "Date:") + inputMask: "0000-00-00" + placeholderText: i18n("YYYY-MM-DD") + } + // This is a button. + Controls.Button { + id: deleteButton + Layout.fillWidth: true + text: i18nc("@action:button", "Delete") + visible: mode === "edit" + onClicked: { + addEditSheet.removed(addEditSheet.index) + close(); + } + } + Controls.Button { + id: doneButton + Layout.fillWidth: true + text: i18nc("@action:button", "Done") + // Button is only enabled if the user has entered something into the nameField + enabled: nameField.text.length > 0 + onClicked: { + // Add a listelement to the kountdownModel ListModel + if(mode === "add") { + addEditSheet.added( + nameField.text, + descriptionField.text, + dateField.text + ); + } + else { + addEditSheet.edited( + index, + nameField.text, + descriptionField.text, + dateField.text + ); + } + close(); + } + } + } +} diff --git a/src/contents/ui/KountdownDelegate.qml b/src/contents/ui/KountdownDelegate.qml new file mode 100644 index 0000000..42548e4 --- /dev/null +++ b/src/contents/ui/KountdownDelegate.qml @@ -0,0 +1,54 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 as Controls +import QtQuick.Layouts 1.15 +import org.kde.kirigami 2.20 as Kirigami + +Kirigami.AbstractCard { + id: kountdownDelegate + contentItem: Item { + implicitWidth: delegateLayout.implicitWidth + implicitHeight: delegateLayout.implicitHeight + GridLayout { + id: delegateLayout + anchors { + left: parent.left + top: parent.top + right: parent.right + } + rowSpacing: Kirigami.Units.largeSpacing + columnSpacing: Kirigami.Units.largeSpacing + columns: root.wideScreen ? 4 : 2 + + Kirigami.Heading { + Layout.fillHeight: true + level: 1 + text: i18n("%1 days", Math.round((date-Date.now())/86400000)) + } + + ColumnLayout { + Kirigami.Heading { + Layout.fillWidth: true + level: 2 + text: name + } + Kirigami.Separator { + Layout.fillWidth: true + visible: description.length > 0 + } + Controls.Label { + Layout.fillWidth: true + wrapMode: Text.WordWrap + text: description + visible: description.length > 0 + } + } + Controls.Button { + Layout.alignment: Qt.AlignRight + // Column spanning within grid layout (vertically in this case) + Layout.columnSpan: 2 + text: i18n("Edit") + onClicked: openPopulatedSheet("edit", index, name, description, new Date(date).toISOString().slice(0,10)) + } + } + } +} diff --git a/src/contents/ui/main.qml b/src/contents/ui/main.qml index 3b4329a..5fa9d2d 100644 --- a/src/contents/ui/main.qml +++ b/src/contents/ui/main.qml @@ -28,129 +28,33 @@ Kirigami.ApplicationWindow { ListModel { id: kountdownModel - // Each ListElement is an element on the list, containing information - ListElement { - name: "Dog birthday!!" - description: "Big doggo birthday blowout." - date: 100 - } - - ListElement { - name: "Dog birthday!!" - description: "Big doggo birthday blowout." - date: 100 - } } - Component { - id: kountdownDelegate - Kirigami.AbstractCard { - contentItem: Item { - implicitWidth: delegateLayout.implicitWidth - implicitHeight: delegateLayout.implicitHeight - GridLayout { - id: delegateLayout - anchors { - left: parent.left - top: parent.top - right: parent.right - } - rowSpacing: Kirigami.Units.largeSpacing - columnSpacing: Kirigami.Units.largeSpacing - columns: root.wideScreen ? 4 : 2 - - Kirigami.Heading { - // Heading will be as tall as possible while respecting constraints - Layout.fillHeight: true - // Level determines the size of the heading - level: 1 - text: date - } - - // Layout for positioning elements vertically - ColumnLayout { - Kirigami.Heading { - Layout.fillWidth: true - level: 2 - text: name - } - // Horizontal rule - Kirigami.Separator { - Layout.fillWidth: true - visible: description.length > 0 - } - // Labels contain text - Controls.Label { - Layout.fillWidth: true - // Word wrap makes text stay within box and shift with size - wrapMode: Text.WordWrap - text: description - visible: description.length > 0 - } - } - Controls.Button { - Layout.alignment: Qt.AlignRight - // Column spanning within grid layout (vertically in this case) - Layout.columnSpan: 2 - text: i18n("Edit") - //onClicked: to be done... - } - } - } - } + // Fetches item from addEditSheet.qml and does action on signal + AddEditSheet { + id: addEditSheet + onAdded: kountdownModel.append({ + "name": name, + "description": description, + "date": Date.parse(kdate) + }); + onEdited: kountdownModel.set(index, { + "name": name, + "description": description, + "date": Date.parse(kdate) + }); + onRemoved: kountdownModel.remove(index, 1) } - // Overlay sheets appear over a part of the window - Kirigami.OverlaySheet { - id: addSheet - header: Kirigami.Heading { - text: i18nc("@title:window", "Add kountdown") - } - // Form layouts help align and structure a layout with several inputs - Kirigami.FormLayout { - // Textfields let you input text in a thin textbox - Controls.TextField { - id: nameField - // Provides label attached to the textfield - Kirigami.FormData.label: i18nc("@label:textbox", "Name:") - // Placeholder text is visible before you enter anything - placeholderText: i18n("Event name (required)") - // What to do after input is accepted (i.e. pressed enter) - // In this case, it moves the focus to the next field - onAccepted: descriptionField.forceActiveFocus() - } - Controls.TextField { - id: descriptionField - Kirigami.FormData.label: i18nc("@label:textbox", "Description:") - placeholderText: i18n("Optional") - onAccepted: dateField.forceActiveFocus() - } - Controls.TextField { - id: dateField - Kirigami.FormData.label: i18nc("@label:textbox", "Date:") - placeholderText: i18n("YYYY-MM-DD") - inputMask: "0000-00-00" - } - Controls.Button { - id: doneButton - Layout.fillWidth: true - text: i18nc("@action:button", "Done") - // Button is only enabled if the user has entered something into the nameField - enabled: nameField.text.length > 0 - onClicked: { - // Add a listelement to the kountdownModel ListModel - kountdownModel.append({ - name: nameField.text, - description: descriptionField.text, - date: Date.parse(dateField.text) - }); - nameField.text = "" - descriptionField.text = "" - dateField.text = "" - addSheet.close(); - } - } - } + // Function called by 'edit' button on card and by 'add'-Action + function openPopulatedSheet(mode, index = -1, listName = "", listDesc = "", listDate = "") { + addEditSheet.mode = mode + addEditSheet.index = index; + addEditSheet.name = listName + addEditSheet.description = listDesc + addEditSheet.kdate = listDate + + addEditSheet.open() } // Set the first page that will be loaded when the app opens @@ -163,18 +67,17 @@ Kirigami.ApplicationWindow { id: addAction icon.name: "list-add" text: i18nc("@action:button", "Add kountdown") - onTriggered: addSheet.open() + onTriggered:openPopulatedSheet("add") } ] - // List view for card elements Kirigami.CardsListView { id: cardsView // Model contains info to be displayed model: kountdownModel // Delegate is how the information will be presented in the ListView - delegate: kountdownDelegate + delegate: KountdownDelegate {} } } } diff --git a/src/resources.qrc b/src/resources.qrc index b2b45f8..d3ba5a5 100644 --- a/src/resources.qrc +++ b/src/resources.qrc @@ -1,5 +1,7 @@ contents/ui/main.qml + contents/ui/AddEditSheet.qml + contents/ui/KountdownDelegate.qml