From fb4da4296e7a3ce99aae114dcc310af5162280cb Mon Sep 17 00:00:00 2001 From: Kat Inskip Date: Sun, 7 Dec 2025 20:07:08 -0800 Subject: [PATCH] fix: notifications --- quickshell/Components/NotificationActions.qml | 59 +++++++ quickshell/Components/NotificationDisplay.qml | 162 +++--------------- quickshell/Components/NotificationHeader.qml | 67 ++++++++ quickshell/Components/NotificationImage.qml | 25 +++ 4 files changed, 177 insertions(+), 136 deletions(-) create mode 100644 quickshell/Components/NotificationActions.qml create mode 100644 quickshell/Components/NotificationHeader.qml create mode 100644 quickshell/Components/NotificationImage.qml diff --git a/quickshell/Components/NotificationActions.qml b/quickshell/Components/NotificationActions.qml new file mode 100644 index 00000000..5931d68e --- /dev/null +++ b/quickshell/Components/NotificationActions.qml @@ -0,0 +1,59 @@ +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 { + required property Notification modelData_ + + Layout.minimumHeight: 0 + Layout.preferredHeight: modelData_.actions != [] ? 30 : 0 + visible: modelData_.actions != [] + spacing: 5 + Repeater { + model: modelData_.actions + + Item { + required property NotificationAction actionData + + width: 100 + height: 30 + + anchors { + left: parent.left + leftMargin: 5 + top: parent.top + topMargin: 5 + } + + Rectangle { + anchors.fill: parent + color: Stylix.base02 + radius: 5 + + Text { + text: actionData.text + color: Stylix.base05 + font.pixelSize: 12 + + anchors { + left: parent.left + leftMargin: 10 + verticalCenter: parent.verticalCenter + } + } + + MouseArea { + anchors.fill: parent + onClicked: actionData.invoke() + } + } + } + } +} diff --git a/quickshell/Components/NotificationDisplay.qml b/quickshell/Components/NotificationDisplay.qml index fc34d0bb..3664ee56 100644 --- a/quickshell/Components/NotificationDisplay.qml +++ b/quickshell/Components/NotificationDisplay.qml @@ -65,7 +65,7 @@ Item { id: wrapperPopup visible: false anchor.window: root.QsWindow.window - anchor.rect.y: parentWindow.height + anchor.rect.y: parentWindow?.height ?? 0 anchor.rect.x: clicky color: "transparent" @@ -140,151 +140,41 @@ Item { Rectangle { id: indivNotif + color: Stylix.base02 + radius: 5 anchors { fill: parent leftMargin: 5 rightMargin: 5 } - color: Stylix.base02 - ColumnLayout { - anchors { - fill: parent - leftMargin: 5 - rightMargin: 5 + RowLayout { + anchors { + fill: parent + } + NotificationImage { + image: modelData.image } - RowLayout { - spacing: 5 - ClippingWrapperRectangle { - radius: 5 - Layout.minimumWidth: 0 - Layout.minimumHeight: 0 - Layout.maximumWidth: 60 - Layout.preferredWidth: 60 - Layout.preferredHeight: 60 - Layout.leftMargin: 5 - Layout.rightMargin: 5 - visible: modelData.image != "" - Image { - fillMode: Image.PreserveAspectCrop - Layout.minimumWidth: 0 - Layout.minimumHeight: 0 - Layout.preferredWidth: 60 - Layout.preferredHeight: 60 - source: modelData.image - } + ColumnLayout { + Layout.leftMargin: 5 + Layout.rightMargin: 5 + Layout.fillWidth: true + NotificationHeader { + modelData_: modelData } - ColumnLayout { - spacing: 5 - RowLayout { - spacing: 5 - IconImage { - function getIcon() { - console.log(modelData.appIcon) - if (modelData.appIcon != "") { - return Quickshell.iconPath(modelData.appIcon) - } else { - return iconForId(modelData.appName) - } - } - width: 24 - height: 24 - visible: modelData.appIcon != "" - source: Quickshell.iconPath(modelData.appIcon) - } - Text { - elide: Text.ElideRight - text: modelData.summary - color: Stylix.base05 - } - Text { - id: dismiss - text: "󱏩" - color: Stylix.base08 - font.pixelSize: 16 - - ToolTip { - id: dismissTooltip - visible: false - delay: 500 - timeout: 1000 - text: "Dismiss notification" - } - - HoverHandler { - id: dismissHover - onHoveredChanged: { - dismissTooltip.visible = hovered - } - } - - Layout.topMargin: 5 - Layout.rightMargin: 10 - - MouseArea { - anchors.fill: parent - onClicked: { - modelData.dismiss(); - if (Notifications.list.length <= 0) { - popup.visible = false; - } - } - } - } - } - Text { - font.pointSize: 10 - wrapMode: Text.WordWrap - elide: Text.ElideRight - text: modelData.body - color: Stylix.base05 - } + 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 } } - RowLayout { - Layout.minimumHeight: 0 - visible: modelData.actions != [] - spacing: 5 - Repeater { - model: modelData.actions - - Item { - required property NotificationAction actionData - - width: 400 - height: 30 - - anchors { - left: parent.left - leftMargin: 5 - top: parent.top - topMargin: 5 - } - - Rectangle { - anchors.fill: parent - color: Stylix.base02 - radius: 5 - - Text { - text: actionData.text - color: Stylix.base05 - font.pixelSize: 12 - - anchors { - left: parent.left - leftMargin: 10 - verticalCenter: parent.verticalCenter - } - } - - MouseArea { - anchors.fill: parent - onClicked: actionData.invoke() - } - } - } + NotificationActions { + modelData_: modelData } - } } } } diff --git a/quickshell/Components/NotificationHeader.qml b/quickshell/Components/NotificationHeader.qml new file mode 100644 index 00000000..05a26441 --- /dev/null +++ b/quickshell/Components/NotificationHeader.qml @@ -0,0 +1,67 @@ +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 { + required property Notification modelData_ + IconImage { + function getIcon() { + console.log(modelData_.appIcon) + if (modelData_.appIcon != "") { + return Quickshell.iconPath(modelData_.appIcon) + } else { + return iconForId(modelData_.appName) + } + } + width: 24 + height: 24 + visible: modelData_.appIcon != "" + source: Quickshell.iconPath(modelData_.appIcon) + } + Text { + elide: Text.ElideRight + text: modelData_.summary + color: Stylix.base05 + } + Text { + id: dismiss + text: "󱏩" + color: Stylix.base08 + font.pixelSize: 16 + + ToolTip { + id: dismissTooltip + visible: false + delay: 500 + timeout: 1000 + text: "Dismiss notification" + } + + HoverHandler { + id: dismissHover + onHoveredChanged: { + dismissTooltip.visible = hovered + } + } + + Layout.topMargin: 5 + Layout.rightMargin: 10 + + MouseArea { + anchors.fill: parent + onClicked: { + modelData_.dismiss(); + if (Notifications.list.length <= 0) { + popup.visible = false; + } + } + } + } +} diff --git a/quickshell/Components/NotificationImage.qml b/quickshell/Components/NotificationImage.qml new file mode 100644 index 00000000..d6b983e2 --- /dev/null +++ b/quickshell/Components/NotificationImage.qml @@ -0,0 +1,25 @@ +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 + + +ClippingWrapperRectangle { + required property string image + radius: 5 + Layout.preferredWidth: visible ? 80 : 0 + Layout.preferredHeight: visible ? parent.height : 0 + visible: image != "" + color: Stylix.base00 + Image { + fillMode: Image.PreserveAspectFit + Layout.preferredWidth: 80 + Layout.preferredHeight: parent.height + source: image + } +}