Add actions + Add Form

src/contents/ui/main.qml

@@ -14,6 +14,18 @@ Kirigami.ApplicationWindow {
     // and provides additional context for the translators
     title: i18nc("@title:window", "Hello World")
 
+    globalDrawer: Kirigami.GlobalDrawer {
+        isMenu: true
+        actions: [
+            Kirigami.Action {
+                text: i18n("Quit")
+                icon.name: "gtk-quit"
+                shortcut: StandardKey.Quit
+                onTriggered: Qt.quit()
+            }
+        ]
+    }
+
     ListModel {
         id: kountdownModel
         // Each ListElement is an element on the list, containing information
@@ -88,8 +100,81 @@ Kirigami.ApplicationWindow {
         }
     }
 
+    // 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();
+                }
+            }
+        }
+    }
 
     // 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: Qt.resolvedUrl("start_page.qml")
+    pageStack.initialPage: Kirigami.ScrollablePage {
+        title: i18nc("@title", "Kountdown")
+
+        actions: [
+            Kirigami.Action {
+                id: addAction
+                icon.name: "list-add"
+                text: i18nc("@action:button", "Add kountdown")
+                onTriggered: addSheet.open()
+            }
+        ]
+
+
+        // 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
+        }
+    }
 }

src/contents/ui/start_page.qml

@@ -1,32 +0,0 @@
-// Includes relevant modules used by the QML
-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.ScrollablePage {
-    title: i18nc("@title", "Kountdown")
-
-    actions: [
-        Kirigami.Action {
-            id: addAction
-            icon.name: "list-add"
-            text: i18nc("@action:button", "Add kountdown")
-            onTriggered: kountdownModel.append({
-                name: "Kirigami Action added card!",
-                description: "Congratulations, your Kirigami Action works!",
-                date: 1000
-            })
-        }
-    ]
-
-
-    // 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
-    }
-}

src/resources.qrc

@@ -1,6 +1,5 @@
 <RCC>
     <qresource prefix="/">
         <file alias="main.qml">contents/ui/main.qml</file>
-        <file alias="start_page.qml">contents/ui/start_page.qml</file>
     </qresource>
 </RCC>