From d1486dfb2e7f46940ac544276877ce21c7eef6dc Mon Sep 17 00:00:00 2001 From: Frederick Yin Date: Wed, 26 Jul 2023 15:09:10 +0800 Subject: Make list item expandable --- contents/ui/ActivityView.qml | 191 +++++++++++++++++++++++-------------------- 1 file 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!" + } } } -- cgit v1.2.3