From 11ff4bbfaf539ea33a82a38b6c4cc4d45e74c7d8 Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Sun, 20 Apr 2025 09:46:13 +0200 Subject: [PATCH] MORE ANIMATION FIX AAAAAA --- .../common/widgets/NotificationWidget.qml | 335 ++++++++++-------- .../sidebarRight/CenterWidgetGroup.qml | 11 + .../modules/sidebarRight/SidebarRight.qml | 2 +- .../notifications/NotificationList.qml | 6 +- 4 files changed, 209 insertions(+), 145 deletions(-) diff --git a/.config/quickshell/modules/common/widgets/NotificationWidget.qml b/.config/quickshell/modules/common/widgets/NotificationWidget.qml index 4d5ed7fcc..b66dc705e 100644 --- a/.config/quickshell/modules/common/widgets/NotificationWidget.qml +++ b/.config/quickshell/modules/common/widgets/NotificationWidget.qml @@ -38,6 +38,12 @@ Item { destroyTimer0.start() } + function toggleExpanded() { + root.enableAnimation = true + notificationRowWrapper.anchors.bottom = undefined + root.expanded = !root.expanded + } + Timer { id: destroyTimer0 interval: 0 @@ -83,7 +89,7 @@ Item { if (mouse.button == Qt.MiddleButton) Notifications.discardNotification(notificationObject.id); else if (mouse.button == Qt.RightButton) - root.expanded = !root.expanded; + root.toggleExpanded() } } @@ -95,6 +101,7 @@ Item { anchors.left: parent.left anchors.right: parent.right anchors.bottom: parent.bottom + // anchors.top: parent.top anchors.topMargin: notificationListSpacing implicitHeight: notificationColumnLayout.implicitHeight + notificationListSpacing @@ -103,6 +110,7 @@ Item { anchors.left: parent.left anchors.right: parent.right anchors.bottom: parent.bottom + // anchors.top: parent.top height: notificationColumnLayout.implicitHeight color: (notificationObject.urgency == NotificationUrgency.Critical) ? @@ -116,6 +124,13 @@ Item { easing.type: Appearance.animation.elementDecel.type } } + Behavior on height { + enabled: enableAnimation + NumberAnimation { + duration: Appearance.animation.elementDecelFast.duration + easing.type: Appearance.animation.elementDecel.type + } + } } } @@ -125,6 +140,7 @@ Item { anchors.left: parent.left anchors.right: parent.right anchors.bottom: parent.bottom + // anchors.top: parent.top implicitHeight: notificationColumnLayout.implicitHeight + notificationListSpacing Behavior on x { @@ -140,172 +156,186 @@ Item { anchors.left: parent.left anchors.right: parent.right anchors.bottom: parent.bottom - RowLayout { - id: notificationRowLayout - - Layout.fillWidth: true - - Rectangle { // App icon - id: iconRectangle - implicitWidth: 47 - implicitHeight: 47 - Layout.leftMargin: 10 - Layout.topMargin: 10 - Layout.bottomMargin: 10 - Layout.alignment: Qt.AlignTop - Layout.fillWidth: false - radius: Appearance.rounding.full - color: Appearance.m3colors.m3secondaryContainer - MaterialSymbol { - visible: notificationObject.appIcon == "" - text: (notificationObject.urgency == NotificationUrgency.Critical) ? "release_alert" : - NotificationUtils.guessMessageType(notificationObject.summary) - anchors.fill: parent - color: (notificationObject.urgency == NotificationUrgency.Critical) ? - Appearance.mix(Appearance.m3colors.m3onSecondary, Appearance.m3colors.m3onSecondaryContainer, 0.1) : - Appearance.m3colors.m3onSecondaryContainer - font.pixelSize: 27 - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter + spacing: 0 + Item { + Layout.fillWidth: true + implicitHeight: notificationRowLayout.implicitHeight + Behavior on implicitHeight { + enabled: enableAnimation + NumberAnimation { + duration: Appearance.animation.elementDecel.duration + easing.type: Appearance.animation.elementDecel.type } - IconImage { - visible: notificationObject.image == "" && notificationObject.appIcon != "" - anchors.centerIn: parent - implicitSize: 33 - asynchronous: true - source: Quickshell.iconPath(notificationObject.appIcon) - } - Item { - anchors.fill: parent - visible: notificationObject.image != "" - Image { - id: notifImage + } + RowLayout { + id: notificationRowLayout + anchors.top: parent.top + anchors.left: parent.left + anchors.right: parent.right + + Rectangle { // App icon + id: iconRectangle + implicitWidth: 47 + implicitHeight: 47 + Layout.leftMargin: 10 + Layout.topMargin: 10 + Layout.bottomMargin: 10 + Layout.alignment: Qt.AlignTop + Layout.fillWidth: false + radius: Appearance.rounding.full + color: Appearance.m3colors.m3secondaryContainer + MaterialSymbol { + visible: notificationObject.appIcon == "" + text: (notificationObject.urgency == NotificationUrgency.Critical) ? "release_alert" : + NotificationUtils.guessMessageType(notificationObject.summary) anchors.fill: parent - readonly property int size: parent.width - - source: notificationObject?.image - fillMode: Image.PreserveAspectCrop - cache: false - antialiasing: true - asynchronous: true - - width: size - height: size - sourceSize.width: size - sourceSize.height: size - - layer.enabled: true - layer.effect: OpacityMask { - maskSource: Rectangle { - width: notifImage.size - height: notifImage.size - radius: Appearance.rounding.full - } - } + color: (notificationObject.urgency == NotificationUrgency.Critical) ? + Appearance.mix(Appearance.m3colors.m3onSecondary, Appearance.m3colors.m3onSecondaryContainer, 0.1) : + Appearance.m3colors.m3onSecondaryContainer + font.pixelSize: 27 + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter } IconImage { - visible: notificationObject.appIcon != "" - anchors.bottom: parent.bottom - anchors.right: parent.right - implicitSize: 23 + visible: notificationObject.image == "" && notificationObject.appIcon != "" + anchors.centerIn: parent + implicitSize: 33 asynchronous: true source: Quickshell.iconPath(notificationObject.appIcon) } - } - } - ColumnLayout { // Notification content - spacing: 0 - Layout.fillWidth: true + Item { + anchors.fill: parent + visible: notificationObject.image != "" + Image { + id: notifImage - RowLayout { // Row of summary, time and expand button - Layout.topMargin: 10 - Layout.leftMargin: 10 - Layout.rightMargin: 10 - Layout.fillWidth: true + anchors.fill: parent + readonly property int size: parent.width - StyledText { // Summary - Layout.fillWidth: true - horizontalAlignment: Text.AlignLeft - font.pixelSize: Appearance.font.pixelSize.normal - color: Appearance.colors.colOnLayer2 - text: notificationObject.summary - wrapMode: expanded ? Text.Wrap : Text.NoWrap - elide: Text.ElideRight - } + source: notificationObject?.image + fillMode: Image.PreserveAspectCrop + cache: false + antialiasing: true + asynchronous: true - Item { Layout.fillWidth: true } + width: size + height: size + sourceSize.width: size + sourceSize.height: size - StyledText { // Time - id: notificationTimeText - Layout.fillWidth: false - wrapMode: Text.Wrap - horizontalAlignment: Text.AlignLeft - font.pixelSize: Appearance.font.pixelSize.smaller - color: Appearance.m3colors.m3outline - text: NotificationUtils.getFriendlyNotifTimeString(notificationObject.time) - - Connections { - target: DateTime - function onTimeChanged() { - notificationTimeText.text = NotificationUtils.getFriendlyNotifTimeString(notificationObject.time) + layer.enabled: true + layer.effect: OpacityMask { + maskSource: Rectangle { + width: notifImage.size + height: notifImage.size + radius: Appearance.rounding.full + } } } + IconImage { + visible: notificationObject.appIcon != "" + anchors.bottom: parent.bottom + anchors.right: parent.right + implicitSize: 23 + asynchronous: true + source: Quickshell.iconPath(notificationObject.appIcon) + } } + } - Button { // Expand button - Layout.alignment: Qt.AlignVCenter - id: expandButton - implicitWidth: 22 - implicitHeight: 22 + ColumnLayout { // Notification content + spacing: 0 + Layout.fillWidth: true - PointingHandInteraction{} - onClicked: { - root.enableAnimation = true - root.expanded = !root.expanded + RowLayout { // Row of summary, time and expand button + Layout.topMargin: 10 + Layout.leftMargin: 10 + Layout.rightMargin: 10 + Layout.fillWidth: true + + StyledText { // Summary + Layout.fillWidth: true + horizontalAlignment: Text.AlignLeft + font.pixelSize: Appearance.font.pixelSize.normal + color: Appearance.colors.colOnLayer2 + text: notificationObject.summary + wrapMode: expanded ? Text.Wrap : Text.NoWrap + elide: Text.ElideRight } - background: Rectangle { - anchors.fill: parent - radius: Appearance.rounding.full - color: (expandButton.down) ? Appearance.colors.colLayer2Active : (expandButton.hovered ? Appearance.colors.colLayer2Hover : Appearance.transparentize(Appearance.colors.colLayer2, 1)) + Item { Layout.fillWidth: true } + + StyledText { // Time + id: notificationTimeText + Layout.fillWidth: false + wrapMode: Text.Wrap + horizontalAlignment: Text.AlignLeft + font.pixelSize: Appearance.font.pixelSize.smaller + color: Appearance.m3colors.m3outline + text: NotificationUtils.getFriendlyNotifTimeString(notificationObject.time) + + Connections { + target: DateTime + function onTimeChanged() { + notificationTimeText.text = NotificationUtils.getFriendlyNotifTimeString(notificationObject.time) + } + } + } + + Button { // Expand button + Layout.alignment: Qt.AlignVCenter + id: expandButton + implicitWidth: 22 + implicitHeight: 22 + + PointingHandInteraction{} + onClicked: { + root.toggleExpanded() + } + + background: Rectangle { + anchors.fill: parent + radius: Appearance.rounding.full + color: (expandButton.down) ? Appearance.colors.colLayer2Active : (expandButton.hovered ? Appearance.colors.colLayer2Hover : Appearance.transparentize(Appearance.colors.colLayer2, 1)) + + Behavior on color { + ColorAnimation { + duration: Appearance.animation.elementDecel.duration + easing.type: Appearance.animation.elementDecel.type + } - Behavior on color { - ColorAnimation { - duration: Appearance.animation.elementDecel.duration - easing.type: Appearance.animation.elementDecel.type } } - } + contentItem: MaterialSymbol { + anchors.centerIn: parent + text: expanded ? "keyboard_arrow_up" : "keyboard_arrow_down" + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + font.pixelSize: Appearance.font.pixelSize.normal + color: Appearance.colors.colOnLayer2 + } - contentItem: MaterialSymbol { - anchors.centerIn: parent - text: expanded ? "keyboard_arrow_up" : "keyboard_arrow_down" - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - font.pixelSize: Appearance.font.pixelSize.normal - color: Appearance.colors.colOnLayer2 } - } - } - StyledText { // Notification body - Layout.fillWidth: true - Layout.leftMargin: 10 - Layout.rightMargin: 10 - Layout.bottomMargin: 10 - clip: true + StyledText { // Notification body + Layout.fillWidth: true + Layout.leftMargin: 10 + Layout.rightMargin: 10 + Layout.bottomMargin: 10 + clip: true - wrapMode: expanded ? Text.Wrap : Text.NoWrap - elide: Text.ElideRight - font.pixelSize: Appearance.font.pixelSize.small - horizontalAlignment: Text.AlignLeft - color: Appearance.m3colors.m3outline - // textFormat: Text.MarkdownText - text: notificationObject.body + wrapMode: expanded ? Text.Wrap : Text.NoWrap + elide: Text.ElideRight + font.pixelSize: Appearance.font.pixelSize.small + horizontalAlignment: Text.AlignLeft + color: Appearance.m3colors.m3outline + // textFormat: Text.MarkdownText + text: expanded ? notificationObject.body : notificationObject.body.split("\n")[0] + } } } } @@ -314,18 +344,39 @@ Item { Flickable { id: actionsFlickable Layout.fillWidth: true - Layout.topMargin: -5 + // Layout.topMargin: -5 Layout.leftMargin: 10 Layout.rightMargin: 10 - Layout.bottomMargin: 10 - implicitHeight: actionRowLayout.implicitHeight + Layout.bottomMargin: expanded ? 10 : 0 + implicitHeight: expanded ? actionRowLayout.implicitHeight : 0 + height: expanded ? actionRowLayout.implicitHeight : 0 contentWidth: actionRowLayout.implicitWidth clip: true - visible: expanded + opacity: expanded ? 1 : 0 + visible: opacity > 0 + Behavior on opacity { + NumberAnimation { + duration: Appearance.animation.elementDecel.duration + easing.type: Appearance.animation.elementDecel.type + } + } + Behavior on height { + NumberAnimation { + duration: Appearance.animation.elementDecel.duration + easing.type: Appearance.animation.elementDecel.type + } + } + Behavior on implicitHeight { + NumberAnimation { + duration: Appearance.animation.elementDecel.duration + easing.type: Appearance.animation.elementDecel.type + } + } RowLayout { id: actionRowLayout + Layout.alignment: Qt.AlignBottom Repeater { id: actionRepeater diff --git a/.config/quickshell/modules/sidebarRight/CenterWidgetGroup.qml b/.config/quickshell/modules/sidebarRight/CenterWidgetGroup.qml index ca96c34b0..bb0b66151 100644 --- a/.config/quickshell/modules/sidebarRight/CenterWidgetGroup.qml +++ b/.config/quickshell/modules/sidebarRight/CenterWidgetGroup.qml @@ -17,6 +17,17 @@ Rectangle { property int currentTab: 0 property var tabButtonList: [{"icon": "notifications", "name": "Notifications"}, {"icon": "volume_up", "name": "Volume mixer"}] + Keys.onPressed: (event) => { + if (event.key === Qt.Key_PageDown || event.key === Qt.Key_PageUp) { + if (event.key === Qt.Key_PageDown) { + root.currentTab = Math.min(root.currentTab + 1, root.tabButtonList.length - 1) + } else if (event.key === Qt.Key_PageUp) { + root.currentTab = Math.max(root.currentTab - 1, 0) + } + event.accepted = true; + } + } + ColumnLayout { anchors.margins: 5 anchors.fill: parent diff --git a/.config/quickshell/modules/sidebarRight/SidebarRight.qml b/.config/quickshell/modules/sidebarRight/SidebarRight.qml index 01c835e57..572015fb0 100644 --- a/.config/quickshell/modules/sidebarRight/SidebarRight.qml +++ b/.config/quickshell/modules/sidebarRight/SidebarRight.qml @@ -75,7 +75,6 @@ Scope { color: Appearance.colors.colLayer0 radius: Appearance.rounding.screenRounding - Appearance.sizes.elevationMargin + 1 - focus: true Keys.onPressed: (event) => { if (event.key === Qt.Key_Escape) { sidebarRoot.visible = false; @@ -141,6 +140,7 @@ Scope { // Center widget group CenterWidgetGroup { + focus: sidebarRoot.visible Layout.alignment: Qt.AlignHCenter Layout.fillHeight: true Layout.fillWidth: true diff --git a/.config/quickshell/modules/sidebarRight/notifications/NotificationList.qml b/.config/quickshell/modules/sidebarRight/notifications/NotificationList.qml index 4af329448..1fbfcc349 100644 --- a/.config/quickshell/modules/sidebarRight/notifications/NotificationList.qml +++ b/.config/quickshell/modules/sidebarRight/notifications/NotificationList.qml @@ -79,8 +79,8 @@ Item { Behavior on opacity { NumberAnimation { - duration: Appearance.animation.elementDecel.duration - easing.type: Appearance.animation.elementDecel.type + duration: Appearance.animation.menuDecel.duration + easing.type: Appearance.animation.menuDecel.type } } @@ -130,6 +130,8 @@ Item { Item { Layout.fillWidth: true } NotificationStatusButton { + Layout.alignment: Qt.AlignVCenter + Layout.topMargin: 5 buttonIcon: "clear_all" buttonText: "Clear" onClicked: () => {