marcoallegretti/shift-shell
1
0
Fork 0
mirror of https://invent.kde.org/marcoa/shift-shell.git synced 2026-06-11 16:57:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Move shell chrome to shared motion

Browse source 
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.
This commit is contained in:
Marco Allegretti 2026-05-21 11:12:44 +02:00
parent 8767df8b10
commit 1074b86225
20 changed files with 117 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
components/mobileshell/qml/actiondrawer/ActionDrawer.qml
View file

@ -269,11 +269,11 @@ Item {
transitions: Transition { transitions: Transition {
SequentialAnimation { SequentialAnimation {
PropertyAnimation { MobileShell.MotionNumberAnimation {
id: drawerAnimation id: drawerAnimation
properties: "offset" properties: "offset"
easing.type: Easing.OutExpo type: MobileShell.Motion.SpatialSlow
duration: root.state != "" ? Kirigami.Units.veryLongDuration : 0 duration: root.state != "" ? MobileShell.Motion.duration(type) : 0
} }
ScriptAction { ScriptAction {
script: { script: {

5
components/mobileshell/qml/actiondrawer/private/BrightnessItem.qml
View file

@ -22,10 +22,7 @@ Item {
property double brightnessPressedValue: 1 property double brightnessPressedValue: 1
Behavior on brightnessPressedValue { Behavior on brightnessPressedValue {
NumberAnimation { MobileShell.MotionNumberAnimation { type: MobileShell.Motion.SpatialExtended }
duration: Kirigami.Units.longDuration * 2
easing.type: Easing.InOutQuad
}
} }
ScreenBrightness.ScreenBrightnessUtil { ScreenBrightness.ScreenBrightnessUtil {

2
components/mobileshell/qml/actiondrawer/private/ContentContainer.qml
View file

@ -70,7 +70,7 @@ Item {
Kirigami.Theme.backgroundColor.g, Kirigami.Theme.backgroundColor.g,
Kirigami.Theme.backgroundColor.b, Kirigami.Theme.backgroundColor.b,
0.9) 0.9)
Behavior on color { ColorAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.OutQuad } } Behavior on color { MobileShell.MotionColorAnimation { type: MobileShell.Motion.StandardDecel } }
opacity: { opacity: {
let base = Math.max(0, Math.min(brightnessPressedValue, actionDrawer.offset / root.minimizedQuickSettingsOffset)); let base = Math.max(0, Math.min(brightnessPressedValue, actionDrawer.offset / root.minimizedQuickSettingsOffset));
return ShellSettings.Settings.convergenceModeEnabled ? base * 0.3 : base; return ShellSettings.Settings.convergenceModeEnabled ? base * 0.3 : base;

7
components/mobileshell/qml/actiondrawer/private/DetailPopup.qml
View file

@ -27,6 +27,7 @@ QQC2.Popup {
padding: Kirigami.Units.smallSpacing padding: Kirigami.Units.smallSpacing
readonly property int popupAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.EffectsFast)
property string currentPluginId: "" property string currentPluginId: ""
property Item __currentItem: null property Item __currentItem: null
@ -72,11 +73,11 @@ QQC2.Popup {
} }
enter: Transition { enter: Transition {
NumberAnimation { property: "opacity"; from: 0; to: 1; duration: Kirigami.Units.shortDuration; easing.type: Easing.OutCubic } MobileShell.MotionNumberAnimation { property: "opacity"; from: 0; to: 1; type: MobileShell.Motion.EffectsFast }
NumberAnimation { property: "scale"; from: 0.9; to: 1; duration: Kirigami.Units.shortDuration; easing.type: Easing.OutCubic } MobileShell.MotionNumberAnimation { property: "scale"; from: 0.9; to: 1; type: MobileShell.Motion.EffectsFast }
} }
exit: Transition { 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 { background: Kirigami.ShadowedRectangle {

7
components/mobileshell/qml/actiondrawer/private/QuickSettingsDelegate.qml
View file

@ -47,6 +47,8 @@ MobileShell.BaseItem {
readonly property color disabledButtonColor: Kirigami.Theme.alternateBackgroundColor readonly property color disabledButtonColor: Kirigami.Theme.alternateBackgroundColor
readonly property color disabledButtonHoverColor: mixColor(Kirigami.Theme.alternateBackgroundColor, Kirigami.Theme.textColor, 0.06) readonly property color disabledButtonHoverColor: mixColor(Kirigami.Theme.alternateBackgroundColor, Kirigami.Theme.textColor, 0.06)
readonly property color disabledButtonPressedColor: Qt.darker(disabledButtonColor, 1.1) 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) { function mixColor(base, overlay, ratio) {
return Qt.rgba( return Qt.rgba(
@ -67,10 +69,7 @@ MobileShell.BaseItem {
// scale animation on press // scale animation on press
property real zoomScale: 1 property real zoomScale: 1
Behavior on zoomScale { Behavior on zoomScale {
NumberAnimation { MobileShell.MotionNumberAnimation { type: MobileShell.Motion.Press }
duration: Kirigami.Units.longDuration
easing.type: Easing.OutExpo
}
} }
transform: Scale { transform: Scale {

5
components/mobileshell/qml/actiondrawer/private/QuickSettingsFullDelegate.qml
View file

@ -12,7 +12,6 @@ import org.kde.kirigami as Kirigami
import org.kde.plasma.core as PlasmaCore import org.kde.plasma.core as PlasmaCore
import org.kde.plasma.private.mobileshell as MobileShell 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 import org.kde.plasma.components 3.0 as PlasmaComponents
QuickSettingsDelegate { QuickSettingsDelegate {
@ -23,7 +22,7 @@ QuickSettingsDelegate {
readonly property int tileRadius: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing readonly property int tileRadius: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
// scale animation on press // scale animation on press
zoomScale: (ShellSettings.Settings.animationsEnabled && mouseArea.pressed) ? 0.9 : 1 zoomScale: mouseArea.pressed ? root.pressedScale : 1
background: Item { background: Item {
// very simple shadow for performance // very simple shadow for performance
@ -61,7 +60,7 @@ QuickSettingsDelegate {
} }
Behavior on color { Behavior on color {
ColorAnimation { duration: ShellSettings.Settings.animationsEnabled ? Kirigami.Units.shortDuration : 0; easing.type: Easing.OutCubic } MobileShell.MotionColorAnimation { type: MobileShell.Motion.EffectsFast }
} }
} }
} }

5
components/mobileshell/qml/actiondrawer/private/QuickSettingsMinimizedDelegate.qml
View file

@ -12,7 +12,6 @@ import org.kde.kirigami as Kirigami
import org.kde.plasma.private.mobileshell as MobileShell import org.kde.plasma.private.mobileshell as MobileShell
import org.kde.plasma.core as PlasmaCore import org.kde.plasma.core as PlasmaCore
import org.kde.plasma.private.nanoshell 2.0 as NanoShell 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 import org.kde.plasma.components 3.0 as PlasmaComponents
QuickSettingsDelegate { QuickSettingsDelegate {
@ -21,7 +20,7 @@ QuickSettingsDelegate {
iconItem: icon iconItem: icon
// scale animation on press // scale animation on press
zoomScale: (ShellSettings.Settings.animationsEnabled && mouseArea.pressed) ? 0.9 : 1 zoomScale: mouseArea.pressed ? root.pressedScale : 1
background: Item { background: Item {
// very simple shadow for performance // very simple shadow for performance
@ -58,7 +57,7 @@ QuickSettingsDelegate {
} }
Behavior on color { Behavior on color {
ColorAnimation { duration: ShellSettings.Settings.animationsEnabled ? Kirigami.Units.shortDuration : 0; easing.type: Easing.OutCubic } MobileShell.MotionColorAnimation { type: MobileShell.Motion.EffectsFast }
} }
} }
} }

26
components/mobileshell/qml/actiondrawer/private/QuickSettingsStatusRow.qml
View file

@ -6,7 +6,6 @@ import QtQuick.Layouts 1.1
import org.kde.kirigami as Kirigami import org.kde.kirigami as Kirigami
import org.kde.plasma.private.mobileshell as MobileShell 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: * Management/detail row shown in convergence mode. Two interaction zones:
@ -49,6 +48,9 @@ Item {
return Kirigami.ColorUtils.linearInterpolation(bg, fg, 0.1); 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) { function mixColor(base, overlay, ratio) {
return Qt.rgba( return Qt.rgba(
@ -117,14 +119,14 @@ Item {
} }
Behavior on color { Behavior on color {
ColorAnimation { duration: Kirigami.Units.shortDuration } MobileShell.MotionColorAnimation { type: MobileShell.Motion.EffectsFast }
} }
} }
// Scale on press // 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 { Behavior on zoomScale {
NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.OutExpo } MobileShell.MotionNumberAnimation { type: MobileShell.Motion.Press }
} }
transform: Scale { transform: Scale {
origin.x: togglePill.width / 2 origin.x: togglePill.width / 2
@ -160,7 +162,7 @@ Item {
opacity: root.enabled ? 1.0 : 0.4 opacity: root.enabled ? 1.0 : 0.4
Behavior on width { 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.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
// Hover/press highlight MobileShell.MotionStateLayer {
Rectangle {
anchors.fill: parent anchors.fill: parent
radius: Kirigami.Units.cornerRadius radius: Kirigami.Units.cornerRadius
color: detailMouse.pressed ? Qt.rgba(Kirigami.Theme.textColor.r, hovered: detailMouse.containsMouse
Kirigami.Theme.textColor.g, pressed: detailMouse.pressed
Kirigami.Theme.textColor.b, 0.06) hoverOpacity: 0.03
: detailMouse.containsMouse ? Qt.rgba(Kirigami.Theme.textColor.r, pressedOpacity: 0.06
Kirigami.Theme.textColor.g,
Kirigami.Theme.textColor.b, 0.03)
: "transparent"
} }
MouseArea { MouseArea {

24
components/mobileshell/qml/actiondrawer/private/SystemTrayPopup.qml
View file

@ -26,6 +26,7 @@ QQC2.Popup {
padding: Kirigami.Units.smallSpacing padding: Kirigami.Units.smallSpacing
readonly property int popupAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.EffectsFast)
readonly property int trayItemCount: trayList.count readonly property int trayItemCount: trayList.count
function show() { function show() {
@ -147,17 +148,20 @@ QQC2.Popup {
anchors.leftMargin: Kirigami.Units.smallSpacing anchors.leftMargin: Kirigami.Units.smallSpacing
anchors.rightMargin: Kirigami.Units.smallSpacing anchors.rightMargin: Kirigami.Units.smallSpacing
radius: Kirigami.Units.cornerRadius radius: Kirigami.Units.cornerRadius
color: trayMouse.pressed ? Qt.rgba(Kirigami.Theme.textColor.r, color: Kirigami.Theme.alternateBackgroundColor
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
border.width: 1 border.width: 1
border.color: Kirigami.ColorUtils.linearInterpolation( border.color: Kirigami.ColorUtils.linearInterpolation(
Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, trayItem.itemActive ? 0.16 : 0.08) Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, trayItem.itemActive ? 0.16 : 0.08)
opacity: trayItem.itemActive ? 1 : 0.72 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 { RowLayout {
@ -237,11 +241,11 @@ QQC2.Popup {
} }
enter: Transition { enter: Transition {
NumberAnimation { property: "opacity"; from: 0; to: 1; duration: Kirigami.Units.shortDuration; easing.type: Easing.OutCubic } MobileShell.MotionNumberAnimation { property: "opacity"; from: 0; to: 1; type: MobileShell.Motion.EffectsFast }
NumberAnimation { property: "scale"; from: 0.9; to: 1; duration: Kirigami.Units.shortDuration; easing.type: Easing.OutCubic } MobileShell.MotionNumberAnimation { property: "scale"; from: 0.9; to: 1; type: MobileShell.Motion.EffectsFast }
} }
exit: Transition { 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 { QQC2.Overlay.modal: Rectangle {

6
components/mobileshell/qml/components/PanelBackground.qml
View file

@ -62,9 +62,9 @@ Item {
// for example, popup notifition when opening the popup notifition drawer // for example, popup notifition when opening the popup notifition drawer
// in these incidents, we animate the color to prevent harsh transitions // in these incidents, we animate the color to prevent harsh transitions
Behavior on panelColor { Behavior on panelColor {
ColorAnimation { MotionColorAnimation {
duration: animate ? Kirigami.Units.veryLongDuration * 1.5 : 0 type: Motion.SpatialSlow
easing.type: Easing.OutExpo duration: animate ? Math.round(Motion.duration(type) * 1.5) : 0
} }
} }

12
components/mobileshell/qml/components/StartupFeedbackPanelFill.qml
View file

@ -3,6 +3,8 @@
import QtQuick 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 import org.kde.plasma.private.mobileshell.state as MobileShellState
// Component to supplement the StartupFeedback window maximization animation for panel backgrounds. // Component to supplement the StartupFeedback window maximization animation for panel backgrounds.
@ -15,14 +17,16 @@ Rectangle {
property var maximizedTracker property var maximizedTracker
readonly property bool isShowing: height > 0 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 // Smooth animation for colored rectangle
NumberAnimation on height { MobileShell.MotionNumberAnimation on height {
id: heightAnim id: heightAnim
from: 0 from: 0
to: root.fullHeight to: root.fullHeight
duration: 200 type: MobileShell.Motion.SpatialDefault
easing.type: Easing.OutExpo duration: root.heightAnimationDuration
} }
// Auto-clear safety net. // Auto-clear safety net.
@ -38,7 +42,7 @@ Rectangle {
// the original mobile behaviour while fixing the convergence path. // the original mobile behaviour while fixing the convergence path.
Timer { Timer {
id: autoClearTimer id: autoClearTimer
interval: 600 // animation duration (200) + settle time interval: root.autoClearDelay
repeat: false repeat: false
onTriggered: { onTriggered: {
if (!root.maximizedTracker || !root.maximizedTracker.showingWindow) { if (!root.maximizedTracker || !root.maximizedTracker.showingWindow) {

27
components/mobileshell/qml/components/StartupFeedbackWindows.qml
View file

@ -7,7 +7,7 @@ import QtQuick.Effects
import org.kde.kirigami as Kirigami import org.kde.kirigami as Kirigami
import org.kde.plasma.components 3.0 as PC3 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.mobileshell.state as MobileShellState
import org.kde.plasma.private.nanoshell 2.0 as NanoShell import org.kde.plasma.private.nanoshell 2.0 as NanoShell
@ -39,6 +39,8 @@ Item {
id: window id: window
property var startupFeedback: model.delegate 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 visibility: Window.Maximized
flags: Qt.FramelessWindowHint flags: Qt.FramelessWindowHint
@ -62,7 +64,7 @@ Item {
backgroundParent.y = -realHeight/2 + startupFeedback.iconStartY - root.topMargin; backgroundParent.y = -realHeight/2 + startupFeedback.iconStartY - root.topMargin;
} }
if (ShellSettings.Settings.animationsEnabled) { if (MobileShell.Motion.enabled) {
openAnimComplex.restart(); openAnimComplex.restart();
} else { } else {
openAnimSimple.restart(); openAnimSimple.restart();
@ -78,35 +80,35 @@ Item {
ParallelAnimation { ParallelAnimation {
id: parallelAnim id: parallelAnim
property real animationDuration: Kirigami.Units.longDuration + Kirigami.Units.shortDuration property real animationDuration: MobileShell.Motion.duration(MobileShell.Motion.Emphasized)
ScaleAnimator { ScaleAnimator {
target: background target: background
from: background.scale from: background.scale
to: 1 to: 1
duration: parallelAnim.animationDuration duration: parallelAnim.animationDuration
easing.type: Easing.OutCubic easing.type: MobileShell.Motion.easing(MobileShell.Motion.Emphasized)
} }
ScaleAnimator { ScaleAnimator {
target: iconParent target: iconParent
from: iconParent.scale from: iconParent.scale
to: 1 to: 1
duration: parallelAnim.animationDuration duration: parallelAnim.animationDuration
easing.type: Easing.OutCubic easing.type: MobileShell.Motion.easing(MobileShell.Motion.Emphasized)
} }
XAnimator { XAnimator {
target: backgroundParent target: backgroundParent
from: backgroundParent.x from: backgroundParent.x
to: 0 to: 0
duration: parallelAnim.animationDuration duration: parallelAnim.animationDuration
easing.type: Easing.OutCubic easing.type: MobileShell.Motion.easing(MobileShell.Motion.Emphasized)
} }
YAnimator { YAnimator {
target: backgroundParent target: backgroundParent
from: backgroundParent.y from: backgroundParent.y
to: 0 to: 0
duration: parallelAnim.animationDuration 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 target: windowRoot
properties: "opacity" properties: "opacity"
from: 0 from: 0
to: 1 to: 1
duration: Kirigami.Units.longDuration type: MobileShell.Motion.EffectsDefault
easing.type: Easing.OutCubic duration: window.simpleOpenDuration
} }
ScriptAction { ScriptAction {
@ -212,7 +214,10 @@ Item {
opacity: 0 opacity: 0
Behavior on opacity { Behavior on opacity {
NumberAnimation {} MobileShell.MotionNumberAnimation {
type: MobileShell.Motion.EffectsFast
duration: window.loadingIndicatorFadeDuration
}
} }
implicitHeight: Kirigami.Units.iconSizes.smallMedium implicitHeight: Kirigami.Units.iconSizes.smallMedium

17
components/mobileshell/qml/homescreen/HomeScreen.qml
View file

@ -4,6 +4,8 @@
import QtQuick import QtQuick
import QtQuick.Window import QtQuick.Window
import org.kde.kirigami as Kirigami
import org.kde.plasma.plasmoid import org.kde.plasma.plasmoid
import org.kde.taskmanager as TaskManager import org.kde.taskmanager as TaskManager
@ -142,7 +144,9 @@ Item {
opacity: 0 opacity: 0
property real scaleAmount: 1 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() { function zoomIn() {
// don't use check animationsEnabled here, so we ensure the scale and opacity is always 1 when disabled // 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; opacity = 0;
} }
NumberAnimation on opacity { MobileShell.MotionNumberAnimation on opacity {
id: opacityAnim id: opacityAnim
duration: 300 type: MobileShell.Motion.EffectsDefault
duration: itemContainer.opacityAnimationDuration
running: false running: false
} }
NumberAnimation on scaleAmount { MobileShell.MotionNumberAnimation on scaleAmount {
id: scaleAnim id: scaleAnim
duration: 600 type: MobileShell.Motion.SpatialSlow
duration: itemContainer.scaleAnimationDuration
running: false running: false
easing.type: Easing.OutExpo
} }
function evaluateAnimChange() { function evaluateAnimChange() {

13
components/mobileshell/qml/homescreen/WallpaperSelector.qml
View file

@ -19,6 +19,7 @@ Controls.Drawer {
property MobileShell.MaskManager maskManager property MobileShell.MaskManager maskManager
required property bool horizontal required property bool horizontal
readonly property int previewAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.EffectsDefault)
signal wallpaperSettingsRequested() signal wallpaperSettingsRequested()
@ -100,15 +101,15 @@ Controls.Drawer {
padding: Kirigami.Units.largeSpacing - (wallpapersView.currentIndex === index ? Kirigami.Units.smallSpacing : 0) padding: Kirigami.Units.largeSpacing - (wallpapersView.currentIndex === index ? Kirigami.Units.smallSpacing : 0)
property real scaleAmount: wallpapersView.currentIndex === index ? 0 : Kirigami.Units.smallSpacing property real scaleAmount: wallpapersView.currentIndex === index ? 0 : Kirigami.Units.smallSpacing
Behavior on scaleAmount { Behavior on scaleAmount {
NumberAnimation { MobileShell.MotionNumberAnimation {
duration: Kirigami.Units.longDuration type: MobileShell.Motion.EffectsDefault
easing.type: Easing.InOutQuad duration: imageWallpaperDrawer.previewAnimationDuration
} }
} }
Behavior on padding { Behavior on padding {
NumberAnimation { MobileShell.MotionNumberAnimation {
duration: Kirigami.Units.longDuration type: MobileShell.Motion.EffectsDefault
easing.type: Easing.InOutQuad duration: imageWallpaperDrawer.previewAnimationDuration
} }
} }

7
components/mobileshell/qml/navigationpanel/NavigationPanelButton.qml
View file

@ -22,6 +22,7 @@ Controls.AbstractButton {
property int shrinkSize: 0 property int shrinkSize: 0
property alias iconSource: icon.source property alias iconSource: icon.source
readonly property int pressAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.Press)
MobileShell.HapticsEffect { MobileShell.HapticsEffect {
id: haptics id: haptics
@ -56,10 +57,10 @@ Controls.AbstractButton {
} }
} }
NumberAnimation on opacity { MobileShell.MotionNumberAnimation on opacity {
id: opacityAnimator id: opacityAnimator
duration: Kirigami.Units.shortDuration type: MobileShell.Motion.Press
easing.type: Easing.InOutQuad duration: button.pressAnimationDuration
onFinished: { onFinished: {
// animate the state back // animate the state back
if (rect.buttonHeld && opacityAnimator.to === 0) { if (rect.buttonHeld && opacityAnimator.to === 0) {

6
components/mobileshell/qml/statusbar/StatusBar.qml
View file

@ -37,7 +37,7 @@ Item {
property color backgroundColor: "transparent" property color backgroundColor: "transparent"
Behavior on backgroundColor { 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 opacity: ShellSettings.Settings.convergenceModeEnabled && statusBarHover.hovered ? 1 : 0
Behavior on opacity { 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 opacity: ShellSettings.Settings.convergenceModeEnabled ? (statusBarHover.hovered ? 0.6 : 0.2) : 0
Behavior on opacity { Behavior on opacity {
NumberAnimation { duration: Kirigami.Units.shortDuration } MobileShell.MotionNumberAnimation { type: MobileShell.Motion.EffectsFast }
} }
} }
} }

8
components/mobileshell/qml/statusbar/TaskWidget.qml
View file

@ -7,20 +7,22 @@
import QtQuick import QtQuick
import QtQuick.Controls as Controls import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami import org.kde.kirigami as Kirigami
import org.kde.plasma.private.mobileshell as MobileShell
Item { Item {
id: taskIcon id: taskIcon
width: parent.height width: parent.height
height: width height: width
readonly property int opacityAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.EffectsDefault)
// Hide ApplicationStatus and Passive items // Hide ApplicationStatus and Passive items
opacity: (model.category !== "ApplicationStatus" && model.status !== "Passive") ? 1 : 0 opacity: (model.category !== "ApplicationStatus" && model.status !== "Passive") ? 1 : 0
onOpacityChanged: visible = opacity onOpacityChanged: visible = opacity
Behavior on opacity { Behavior on opacity {
NumberAnimation { MobileShell.MotionNumberAnimation {
duration: Kirigami.Units.longDuration type: MobileShell.Motion.EffectsDefault
easing.type: Easing.InOutQuad duration: taskIcon.opacityAnimationDuration
} }
} }

9
containments/panel/qml/StatusBarWrapper.qml
View file

@ -27,6 +27,8 @@ Item {
// Request the panel itself to reapply settings (ex. for updating touch area). // Request the panel itself to reapply settings (ex. for updating touch area).
signal updatePanelPropertiesRequested() signal updatePanelPropertiesRequested()
readonly property int panelAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.SpatialDefault)
Kirigami.Theme.colorSet: forcedComplementary ? Kirigami.Theme.Complementary : Kirigami.Theme.Header Kirigami.Theme.colorSet: forcedComplementary ? Kirigami.Theme.Complementary : Kirigami.Theme.Header
Kirigami.Theme.inherit: false Kirigami.Theme.inherit: false
@ -60,6 +62,7 @@ Item {
State { State {
// Panel is forced to be visible and overlaid over content (will be automatically hidden after a duration). // Panel is forced to be visible and overlaid over content (will be automatically hidden after a duration).
name: "visible" name: "visible"
PropertyChanges { PropertyChanges {
target: root; offset: 0 target: root; offset: 0
} }
@ -76,10 +79,10 @@ Item {
transitions: Transition { transitions: Transition {
SequentialAnimation { SequentialAnimation {
ParallelAnimation { ParallelAnimation {
PropertyAnimation { MobileShell.MotionNumberAnimation {
properties: "offset" properties: "offset"
easing.type: root.state === "hidden" ? Easing.InExpo : Easing.OutExpo type: root.state === "hidden" ? MobileShell.Motion.EmphasizedAccel : MobileShell.Motion.SpatialDefault
duration: Kirigami.Units.longDuration duration: root.panelAnimationDuration
} }
} }
ScriptAction { ScriptAction {

14
containments/taskpanel/qml/main.qml
View file

@ -39,6 +39,8 @@ ContainmentItem {
readonly property bool inLandscape: MobileShell.Constants.navigationPanelOnSide(Screen.width, Screen.height) readonly property bool inLandscape: MobileShell.Constants.navigationPanelOnSide(Screen.width, Screen.height)
readonly property bool gamingMode: ShellSettings.Settings.gamingModeEnabled 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 navigationPanelHeight: gamingMode ? 0 : MobileShell.Constants.navigationPanelThickness
readonly property real convergenceWorkspaceFrameThickness: ShellSettings.Settings.convergenceModeEnabled && !gamingMode readonly property real convergenceWorkspaceFrameThickness: ShellSettings.Settings.convergenceModeEnabled && !gamingMode
@ -326,10 +328,10 @@ ContainmentItem {
transitions: Transition { transitions: Transition {
SequentialAnimation { SequentialAnimation {
ParallelAnimation { ParallelAnimation {
PropertyAnimation { MobileShell.MotionNumberAnimation {
properties: "offset" properties: "offset"
easing.type: navigationPanel.state === "hidden" ? Easing.InExpo : Easing.OutExpo type: navigationPanel.state === "hidden" ? MobileShell.Motion.EmphasizedAccel : MobileShell.Motion.SpatialDefault
duration: Kirigami.Units.longDuration duration: root.navigationAnimationDuration
} }
} }
ScriptAction { ScriptAction {
@ -377,14 +379,14 @@ ContainmentItem {
} }
} }
NumberAnimation { MobileShell.MotionNumberAnimation {
id: resetAn id: resetAn
running: false running: false
target: dragEffect target: dragEffect
property: "offsetPoint" property: "offsetPoint"
to: 0 to: 0
duration: Kirigami.Units.longDuration * 1.5 type: MobileShell.Motion.SpatialDefault
easing.type: Easing.OutExpo duration: root.resetAnimationDuration
onRunningChanged: { onRunningChanged: {
if (!running && navigationPanel.state == "hidden") { if (!running && navigationPanel.state == "hidden") {
root.setWindowProperties(); root.setWindowProperties();

8
shell/contents/views/Panel.qml
View file

@ -14,6 +14,7 @@ import org.kde.ksvg 1.0 as KSvg
import org.kde.taskmanager 0.1 as TaskManager import org.kde.taskmanager 0.1 as TaskManager
import org.kde.kwindowsystem 1.0 import org.kde.kwindowsystem 1.0
import org.kde.kirigami as Kirigami 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.shell.panel 0.1 as Panel
import org.kde.plasma.plasmoid 2.0 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 // 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 floatingnessTarget: 0.0 // The animation is handled in panelview.cpp for efficiency
property double floatingness: 0.0 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 // 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 property double panelOpacity
Behavior on panelOpacity { Behavior on panelOpacity {
NumberAnimation { MobileShell.MotionNumberAnimation {
duration: Kirigami.Units.longDuration type: MobileShell.Motion.EffectsDefault
easing.type: Easing.OutCubic
} }
} }