Begin add actions

src/contents/ui/main.qml

@@ -14,6 +14,81 @@ Kirigami.ApplicationWindow {
     // and provides additional context for the translators
     title: i18nc("@title:window", "Hello World")
 
+    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...
+                    }
+                }
+            }
+        }
+    }
+
+
     // 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")

src/contents/ui/start_page.qml

@@ -7,9 +7,24 @@ import org.kde.kirigami 2.20 as Kirigami
 Kirigami.ScrollablePage {
     title: i18nc("@title", "Kountdown")
 
-    Controls.Label {
-        // Center label horizontally and vertically within parent object
-        anchors.centerIn: parent
-        text: i18n("Hello World!")
+    actions.main: 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
     }
 }