From 6b64c8a91804058fea99ed6944753758ee92c543 Mon Sep 17 00:00:00 2001 From: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com> Date: Sat, 10 May 2025 17:31:04 +1000 Subject: feat: basic notifications Also fix pixel issue with notif area background Add more log rules to run script --- modules/notifications/Background.qml | 4 + modules/notifications/Content.qml | 12 +- modules/notifications/Notification.qml | 188 ++++++++++++++++++++++++++++++++ modules/notifications/Notifications.qml | 11 +- 4 files changed, 202 insertions(+), 13 deletions(-) create mode 100644 modules/notifications/Notification.qml (limited to 'modules/notifications') diff --git a/modules/notifications/Background.qml b/modules/notifications/Background.qml index e3289af..a0ed11e 100644 --- a/modules/notifications/Background.qml +++ b/modules/notifications/Background.qml @@ -49,6 +49,10 @@ Shape { radiusX: root.rounding radiusY: root.rounding } + PathLine { + relativeX: 1 + relativeY: 0 + } Behavior on fillColor { ColorAnimation { diff --git a/modules/notifications/Content.qml b/modules/notifications/Content.qml index 86cef8b..7fdd000 100644 --- a/modules/notifications/Content.qml +++ b/modules/notifications/Content.qml @@ -7,16 +7,18 @@ import QtQuick Column { id: root - // padding: Appearance.padding.large + padding: Appearance.padding.large anchors.bottom: parent.bottom anchors.right: parent.right spacing: Appearance.spacing.normal - StyledRect { - width: 300 - height: 100 - // color: Qt.rgba(255, 0, 0, 0.4) + Repeater { + model: ScriptModel { + values: [...Notifs.list] + } + + Notification {} } } diff --git a/modules/notifications/Notification.qml b/modules/notifications/Notification.qml new file mode 100644 index 0000000..a3fa171 --- /dev/null +++ b/modules/notifications/Notification.qml @@ -0,0 +1,188 @@ +pragma ComponentBehavior: Bound + +import "root:/widgets" +import "root:/services" +import "root:/config" +import Quickshell +import Quickshell.Widgets +import QtQuick +import QtQuick.Effects + +StyledRect { + id: root + + required property Notifs.Notif modelData + readonly property bool hasImage: modelData.image.length > 0 + readonly property bool hasAppIcon: modelData.appIcon.length > 0 + readonly property int imageSize: summary.height + bodyPreview.height + property bool expanded + + color: Colours.palette.m3surfaceContainer + radius: Appearance.rounding.normal + implicitWidth: NotifsConfig.sizes.width + + Item { + anchors.left: parent.left + anchors.right: parent.right + anchors.top: parent.top + anchors.margins: Appearance.padding.normal + + implicitHeight: summary.height + bodyPreview.height + anchors.margins * 2 + + Loader { + id: image + + active: root.hasImage + asynchronous: true + + anchors.left: parent.left + anchors.verticalCenter: parent.verticalCenter + anchors.verticalCenterOffset: -parent.anchors.margins + width: root.hasImage || root.hasAppIcon ? root.imageSize : 0 + height: root.hasImage || root.hasAppIcon ? root.imageSize : 0 + visible: root.hasImage || root.hasAppIcon + + sourceComponent: ClippingRectangle { + radius: Appearance.rounding.full + width: root.imageSize + height: root.imageSize + + Image { + anchors.fill: parent + source: Qt.resolvedUrl(root.modelData.image) + fillMode: Image.PreserveAspectCrop + cache: false + asynchronous: true + } + } + + states: State { + name: "expanded" + when: root.expanded + + AnchorChanges { + anchors.verticalCenter: undefined + anchors.top: image.parent.top + } + } + } + + Loader { + id: appIcon + + active: root.hasAppIcon + asynchronous: true + + anchors.horizontalCenter: root.hasImage ? undefined : image.horizontalCenter + anchors.verticalCenter: root.hasImage ? undefined : image.verticalCenter + anchors.right: root.hasImage ? image.right : undefined + anchors.bottom: root.hasImage ? image.bottom : undefined + + sourceComponent: StyledRect { + radius: Appearance.rounding.full + color: Colours.palette.m3tertiaryContainer + implicitWidth: root.hasImage ? NotifsConfig.sizes.badge : root.imageSize + implicitHeight: root.hasImage ? NotifsConfig.sizes.badge : root.imageSize + + IconImage { + id: icon + + anchors.centerIn: parent + visible: false + implicitSize: Math.round(parent.width * 0.6) + source: Quickshell.iconPath(root.modelData.appIcon) + asynchronous: true + } + + Colouriser { + anchors.fill: icon + source: icon + colorizationColor: Colours.palette.m3onTertiaryContainer + } + } + + states: State { + name: "expanded" + when: !root.hasImage && root.expanded + + AnchorChanges { + anchors.verticalCenter: undefined + anchors.top: image.parent.top + } + } + } + + StyledText { + id: summary + + anchors.top: parent.top + anchors.left: image.right + anchors.leftMargin: Appearance.spacing.small + + text: root.modelData.summary + maximumLineCount: 1 + } + + StyledText { + id: timeSep + + anchors.top: parent.top + anchors.left: summary.right + anchors.leftMargin: Appearance.spacing.small + + text: "•" + color: Colours.palette.m3onSurfaceVariant + font.pointSize: Appearance.font.size.small + } + + StyledText { + id: time + + anchors.top: parent.top + anchors.left: timeSep.right + anchors.leftMargin: Appearance.spacing.small + + animate: true + horizontalAlignment: Text.AlignLeft + text: root.modelData.timeStr + color: Colours.palette.m3onSurfaceVariant + font.pointSize: Appearance.font.size.small + } + + StyledRect { + id: expandBtn + + anchors.right: parent.right + anchors.top: parent.top + + MaterialIcon { + animate: true + text: root.expanded ? "expand_less" : "expand_more" + font.pointSize: Appearance.font.size.smaller + } + } + + StyledText { + id: bodyPreview + + anchors.left: summary.left + anchors.right: expandBtn.left + anchors.top: summary.bottom + anchors.rightMargin: Appearance.spacing.small + + text: bodyPreviewMetrics.elidedText + color: Colours.palette.m3onSurfaceVariant + font.pointSize: Appearance.font.size.small + } + + TextMetrics { + id: bodyPreviewMetrics + + text: root.modelData.body + font.family: bodyPreview.font.family + font.pointSize: bodyPreview.font.pointSize + elide: Text.ElideRight + elideWidth: bodyPreview.width + } + } +} diff --git a/modules/notifications/Notifications.qml b/modules/notifications/Notifications.qml index 2c73802..fa01d33 100644 --- a/modules/notifications/Notifications.qml +++ b/modules/notifications/Notifications.qml @@ -12,14 +12,7 @@ Variants { id: root required property ShellScreen modelData - property bool osdVisible - - Timer { - // running: true - repeat: true - interval: 2000 - onTriggered: root.osdVisible = !root.osdVisible - } + property bool osdVisible: Notifs.list.length > 0 LazyLoader { loading: true @@ -38,7 +31,9 @@ Variants { anchors.top: true anchors.bottom: true + anchors.left: true anchors.right: true + width: wrapper.width height: wrapper.height -- cgit v1.2.3-freya