Make list item expandable

1 files changed, 102 insertions, 89 deletions

diff --git a/contents/ui/ActivityView.qml b/contents/ui/ActivityView.qml
index 0e74a99..3f82325 100644
--- a/contents/ui/ActivityView.qml
+++ b/contents/ui/ActivityView.qml
@@ -14,118 +14,131 @@ PlasmaComponents.ListItem {
     id: activityItem
     separatorVisible: false
     enabled: true // enable mouse event handling
-    RowLayout {
-        id: activityView
+    property bool expanded: false
+
+    ColumnLayout {
         width: (type == "announcement" ? announcementsListView : assignmentsListView).width
         Layout.fillWidth: true
-
         RowLayout {
-            Layout.fillWidth: true
-            PlasmaComponents3.CheckBox {
-                id: activityCheckbox
-                checkState: finished ? Qt.Checked : Qt.Unchecked
-                onToggled: () => {
-                    finished = (checkState == Qt.Checked)
-                    activityLabel.font.strikeout = (checkState == Qt.Checked)
-
-                    const configKeys = {
-                        announcement: "finishedAnnouncements",
-                        assignment: "finishedAssignments",
-                    }
+            RowLayout {
+                PlasmaComponents3.CheckBox {
+                    id: activityCheckbox
+                    checkState: finished ? Qt.Checked : Qt.Unchecked
+                    onToggled: () => {
+                        finished = (checkState == Qt.Checked)
+                        activityLabel.font.strikeout = (checkState == Qt.Checked)
+
+                        const configKeys = {
+                            announcement: "finishedAnnouncements",
+                            assignment: "finishedAssignments",
+                        }
 
-                    let finishedActivities = plasmoid.configuration[configKeys[type]]
-                    if (finished) {
-                        if (!finishedActivities.includes(activityId)) {
-                            finishedActivities.push(activityId)
+                        let finishedActivities = plasmoid.configuration[configKeys[type]]
+                        if (finished) {
+                            if (!finishedActivities.includes(activityId)) {
+                                finishedActivities.push(activityId)
+                            }
+                        } else {
+                            // remove activityId from list
+                            finishedActivities.splice(
+                                finishedActivities.indexOf(activityId), 1
+                            )
                         }
-                    } else {
-                        // remove activityId from list
-                        finishedActivities.splice(
-                            finishedActivities.indexOf(activityId), 1
-                        )
+                        // save config
+                        plasmoid.configuration[configKeys[type]] = finishedActivities
                     }
-                    // save config
-                    plasmoid.configuration[configKeys[type]] = finishedActivities
                 }
-            }
 
-            ColumnLayout {
-                PlasmaComponents3.Label {
-                    id: activityLabel
-                    text: `[${course}] ${title}`
-                    font.bold: important
-                    font.strikeout: finished
-                    color: important
-                        ? PlasmaCore.Theme.negativeTextColor
-                        : PlasmaCore.Theme.textColor
-                    wrapMode: Text.WordWrap
-                    Layout.fillWidth: true
-                }
+                ColumnLayout {
+                    PlasmaComponents3.Label {
+                        id: activityLabel
+                        text: `[${course}] ${title}`
+                        font.bold: important
+                        font.strikeout: finished
+                        color: important
+                            ? PlasmaCore.Theme.negativeTextColor
+                            : PlasmaCore.Theme.textColor
+                        wrapMode: Text.WordWrap
+                        Layout.fillWidth: true
+                    }
 
-                PlasmaComponents3.Label {
-                    id: dueLabel
-                    visible: type == "assignment"
-                    text: Activity.dueLabelText()
-                    color: activityLabel.color
-                    Layout.fillWidth: true
-                }
+                    PlasmaComponents3.Label {
+                        id: dueLabel
+                        visible: type == "assignment"
+                        text: Activity.dueLabelText()
+                        color: activityLabel.color
+                        Layout.fillWidth: true
+                    }
 
-                MouseArea {
-                    width: parent.width
-                    height: parent.height
-                    onClicked: () => {
-                        activityCheckbox.toggle()  // toggle checkbox
-                        activityCheckbox.toggled() // and trigger the onToggled effects
+                    MouseArea {
+                        width: parent.width
+                        height: parent.height
+                        onClicked: () => {
+                            activityCheckbox.toggle()  // toggle checkbox
+                            activityCheckbox.toggled() // and trigger the onToggled effects
+                        }
                     }
                 }
             }
 
-        }
+            RowLayout {
+                Layout.alignment: Qt.AlignRight
 
-        RowLayout {
-            Layout.alignment: Qt.AlignRight
-
-            PlasmaComponents3.ToolButton {
-                icon.name: "view-visible"
-                // only show when mouse is hovering above this activity
-                opacity: activityItem.containsMouse ? 1 : 0
-                onClicked: () => {
-                    Qt.openUrlExternally(url)
+                PlasmaComponents3.ToolButton {
+                    icon.name: "expand"
+                    // only show when mouse is hovering above this activity
+                    opacity: activityItem.containsMouse ? 1 : 0
+                    onClicked: () => {
+                        expanded = !expanded
+                    }
                 }
-            }
 
-            PlasmaComponents3.ToolButton {
-                icon.name: "emblem-important-symbolic"
-                checked: important
-                opacity: activityItem.containsMouse ? 1 : 0
-
-                onClicked: () => {
-                    important = !important
-                    activityLabel.font.bold = important
-                    activityLabel.color = important
-                        ? PlasmaCore.Theme.negativeTextColor
-                        : PlasmaCore.Theme.textColor
-
-                    const configKeys = {
-                        announcement: "importantAnnouncements",
-                        assignment: "importantAssignments",
+                PlasmaComponents3.ToolButton {
+                    icon.name: "view-visible"
+                    opacity: activityItem.containsMouse ? 1 : 0
+                    onClicked: () => {
+                        Qt.openUrlExternally(url)
                     }
+                }
 
-                    let importantActivities = plasmoid.configuration[configKeys[type]]
-                    if (important) {
-                        if (!importantActivities.includes(activityId)) {
-                            importantActivities.push(activityId)
+                PlasmaComponents3.ToolButton {
+                    icon.name: "emblem-important-symbolic"
+                    checked: important
+                    opacity: activityItem.containsMouse ? 1 : 0
+
+                    onClicked: () => {
+                        important = !important
+                        activityLabel.font.bold = important
+                        activityLabel.color = important
+                            ? PlasmaCore.Theme.negativeTextColor
+                            : PlasmaCore.Theme.textColor
+
+                        const configKeys = {
+                            announcement: "importantAnnouncements",
+                            assignment: "importantAssignments",
+                        }
+
+                        let importantActivities = plasmoid.configuration[configKeys[type]]
+                        if (important) {
+                            if (!importantActivities.includes(activityId)) {
+                                importantActivities.push(activityId)
+                            }
+                        } else {
+                            // remove activityId from list
+                            importantActivities.splice(
+                                importantActivities.indexOf(activityId), 1
+                            )
                         }
-                    } else {
-                        // remove activityId from list
-                        importantActivities.splice(
-                            importantActivities.indexOf(activityId), 1
-                        )
+                        // save config
+                        plasmoid.configuration[configKeys[type]] = importantActivities
                     }
-                    // save config
-                    plasmoid.configuration[configKeys[type]] = importantActivities
                 }
             }
         }
+
+        PlasmaExtras.Paragraph {
+            visible: expanded
+            text: "Hello world!"
+        }
     }
 }