Extract components to different files

This fixes some ugly layout bugs

src/CMakeLists.txt

@@ -25,6 +25,9 @@ target_link_libraries(kirigami-testing
     KF6::I18n
     KF6::CoreAddons
     KF6::IconThemes
+    kirigami-testing-components
 )
 
 install(TARGETS kirigami-testing ${KDE_INSTALL_TARGETS_DEFAULT_ARGS})
+
+add_subdirectory(components)

src/Main.qml

@@ -3,91 +3,57 @@ import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls as Controls
 import org.kde.kirigami as Kirigami
+import xyz.toast003.kirigamiTesting.components
 
 // Provides basic features needed for all kirigami applications
 Kirigami.ApplicationWindow {
     // Unique identifier to reference this object
     id: root
 
-    width: 400
+    width: 600
-    height: 300
+    height: 400
 
     // Window title
     // i18nc() makes a string translatable
     // and provides additional context for the translators
     title: i18nc("@title:window", "Day countdown")
 
+    globalDrawer: Kirigami.GlobalDrawer {
+        isMenu: true
+        actions: [
+            Kirigami.Action {
+                text: i18n("Quit")
+                icon.name: "application-exit-symbolic"
+                shortcut: StandardKey.Quit
+                onTriggered: Qt.quit()
+            }
+        ]
+    }
+
     // Set the first page that will be loaded when the app opens
     // This can also be set to an id of a Kirigami.Page
     pageStack.initialPage: Kirigami.ScrollablePage {
         title: i18nc("@title", "Countdown")
+        actions: [
+            Kirigami.Action {
+                id: addAction
+                icon.name: "list-add-symbolic"
+                text: i18nc("@action:button", "Add countdown")
+                onTriggered: addDialog.open()
+            }
+        ]
         Kirigami.CardsListView {
             id: cardsView
             model: countdownModel
-            delegate: countdownDelegate
+            delegate: CountdownDelegate {}
         }
     }
 
     ListModel {
         id: countdownModel
-
-        ListElement {
-            name: "Japan trip!"
-            description: ":D"
-            date: 131
-        }
-        ListElement {
-            name: "My birthday!"
-            description: "Pls give money"
-            date: 61
-        }
     }
 
-    Component {
+    AddDialog {
-        id: countdownDelegate
+        id: addDialog
-        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 {
-                        Layout.fillWidth: true
-                        level: 1
-                        text: date
-                    }
-                    ColumnLayout {
-                        Kirigami.Heading {
-                            Layout.fillWidth: true
-                            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
-                        Layout.columnSpan: 2
-                        text: i18n("Edit")
-                    }
-                }
-            }
-        }
     }
 }

src/components/AddDialog.qml

@@ -0,0 +1,64 @@
+import QtQuick
+import QtQuick.Controls as Controls
+import org.kde.kirigami as Kirigami
+
+Kirigami.Dialog {
+    id: addDialog
+    title: i18nc("@title:window", "Add countdown")
+    standardButtons: Kirigami.Dialog.Ok | Kirigami.Dialog.Cancel
+    padding: Kirigami.Units.largeSpacing
+    preferredWidth: Kirigami.Units.gridUnit * 20
+
+    Kirigami.FormLayout {
+        Controls.TextField {
+            id: nameField
+            Kirigami.FormData.label: i18nc("@label:textbox", "Name*:")
+            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", "ISO Date*:")
+            inputMask: "D999-99-99"
+            onAccepted: addDialog.onAccepted()
+        }
+        Controls.Label {
+            text: "* = required fields"
+        }
+    }
+
+    Component.onCompleted: {
+        const button = standardButton(Kirigami.Dialog.Ok);
+        button.enabled = Qt.binding(() => requiredFieldsFilled());
+    }
+
+    function requiredFieldsFilled() {
+        return (nameField.text !== "" && dateField.acceptableInput);
+    }
+
+    function appendDataToModel() {
+        countdownModel.append({
+            name: nameField.text,
+            description: descriptionField.text,
+            date: new Date(dateField.text)
+        });
+    }
+    function clearFieldsAndClose() {
+        nameField.text = "";
+        descriptionField.text = "";
+        dateField.text = "";
+        addDialog.close();
+    }
+
+    onAccepted: {
+        if (!addDialog.requiredFieldsFilled())
+            return;
+        appendDataToModel();
+        clearFieldsAndClose();
+    }
+}

src/components/CMakeLists.txt

@@ -0,0 +1,16 @@
+add_library(kirigami-testing-components)
+
+ecm_add_qml_module(kirigami-testing-components
+  URI "xyz.toast003.kirigamiTesting.components"
+  GENERATE_PLUGIN_SOURCE
+)
+
+ecm_target_qml_sources(kirigami-testing-components
+  SOURCES
+  AddDialog.qml
+  CountdownDelegate.qml
+)
+
+ecm_finalize_qml_module(kirigami-testing-components)
+
+install(TARGETS kirigami-testing-components ${KDE_INSTALL_TARGETS_DEFAULT_ARGS})

src/components/CountdownDelegate.qml

@@ -0,0 +1,49 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls as Controls
+import org.kde.kirigami as Kirigami
+
+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 {
+                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
+                Layout.columnSpan: 2
+                text: i18n("Edit")
+            }
+        }
+    }
+}

src/main.cpp

@@ -15,7 +15,7 @@ int main(int argc, char *argv[])
     QApplication::setOrganizationName(QStringLiteral("Toast"));
     QApplication::setOrganizationDomain(QStringLiteral("toast003.xyz"));
     QApplication::setApplicationName(QStringLiteral("Kirigami Testing"));
-    QApplication::setDesktopFileName(QStringLiteral("xyz.toast003.kirigami-testing.desktop"));
+    QApplication::setDesktopFileName(QStringLiteral("xyz.toast003.kirigami-testing"));
 
     QApplication::setStyle(QStringLiteral("breeze"));
     if (qEnvironmentVariableIsEmpty("QT_QUICK_CONTROLS_STYLE")) {