notifs: fix interactions

modules/notifications/Notification.qml

@@ -27,6 +27,14 @@ StyledRect {
     x: Config.notifs.sizes.width
     Component.onCompleted: x = 0
 
+    Behavior on x {
+        NumberAnimation {
+            duration: Appearance.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.emphasizedDecel
+        }
+    }
+
     RetainableLock {
         object: root.modelData.notification
         locked: true
@@ -73,410 +81,402 @@ StyledRect {
             if (actions?.length === 1)
                 actions[0].invoke();
         }
-    }
 
-    Behavior on x {
+        Item {
-        NumberAnimation {
+            id: inner
-            duration: Appearance.anim.durations.normal
-            easing.type: Easing.BezierSpline
-            easing.bezierCurve: Appearance.anim.curves.emphasizedDecel
-        }
-    }
-
-    Item {
-        id: inner
-
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.top: parent.top
-        anchors.margins: Appearance.padding.normal
-
-        implicitHeight: root.nonAnimHeight
-
-        Behavior on implicitHeight {
-            Anim {
-                duration: Appearance.anim.durations.expressiveDefaultSpatial
-                easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
-            }
-        }
-
-        Loader {
-            id: image
-
-            active: root.hasImage
-            asynchronous: true
 
             anchors.left: parent.left
+            anchors.right: parent.right
             anchors.top: parent.top
-            width: Config.notifs.sizes.image
+            anchors.margins: Appearance.padding.normal
-            height: Config.notifs.sizes.image
-            visible: root.hasImage || root.hasAppIcon
 
-            sourceComponent: ClippingRectangle {
+            implicitHeight: root.nonAnimHeight
-                radius: Appearance.rounding.full
-                implicitWidth: Config.notifs.sizes.image
-                implicitHeight: Config.notifs.sizes.image
 
-                Image {
+            Behavior on implicitHeight {
-                    anchors.fill: parent
+                Anim {
-                    source: Qt.resolvedUrl(root.modelData.image)
+                    duration: Appearance.anim.durations.expressiveDefaultSpatial
-                    fillMode: Image.PreserveAspectCrop
+                    easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
-                    cache: false
-                    asynchronous: true
                 }
             }
-        }
 
-        Loader {
+            Loader {
-            id: appIcon
+                id: image
 
-            active: root.hasAppIcon || !root.hasImage
+                active: root.hasImage
-            asynchronous: true
+                asynchronous: true
 
-            anchors.horizontalCenter: root.hasImage ? undefined : image.horizontalCenter
+                anchors.left: parent.left
-            anchors.verticalCenter: root.hasImage ? undefined : image.verticalCenter
+                anchors.top: parent.top
-            anchors.right: root.hasImage ? image.right : undefined
+                width: Config.notifs.sizes.image
-            anchors.bottom: root.hasImage ? image.bottom : undefined
+                height: Config.notifs.sizes.image
+                visible: root.hasImage || root.hasAppIcon
 
-            sourceComponent: StyledRect {
+                sourceComponent: ClippingRectangle {
-                radius: Appearance.rounding.full
+                    radius: Appearance.rounding.full
-                color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3error : root.modelData.urgency === NotificationUrgency.Low ? Colours.palette.m3surfaceContainerHighest : Colours.palette.m3tertiaryContainer
+                    implicitWidth: Config.notifs.sizes.image
-                implicitWidth: root.hasImage ? Config.notifs.sizes.badge : Config.notifs.sizes.image
+                    implicitHeight: Config.notifs.sizes.image
-                implicitHeight: root.hasImage ? Config.notifs.sizes.badge : Config.notifs.sizes.image
 
-                Loader {
+                    Image {
-                    id: icon
+                        anchors.fill: parent
+                        source: Qt.resolvedUrl(root.modelData.image)
+                        fillMode: Image.PreserveAspectCrop
+                        cache: false
+                        asynchronous: true
+                    }
+                }
+            }
 
-                    active: root.hasAppIcon
+            Loader {
-                    asynchronous: true
+                id: appIcon
+
+                active: root.hasAppIcon || !root.hasImage
+                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: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3error : root.modelData.urgency === NotificationUrgency.Low ? Colours.palette.m3surfaceContainerHighest : Colours.palette.m3tertiaryContainer
+                    implicitWidth: root.hasImage ? Config.notifs.sizes.badge : Config.notifs.sizes.image
+                    implicitHeight: root.hasImage ? Config.notifs.sizes.badge : Config.notifs.sizes.image
+
+                    Loader {
+                        id: icon
+
+                        active: root.hasAppIcon
+                        asynchronous: true
+
+                        anchors.centerIn: parent
+
+                        width: Math.round(parent.width * 0.6)
+                        height: Math.round(parent.width * 0.6)
+
+                        sourceComponent: IconImage {
+                            anchors.fill: parent
+                            source: Quickshell.iconPath(root.modelData.appIcon)
+                            asynchronous: true
+
+                            layer.enabled: root.modelData.appIcon.endsWith("symbolic")
+                            layer.effect: Colouriser {
+                                colorizationColor: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3onError : root.modelData.urgency === NotificationUrgency.Low ? Colours.palette.m3onSurface : Colours.palette.m3onTertiaryContainer
+                            }
+                        }
+                    }
+
+                    Loader {
+                        active: !root.hasAppIcon
+                        asynchronous: true
+                        anchors.centerIn: parent
+                        anchors.horizontalCenterOffset: -Appearance.font.size.large * 0.02
+                        anchors.verticalCenterOffset: Appearance.font.size.large * 0.02
+
+                        sourceComponent: MaterialIcon {
+                            text: Icons.getNotifIcon(root.modelData.summary.toLowerCase(), root.modelData.urgency)
+
+                            color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3onError : root.modelData.urgency === NotificationUrgency.Low ? Colours.palette.m3onSurface : Colours.palette.m3onTertiaryContainer
+                            font.pointSize: Appearance.font.size.large
+                        }
+                    }
+                }
+            }
+
+            StyledText {
+                id: appName
+
+                anchors.top: parent.top
+                anchors.left: image.right
+                anchors.leftMargin: Appearance.spacing.smaller
+
+                animate: true
+                text: appNameMetrics.elidedText
+                maximumLineCount: 1
+                color: Colours.palette.m3onSurfaceVariant
+                font.pointSize: Appearance.font.size.small
+
+                opacity: root.expanded ? 1 : 0
+
+                Behavior on opacity {
+                    Anim {}
+                }
+            }
+
+            TextMetrics {
+                id: appNameMetrics
+
+                text: root.modelData.appName
+                font.family: appName.font.family
+                font.pointSize: appName.font.pointSize
+                elide: Text.ElideRight
+                elideWidth: expandBtn.x - time.width - timeSep.width - summary.x - Appearance.spacing.small * 3
+            }
+
+            StyledText {
+                id: summary
+
+                anchors.top: parent.top
+                anchors.left: image.right
+                anchors.leftMargin: Appearance.spacing.smaller
+
+                animate: true
+                text: summaryMetrics.elidedText
+                maximumLineCount: 1
+                height: implicitHeight
+
+                states: State {
+                    name: "expanded"
+                    when: root.expanded
+
+                    PropertyChanges {
+                        summary.maximumLineCount: undefined
+                    }
+
+                    AnchorChanges {
+                        target: summary
+                        anchors.top: appName.bottom
+                    }
+                }
+
+                transitions: Transition {
+                    PropertyAction {
+                        target: summary
+                        property: "maximumLineCount"
+                    }
+                    AnchorAnimation {
+                        duration: Appearance.anim.durations.normal
+                        easing.type: Easing.BezierSpline
+                        easing.bezierCurve: Appearance.anim.curves.standard
+                    }
+                }
+
+                Behavior on height {
+                    Anim {}
+                }
+            }
+
+            TextMetrics {
+                id: summaryMetrics
+
+                text: root.modelData.summary
+                font.family: summary.font.family
+                font.pointSize: summary.font.pointSize
+                elide: Text.ElideRight
+                elideWidth: expandBtn.x - time.width - timeSep.width - summary.x - Appearance.spacing.small * 3
+            }
+
+            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
+
+                states: State {
+                    name: "expanded"
+                    when: root.expanded
+
+                    AnchorChanges {
+                        target: timeSep
+                        anchors.left: appName.right
+                    }
+                }
+
+                transitions: Transition {
+                    AnchorAnimation {
+                        duration: Appearance.anim.durations.normal
+                        easing.type: Easing.BezierSpline
+                        easing.bezierCurve: Appearance.anim.curves.standard
+                    }
+                }
+            }
+
+            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
+            }
+
+            Item {
+                id: expandBtn
+
+                anchors.right: parent.right
+                anchors.top: parent.top
+
+                implicitWidth: expandIcon.height
+                implicitHeight: expandIcon.height
+
+                StateLayer {
+                    radius: Appearance.rounding.full
+                    color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
+
+                    function onClicked() {
+                        root.expanded = !root.expanded;
+                    }
+                }
+
+                MaterialIcon {
+                    id: expandIcon
 
                     anchors.centerIn: parent
 
-                    width: Math.round(parent.width * 0.6)
+                    animate: true
-                    height: Math.round(parent.width * 0.6)
+                    text: root.expanded ? "expand_less" : "expand_more"
+                    font.pointSize: Appearance.font.size.normal
+                }
+            }
 
-                    sourceComponent: IconImage {
+            StyledText {
-                        anchors.fill: parent
+                id: bodyPreview
-                        source: Quickshell.iconPath(root.modelData.appIcon)
-                        asynchronous: true
 
-                        layer.enabled: root.modelData.appIcon.endsWith("symbolic")
+                anchors.left: summary.left
-                        layer.effect: Colouriser {
+                anchors.right: expandBtn.left
-                            colorizationColor: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3onError : root.modelData.urgency === NotificationUrgency.Low ? Colours.palette.m3onSurface : Colours.palette.m3onTertiaryContainer
+                anchors.top: summary.bottom
+                anchors.rightMargin: Appearance.spacing.small
+
+                animate: true
+                textFormat: Text.MarkdownText
+                text: bodyPreviewMetrics.elidedText
+                color: Colours.palette.m3onSurfaceVariant
+                font.pointSize: Appearance.font.size.small
+
+                opacity: root.expanded ? 0 : 1
+
+                Behavior on opacity {
+                    Anim {}
+                }
+            }
+
+            TextMetrics {
+                id: bodyPreviewMetrics
+
+                text: root.modelData.body
+                font.family: bodyPreview.font.family
+                font.pointSize: bodyPreview.font.pointSize
+                elide: Text.ElideRight
+                elideWidth: bodyPreview.width
+            }
+
+            StyledText {
+                id: body
+
+                anchors.left: summary.left
+                anchors.right: expandBtn.left
+                anchors.top: summary.bottom
+                anchors.rightMargin: Appearance.spacing.small
+
+                animate: true
+                textFormat: Text.MarkdownText
+                text: root.modelData.body
+                color: Colours.palette.m3onSurfaceVariant
+                font.pointSize: Appearance.font.size.small
+                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+
+                onLinkActivated: link => {
+                    if (!root.expanded)
+                        return;
+
+                    Quickshell.execDetached(["app2unit", "-O", "--", link]);
+                    root.modelData.notification.dismiss(); // TODO: change back to popup when notif dock impled
+                }
+
+                opacity: root.expanded ? 1 : 0
+
+                Behavior on opacity {
+                    Anim {}
+                }
+            }
+
+            RowLayout {
+                id: actions
+
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.top: body.bottom
+                anchors.topMargin: Appearance.spacing.small
+
+                spacing: Appearance.spacing.smaller
+
+                opacity: root.expanded ? 1 : 0
+
+                Behavior on opacity {
+                    Anim {}
+                }
+
+                Action {
+                    modelData: QtObject {
+                        readonly property string text: qsTr("Close")
+                        function invoke(): void {
+                            root.modelData.notification.dismiss();
                         }
                     }
                 }
 
-                Loader {
+                Repeater {
-                    active: !root.hasAppIcon
+                    model: root.modelData.actions
-                    asynchronous: true
-                    anchors.centerIn: parent
-                    anchors.horizontalCenterOffset: -Appearance.font.size.large * 0.02
-                    anchors.verticalCenterOffset: Appearance.font.size.large * 0.02
 
-                    sourceComponent: MaterialIcon {
+                    delegate: Component {
-                        text: Icons.getNotifIcon(root.modelData.summary.toLowerCase(), root.modelData.urgency)
+                        Action {}
-
-                        color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3onError : root.modelData.urgency === NotificationUrgency.Low ? Colours.palette.m3onSurface : Colours.palette.m3onTertiaryContainer
-                        font.pointSize: Appearance.font.size.large
                     }
                 }
             }
         }
 
-        StyledText {
+        component Action: StyledRect {
-            id: appName
+            id: action
 
-            anchors.top: parent.top
+            required property var modelData
-            anchors.left: image.right
-            anchors.leftMargin: Appearance.spacing.smaller
 
-            animate: true
+            radius: Appearance.rounding.full
-            text: appNameMetrics.elidedText
+            color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3secondary : Colours.palette.m3surfaceContainerHigh
-            maximumLineCount: 1
-            color: Colours.palette.m3onSurfaceVariant
-            font.pointSize: Appearance.font.size.small
 
-            opacity: root.expanded ? 1 : 0
+            Layout.preferredWidth: actionText.width + Appearance.padding.normal * 2
-
+            Layout.preferredHeight: actionText.height + Appearance.padding.small * 2
-            Behavior on opacity {
+            implicitWidth: actionText.width + Appearance.padding.normal * 2
-                Anim {}
+            implicitHeight: actionText.height + Appearance.padding.small * 2
-            }
-        }
-
-        TextMetrics {
-            id: appNameMetrics
-
-            text: root.modelData.appName
-            font.family: appName.font.family
-            font.pointSize: appName.font.pointSize
-            elide: Text.ElideRight
-            elideWidth: expandBtn.x - time.width - timeSep.width - summary.x - Appearance.spacing.small * 3
-        }
-
-        StyledText {
-            id: summary
-
-            anchors.top: parent.top
-            anchors.left: image.right
-            anchors.leftMargin: Appearance.spacing.smaller
-
-            animate: true
-            text: summaryMetrics.elidedText
-            maximumLineCount: 1
-            height: implicitHeight
-
-            states: State {
-                name: "expanded"
-                when: root.expanded
-
-                PropertyChanges {
-                    summary.maximumLineCount: undefined
-                }
-
-                AnchorChanges {
-                    target: summary
-                    anchors.top: appName.bottom
-                }
-            }
-
-            transitions: Transition {
-                PropertyAction {
-                    target: summary
-                    property: "maximumLineCount"
-                }
-                AnchorAnimation {
-                    duration: Appearance.anim.durations.normal
-                    easing.type: Easing.BezierSpline
-                    easing.bezierCurve: Appearance.anim.curves.standard
-                }
-            }
-
-            Behavior on height {
-                Anim {}
-            }
-        }
-
-        TextMetrics {
-            id: summaryMetrics
-
-            text: root.modelData.summary
-            font.family: summary.font.family
-            font.pointSize: summary.font.pointSize
-            elide: Text.ElideRight
-            elideWidth: expandBtn.x - time.width - timeSep.width - summary.x - Appearance.spacing.small * 3
-        }
-
-        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
-
-            states: State {
-                name: "expanded"
-                when: root.expanded
-
-                AnchorChanges {
-                    target: timeSep
-                    anchors.left: appName.right
-                }
-            }
-
-            transitions: Transition {
-                AnchorAnimation {
-                    duration: Appearance.anim.durations.normal
-                    easing.type: Easing.BezierSpline
-                    easing.bezierCurve: Appearance.anim.curves.standard
-                }
-            }
-        }
-
-        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
-        }
-
-        Item {
-            id: expandBtn
-
-            anchors.right: parent.right
-            anchors.top: parent.top
-
-            implicitWidth: expandIcon.height
-            implicitHeight: expandIcon.height
 
             StateLayer {
                 radius: Appearance.rounding.full
-                color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
+                color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3onSecondary : Colours.palette.m3onSurface
 
-                function onClicked() {
+                function onClicked(): void {
-                    root.expanded = !root.expanded;
+                    action.modelData.invoke();
                 }
             }
 
-            MaterialIcon {
+            StyledText {
-                id: expandIcon
+                id: actionText
 
                 anchors.centerIn: parent
-
+                text: actionTextMetrics.elidedText
-                animate: true
+                color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3onSecondary : Colours.palette.m3onSurfaceVariant
-                text: root.expanded ? "expand_less" : "expand_more"
+                font.pointSize: Appearance.font.size.small
-                font.pointSize: Appearance.font.size.normal
-            }
-        }
-
-        StyledText {
-            id: bodyPreview
-
-            anchors.left: summary.left
-            anchors.right: expandBtn.left
-            anchors.top: summary.bottom
-            anchors.rightMargin: Appearance.spacing.small
-
-            animate: true
-            textFormat: Text.MarkdownText
-            text: bodyPreviewMetrics.elidedText
-            color: Colours.palette.m3onSurfaceVariant
-            font.pointSize: Appearance.font.size.small
-
-            opacity: root.expanded ? 0 : 1
-
-            Behavior on opacity {
-                Anim {}
-            }
-        }
-
-        TextMetrics {
-            id: bodyPreviewMetrics
-
-            text: root.modelData.body
-            font.family: bodyPreview.font.family
-            font.pointSize: bodyPreview.font.pointSize
-            elide: Text.ElideRight
-            elideWidth: bodyPreview.width
-        }
-
-        StyledText {
-            id: body
-
-            anchors.left: summary.left
-            anchors.right: expandBtn.left
-            anchors.top: summary.bottom
-            anchors.rightMargin: Appearance.spacing.small
-
-            animate: true
-            textFormat: Text.MarkdownText
-            text: root.modelData.body
-            color: Colours.palette.m3onSurfaceVariant
-            font.pointSize: Appearance.font.size.small
-            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-
-            onLinkActivated: link => {
-                if (!root.expanded)
-                    return;
-
-                Quickshell.execDetached(["app2unit", "-O", "--", link]);
-                root.modelData.notification.dismiss(); // TODO: change back to popup when notif dock impled
             }
 
-            opacity: root.expanded ? 1 : 0
+            TextMetrics {
+                id: actionTextMetrics
 
-            Behavior on opacity {
+                text: action.modelData.text
-                Anim {}
+                font.family: actionText.font.family
-            }
+                font.pointSize: actionText.font.pointSize
-        }
+                elide: Text.ElideRight
-
+                elideWidth: {
-        RowLayout {
+                    const numActions = root.modelData.actions.length + 1;
-            id: actions
+                    return (inner.width - actions.spacing * (numActions - 1)) / numActions - Appearance.padding.normal * 2;
-
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.top: body.bottom
-            anchors.topMargin: Appearance.spacing.small
-
-            spacing: Appearance.spacing.smaller
-
-            opacity: root.expanded ? 1 : 0
-
-            Behavior on opacity {
-                Anim {}
-            }
-
-            Action {
-                modelData: QtObject {
-                    readonly property string text: qsTr("Close")
-                    function invoke(): void {
-                        root.modelData.notification.dismiss();
-                    }
                 }
             }
-
-            Repeater {
-                model: root.modelData.actions
-
-                delegate: Component {
-                    Action {}
-                }
-            }
-        }
-    }
-
-    component Action: StyledRect {
-        id: action
-
-        required property var modelData
-
-        radius: Appearance.rounding.full
-        color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3secondary : Colours.palette.m3surfaceContainerHigh
-
-        Layout.preferredWidth: actionText.width + Appearance.padding.normal * 2
-        Layout.preferredHeight: actionText.height + Appearance.padding.small * 2
-        implicitWidth: actionText.width + Appearance.padding.normal * 2
-        implicitHeight: actionText.height + Appearance.padding.small * 2
-
-        StateLayer {
-            radius: Appearance.rounding.full
-            color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3onSecondary : Colours.palette.m3onSurface
-
-            function onClicked(): void {
-                action.modelData.invoke();
-            }
-        }
-
-        StyledText {
-            id: actionText
-
-            anchors.centerIn: parent
-            text: actionTextMetrics.elidedText
-            color: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3onSecondary : Colours.palette.m3onSurfaceVariant
-            font.pointSize: Appearance.font.size.small
-        }
-
-        TextMetrics {
-            id: actionTextMetrics
-
-            text: action.modelData.text
-            font.family: actionText.font.family
-            font.pointSize: actionText.font.pointSize
-            elide: Text.ElideRight
-            elideWidth: {
-                const numActions = root.modelData.actions.length + 1;
-                return (inner.width - actions.spacing * (numActions - 1)) / numActions - Appearance.padding.normal * 2;
-            }
         }
     }