From 9ae22c832f27093b9d5c220d02924953ee9b6052 Mon Sep 17 00:00:00 2001 From: Kat Inskip Date: Sun, 7 Dec 2025 21:34:18 -0800 Subject: [PATCH] feat: multi-height delegates --- quickshell/Components/NotificationDisplay.qml | 191 ------------------ .../NotificationActions.qml | 22 +- .../NotificationDisplay.qml | 81 ++++++++ .../NotificationHeader.qml | 9 +- .../NotificationImage.qml | 2 +- .../NotificationSystem/NotificationItem.qml | 76 +++++++ .../NotificationSystem/NotificationWindow.qml | 58 ++++++ .../NotificationWindowHeader.qml | 54 +++++ quickshell/Modules/Bar.qml | 3 +- 9 files changed, 284 insertions(+), 212 deletions(-) delete mode 100644 quickshell/Components/NotificationDisplay.qml rename quickshell/Components/{ => NotificationSystem}/NotificationActions.qml (66%) create mode 100644 quickshell/Components/NotificationSystem/NotificationDisplay.qml rename quickshell/Components/{ => NotificationSystem}/NotificationHeader.qml (83%) rename quickshell/Components/{ => NotificationSystem}/NotificationImage.qml (93%) create mode 100644 quickshell/Components/NotificationSystem/NotificationItem.qml create mode 100644 quickshell/Components/NotificationSystem/NotificationWindow.qml create mode 100644 quickshell/Components/NotificationSystem/NotificationWindowHeader.qml diff --git a/quickshell/Components/NotificationDisplay.qml b/quickshell/Components/NotificationDisplay.qml deleted file mode 100644 index 11128e62..00000000 --- a/quickshell/Components/NotificationDisplay.qml +++ /dev/null @@ -1,191 +0,0 @@ -import Quickshell -import Quickshell.Widgets -import Quickshell.Io -import QtQuick -import QtQuick.Layouts -import QtQuick.Controls -import "root:/DataSources" -import "root:/Helpers" -import Quickshell.Services.Notifications - -Item { - id: root - Layout.alignment: Qt.AlignVCenter; - implicitWidth: 25 - implicitHeight: parent.height - Rectangle { - anchors.centerIn: parent - id: rootContainer - color: "transparent" - width: 30 - height: 30 - radius: 50 - Text { - id: rootIcon - text: "" - color: Stylix.base05 - anchors.centerIn: parent - } - } - function updateDisplay() { - if (Notifications.list.length > 0) { - rootContainer.color = Stylix.base08 - rootIcon.color = Stylix.base00 - } else { - rootContainer.color = "transparent" - rootIcon.color = Stylix.base05 - } - } - Timer { - interval: 1000 - running: true - repeat: true - onTriggered: root.updateDisplay() - } - MouseArea { - id: ma - anchors.fill: parent - hoverEnabled: true - - onClicked: function(mouseEvent) { - var m = root.QsWindow.mapFromItem(ma, ma.width/2.0, ma.height/2.0); - var offset = notificationLoader.item.width / 2.0; - notificationLoader.item.clicky = m.x - offset; - notificationLoader.item.visible = !notificationLoader.item.visible - } - } - - LazyLoader { - id: notificationLoader - - loading: true - - PopupWindow { - property real clicky - id: wrapperPopup - visible: false - anchor.window: root.QsWindow.window - anchor.rect.y: parentWindow?.height ?? 0 - anchor.rect.x: clicky - color: "transparent" - - implicitWidth: 400 - implicitHeight: 600 - - Rectangle { - anchors.fill: parent - color: Stylix.base01 - bottomLeftRadius: 5 - bottomRightRadius: 5 - ColumnLayout { - anchors.fill: parent - RowLayout { - Layout.alignment: Qt.AlignHCenter - spacing: 10 - Text { - font.bold: true - Layout.preferredHeight: 26 - Layout.alignment: Qt.AlignVCenter - verticalAlignment: Text.AlignVCenter - text: "Notifications" - color: Stylix.base05 - font.pixelSize: 16 - } - Text { - Layout.preferredHeight: 26 - Layout.alignment: Qt.AlignVCenter - verticalAlignment: Text.AlignBottom - id: clear - text: "󱏧" - color: Stylix.base08 - font.pixelSize: 16 - ToolTip { - id: clearTooltip - visible: false - delay: 500 - timeout: 1000 - text: "Clear notifications" - } - MouseArea { - anchors.fill: parent - onClicked: { - if (Notifications.list.length >= 0) { - Notifications.clear() - root.updateDisplay() - } - } - } - - HoverHandler { - id: clearHover - onHoveredChanged: { - clearTooltip.visible = hovered - } - } - } - } - ClippingRectangle { - color: "transparent" - Layout.alignment: Qt.AlignBottom - Layout.preferredWidth: parent.width - Layout.preferredHeight: parent.height - 24 - ListView { - anchors.fill: parent - id: notificationList - model: Notifications.list - spacing: 10 - ScrollBar.vertical: ScrollBar {} - - delegate: Item { - required property Notification modelData - - height: 100 - width: 400 - - Rectangle { - id: indivNotif - color: Stylix.base02 - radius: 5 - anchors { - fill: parent - leftMargin: 5 - rightMargin: 5 - } - RowLayout { - anchors { - fill: parent - } - NotificationImage { - image: modelData.image - } - ColumnLayout { - Layout.leftMargin: 5 - Layout.rightMargin: 5 - Layout.fillWidth: true - NotificationHeader { - modelData_: modelData - } - Text { - font.pointSize: 10 - wrapMode: Text.WordWrap - Layout.fillWidth: true - Layout.preferredWidth: modelData.image != "" ? indivNotif.width - 80 : indivNotif.width - Layout.maximumWidth: indivNotif.width - elide: Text.ElideRight - text: modelData.body - color: Stylix.base05 - } - } - NotificationActions { - modelData_: modelData - } - } - } - } - } - } - } - } - } - } -} diff --git a/quickshell/Components/NotificationActions.qml b/quickshell/Components/NotificationSystem/NotificationActions.qml similarity index 66% rename from quickshell/Components/NotificationActions.qml rename to quickshell/Components/NotificationSystem/NotificationActions.qml index 5931d68e..ddaba845 100644 --- a/quickshell/Components/NotificationActions.qml +++ b/quickshell/Components/NotificationSystem/NotificationActions.qml @@ -13,33 +13,27 @@ RowLayout { required property Notification modelData_ Layout.minimumHeight: 0 - Layout.preferredHeight: modelData_.actions != [] ? 30 : 0 - visible: modelData_.actions != [] + Layout.preferredHeight: modelData_.actions.length > 0 ? 30 : 0 + visible: modelData_.actions.length > 0 spacing: 5 Repeater { model: modelData_.actions - Item { - required property NotificationAction actionData + delegate: Item { + required property NotificationAction modelData width: 100 height: 30 - anchors { - left: parent.left - leftMargin: 5 - top: parent.top - topMargin: 5 - } - Rectangle { anchors.fill: parent - color: Stylix.base02 + color: Stylix.base00 radius: 5 Text { - text: actionData.text + text: modelData.text color: Stylix.base05 + anchors.centerIn: parent font.pixelSize: 12 anchors { @@ -51,7 +45,7 @@ RowLayout { MouseArea { anchors.fill: parent - onClicked: actionData.invoke() + onClicked: modelData.invoke() } } } diff --git a/quickshell/Components/NotificationSystem/NotificationDisplay.qml b/quickshell/Components/NotificationSystem/NotificationDisplay.qml new file mode 100644 index 00000000..f0cc0dae --- /dev/null +++ b/quickshell/Components/NotificationSystem/NotificationDisplay.qml @@ -0,0 +1,81 @@ +import Quickshell +import Quickshell.Widgets +import Quickshell.Io +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls +import "root:/DataSources" +import "root:/Helpers" +import Quickshell.Services.Notifications + +Item { + id: root + Layout.alignment: Qt.AlignVCenter; + implicitWidth: 30 + implicitHeight: parent.height + Rectangle { + anchors.centerIn: parent + id: rootContainer + color: "transparent" + width: 60 + height: 30 + radius: 50 + RowLayout { + spacing: 5 + anchors.centerIn: parent + Text { + verticalAlignment: Text.AlignVCenter + id: rootIcon + text: "" + color: Stylix.base05 + } + Text { + verticalAlignment: Text.AlignVCenter + id: count + text: "" + font.bold: true + color: Stylix.base05 + } + } + } + function updateDisplay() { + if (Notifications.list.length > 0) { + rootContainer.color = Stylix.base08 + rootIcon.color = Stylix.base00 + count.color = Stylix.base00 + count.text = Notifications.list.length + rootContainer.width = 60 + root.implicitWidth = 60 + count.visible = true + } else { + rootContainer.width = 30 + root.implicitWidth = 30 + rootContainer.color = "transparent" + rootIcon.color = Stylix.base05 + count.color = Stylix.base05 + count.visible = false + } + } + Timer { + interval: 1000 + running: true + repeat: true + onTriggered: root.updateDisplay() + } + MouseArea { + id: ma + anchors.fill: parent + hoverEnabled: true + + onClicked: function(mouseEvent) { + var m = root.QsWindow.mapFromItem(ma, ma.width/2.0, ma.height/2.0); + var offset = notificationLoader.item.width / 2.0; + notificationLoader.item.clicky = m.x - offset; + notificationLoader.item.visible = !notificationLoader.item.visible + } + } + + NotificationWindow { + id: notificationLoader + } +} diff --git a/quickshell/Components/NotificationHeader.qml b/quickshell/Components/NotificationSystem/NotificationHeader.qml similarity index 83% rename from quickshell/Components/NotificationHeader.qml rename to quickshell/Components/NotificationSystem/NotificationHeader.qml index da61afbb..aaf0c503 100644 --- a/quickshell/Components/NotificationHeader.qml +++ b/quickshell/Components/NotificationSystem/NotificationHeader.qml @@ -13,17 +13,16 @@ RowLayout { required property Notification modelData_ IconImage { function getIcon() { - console.log(modelData_.appIcon) if (modelData_.appIcon != "") { - return Quickshell.iconPath(modelData_.appIcon) + return Quickshell.iconPath(modelData_.appIcon.replace("file://", "")) } else { - return iconForId(modelData_.appName) + return ThemeIcons.iconForAppId(modelData_.appName) } } width: 24 height: 24 - visible: modelData_.appIcon != "" - source: Quickshell.iconPath(modelData_.appIcon) + visible: source != "" + source: getIcon() } Text { font.bold: true diff --git a/quickshell/Components/NotificationImage.qml b/quickshell/Components/NotificationSystem/NotificationImage.qml similarity index 93% rename from quickshell/Components/NotificationImage.qml rename to quickshell/Components/NotificationSystem/NotificationImage.qml index d6b983e2..64e03b9b 100644 --- a/quickshell/Components/NotificationImage.qml +++ b/quickshell/Components/NotificationSystem/NotificationImage.qml @@ -20,6 +20,6 @@ ClippingWrapperRectangle { fillMode: Image.PreserveAspectFit Layout.preferredWidth: 80 Layout.preferredHeight: parent.height - source: image + source: image.replace("file://", "") } } diff --git a/quickshell/Components/NotificationSystem/NotificationItem.qml b/quickshell/Components/NotificationSystem/NotificationItem.qml new file mode 100644 index 00000000..614c5a1e --- /dev/null +++ b/quickshell/Components/NotificationSystem/NotificationItem.qml @@ -0,0 +1,76 @@ +import Quickshell +import Quickshell.Widgets +import Quickshell.Io +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls +import "root:/DataSources" +import "root:/Helpers" +import Quickshell.Services.Notifications + +Item { + required property Notification modelData + + function calculateHeight() { + if (modelData.actions.length > 0) { + return 150 + } else if (modelData.image != "") { + return 100 + } else { + return 60 + } + } + + function calculateBodyHeight() { + if (modelData.image != "" || modelData.actions.length > 0) { + return 40 + } else { + return 20 + } + } + + height: calculateHeight() + width: 450 + + Rectangle { + id: indivNotif + color: Stylix.base02 + radius: 5 + anchors { + fill: parent + leftMargin: 5 + rightMargin: 5 + } + RowLayout { + anchors { + fill: parent + } + NotificationImage { + image: modelData.image + } + ColumnLayout { + Layout.alignment: Qt.AlignVCenter + Layout.leftMargin: 5 + Layout.rightMargin: 5 + Layout.fillWidth: true + NotificationHeader { + modelData_: modelData + } + Text { + font.pointSize: 10 + wrapMode: Text.WordWrap + Layout.fillWidth: true + Layout.preferredWidth: modelData.image != "" ? indivNotif.width - 80 : indivNotif.width + Layout.maximumHeight: calculateBodyHeight() + Layout.maximumWidth: indivNotif.width + elide: Text.ElideRight + text: modelData.body + color: Stylix.base05 + } + NotificationActions { + modelData_: modelData + } + } + } + } +} diff --git a/quickshell/Components/NotificationSystem/NotificationWindow.qml b/quickshell/Components/NotificationSystem/NotificationWindow.qml new file mode 100644 index 00000000..07d46417 --- /dev/null +++ b/quickshell/Components/NotificationSystem/NotificationWindow.qml @@ -0,0 +1,58 @@ +import Quickshell +import Quickshell.Widgets +import Quickshell.Io +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls +import "root:/DataSources" +import "root:/Helpers" +import Quickshell.Services.Notifications + +LazyLoader { + id: notificationLoader + + loading: true + + PopupWindow { + property real clicky + id: wrapperPopup + visible: false + anchor.window: root.QsWindow.window + anchor.rect.y: parentWindow?.height ?? 0 + anchor.rect.x: clicky + color: "transparent" + + implicitWidth: 450 + implicitHeight: 600 + + Rectangle { + anchors.fill: parent + color: Stylix.base01 + bottomLeftRadius: 5 + bottomRightRadius: 5 + ColumnLayout { + anchors.fill: parent + NotificationWindowHeader { + Layout.topMargin: 5 + Layout.bottomMargin: 5 + } + ClippingRectangle { + color: "transparent" + Layout.alignment: Qt.AlignBottom + Layout.preferredWidth: parent.width + Layout.preferredHeight: parent.height - 34 + ListView { + cacheBuffer: 30 + anchors.fill: parent + id: notificationList + model: Notifications.list + spacing: 10 + ScrollBar.vertical: ScrollBar {} + + delegate: NotificationItem {} + } + } + } + } + } +} diff --git a/quickshell/Components/NotificationSystem/NotificationWindowHeader.qml b/quickshell/Components/NotificationSystem/NotificationWindowHeader.qml new file mode 100644 index 00000000..3e002bb0 --- /dev/null +++ b/quickshell/Components/NotificationSystem/NotificationWindowHeader.qml @@ -0,0 +1,54 @@ +import Quickshell +import Quickshell.Widgets +import Quickshell.Io +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls +import "root:/DataSources" +import "root:/Helpers" +import Quickshell.Services.Notifications + +RowLayout { + Layout.alignment: Qt.AlignHCenter + spacing: 10 + Text { + font.bold: true + Layout.preferredHeight: 26 + Layout.alignment: Qt.AlignVCenter + verticalAlignment: Text.AlignVCenter + text: "Notifications" + color: Stylix.base05 + font.pixelSize: 16 + } + Text { + Layout.preferredHeight: 26 + Layout.alignment: Qt.AlignVCenter + verticalAlignment: Text.AlignBottom + id: clear + text: "󱏧" + color: Stylix.base08 + font.pixelSize: 16 + ToolTip { + id: clearTooltip + visible: false + delay: 500 + timeout: 1000 + text: "Clear notifications" + } + MouseArea { + anchors.fill: parent + onClicked: { + if (Notifications.list.length >= 0) { + Notifications.clear() + root.updateDisplay() + } + } + } + HoverHandler { + id: clearHover + onHoveredChanged: { + clearTooltip.visible = hovered + } + } + } +} diff --git a/quickshell/Modules/Bar.qml b/quickshell/Modules/Bar.qml index 02a19c89..c7a10577 100644 --- a/quickshell/Modules/Bar.qml +++ b/quickshell/Modules/Bar.qml @@ -5,6 +5,7 @@ import QtQuick.Layouts import QtQuick.Controls import "root:/DataSources" import "root:/Components" +import "root:/Components/NotificationSystem" Scope { id: root @@ -70,9 +71,9 @@ Scope { spacing: 15 - NotificationDisplay {} SystemTrayWrapper {} Clock {} + NotificationDisplay {} DistroIcon {} } }