From 1074b862250872e77f205de3d97899b8e6586c2e Mon Sep 17 00:00:00 2001 From: Marco Allegretti Date: Thu, 21 May 2026 11:12:44 +0200 Subject: [PATCH] Move shell chrome to shared motion Use the Motion wrappers for action-drawer transitions, status bar feedback, panel reveal motion, startup feedback, and shell homescreen chrome. Keep non-animation settings reads in ShellSettings where they still control behavior. --- .../qml/actiondrawer/ActionDrawer.qml | 6 ++--- .../actiondrawer/private/BrightnessItem.qml | 5 +--- .../actiondrawer/private/ContentContainer.qml | 2 +- .../qml/actiondrawer/private/DetailPopup.qml | 7 ++--- .../private/QuickSettingsDelegate.qml | 7 +++-- .../private/QuickSettingsFullDelegate.qml | 5 ++-- .../QuickSettingsMinimizedDelegate.qml | 5 ++-- .../private/QuickSettingsStatusRow.qml | 26 +++++++++--------- .../actiondrawer/private/SystemTrayPopup.qml | 24 ++++++++++------- .../qml/components/PanelBackground.qml | 6 ++--- .../components/StartupFeedbackPanelFill.qml | 12 ++++++--- .../qml/components/StartupFeedbackWindows.qml | 27 +++++++++++-------- .../mobileshell/qml/homescreen/HomeScreen.qml | 17 +++++++----- .../qml/homescreen/WallpaperSelector.qml | 13 ++++----- .../navigationpanel/NavigationPanelButton.qml | 7 ++--- .../mobileshell/qml/statusbar/StatusBar.qml | 6 ++--- .../mobileshell/qml/statusbar/TaskWidget.qml | 8 +++--- containments/panel/qml/StatusBarWrapper.qml | 9 ++++--- containments/taskpanel/qml/main.qml | 14 +++++----- shell/contents/views/Panel.qml | 8 +++--- 20 files changed, 117 insertions(+), 97 deletions(-) diff --git a/components/mobileshell/qml/actiondrawer/ActionDrawer.qml b/components/mobileshell/qml/actiondrawer/ActionDrawer.qml index 8c38d9b8..c7dd29c9 100644 --- a/components/mobileshell/qml/actiondrawer/ActionDrawer.qml +++ b/components/mobileshell/qml/actiondrawer/ActionDrawer.qml @@ -269,11 +269,11 @@ Item { transitions: Transition { SequentialAnimation { - PropertyAnimation { + MobileShell.MotionNumberAnimation { id: drawerAnimation properties: "offset" - easing.type: Easing.OutExpo - duration: root.state != "" ? Kirigami.Units.veryLongDuration : 0 + type: MobileShell.Motion.SpatialSlow + duration: root.state != "" ? MobileShell.Motion.duration(type) : 0 } ScriptAction { script: { diff --git a/components/mobileshell/qml/actiondrawer/private/BrightnessItem.qml b/components/mobileshell/qml/actiondrawer/private/BrightnessItem.qml index 85fd21bc..a5dc5ff9 100644 --- a/components/mobileshell/qml/actiondrawer/private/BrightnessItem.qml +++ b/components/mobileshell/qml/actiondrawer/private/BrightnessItem.qml @@ -22,10 +22,7 @@ Item { property double brightnessPressedValue: 1 Behavior on brightnessPressedValue { - NumberAnimation { - duration: Kirigami.Units.longDuration * 2 - easing.type: Easing.InOutQuad - } + MobileShell.MotionNumberAnimation { type: MobileShell.Motion.SpatialExtended } } ScreenBrightness.ScreenBrightnessUtil { diff --git a/components/mobileshell/qml/actiondrawer/private/ContentContainer.qml b/components/mobileshell/qml/actiondrawer/private/ContentContainer.qml index 2e49d606..765339de 100644 --- a/components/mobileshell/qml/actiondrawer/private/ContentContainer.qml +++ b/components/mobileshell/qml/actiondrawer/private/ContentContainer.qml @@ -70,7 +70,7 @@ Item { Kirigami.Theme.backgroundColor.g, Kirigami.Theme.backgroundColor.b, 0.9) - Behavior on color { ColorAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.OutQuad } } + Behavior on color { MobileShell.MotionColorAnimation { type: MobileShell.Motion.StandardDecel } } opacity: { let base = Math.max(0, Math.min(brightnessPressedValue, actionDrawer.offset / root.minimizedQuickSettingsOffset)); return ShellSettings.Settings.convergenceModeEnabled ? base * 0.3 : base; diff --git a/components/mobileshell/qml/actiondrawer/private/DetailPopup.qml b/components/mobileshell/qml/actiondrawer/private/DetailPopup.qml index b8602d25..12fb14ea 100644 --- a/components/mobileshell/qml/actiondrawer/private/DetailPopup.qml +++ b/components/mobileshell/qml/actiondrawer/private/DetailPopup.qml @@ -27,6 +27,7 @@ QQC2.Popup { padding: Kirigami.Units.smallSpacing + readonly property int popupAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.EffectsFast) property string currentPluginId: "" property Item __currentItem: null @@ -72,11 +73,11 @@ QQC2.Popup { } enter: Transition { - NumberAnimation { property: "opacity"; from: 0; to: 1; duration: Kirigami.Units.shortDuration; easing.type: Easing.OutCubic } - NumberAnimation { property: "scale"; from: 0.9; to: 1; duration: Kirigami.Units.shortDuration; easing.type: Easing.OutCubic } + MobileShell.MotionNumberAnimation { property: "opacity"; from: 0; to: 1; type: MobileShell.Motion.EffectsFast } + MobileShell.MotionNumberAnimation { property: "scale"; from: 0.9; to: 1; type: MobileShell.Motion.EffectsFast } } exit: Transition { - NumberAnimation { property: "opacity"; from: 1; to: 0; duration: Kirigami.Units.shortDuration; easing.type: Easing.InCubic } + MobileShell.MotionNumberAnimation { property: "opacity"; from: 1; to: 0; type: MobileShell.Motion.StandardAccel; duration: popup.popupAnimationDuration } } background: Kirigami.ShadowedRectangle { diff --git a/components/mobileshell/qml/actiondrawer/private/QuickSettingsDelegate.qml b/components/mobileshell/qml/actiondrawer/private/QuickSettingsDelegate.qml index 6ae49a91..908da0a7 100644 --- a/components/mobileshell/qml/actiondrawer/private/QuickSettingsDelegate.qml +++ b/components/mobileshell/qml/actiondrawer/private/QuickSettingsDelegate.qml @@ -47,6 +47,8 @@ MobileShell.BaseItem { readonly property color disabledButtonColor: Kirigami.Theme.alternateBackgroundColor readonly property color disabledButtonHoverColor: mixColor(Kirigami.Theme.alternateBackgroundColor, Kirigami.Theme.textColor, 0.06) readonly property color disabledButtonPressedColor: Qt.darker(disabledButtonColor, 1.1) + readonly property int pressAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.Press) + readonly property real pressedScale: MobileShell.Motion.pressScaleIn function mixColor(base, overlay, ratio) { return Qt.rgba( @@ -67,10 +69,7 @@ MobileShell.BaseItem { // scale animation on press property real zoomScale: 1 Behavior on zoomScale { - NumberAnimation { - duration: Kirigami.Units.longDuration - easing.type: Easing.OutExpo - } + MobileShell.MotionNumberAnimation { type: MobileShell.Motion.Press } } transform: Scale { diff --git a/components/mobileshell/qml/actiondrawer/private/QuickSettingsFullDelegate.qml b/components/mobileshell/qml/actiondrawer/private/QuickSettingsFullDelegate.qml index b3e66518..b6fd532b 100644 --- a/components/mobileshell/qml/actiondrawer/private/QuickSettingsFullDelegate.qml +++ b/components/mobileshell/qml/actiondrawer/private/QuickSettingsFullDelegate.qml @@ -12,7 +12,6 @@ import org.kde.kirigami as Kirigami import org.kde.plasma.core as PlasmaCore import org.kde.plasma.private.mobileshell as MobileShell -import org.kde.plasma.private.mobileshell.shellsettingsplugin as ShellSettings import org.kde.plasma.components 3.0 as PlasmaComponents QuickSettingsDelegate { @@ -23,7 +22,7 @@ QuickSettingsDelegate { readonly property int tileRadius: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing // scale animation on press - zoomScale: (ShellSettings.Settings.animationsEnabled && mouseArea.pressed) ? 0.9 : 1 + zoomScale: mouseArea.pressed ? root.pressedScale : 1 background: Item { // very simple shadow for performance @@ -61,7 +60,7 @@ QuickSettingsDelegate { } Behavior on color { - ColorAnimation { duration: ShellSettings.Settings.animationsEnabled ? Kirigami.Units.shortDuration : 0; easing.type: Easing.OutCubic } + MobileShell.MotionColorAnimation { type: MobileShell.Motion.EffectsFast } } } } diff --git a/components/mobileshell/qml/actiondrawer/private/QuickSettingsMinimizedDelegate.qml b/components/mobileshell/qml/actiondrawer/private/QuickSettingsMinimizedDelegate.qml index 86f18342..55b184f0 100644 --- a/components/mobileshell/qml/actiondrawer/private/QuickSettingsMinimizedDelegate.qml +++ b/components/mobileshell/qml/actiondrawer/private/QuickSettingsMinimizedDelegate.qml @@ -12,7 +12,6 @@ import org.kde.kirigami as Kirigami import org.kde.plasma.private.mobileshell as MobileShell import org.kde.plasma.core as PlasmaCore import org.kde.plasma.private.nanoshell 2.0 as NanoShell -import org.kde.plasma.private.mobileshell.shellsettingsplugin as ShellSettings import org.kde.plasma.components 3.0 as PlasmaComponents QuickSettingsDelegate { @@ -21,7 +20,7 @@ QuickSettingsDelegate { iconItem: icon // scale animation on press - zoomScale: (ShellSettings.Settings.animationsEnabled && mouseArea.pressed) ? 0.9 : 1 + zoomScale: mouseArea.pressed ? root.pressedScale : 1 background: Item { // very simple shadow for performance @@ -58,7 +57,7 @@ QuickSettingsDelegate { } Behavior on color { - ColorAnimation { duration: ShellSettings.Settings.animationsEnabled ? Kirigami.Units.shortDuration : 0; easing.type: Easing.OutCubic } + MobileShell.MotionColorAnimation { type: MobileShell.Motion.EffectsFast } } } } diff --git a/components/mobileshell/qml/actiondrawer/private/QuickSettingsStatusRow.qml b/components/mobileshell/qml/actiondrawer/private/QuickSettingsStatusRow.qml index 1d2f81f0..887afbf0 100644 --- a/components/mobileshell/qml/actiondrawer/private/QuickSettingsStatusRow.qml +++ b/components/mobileshell/qml/actiondrawer/private/QuickSettingsStatusRow.qml @@ -6,7 +6,6 @@ import QtQuick.Layouts 1.1 import org.kde.kirigami as Kirigami import org.kde.plasma.private.mobileshell as MobileShell -import org.kde.plasma.private.mobileshell.shellsettingsplugin as ShellSettings /** * Management/detail row shown in convergence mode. Two interaction zones: @@ -49,6 +48,9 @@ Item { return Kirigami.ColorUtils.linearInterpolation(bg, fg, 0.1); } } + readonly property int shortAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.EffectsFast) + readonly property int pressAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.Press) + readonly property real pressedScale: MobileShell.Motion.pressScaleIn function mixColor(base, overlay, ratio) { return Qt.rgba( @@ -117,14 +119,14 @@ Item { } Behavior on color { - ColorAnimation { duration: Kirigami.Units.shortDuration } + MobileShell.MotionColorAnimation { type: MobileShell.Motion.EffectsFast } } } // Scale on press - property real zoomScale: (ShellSettings.Settings.animationsEnabled && toggleMouse.pressed) ? 0.9 : 1 + property real zoomScale: toggleMouse.pressed ? root.pressedScale : 1 Behavior on zoomScale { - NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.OutExpo } + MobileShell.MotionNumberAnimation { type: MobileShell.Motion.Press } } transform: Scale { origin.x: togglePill.width / 2 @@ -160,7 +162,7 @@ Item { opacity: root.enabled ? 1.0 : 0.4 Behavior on width { - NumberAnimation { duration: Kirigami.Units.shortDuration; easing.type: Easing.OutCubic } + MobileShell.MotionNumberAnimation { type: MobileShell.Motion.EffectsFast } } } } @@ -186,17 +188,13 @@ Item { Layout.fillWidth: true Layout.fillHeight: true - // Hover/press highlight - Rectangle { + MobileShell.MotionStateLayer { anchors.fill: parent radius: Kirigami.Units.cornerRadius - color: detailMouse.pressed ? Qt.rgba(Kirigami.Theme.textColor.r, - Kirigami.Theme.textColor.g, - Kirigami.Theme.textColor.b, 0.06) - : detailMouse.containsMouse ? Qt.rgba(Kirigami.Theme.textColor.r, - Kirigami.Theme.textColor.g, - Kirigami.Theme.textColor.b, 0.03) - : "transparent" + hovered: detailMouse.containsMouse + pressed: detailMouse.pressed + hoverOpacity: 0.03 + pressedOpacity: 0.06 } MouseArea { diff --git a/components/mobileshell/qml/actiondrawer/private/SystemTrayPopup.qml b/components/mobileshell/qml/actiondrawer/private/SystemTrayPopup.qml index ebd99664..d54b1cd9 100644 --- a/components/mobileshell/qml/actiondrawer/private/SystemTrayPopup.qml +++ b/components/mobileshell/qml/actiondrawer/private/SystemTrayPopup.qml @@ -26,6 +26,7 @@ QQC2.Popup { padding: Kirigami.Units.smallSpacing + readonly property int popupAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.EffectsFast) readonly property int trayItemCount: trayList.count function show() { @@ -147,17 +148,20 @@ QQC2.Popup { anchors.leftMargin: Kirigami.Units.smallSpacing anchors.rightMargin: Kirigami.Units.smallSpacing radius: Kirigami.Units.cornerRadius - color: trayMouse.pressed ? Qt.rgba(Kirigami.Theme.textColor.r, - Kirigami.Theme.textColor.g, - Kirigami.Theme.textColor.b, 0.08) - : trayMouse.containsMouse ? Qt.rgba(Kirigami.Theme.textColor.r, - Kirigami.Theme.textColor.g, - Kirigami.Theme.textColor.b, 0.04) - : Kirigami.Theme.alternateBackgroundColor + color: Kirigami.Theme.alternateBackgroundColor border.width: 1 border.color: Kirigami.ColorUtils.linearInterpolation( Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, trayItem.itemActive ? 0.16 : 0.08) opacity: trayItem.itemActive ? 1 : 0.72 + + MobileShell.MotionStateLayer { + anchors.fill: parent + radius: parent.radius + hovered: trayMouse.containsMouse + pressed: trayMouse.pressed + hoverOpacity: 0.04 + pressedOpacity: 0.08 + } } RowLayout { @@ -237,11 +241,11 @@ QQC2.Popup { } enter: Transition { - NumberAnimation { property: "opacity"; from: 0; to: 1; duration: Kirigami.Units.shortDuration; easing.type: Easing.OutCubic } - NumberAnimation { property: "scale"; from: 0.9; to: 1; duration: Kirigami.Units.shortDuration; easing.type: Easing.OutCubic } + MobileShell.MotionNumberAnimation { property: "opacity"; from: 0; to: 1; type: MobileShell.Motion.EffectsFast } + MobileShell.MotionNumberAnimation { property: "scale"; from: 0.9; to: 1; type: MobileShell.Motion.EffectsFast } } exit: Transition { - NumberAnimation { property: "opacity"; from: 1; to: 0; duration: Kirigami.Units.shortDuration; easing.type: Easing.InCubic } + MobileShell.MotionNumberAnimation { property: "opacity"; from: 1; to: 0; type: MobileShell.Motion.StandardAccel; duration: popup.popupAnimationDuration } } QQC2.Overlay.modal: Rectangle { diff --git a/components/mobileshell/qml/components/PanelBackground.qml b/components/mobileshell/qml/components/PanelBackground.qml index e505b264..c5784910 100644 --- a/components/mobileshell/qml/components/PanelBackground.qml +++ b/components/mobileshell/qml/components/PanelBackground.qml @@ -62,9 +62,9 @@ Item { // for example, popup notifition when opening the popup notifition drawer // in these incidents, we animate the color to prevent harsh transitions Behavior on panelColor { - ColorAnimation { - duration: animate ? Kirigami.Units.veryLongDuration * 1.5 : 0 - easing.type: Easing.OutExpo + MotionColorAnimation { + type: Motion.SpatialSlow + duration: animate ? Math.round(Motion.duration(type) * 1.5) : 0 } } diff --git a/components/mobileshell/qml/components/StartupFeedbackPanelFill.qml b/components/mobileshell/qml/components/StartupFeedbackPanelFill.qml index 3e2b1415..4c88ef6a 100644 --- a/components/mobileshell/qml/components/StartupFeedbackPanelFill.qml +++ b/components/mobileshell/qml/components/StartupFeedbackPanelFill.qml @@ -3,6 +3,8 @@ import QtQuick +import org.kde.kirigami as Kirigami +import org.kde.plasma.private.mobileshell as MobileShell import org.kde.plasma.private.mobileshell.state as MobileShellState // Component to supplement the StartupFeedback window maximization animation for panel backgrounds. @@ -15,14 +17,16 @@ Rectangle { property var maximizedTracker readonly property bool isShowing: height > 0 + readonly property int heightAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.SpatialDefault) + readonly property int autoClearDelay: heightAnimationDuration + Kirigami.Units.veryLongDuration // Smooth animation for colored rectangle - NumberAnimation on height { + MobileShell.MotionNumberAnimation on height { id: heightAnim from: 0 to: root.fullHeight - duration: 200 - easing.type: Easing.OutExpo + type: MobileShell.Motion.SpatialDefault + duration: root.heightAnimationDuration } // Auto-clear safety net. @@ -38,7 +42,7 @@ Rectangle { // the original mobile behaviour while fixing the convergence path. Timer { id: autoClearTimer - interval: 600 // animation duration (200) + settle time + interval: root.autoClearDelay repeat: false onTriggered: { if (!root.maximizedTracker || !root.maximizedTracker.showingWindow) { diff --git a/components/mobileshell/qml/components/StartupFeedbackWindows.qml b/components/mobileshell/qml/components/StartupFeedbackWindows.qml index 025ea763..ffe5dbe3 100644 --- a/components/mobileshell/qml/components/StartupFeedbackWindows.qml +++ b/components/mobileshell/qml/components/StartupFeedbackWindows.qml @@ -7,7 +7,7 @@ import QtQuick.Effects import org.kde.kirigami as Kirigami import org.kde.plasma.components 3.0 as PC3 -import org.kde.plasma.private.mobileshell.shellsettingsplugin as ShellSettings +import org.kde.plasma.private.mobileshell as MobileShell import org.kde.plasma.private.mobileshell.state as MobileShellState import org.kde.plasma.private.nanoshell 2.0 as NanoShell @@ -39,6 +39,8 @@ Item { id: window property var startupFeedback: model.delegate + readonly property int simpleOpenDuration: MobileShell.Motion.duration(MobileShell.Motion.EffectsDefault) + readonly property int loadingIndicatorFadeDuration: MobileShell.Motion.duration(MobileShell.Motion.EffectsFast) visibility: Window.Maximized flags: Qt.FramelessWindowHint @@ -62,7 +64,7 @@ Item { backgroundParent.y = -realHeight/2 + startupFeedback.iconStartY - root.topMargin; } - if (ShellSettings.Settings.animationsEnabled) { + if (MobileShell.Motion.enabled) { openAnimComplex.restart(); } else { openAnimSimple.restart(); @@ -78,35 +80,35 @@ Item { ParallelAnimation { id: parallelAnim - property real animationDuration: Kirigami.Units.longDuration + Kirigami.Units.shortDuration + property real animationDuration: MobileShell.Motion.duration(MobileShell.Motion.Emphasized) ScaleAnimator { target: background from: background.scale to: 1 duration: parallelAnim.animationDuration - easing.type: Easing.OutCubic + easing.type: MobileShell.Motion.easing(MobileShell.Motion.Emphasized) } ScaleAnimator { target: iconParent from: iconParent.scale to: 1 duration: parallelAnim.animationDuration - easing.type: Easing.OutCubic + easing.type: MobileShell.Motion.easing(MobileShell.Motion.Emphasized) } XAnimator { target: backgroundParent from: backgroundParent.x to: 0 duration: parallelAnim.animationDuration - easing.type: Easing.OutCubic + easing.type: MobileShell.Motion.easing(MobileShell.Motion.Emphasized) } YAnimator { target: backgroundParent from: backgroundParent.y to: 0 duration: parallelAnim.animationDuration - easing.type: Easing.OutCubic + easing.type: MobileShell.Motion.easing(MobileShell.Motion.Emphasized) } } @@ -134,13 +136,13 @@ Item { } } - NumberAnimation { + MobileShell.MotionNumberAnimation { target: windowRoot properties: "opacity" from: 0 to: 1 - duration: Kirigami.Units.longDuration - easing.type: Easing.OutCubic + type: MobileShell.Motion.EffectsDefault + duration: window.simpleOpenDuration } ScriptAction { @@ -212,7 +214,10 @@ Item { opacity: 0 Behavior on opacity { - NumberAnimation {} + MobileShell.MotionNumberAnimation { + type: MobileShell.Motion.EffectsFast + duration: window.loadingIndicatorFadeDuration + } } implicitHeight: Kirigami.Units.iconSizes.smallMedium diff --git a/components/mobileshell/qml/homescreen/HomeScreen.qml b/components/mobileshell/qml/homescreen/HomeScreen.qml index 86fec21c..86f46633 100644 --- a/components/mobileshell/qml/homescreen/HomeScreen.qml +++ b/components/mobileshell/qml/homescreen/HomeScreen.qml @@ -4,6 +4,8 @@ import QtQuick import QtQuick.Window +import org.kde.kirigami as Kirigami + import org.kde.plasma.plasmoid import org.kde.taskmanager as TaskManager @@ -142,7 +144,9 @@ Item { opacity: 0 property real scaleAmount: 1 - readonly property real zoomScaleOut: 0.8 + readonly property real zoomScaleOut: 0.9 + readonly property int opacityAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.EffectsDefault) + readonly property int scaleAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.SpatialSlow) function zoomIn() { // don't use check animationsEnabled here, so we ensure the scale and opacity is always 1 when disabled @@ -166,17 +170,18 @@ Item { opacity = 0; } - NumberAnimation on opacity { + MobileShell.MotionNumberAnimation on opacity { id: opacityAnim - duration: 300 + type: MobileShell.Motion.EffectsDefault + duration: itemContainer.opacityAnimationDuration running: false } - NumberAnimation on scaleAmount { + MobileShell.MotionNumberAnimation on scaleAmount { id: scaleAnim - duration: 600 + type: MobileShell.Motion.SpatialSlow + duration: itemContainer.scaleAnimationDuration running: false - easing.type: Easing.OutExpo } function evaluateAnimChange() { diff --git a/components/mobileshell/qml/homescreen/WallpaperSelector.qml b/components/mobileshell/qml/homescreen/WallpaperSelector.qml index 032587f5..7be72785 100644 --- a/components/mobileshell/qml/homescreen/WallpaperSelector.qml +++ b/components/mobileshell/qml/homescreen/WallpaperSelector.qml @@ -19,6 +19,7 @@ Controls.Drawer { property MobileShell.MaskManager maskManager required property bool horizontal + readonly property int previewAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.EffectsDefault) signal wallpaperSettingsRequested() @@ -100,15 +101,15 @@ Controls.Drawer { padding: Kirigami.Units.largeSpacing - (wallpapersView.currentIndex === index ? Kirigami.Units.smallSpacing : 0) property real scaleAmount: wallpapersView.currentIndex === index ? 0 : Kirigami.Units.smallSpacing Behavior on scaleAmount { - NumberAnimation { - duration: Kirigami.Units.longDuration - easing.type: Easing.InOutQuad + MobileShell.MotionNumberAnimation { + type: MobileShell.Motion.EffectsDefault + duration: imageWallpaperDrawer.previewAnimationDuration } } Behavior on padding { - NumberAnimation { - duration: Kirigami.Units.longDuration - easing.type: Easing.InOutQuad + MobileShell.MotionNumberAnimation { + type: MobileShell.Motion.EffectsDefault + duration: imageWallpaperDrawer.previewAnimationDuration } } diff --git a/components/mobileshell/qml/navigationpanel/NavigationPanelButton.qml b/components/mobileshell/qml/navigationpanel/NavigationPanelButton.qml index a24c53a7..40d1f145 100644 --- a/components/mobileshell/qml/navigationpanel/NavigationPanelButton.qml +++ b/components/mobileshell/qml/navigationpanel/NavigationPanelButton.qml @@ -22,6 +22,7 @@ Controls.AbstractButton { property int shrinkSize: 0 property alias iconSource: icon.source + readonly property int pressAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.Press) MobileShell.HapticsEffect { id: haptics @@ -56,10 +57,10 @@ Controls.AbstractButton { } } - NumberAnimation on opacity { + MobileShell.MotionNumberAnimation on opacity { id: opacityAnimator - duration: Kirigami.Units.shortDuration - easing.type: Easing.InOutQuad + type: MobileShell.Motion.Press + duration: button.pressAnimationDuration onFinished: { // animate the state back if (rect.buttonHeld && opacityAnimator.to === 0) { diff --git a/components/mobileshell/qml/statusbar/StatusBar.qml b/components/mobileshell/qml/statusbar/StatusBar.qml index 44af6454..fecf5afc 100644 --- a/components/mobileshell/qml/statusbar/StatusBar.qml +++ b/components/mobileshell/qml/statusbar/StatusBar.qml @@ -37,7 +37,7 @@ Item { property color backgroundColor: "transparent" Behavior on backgroundColor { - ColorAnimation { duration: Kirigami.Units.shortDuration; easing.type: Easing.InOutQuad } + MobileShell.MotionColorAnimation { type: MobileShell.Motion.EffectsFast } } /** @@ -101,7 +101,7 @@ Item { opacity: ShellSettings.Settings.convergenceModeEnabled && statusBarHover.hovered ? 1 : 0 Behavior on opacity { - NumberAnimation { duration: Kirigami.Units.shortDuration; easing.type: Easing.InOutQuad } + MobileShell.MotionNumberAnimation { type: MobileShell.Motion.EffectsFast } } } @@ -240,7 +240,7 @@ Item { opacity: ShellSettings.Settings.convergenceModeEnabled ? (statusBarHover.hovered ? 0.6 : 0.2) : 0 Behavior on opacity { - NumberAnimation { duration: Kirigami.Units.shortDuration } + MobileShell.MotionNumberAnimation { type: MobileShell.Motion.EffectsFast } } } } diff --git a/components/mobileshell/qml/statusbar/TaskWidget.qml b/components/mobileshell/qml/statusbar/TaskWidget.qml index ef97f12c..f90cce93 100644 --- a/components/mobileshell/qml/statusbar/TaskWidget.qml +++ b/components/mobileshell/qml/statusbar/TaskWidget.qml @@ -7,20 +7,22 @@ import QtQuick import QtQuick.Controls as Controls import org.kde.kirigami as Kirigami +import org.kde.plasma.private.mobileshell as MobileShell Item { id: taskIcon width: parent.height height: width + readonly property int opacityAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.EffectsDefault) // Hide ApplicationStatus and Passive items opacity: (model.category !== "ApplicationStatus" && model.status !== "Passive") ? 1 : 0 onOpacityChanged: visible = opacity Behavior on opacity { - NumberAnimation { - duration: Kirigami.Units.longDuration - easing.type: Easing.InOutQuad + MobileShell.MotionNumberAnimation { + type: MobileShell.Motion.EffectsDefault + duration: taskIcon.opacityAnimationDuration } } diff --git a/containments/panel/qml/StatusBarWrapper.qml b/containments/panel/qml/StatusBarWrapper.qml index 4488f55f..678074eb 100644 --- a/containments/panel/qml/StatusBarWrapper.qml +++ b/containments/panel/qml/StatusBarWrapper.qml @@ -27,6 +27,8 @@ Item { // Request the panel itself to reapply settings (ex. for updating touch area). signal updatePanelPropertiesRequested() + readonly property int panelAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.SpatialDefault) + Kirigami.Theme.colorSet: forcedComplementary ? Kirigami.Theme.Complementary : Kirigami.Theme.Header Kirigami.Theme.inherit: false @@ -60,6 +62,7 @@ Item { State { // Panel is forced to be visible and overlaid over content (will be automatically hidden after a duration). name: "visible" + PropertyChanges { target: root; offset: 0 } @@ -76,10 +79,10 @@ Item { transitions: Transition { SequentialAnimation { ParallelAnimation { - PropertyAnimation { + MobileShell.MotionNumberAnimation { properties: "offset" - easing.type: root.state === "hidden" ? Easing.InExpo : Easing.OutExpo - duration: Kirigami.Units.longDuration + type: root.state === "hidden" ? MobileShell.Motion.EmphasizedAccel : MobileShell.Motion.SpatialDefault + duration: root.panelAnimationDuration } } ScriptAction { diff --git a/containments/taskpanel/qml/main.qml b/containments/taskpanel/qml/main.qml index 59e9b27c..bb770e3f 100644 --- a/containments/taskpanel/qml/main.qml +++ b/containments/taskpanel/qml/main.qml @@ -39,6 +39,8 @@ ContainmentItem { readonly property bool inLandscape: MobileShell.Constants.navigationPanelOnSide(Screen.width, Screen.height) readonly property bool gamingMode: ShellSettings.Settings.gamingModeEnabled + readonly property int navigationAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.SpatialDefault) + readonly property int resetAnimationDuration: Math.round(MobileShell.Motion.duration(MobileShell.Motion.SpatialDefault) * 1.5) readonly property real navigationPanelHeight: gamingMode ? 0 : MobileShell.Constants.navigationPanelThickness readonly property real convergenceWorkspaceFrameThickness: ShellSettings.Settings.convergenceModeEnabled && !gamingMode @@ -326,10 +328,10 @@ ContainmentItem { transitions: Transition { SequentialAnimation { ParallelAnimation { - PropertyAnimation { + MobileShell.MotionNumberAnimation { properties: "offset" - easing.type: navigationPanel.state === "hidden" ? Easing.InExpo : Easing.OutExpo - duration: Kirigami.Units.longDuration + type: navigationPanel.state === "hidden" ? MobileShell.Motion.EmphasizedAccel : MobileShell.Motion.SpatialDefault + duration: root.navigationAnimationDuration } } ScriptAction { @@ -377,14 +379,14 @@ ContainmentItem { } } - NumberAnimation { + MobileShell.MotionNumberAnimation { id: resetAn running: false target: dragEffect property: "offsetPoint" to: 0 - duration: Kirigami.Units.longDuration * 1.5 - easing.type: Easing.OutExpo + type: MobileShell.Motion.SpatialDefault + duration: root.resetAnimationDuration onRunningChanged: { if (!running && navigationPanel.state == "hidden") { root.setWindowProperties(); diff --git a/shell/contents/views/Panel.qml b/shell/contents/views/Panel.qml index fc195a85..d1ef8036 100644 --- a/shell/contents/views/Panel.qml +++ b/shell/contents/views/Panel.qml @@ -14,6 +14,7 @@ import org.kde.ksvg 1.0 as KSvg import org.kde.taskmanager 0.1 as TaskManager import org.kde.kwindowsystem 1.0 import org.kde.kirigami as Kirigami +import org.kde.plasma.private.mobileshell as MobileShell import org.kde.plasma.shell.panel 0.1 as Panel import org.kde.plasma.plasmoid 2.0 @@ -149,16 +150,15 @@ Item { } // Floatingness is a value in [0, 1] that's multiplied to the floating margin; 0: not floating, 1: floating, between 0 and 1: animation between the two states - readonly property int floatingnessAnimationDuration: Kirigami.Units.longDuration + readonly property int floatingnessAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.EffectsDefault) property double floatingnessTarget: 0.0 // The animation is handled in panelview.cpp for efficiency property double floatingness: 0.0 // PanelOpacity is a value in [0, 1] that's used as the opacity of the opaque elements over the transparent ones; values between 0 and 1 are used for animations property double panelOpacity Behavior on panelOpacity { - NumberAnimation { - duration: Kirigami.Units.longDuration - easing.type: Easing.OutCubic + MobileShell.MotionNumberAnimation { + type: MobileShell.Motion.EffectsDefault } }