waffles: expandable notifs

2025-11-29 00:23:19 +01:00
parent b4038dafa9
commit 6b90e37b0f
9 changed files with 185 additions and 50 deletions
@@ -8,18 +8,24 @@ import qs.modules.common.functions
 import qs.modules.waffle.looks

 WBorderlessButton {
-    id: headerButton
+    id: root
    Layout.fillWidth: false
-    implicitWidth: 16
-    implicitHeight: 16
+    property real implicitSize: 16
+    implicitWidth: implicitSize
+    implicitHeight: implicitSize
    color: "transparent"
+    colForeground: root.hovered && !root.pressed ? Looks.colors.fg : Looks.colors.fg1
+
+    Behavior on colForeground {
+        animation: Looks.transition.color.createObject(this)
+    }

    contentItem: Item {
        FluentIcon {
            anchors.centerIn: parent
-            implicitSize: 16
-            icon: headerButton.icon.name
-            color: headerButton.hovered && !headerButton.pressed ? Looks.colors.fg : Looks.colors.fg1
+            implicitSize: root.implicitSize
+            icon: root.icon.name
+            color: root.colForeground
        }
    }
 }
@@ -2,18 +2,27 @@ import QtQuick
 import qs
 import qs.services
 import qs.modules.common
+import qs.modules.common.functions
 import qs.modules.waffle.looks

-SmallBorderedIconButton {
+AcrylicButton {
    id: root

    property bool iconVisible: true
    property string iconName: ""
    property bool iconFilled: true

+    colBackground: Looks.colors.bg2
+    colBackgroundHover: Looks.colors.bg2Hover
+    colBackgroundActive: Looks.colors.bg2Active
+    property color colBorder: Looks.colors.bg2Border
+    property color colBorderToggled: Looks.colors.accent
+    border.color: checked ? colBorderToggled : colBorder
+
    leftPadding: 12
    rightPadding: 12
    implicitWidth: focusButtonContent.implicitWidth + leftPadding + rightPadding
+    implicitHeight: 24

    contentItem: Row {
        id: focusButtonContent
@@ -12,6 +12,7 @@ MouseArea {

    required property var notificationGroup
    readonly property var notifications: notificationGroup?.notifications ?? []
+    property bool expanded: false

    implicitWidth: contentLayout.implicitWidth
    implicitHeight: contentLayout.implicitHeight
@@ -34,12 +35,23 @@ MouseArea {
            interactive: false
            spacing: 4
            model: ScriptModel {
-                values: root.notifications.slice().reverse()
+                values: root.expanded ? root.notifications.slice().reverse() : root.notifications.slice(-1)
+                objectProp: "notificationId"
            }
            delegate: WSingleNotification {
+                required property int index
                required property var modelData
                width: ListView.view.width
                notification: modelData
+                groupExpandControlMessage: {
+                    if (root.notifications.length === 0) return "";
+                    if (!root.expanded) return Translation.tr("+%1 notifications").arg(root.notifications.length - 1);
+                    if (index === root.notifications.length - 1) return Translation.tr("See fewer");
+                    return "";
+                }
+                onGroupExpandToggle: {
+                    root.expanded = !root.expanded;
+                }
            }
        }
    }
@@ -13,10 +13,17 @@ MouseArea {

    required property var notification
    property bool expanded: false
+    property string groupExpandControlMessage: ""
+    signal groupExpandToggle
+    hoverEnabled: true

    implicitHeight: contentItem.implicitHeight
    implicitWidth: contentItem.implicitWidth

+    Behavior on implicitHeight {
+        animation: Looks.transition.enter.createObject(this)
+    }
+
    Rectangle {
        id: contentItem
        anchors.fill: parent
@@ -26,32 +33,109 @@ MouseArea {
        implicitHeight: notificationContent.implicitHeight + padding * 2
        implicitWidth: notificationContent.implicitWidth + padding * 2
        border.width: 1
-        border.color: Looks.applyContentTransparency(Looks.colors.ambientShadow)
+        border.color: ColorUtils.applyAlpha(Looks.colors.ambientShadow, 0.1)

        ColumnLayout {
            id: notificationContent
            anchors.fill: parent
            anchors.margins: contentItem.padding
+            spacing: 19

            RowLayout {
                Layout.fillWidth: true
-                WText {
-                    text: NotificationUtils.getFriendlyNotifTimeString(root.notification?.time)
+
+                ExpandButton {
+                    Layout.topMargin: -2
+                }
+
+                Item {
+                    Layout.fillWidth: true
+                }
+
+                NotificationHeaderButton {
+                    Layout.rightMargin: 4
+                    opacity: root.containsMouse ? 1 : 0
+                    icon.name: "dismiss"
+                    implicitSize: 12
+                    onClicked: {
+                        Qt.callLater(() => {
+                            Notifications.discardNotification(root.notification?.notificationId);
+                        });
+                    }
                }
            }

            ColumnLayout {
                Layout.fillWidth: true
-                WText {
-                    Layout.fillWidth: true
-                    elide: Text.ElideRight
-                    text: root.notification.summary
+                spacing: 3
+
+                SummaryText {}
+                BodyText {}
+            }
+
+            AcrylicButton {
+                id: groupExpandButton
+                visible: root.groupExpandControlMessage !== ""
+                Layout.bottomMargin: 2
+                horizontalPadding: 10
+                implicitHeight: 24
+                implicitWidth: expandButtonText.implicitWidth + horizontalPadding * 2
+                onClicked: root.groupExpandToggle()
+                contentItem: Item {
+                    WText {
+                        id: expandButtonText
+                        anchors.centerIn: parent
+                        text: root.groupExpandControlMessage
+                    }
                }
+            }
+        }
+    }
+
+    component SummaryText: WText {
+        Layout.fillWidth: true
+        elide: Text.ElideRight
+        text: root.notification?.summary
+        font.pixelSize: Looks.font.pixelSize.large
+    }
+
+    component BodyText: WText {
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignTop
+        wrapMode: Text.Wrap
+        maximumLineCount: root.expanded ? 100 : 1
+        text: root.notification?.body
+        color: Looks.colors.subfg
+    }
+
+    component ExpandButton: NotificationHeaderButton {
+        id: expandButton
+        implicitWidth: expandButtonContent.implicitWidth
+        onClicked: root.expanded = !root.expanded
+
+        contentItem: Item {
+            id: expandButtonContent
+            implicitWidth: expandButtonRow.implicitWidth
+            implicitHeight: expandButtonRow.implicitHeight
+            RowLayout {
+                id: expandButtonRow
+                anchors.centerIn: parent
+                spacing: 8
                WText {
-                    Layout.fillWidth: true
-                    elide: Text.ElideRight
-                    wrapMode: Text.Wrap
-                    maximumLineCount: root.expanded ? 100 : 1
+                    color: expandButton.colForeground
+                    text: NotificationUtils.getFriendlyNotifTimeString(root.notification?.time)
+                }
+                FluentIcon {
+                    Layout.rightMargin: 12
+                    icon: "chevron-down"
+                    implicitSize: 18
+                    rotation: root.expanded ? -180 : 0
+                    color: expandButton.colForeground
+                    Behavior on rotation {
+                        animation: Looks.transition.rotate.createObject(this)
+                    }
                }
            }
        }