Add AnnouncementView

2 files changed, 47 insertions, 6 deletions

diff --git a/contents/ui/AnnouncementView.qml b/contents/ui/AnnouncementView.qml
new file mode 100644
index 0000000..8453b90
--- /dev/null
+++ b/contents/ui/AnnouncementView.qml
@@ -0,0 +1,41 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+
+import org.kde.plasma.plasmoid 2.0
+import org.kde.plasma.core 2.0 as PlasmaCore
+import org.kde.plasma.components 2.0 as PlasmaComponents
+import org.kde.plasma.components 3.0 as PlasmaComponents3
+import org.kde.plasma.extras 2.0 as PlasmaExtras
+
+RowLayout {
+    width: parent.width
+    Layout.fillWidth: true
+
+    RowLayout {
+        Layout.fillWidth: true
+        PlasmaComponents3.CheckBox {
+            onToggled: () => {
+                announcementLabel.font.strikeout = (checkState == Qt.Checked)
+            }
+        }
+
+        PlasmaComponents3.Label {
+            id: announcementLabel
+            text: `[${course}] ${title}`
+            elide: Text.ElideRight
+            Layout.fillWidth: true
+        }
+    }
+
+    RowLayout {
+        Layout.alignment: Qt.AlignRight
+        PlasmaComponents3.ToolButton {
+            icon.name: "view-visible"
+        }
+
+        PlasmaComponents3.ToolButton {
+            icon.name: "delete"
+        }
+    }
+}
diff --git a/contents/ui/main.qml b/contents/ui/main.qml
index 8d4beb2..1d73bd4 100644
--- a/contents/ui/main.qml
+++ b/contents/ui/main.qml
@@ -11,6 +11,7 @@ import org.kde.plasma.extras 2.0 as PlasmaExtras
 Item {
     width: PlasmaCore.Units.gridUnit * 20
     height: PlasmaCore.Units.gridUnit * 40
+    clip: true
 
     readonly property string canvasUrl: plasmoid.configuration.canvasUrl
     readonly property string apiEndpoint: `${canvasUrl.replace(/\/$/, "")}/api/v1`
@@ -67,8 +68,6 @@ Item {
     ColumnLayout {
         id: main
         anchors.fill: parent
-        width: PlasmaCore.Units.gridUnit * 20
-        height: PlasmaCore.Units.gridUnit * 40
 
         PlasmaExtras.Heading {
             level: 1
@@ -82,6 +81,10 @@ Item {
 
         ListModel {
             id: announcementsModel
+            ListElement {
+                course: "CS101"
+                title: "Title of the announcement"
+            }
         }
 
         ScrollView {
@@ -94,10 +97,7 @@ Item {
 
             ListView {
                 Layout.fillWidth: true
-                delegate: Text {
-                    text: `[${course}] ${title}`
-                    color: PlasmaCore.Theme.textColor
-                }
+                delegate: AnnouncementView {}
                 model: announcementsModel
             }
         }