From 7f9087f3423be1ed01b56acbfb2e2cbb84c8c94d Mon Sep 17 00:00:00 2001 From: Marco Allegretti Date: Thu, 21 May 2026 11:13:06 +0200 Subject: [PATCH] Move shell popups to shared motion Apply Motion tokens to notification drag and stack transitions, volume OSD feedback, KRunner field state, media controls height changes, and action-button popup affordances. Leave timeout and marquee animations as timing behavior. --- .../qml/popups/actionbuttons/ActionButton.qml | 25 +++++---- .../notifications/NotificationPopup.qml | 55 +++++++++++-------- .../NotificationPopupManager.qml | 15 ++--- .../qml/popups/volumeosd/ListItemBase.qml | 20 +++++-- .../popups/volumeosd/VolumeChangedPopup.qml | 7 ++- .../qml/popups/volumeosd/VolumeOSD.qml | 27 ++++----- .../qml/popups/volumeosd/VolumeSlider.qml | 14 ++--- .../qml/widgets/krunner/KRunnerScreen.qml | 25 ++++++--- .../mediacontrols/MediaControlsWidget.qml | 6 +- .../notifications/NotificationCard.qml | 20 ++++--- .../NotificationFooterActions.qml | 20 ++++--- .../notifications/NotificationPopupItem.qml | 7 ++- .../notifications/NotificationsWidget.qml | 11 ++-- 13 files changed, 145 insertions(+), 107 deletions(-) diff --git a/components/mobileshell/qml/popups/actionbuttons/ActionButton.qml b/components/mobileshell/qml/popups/actionbuttons/ActionButton.qml index 3c6d473e..98122ee1 100644 --- a/components/mobileshell/qml/popups/actionbuttons/ActionButton.qml +++ b/components/mobileshell/qml/popups/actionbuttons/ActionButton.qml @@ -26,6 +26,9 @@ Window { property int angle: 0 property string iconSource property bool active: false + readonly property int buttonAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.Standard) + readonly property real hiddenScale: MobileShell.Motion.hiddenScale + readonly property real pressedScale: MobileShell.Motion.pressScaleOut signal triggered() @@ -82,7 +85,7 @@ Window { // Hide the root window after the button disappearing animation finishes. Timer { id: hideButton - interval: Kirigami.Units.longDuration + interval: root.buttonAnimationDuration repeat: false onTriggered: if (!active) root.visible = false; } @@ -101,20 +104,14 @@ Window { height: root.size opacity: root.active ? 1 : 0 - property double scale: !root.active ? 0.5 : (button.pressed ? 1.5 : 1) + property double scale: !root.active ? root.hiddenScale : (button.pressed ? root.pressedScale : 1) Behavior on scale { - NumberAnimation { - duration: Kirigami.Units.longDuration - easing.type: Easing.OutBack - } + MobileShell.MotionNumberAnimation { type: MobileShell.Motion.StandardDecel } } Behavior on opacity { - NumberAnimation { - duration: Kirigami.Units.longDuration - easing.type: Easing.OutCirc - } + MobileShell.MotionNumberAnimation { type: MobileShell.Motion.StandardDecel } } transform: Scale { @@ -133,12 +130,20 @@ Window { Controls.AbstractButton { id: button anchors.fill: parent + hoverEnabled: true MobileShell.HapticsEffect { id: haptics } contentItem: Item { + MobileShell.MotionStateLayer { + anchors.fill: parent + radius: root.size + hovered: button.hovered + pressed: button.pressed + } + Kirigami.Icon { anchors.centerIn: parent width: Kirigami.Units.iconSizes.small diff --git a/components/mobileshell/qml/popups/notifications/NotificationPopup.qml b/components/mobileshell/qml/popups/notifications/NotificationPopup.qml index 564de2b1..ee3741ae 100644 --- a/components/mobileshell/qml/popups/notifications/NotificationPopup.qml +++ b/components/mobileshell/qml/popups/notifications/NotificationPopup.qml @@ -28,6 +28,10 @@ Item { property int popupWidth property real openOffset property bool isConvergence: false + readonly property int primaryAnimationDuration: Math.round(MobileShell.Motion.duration(MobileShell.Motion.SpatialSlow) * 1.5) + readonly property int secondaryAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.SpatialSlow) + readonly property int stackAnimationDuration: Math.round(MobileShell.Motion.duration(MobileShell.Motion.SpatialSlow) * 1.25) + readonly property int stackMomentumAnimationDuration: Math.round(MobileShell.Motion.duration(MobileShell.Motion.SpatialSlow) * 0.5) // In convergence the popup enters from the bottom-right corner readonly property real effectiveOpenOffset: isConvergence @@ -54,7 +58,7 @@ Item { // due to it not looking great to have a notification sliding up while another one is sliding down // we use a timer so that the current notification can know to use "closeWithScale" instead property Timer queueTimer: Timer { - interval: Kirigami.Units.veryLongDuration + interval: notificationPopup.secondaryAnimationDuration running: true onTriggered: { visible = true; @@ -113,9 +117,9 @@ Item { // animate the notifications entering and exiting the expanded drawer property real fullOffsetAn: fullOpenOffset Behavior on fullOffsetAn { - NumberAnimation { - duration: Kirigami.Units.veryLongDuration * 1.5 - easing.type: Easing.OutExpo + MobileShell.MotionNumberAnimation { + duration: notificationPopup.primaryAnimationDuration + type: MobileShell.Motion.SpatialSlow } } @@ -125,21 +129,21 @@ Item { // animate this value so that the popup in some situations will not jump around property real scaleOriginY: inPopupDrawer && !popupDrawerOpened ? popupNotifications.currentPopupHeight : Math.round(popupHeight / 2) Behavior on scaleOriginY { - NumberAnimation { - duration: Kirigami.Units.veryLongDuration - easing.type: Easing.OutExpo + MobileShell.MotionNumberAnimation { + duration: notificationPopup.secondaryAnimationDuration + type: MobileShell.Motion.SpatialSlow } } // the vertical drag offset for the notification popup // we drag is released, animate back to 0 property real dragOffset: 0 - NumberAnimation on dragOffset { + MobileShell.MotionNumberAnimation on dragOffset { id: dragOffsetAn running: false to: 0 - duration: Kirigami.Units.veryLongDuration * 1.5 - easing.type: Easing.OutExpo + type: MobileShell.Motion.SpatialSlow + duration: notificationPopup.primaryAnimationDuration } // if the popup height ever changes, update the notification below with new height @@ -385,21 +389,21 @@ Item { } } Behavior on drawerScale { - NumberAnimation { - duration: Kirigami.Units.veryLongDuration * 1.25 - easing.type: Easing.OutQuint + MobileShell.MotionNumberAnimation { + duration: notificationPopup.stackAnimationDuration + type: MobileShell.Motion.Emphasized } } Behavior on drawerAddedOffset { - NumberAnimation { - duration: Kirigami.Units.veryLongDuration * 1.25 - easing.type: Easing.OutQuint + MobileShell.MotionNumberAnimation { + duration: notificationPopup.stackAnimationDuration + type: MobileShell.Motion.Emphasized } } Behavior on drawerOpacity { - NumberAnimation { - duration: Kirigami.Units.veryLongDuration * 1.25 - easing.type: Easing.OutQuint + MobileShell.MotionNumberAnimation { + duration: notificationPopup.stackAnimationDuration + type: MobileShell.Motion.Emphasized } } @@ -487,27 +491,30 @@ Item { if (notificationPopup.closedWithSwipe || (topPopup && popupClosing && popupBelow)) { // make sure the speed it faster when closed with a swipe or if there is a popup below when closing // as to make sure the speed feels comparable with the easing type is set to linear - return Kirigami.Units.veryLongDuration * 0.5; + return notificationPopup.stackMomentumAnimationDuration; } else { - return Kirigami.Units.veryLongDuration * 1.25; + return notificationPopup.stackAnimationDuration; } } transitions: Transition { SequentialAnimation { ParallelAnimation { - PropertyAnimation { + MobileShell.MotionNumberAnimation { properties: "offset" + type: MobileShell.Motion.SpatialSlow easing.type: notificationItem.notificationEasing duration: notificationItem.notificationDuration } - PropertyAnimation { + MobileShell.MotionNumberAnimation { properties: "scale" + type: MobileShell.Motion.SpatialSlow easing.type: notificationItem.notificationEasing duration: notificationItem.notificationDuration } - PropertyAnimation { + MobileShell.MotionNumberAnimation { properties: "popupOpacity" + type: MobileShell.Motion.SpatialSlow easing.type: notificationItem.notificationEasing duration: notificationItem.notificationDuration } diff --git a/components/mobileshell/qml/popups/notifications/NotificationPopupManager.qml b/components/mobileshell/qml/popups/notifications/NotificationPopupManager.qml index f1c72dc5..3b13f952 100644 --- a/components/mobileshell/qml/popups/notifications/NotificationPopupManager.qml +++ b/components/mobileshell/qml/popups/notifications/NotificationPopupManager.qml @@ -36,6 +36,7 @@ Window { // Margin between popup and screen edge in convergence mode; used in both // the delegate x position and the input-region calculation so they stay in sync. readonly property real convergencePopupMargin: Kirigami.Units.gridUnit * 2 + readonly property int popupAnimationDuration: Math.round(MobileShell.Motion.duration(MobileShell.Motion.SpatialSlow) * 1.5) property var keyboardInteractivity: LayerShell.Window.KeyboardInteractivityNone LayerShell.Window.scope: "notification" @@ -60,9 +61,9 @@ Window { readonly property color backgroundColor: Qt.darker(Qt.rgba(Kirigami.Theme.backgroundColor.r, Kirigami.Theme.backgroundColor.g, Kirigami.Theme.backgroundColor.b, 0.95), 1.05) color: popupDrawerOpened && visible ? backgroundColor : "transparent" Behavior on color { - ColorAnimation { - duration: Kirigami.Units.veryLongDuration * 1.5 - easing.type: Easing.OutExpo + MobileShell.MotionColorAnimation { + duration: notificationPopupManager.popupAnimationDuration + type: MobileShell.Motion.SpatialSlow } } @@ -82,7 +83,7 @@ Window { // hide on timeout to give time to finish animations Timer { id: hideTimeout - interval: Kirigami.Units.veryLongDuration * 1.5 + interval: notificationPopupManager.popupAnimationDuration repeat: false onTriggered: if (notifications.count == 0) notificationPopupManager.visible = false; } @@ -153,12 +154,12 @@ Window { resetContentY.running = true; } - NumberAnimation on contentY { + MobileShell.MotionNumberAnimation on contentY { id: resetContentY running: false to: 0 - duration: Kirigami.Units.veryLongDuration * 1.5 - easing.type: Easing.OutExpo + type: MobileShell.Motion.SpatialSlow + duration: notificationPopupManager.popupAnimationDuration } MouseArea { diff --git a/components/mobileshell/qml/popups/volumeosd/ListItemBase.qml b/components/mobileshell/qml/popups/volumeosd/ListItemBase.qml index 1f84f4c2..240f91e6 100644 --- a/components/mobileshell/qml/popups/volumeosd/ListItemBase.qml +++ b/components/mobileshell/qml/popups/volumeosd/ListItemBase.qml @@ -16,6 +16,7 @@ import org.kde.kquickcontrolsaddons import org.kde.plasma.core as PlasmaCore import org.kde.plasma.components as PlasmaComponents import org.kde.plasma.extras as PlasmaExtras +import org.kde.plasma.private.mobileshell as MobileShell import org.kde.plasma.private.volume import "icon.js" as Icon @@ -24,6 +25,8 @@ import "icon.js" as Icon Controls.AbstractButton { id: baseItem + hoverEnabled: true + property string label property alias listIcon: clientIcon.source property string type // sink, source, source-output @@ -46,9 +49,15 @@ Controls.AbstractButton { background: Rectangle { radius: Kirigami.Units.cornerRadius - color: (baseItem.down) - ? Qt.rgba(Kirigami.Theme.highlightColor.r, Kirigami.Theme.highlightColor.g, Kirigami.Theme.highlightColor.b, 0.3) - : 'transparent' + color: "transparent" + + MobileShell.MotionStateLayer { + anchors.fill: parent + radius: parent.radius + hovered: baseItem.hovered + pressed: baseItem.down + active: baseItem.selected + } } contentItem: RowLayout { @@ -193,12 +202,11 @@ Controls.AbstractButton { SequentialAnimation { id: seqAnimation - NumberAnimation { + MobileShell.MotionNumberAnimation { id: toAnimation target: slider property: "to" - duration: Kirigami.Units.shortDuration - easing.type: Easing.InOutQuad + type: MobileShell.Motion.EffectsFast } ScriptAction { script: slider.updateVolume() diff --git a/components/mobileshell/qml/popups/volumeosd/VolumeChangedPopup.qml b/components/mobileshell/qml/popups/volumeosd/VolumeChangedPopup.qml index ab77a279..ef052ec8 100644 --- a/components/mobileshell/qml/popups/volumeosd/VolumeChangedPopup.qml +++ b/components/mobileshell/qml/popups/volumeosd/VolumeChangedPopup.qml @@ -39,6 +39,7 @@ Window { Kirigami.Theme.inherit: false color: "transparent" + readonly property int popupAnimationDuration: Math.round(MobileShell.Motion.duration(MobileShell.Motion.SpatialSlow) * 1.25) function showOverlay() { if (cards.state == "closed") { @@ -116,8 +117,10 @@ Window { transitions: Transition { SequentialAnimation { ParallelAnimation { - PropertyAnimation { - properties: "offset"; easing.type: cards.state == "open" ? Easing.OutQuint : Easing.InQuint; duration: Kirigami.Units.veryLongDuration * 1.25 + MobileShell.MotionNumberAnimation { + properties: "offset" + type: cards.state == "open" ? MobileShell.Motion.Emphasized : MobileShell.Motion.EmphasizedAccel + duration: window.popupAnimationDuration } } ScriptAction { diff --git a/components/mobileshell/qml/popups/volumeosd/VolumeOSD.qml b/components/mobileshell/qml/popups/volumeosd/VolumeOSD.qml index d0c5511c..c07a0e65 100644 --- a/components/mobileshell/qml/popups/volumeosd/VolumeOSD.qml +++ b/components/mobileshell/qml/popups/volumeosd/VolumeOSD.qml @@ -35,6 +35,7 @@ Window { LayerShell.Window.exclusionZone: -1 readonly property color backgroundColor: Qt.darker(Qt.rgba(Kirigami.Theme.backgroundColor.r, Kirigami.Theme.backgroundColor.g, Kirigami.Theme.backgroundColor.b, 0.95), 1.05) + readonly property int overlayAnimationDuration: Math.round(MobileShell.Motion.duration(MobileShell.Motion.SpatialSlow) * 1.25) Kirigami.Theme.colorSet: Kirigami.Theme.Complementary Kirigami.Theme.inherit: false @@ -83,7 +84,7 @@ Window { pressDelay: 50 property real offset: -Kirigami.Units.gridUnit - property real scale: 0.95 + property real cardScale: 0.95 state: "closed" @@ -94,7 +95,7 @@ Window { target: flickable; offset: 0 } PropertyChanges { - target: flickable; scale: 1.0 + target: flickable; cardScale: 1.0 } PropertyChanges { target: flickable; opacity: 1.0 @@ -109,7 +110,7 @@ Window { target: flickable; offset: -Kirigami.Units.gridUnit * 3 } PropertyChanges { - target: flickable; scale: 0.95 + target: flickable; cardScale: 0.95 } PropertyChanges { target: flickable; opacity: 0.0 @@ -123,17 +124,17 @@ Window { transitions: Transition { SequentialAnimation { ParallelAnimation { - PropertyAnimation { - properties: "offset"; easing.type: Easing.OutQuint; duration: Kirigami.Units.veryLongDuration * 1.25 + MobileShell.MotionNumberAnimation { + properties: "offset"; type: MobileShell.Motion.Emphasized; duration: window.overlayAnimationDuration } - PropertyAnimation { - properties: "scale"; easing.type: Easing.OutQuint; duration: Kirigami.Units.veryLongDuration * 1.25 + MobileShell.MotionNumberAnimation { + properties: "cardScale"; type: MobileShell.Motion.Emphasized; duration: window.overlayAnimationDuration } - PropertyAnimation { - properties: "opacity"; easing.type: Easing.OutQuint; duration: Kirigami.Units.veryLongDuration * 1.25 + MobileShell.MotionNumberAnimation { + properties: "opacity"; type: MobileShell.Motion.Emphasized; duration: window.overlayAnimationDuration } - PropertyAnimation { - properties: "color"; easing.type: Easing.OutQuint; duration: Kirigami.Units.veryLongDuration * 1.25 + MobileShell.MotionColorAnimation { + properties: "color"; type: MobileShell.Motion.Emphasized; duration: window.overlayAnimationDuration } } ScriptAction { @@ -172,7 +173,7 @@ Window { Layout.topMargin: Kirigami.Units.gridUnit + Kirigami.Units.smallSpacing * 3 Layout.alignment: Qt.AlignHCenter Layout.preferredWidth: cards.width - scale: flickable.scale + scale: flickable.cardScale } PopupCard { @@ -180,7 +181,7 @@ Window { Layout.alignment: Qt.AlignHCenter Layout.bottomMargin: Kirigami.Units.gridUnit - scaleFactor: flickable.scale + scaleFactor: flickable.cardScale contentItem: PlasmaComponents.ToolButton { id: audioSettingsButton diff --git a/components/mobileshell/qml/popups/volumeosd/VolumeSlider.qml b/components/mobileshell/qml/popups/volumeosd/VolumeSlider.qml index f0edc0e5..7e424d21 100644 --- a/components/mobileshell/qml/popups/volumeosd/VolumeSlider.qml +++ b/components/mobileshell/qml/popups/volumeosd/VolumeSlider.qml @@ -12,6 +12,7 @@ import org.kde.kquickcontrolsaddons import org.kde.plasma.components as PC3 import org.kde.ksvg as KSvg import org.kde.kirigami as Kirigami +import org.kde.plasma.private.mobileshell as MobileShell import org.kde.plasma.private.volume // Audio volume slider. Value represents desired volume level in @@ -21,6 +22,7 @@ PC3.Slider { id: control property VolumeObject volumeObject + readonly property real mutedOpacity: 0.55 // When muted, the whole slider will appear slightly faded, but remain // functional and interactive. @@ -37,22 +39,20 @@ PC3.Slider { } Behavior on volume { - NumberAnimation { + MobileShell.MotionNumberAnimation { id: animate - duration: Kirigami.Units.shortDuration - easing.type: Easing.OutQuad + type: MobileShell.Motion.EffectsFast } } // When a maximum volume limit is raised/lower, animate the change. Behavior on to { - NumberAnimation { - duration: Kirigami.Units.shortDuration - easing.type: Easing.InOutQuad + MobileShell.MotionNumberAnimation { + type: MobileShell.Motion.EffectsFast } } - opacity: muted ? 0.5 : 1 + opacity: muted ? mutedOpacity : 1 // Prevents the groove from showing through the handle layer.enabled: opacity < 1 diff --git a/components/mobileshell/qml/widgets/krunner/KRunnerScreen.qml b/components/mobileshell/qml/widgets/krunner/KRunnerScreen.qml index 65320b3f..d5da1628 100644 --- a/components/mobileshell/qml/widgets/krunner/KRunnerScreen.qml +++ b/components/mobileshell/qml/widgets/krunner/KRunnerScreen.qml @@ -17,9 +17,18 @@ import org.kde.plasma.extras 2.0 as PlasmaExtras import org.kde.milou as Milou import org.kde.kirigami as Kirigami +import org.kde.plasma.private.mobileshell as MobileShell MouseArea { id: root + Kirigami.Theme.inherit: false + Kirigami.Theme.colorSet: Kirigami.Theme.Complementary + + readonly property color fieldColor: Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.10) + readonly property color fieldActiveColor: Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.20) + readonly property color resultHoverColor: Qt.rgba(Kirigami.Theme.highlightColor.r, Kirigami.Theme.highlightColor.g, Kirigami.Theme.highlightColor.b, 0.16) + readonly property color resultPressedColor: Qt.rgba(Kirigami.Theme.highlightColor.r, Kirigami.Theme.highlightColor.g, Kirigami.Theme.highlightColor.b, 0.28) + onClicked: root.requestedClose(false) function requestFocus() { @@ -54,9 +63,9 @@ MouseArea { background: Rectangle { radius: Kirigami.Units.cornerRadius - color: Qt.rgba(255, 255, 255, (queryField.hovered || queryField.focus) ? 0.2 : 0.1) + color: (queryField.hovered || queryField.focus) ? root.fieldActiveColor : root.fieldColor - Behavior on color { ColorAnimation {} } + Behavior on color { MobileShell.MotionColorAnimation { type: MobileShell.Motion.EffectsFast } } } Kirigami.Theme.inherit: false @@ -66,8 +75,8 @@ MouseArea { bottomPadding: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing placeholderText: i18nc("@info:placeholder", "Search…") - placeholderTextColor: Qt.rgba(255, 255, 255, 0.8) - color: 'white' + placeholderTextColor: Kirigami.Theme.disabledTextColor + color: Kirigami.Theme.textColor inputMethodHints: Qt.ImhNoPredictiveText // don't need to press "enter" to update text font.weight: Font.Bold @@ -133,7 +142,7 @@ MouseArea { type: Kirigami.Heading.Primary text: sectionHeader.section elide: Text.ElideRight - color: 'white' + color: Kirigami.Theme.textColor // we override the Primary type's font weight (DemiBold) for Bold for contrast with small text font.weight: Font.Bold @@ -176,7 +185,7 @@ MouseArea { Rectangle { anchors.fill: parent radius: Kirigami.Units.cornerRadius - color: delegate.pressed ? Qt.rgba(255, 255, 255, 0.3) : (delegate.containsMouse ? Qt.rgba(255, 255, 255, 0.1) : "transparent") + color: delegate.pressed ? root.resultPressedColor : (delegate.containsMouse ? root.resultHoverColor : "transparent") } RowLayout { @@ -211,7 +220,7 @@ MouseArea { maximumLineCount: 1 elide: Text.ElideRight text: typeof modelData !== "undefined" ? modelData : model.display - color: "white" + color: Kirigami.Theme.textColor font.pointSize: Kirigami.Theme.defaultFont.pointSize } @@ -224,7 +233,7 @@ MouseArea { maximumLineCount: 1 elide: Text.ElideRight text: model.subtext || "" - color: "white" + color: Kirigami.Theme.textColor opacity: 0.8 font.pointSize: Math.round(Kirigami.Theme.defaultFont.pointSize * 0.8) diff --git a/components/mobileshell/qml/widgets/mediacontrols/MediaControlsWidget.qml b/components/mobileshell/qml/widgets/mediacontrols/MediaControlsWidget.qml index bb540809..7cace1f4 100644 --- a/components/mobileshell/qml/widgets/mediacontrols/MediaControlsWidget.qml +++ b/components/mobileshell/qml/widgets/mediacontrols/MediaControlsWidget.qml @@ -32,9 +32,9 @@ Item { implicitHeight: visible ? padding * 2 + contentHeight : 0 Behavior on implicitHeight { - NumberAnimation { - duration: implicitHeight == 0 ? 0 : Kirigami.Units.longDuration - easing.type: Easing.OutQuart + MobileShell.MotionNumberAnimation { + type: MobileShell.Motion.StandardDecel + duration: implicitHeight == 0 ? 0 : MobileShell.Motion.duration(type) } } diff --git a/components/mobileshell/qml/widgets/notifications/NotificationCard.qml b/components/mobileshell/qml/widgets/notifications/NotificationCard.qml index 6c0e4a39..006c801a 100644 --- a/components/mobileshell/qml/widgets/notifications/NotificationCard.qml +++ b/components/mobileshell/qml/widgets/notifications/NotificationCard.qml @@ -68,6 +68,8 @@ Item { * The current drag offset for this notification. */ property real dragOffset: 0 + readonly property int longAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.Standard) + readonly property int veryLongAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.SpatialSlow) signal tapped() signal dismissRequested() @@ -84,10 +86,10 @@ Item { implicitHeight: contentParent.implicitHeight - NumberAnimation on dragOffset { + MobileShell.MotionNumberAnimation on dragOffset { id: dragAnim - duration: Kirigami.Units.longDuration - easing.type: Easing.OutCubic + type: MobileShell.Motion.StandardDecel + duration: root.longAnimationDuration onFinished: { if (to !== 0) { root.dismissRequested(); @@ -112,9 +114,9 @@ Item { implicitHeight: inPopupDrawer ? currentPopupHeight : contentParent.implicitHeight Behavior on implicitHeight { - NumberAnimation { - duration: Kirigami.Units.veryLongDuration - easing.type: Easing.OutExpo + MobileShell.MotionNumberAnimation { + duration: root.veryLongAnimationDuration + type: MobileShell.Motion.SpatialSlow } } @@ -129,9 +131,9 @@ Item { opacity: closeTimerRunning ? 1 : 0 Behavior on opacity { - NumberAnimation { - duration: Kirigami.Units.longDuration - easing.type: Easing.OutQuad + MobileShell.MotionNumberAnimation { + duration: root.longAnimationDuration + type: MobileShell.Motion.StandardDecel } } diff --git a/components/mobileshell/qml/widgets/notifications/NotificationFooterActions.qml b/components/mobileshell/qml/widgets/notifications/NotificationFooterActions.qml index afc00c1d..9e5389d9 100644 --- a/components/mobileshell/qml/widgets/notifications/NotificationFooterActions.qml +++ b/components/mobileshell/qml/widgets/notifications/NotificationFooterActions.qml @@ -10,12 +10,14 @@ import QtQuick.Layouts 1.1 import org.kde.kirigami as Kirigami import org.kde.plasma.components 3.0 as PlasmaComponents +import org.kde.plasma.private.mobileshell as MobileShell Item { id: actionContainer required property BaseNotificationItem notification property bool popupNotification: false + readonly property int transitionDuration: MobileShell.Motion.duration(MobileShell.Motion.Standard) implicitHeight: Math.max(actionFlow.implicitHeight, replyLoader.height) visible: actionRepeater.count > 0 @@ -31,9 +33,9 @@ Item { opacity: replyLoader.active ? 0 : 1 Behavior on opacity { - NumberAnimation { - duration: Kirigami.Units.longDuration - easing.type: Easing.InOutQuad + MobileShell.MotionNumberAnimation { + duration: actionContainer.transitionDuration + type: MobileShell.Motion.Standard } } @@ -94,15 +96,15 @@ Item { property bool replying: false Behavior on x { - NumberAnimation { - duration: Kirigami.Units.longDuration - easing.type: Easing.InOutQuad + MobileShell.MotionNumberAnimation { + duration: actionContainer.transitionDuration + type: MobileShell.Motion.Standard } } Behavior on opacity { - NumberAnimation { - duration: Kirigami.Units.longDuration - easing.type: Easing.InOutQuad + MobileShell.MotionNumberAnimation { + duration: actionContainer.transitionDuration + type: MobileShell.Motion.Standard } } diff --git a/components/mobileshell/qml/widgets/notifications/NotificationPopupItem.qml b/components/mobileshell/qml/widgets/notifications/NotificationPopupItem.qml index 0e769074..d7354925 100644 --- a/components/mobileshell/qml/widgets/notifications/NotificationPopupItem.qml +++ b/components/mobileshell/qml/widgets/notifications/NotificationPopupItem.qml @@ -31,6 +31,7 @@ BaseNotificationItem { property bool inLockScreen: false property int panelType: MobileShell.PanelBackground.PanelType.Drawer + readonly property int popupFadeDuration: MobileShell.Motion.duration(MobileShell.Motion.SpatialSlow) signal dragStart() signal dragEnd() @@ -69,9 +70,9 @@ BaseNotificationItem { opacity: notificationItem.inPopupDrawer ? 0 : 1 Behavior on opacity { - NumberAnimation { - duration: Kirigami.Units.veryLongDuration - easing.type: Easing.OutExpo + MobileShell.MotionNumberAnimation { + duration: notificationItem.popupFadeDuration + type: MobileShell.Motion.SpatialSlow } } diff --git a/components/mobileshell/qml/widgets/notifications/NotificationsWidget.qml b/components/mobileshell/qml/widgets/notifications/NotificationsWidget.qml index 6caa9e4c..e52fe335 100644 --- a/components/mobileshell/qml/widgets/notifications/NotificationsWidget.qml +++ b/components/mobileshell/qml/widgets/notifications/NotificationsWidget.qml @@ -14,7 +14,6 @@ import org.kde.kirigami as Kirigami import org.kde.plasma.clock import org.kde.plasma.private.mobileshell as MobileShell -import org.kde.plasma.private.mobileshell.shellsettingsplugin as ShellSettings import org.kde.plasma.private.mobileshell.state as MobileShellState import org.kde.plasma.extras 2.0 as PlasmaExtras import org.kde.plasma.components 3.0 as PlasmaComponents3 @@ -190,7 +189,7 @@ Item { property NotificationItem pendingNotificationWithAction: null - readonly property int animationDuration: ShellSettings.Settings.animationsEnabled ? Kirigami.Units.longDuration : 0 + readonly property int animationDuration: MobileShell.Motion.duration(MobileShell.Motion.Standard) // If a screen overflow occurs, fix height in order to maintain tool buttons in place. readonly property bool listOverflowing: listHeight + spacing >= root.height @@ -271,11 +270,11 @@ Item { // Run every time an item is visually added to the list, thus when `Show n more` button is clicked as well. add: Transition { - NumberAnimation { property: "opacity"; from: 0; to: 1; duration: list.animationDuration } + MobileShell.MotionNumberAnimation { property: "opacity"; from: 0; to: 1; duration: list.animationDuration; type: MobileShell.Motion.Standard } } // Run every time an item is displaced, such as when the order is scrambled due to a group expansion. displaced: Transition { - NumberAnimation { properties: "y"; duration: list.animationDuration } + MobileShell.MotionNumberAnimation { properties: "y"; duration: list.animationDuration; type: MobileShell.Motion.Standard } } function isRowExpanded(row) { @@ -325,7 +324,7 @@ Item { // We have to do this here in order to control the animation before the item is completely removed ListView.onRemove: SequentialAnimation { PropertyAction { target: delegateLoader; property: "ListView.delayRemove"; value: true } - NumberAnimation { target: delegateLoader; property: "opacity"; to: 0.0; duration: list.animationDuration } + MobileShell.MotionNumberAnimation { target: delegateLoader; property: "opacity"; to: 0.0; duration: list.animationDuration; type: MobileShell.Motion.Standard } PropertyAction { target: delegateLoader; property: "ListView.delayRemove"; value: false } } @@ -420,7 +419,7 @@ Item { to: "VISIBLE" SequentialAnimation { PauseAnimation { duration: list.animationDuration * 2 } - NumberAnimation { properties: "opacity"; duration: list.animationDuration } + MobileShell.MotionNumberAnimation { properties: "opacity"; duration: list.animationDuration; type: MobileShell.Motion.Standard } } }