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

Move homescreens to shared motion

Browse source 
Use Motion wrappers and state layers across Folio and Halcyon delegates, drawers, folders, resize handles, and dock feedback. Also align Folio edit/drop highlights with theme colors instead of fixed white overlays.
This commit is contained in:
Marco Allegretti 2026-05-21 11:13:36 +02:00
parent 7f9087f342
commit a37734b74a
29 changed files with 230 additions and 179 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
containments/homescreens/folio/qml/AppDrawerGrid.qml
View file

@ -32,6 +32,7 @@ MobileShell.GridView {
property real headerHeight property real headerHeight
readonly property int reservedSpaceForLabel: folio.HomeScreenState.pageDelegateLabelHeight readonly property int reservedSpaceForLabel: folio.HomeScreenState.pageDelegateLabelHeight
readonly property int scrollBarAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.SpatialExtended)
readonly property real effectiveContentWidth: width - leftMargin - rightMargin readonly property real effectiveContentWidth: width - leftMargin - rightMargin
readonly property real horizontalMargin: Math.round(width * 0.05) readonly property real horizontalMargin: Math.round(width * 0.05)
@ -139,8 +140,8 @@ MobileShell.GridView {
Behavior on opacity { Behavior on opacity {
OpacityAnimator { OpacityAnimator {
duration: Kirigami.Units.longDuration * 2 duration: root.scrollBarAnimationDuration
easing.type: Easing.InOutQuad easing.type: MobileShell.Motion.easing(MobileShell.Motion.Standard)
} }
} }

3
containments/homescreens/folio/qml/AppDrawerHeader.qml
View file

@ -8,6 +8,7 @@ import QtQuick.Layouts
import org.kde.kirigami as Kirigami import org.kde.kirigami as Kirigami
import org.kde.plasma.components 3.0 as PlasmaComponents import org.kde.plasma.components 3.0 as PlasmaComponents
import org.kde.plasma.private.mobileshell as MobileShell
import plasma.applet.org.kde.plasma.mobile.homescreen.folio as Folio import plasma.applet.org.kde.plasma.mobile.homescreen.folio as Folio
import './delegate' import './delegate'
@ -64,7 +65,7 @@ Item {
Kirigami.Theme.textColor.b, Kirigami.Theme.textColor.b,
(searchField.hovered || searchField.focus) ? 0.2 : 0.1) (searchField.hovered || searchField.focus) ? 0.2 : 0.1)
Behavior on color { ColorAnimation {} } Behavior on color { MobileShell.MotionColorAnimation { type: MobileShell.Motion.EffectsFast } }
} }
topPadding: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing topPadding: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing

17
containments/homescreens/folio/qml/DelegateDragItem.qml
View file

@ -22,6 +22,7 @@ Item {
height: folio.HomeScreenState.pageCellHeight height: folio.HomeScreenState.pageCellHeight
readonly property real dropAnimationRunning: dragXAnim.running || dragYAnim.running readonly property real dropAnimationRunning: dragXAnim.running || dragYAnim.running
readonly property int dropAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.EffectsDefault)
// ignore widget dragging, that is not handled by this component // ignore widget dragging, that is not handled by this component
readonly property bool isWidgetDrag: folio.HomeScreenState.dragState.dropDelegate && folio.HomeScreenState.dragState.dropDelegate.type === Folio.FolioDelegate.Widget readonly property bool isWidgetDrag: folio.HomeScreenState.dragState.dropDelegate && folio.HomeScreenState.dragState.dropDelegate.type === Folio.FolioDelegate.Widget
@ -38,11 +39,11 @@ Item {
} }
// animate drop x // animate drop x
NumberAnimation on x { MobileShell.MotionNumberAnimation on x {
id: dragXAnim id: dragXAnim
type: MobileShell.Motion.EffectsDefault
running: false running: false
duration: Kirigami.Units.longDuration duration: root.dropAnimationDuration
easing.type: Easing.OutCubic
onFinished: { onFinished: {
root.visible = false; root.visible = false;
root.setXBinding(); root.setXBinding();
@ -50,11 +51,11 @@ Item {
} }
// animate drop y // animate drop y
NumberAnimation on y { MobileShell.MotionNumberAnimation on y {
id: dragYAnim id: dragYAnim
type: MobileShell.Motion.EffectsDefault
running: false running: false
duration: Kirigami.Units.longDuration duration: root.dropAnimationDuration
easing.type: Easing.OutCubic
onFinished: { onFinished: {
root.visible = false; root.visible = false;
root.setYBinding(); root.setYBinding();
@ -66,8 +67,8 @@ Item {
id: scaleAnim id: scaleAnim
to: 0 to: 0
running: false running: false
duration: Kirigami.Units.longDuration duration: root.dropAnimationDuration
easing.type: Easing.InOutCubic easing.type: MobileShell.Motion.easing(MobileShell.Motion.EffectsDefault)
} }
Connections { Connections {

124
containments/homescreens/folio/qml/FavouritesBar.qml
View file

@ -35,20 +35,22 @@ MouseArea {
readonly property bool convergenceMode: ShellSettings.Settings.convergenceModeEnabled readonly property bool convergenceMode: ShellSettings.Settings.convergenceModeEnabled
readonly property bool showRunningTasks: convergenceMode && !suppressRunningTasks readonly property bool showRunningTasks: convergenceMode && !suppressRunningTasks
readonly property int totalItemCount: repeater.count + (showRunningTasks ? taskRepeater.count : 0) readonly property int totalItemCount: repeater.count + (showRunningTasks ? taskRepeater.count : 0)
readonly property int longAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.SpatialDefault)
readonly property int shortAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.EffectsFast)
// In convergence mode, size icons to fit the dock bar instead of using page grid cells // In convergence mode, size icons to fit the dock bar instead of using page grid cells
property real dockCellWidth: convergenceMode ? root.height : folio.HomeScreenState.pageCellWidth property real dockCellWidth: convergenceMode ? root.height : folio.HomeScreenState.pageCellWidth
property real dockCellHeight: convergenceMode ? root.height : folio.HomeScreenState.pageCellHeight property real dockCellHeight: convergenceMode ? root.height : folio.HomeScreenState.pageCellHeight
Behavior on dockCellWidth { NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.InOutCubic } } Behavior on dockCellWidth { MobileShell.MotionNumberAnimation { type: MobileShell.Motion.SpatialDefault; duration: root.longAnimationDuration } }
Behavior on dockCellHeight { NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.InOutCubic } } Behavior on dockCellHeight { MobileShell.MotionNumberAnimation { type: MobileShell.Motion.SpatialDefault; duration: root.longAnimationDuration } }
// Navigation buttons width (used to offset center positioning) // Navigation buttons width (used to offset center positioning)
property real navButtonWidth: convergenceMode ? root.height : 0 property real navButtonWidth: convergenceMode ? root.height : 0
property real dockItemInset: convergenceMode ? Math.max(2, Kirigami.Units.smallSpacing / 2) : 0 property real dockItemInset: convergenceMode ? Math.max(2, Kirigami.Units.smallSpacing / 2) : 0
property real dockIconSize: Math.min(root.height * 0.56, Kirigami.Units.iconSizes.large) property real dockIconSize: Math.min(root.height * 0.56, Kirigami.Units.iconSizes.large)
Behavior on navButtonWidth { NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.InOutCubic } } Behavior on navButtonWidth { MobileShell.MotionNumberAnimation { type: MobileShell.Motion.SpatialDefault; duration: root.longAnimationDuration } }
Behavior on dockItemInset { NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.InOutCubic } } Behavior on dockItemInset { MobileShell.MotionNumberAnimation { type: MobileShell.Motion.SpatialDefault; duration: root.longAnimationDuration } }
Behavior on dockIconSize { NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.InOutCubic } } Behavior on dockIconSize { MobileShell.MotionNumberAnimation { type: MobileShell.Motion.SpatialDefault; duration: root.longAnimationDuration } }
function dockItemColor(pressed, hovered, active) { function dockItemColor(pressed, hovered, active) {
if (pressed) { if (pressed) {
@ -67,7 +69,7 @@ MouseArea {
readonly property bool showSpacer: showRunningTasks && repeater.count > 0 && taskRepeater.count > 0 readonly property bool showSpacer: showRunningTasks && repeater.count > 0 && taskRepeater.count > 0
property real spacerWidth: showSpacer ? Kirigami.Units.largeSpacing * 2 : 0 property real spacerWidth: showSpacer ? Kirigami.Units.largeSpacing * 2 : 0
Behavior on spacerWidth { Behavior on spacerWidth {
NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.InOutQuad } MobileShell.MotionNumberAnimation { type: MobileShell.Motion.SpatialDefault; duration: root.longAnimationDuration }
} }
// Thumbnail popup hover tracking // Thumbnail popup hover tracking
@ -102,10 +104,10 @@ MouseArea {
readonly property real dockCenterX: convergenceMode readonly property real dockCenterX: convergenceMode
? leftControlsWidth + (root.width - leftControlsWidth - rightControlsWidth) / 2 ? leftControlsWidth + (root.width - leftControlsWidth - rightControlsWidth) / 2
: root.width / 2 : root.width / 2
Behavior on pagerButtonWidth { NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.InOutCubic } } Behavior on pagerButtonWidth { MobileShell.MotionNumberAnimation { type: MobileShell.Motion.SpatialDefault; duration: root.longAnimationDuration } }
Behavior on desktopButtonWidth { NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.InOutCubic } } Behavior on desktopButtonWidth { MobileShell.MotionNumberAnimation { type: MobileShell.Motion.SpatialDefault; duration: root.longAnimationDuration } }
Behavior on trashButtonWidth { NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.InOutCubic } } Behavior on trashButtonWidth { MobileShell.MotionNumberAnimation { type: MobileShell.Motion.SpatialDefault; duration: root.longAnimationDuration } }
Behavior on searchButtonWidth { NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.InOutCubic } } Behavior on searchButtonWidth { MobileShell.MotionNumberAnimation { type: MobileShell.Motion.SpatialDefault; duration: root.longAnimationDuration } }
property Item pendingDockToolTipItem: null property Item pendingDockToolTipItem: null
property Item activeDockToolTipItem: null property Item activeDockToolTipItem: null
@ -294,7 +296,7 @@ MouseArea {
color: "transparent" color: "transparent"
Behavior on opacity { Behavior on opacity {
NumberAnimation { duration: Kirigami.Units.shortDuration; easing.type: Easing.InOutQuad } MobileShell.MotionNumberAnimation { type: MobileShell.Motion.EffectsFast; duration: root.shortAnimationDuration }
} }
Accessible.role: Accessible.Button Accessible.role: Accessible.Button
@ -313,15 +315,13 @@ MouseArea {
visible: homeButton.activeFocus visible: homeButton.activeFocus
} }
Rectangle { MobileShell.MotionStateLayer {
anchors.fill: parent anchors.fill: parent
anchors.margins: root.dockItemInset anchors.margins: root.dockItemInset
radius: Kirigami.Units.cornerRadius radius: Kirigami.Units.cornerRadius
color: root.dockItemColor(homeMouseArea.containsPress, homeMouseArea.containsMouse, false) hovered: homeMouseArea.containsMouse
pressed: homeMouseArea.containsPress
Behavior on color { pressedOpacity: 0.18
ColorAnimation { duration: Kirigami.Units.shortDuration; easing.type: Easing.OutCubic }
}
} }
Kirigami.Icon { Kirigami.Icon {
@ -361,7 +361,7 @@ MouseArea {
} }
Behavior on opacity { Behavior on opacity {
NumberAnimation { duration: Kirigami.Units.shortDuration; easing.type: Easing.InOutQuad } MobileShell.MotionNumberAnimation { type: MobileShell.Motion.EffectsFast; duration: root.shortAnimationDuration }
} }
Accessible.role: Accessible.Button Accessible.role: Accessible.Button
@ -385,15 +385,14 @@ MouseArea {
visible: desktopButton.activeFocus visible: desktopButton.activeFocus
} }
Rectangle { MobileShell.MotionStateLayer {
anchors.fill: parent anchors.fill: parent
anchors.margins: root.dockItemInset anchors.margins: root.dockItemInset
radius: Kirigami.Units.cornerRadius radius: Kirigami.Units.cornerRadius
color: root.dockItemColor(desktopMouseArea.containsPress, desktopMouseArea.containsMouse, WindowPlugin.WindowUtil.isShowingDesktop) hovered: desktopMouseArea.containsMouse
pressed: desktopMouseArea.containsPress
Behavior on color { active: WindowPlugin.WindowUtil.isShowingDesktop
ColorAnimation { duration: Kirigami.Units.shortDuration; easing.type: Easing.OutCubic } pressedOpacity: 0.18
}
} }
Kirigami.Icon { Kirigami.Icon {
@ -476,7 +475,7 @@ MouseArea {
color: "transparent" color: "transparent"
Behavior on opacity { Behavior on opacity {
NumberAnimation { duration: Kirigami.Units.shortDuration; easing.type: Easing.InOutQuad } MobileShell.MotionNumberAnimation { type: MobileShell.Motion.EffectsFast; duration: root.shortAnimationDuration }
} }
Accessible.role: Accessible.Button Accessible.role: Accessible.Button
@ -495,15 +494,13 @@ MouseArea {
visible: overviewButton.activeFocus visible: overviewButton.activeFocus
} }
Rectangle { MobileShell.MotionStateLayer {
anchors.fill: parent anchors.fill: parent
anchors.margins: root.dockItemInset anchors.margins: root.dockItemInset
radius: Kirigami.Units.cornerRadius radius: Kirigami.Units.cornerRadius
color: root.dockItemColor(overviewMouseArea.containsPress, overviewMouseArea.containsMouse, false) hovered: overviewMouseArea.containsMouse
pressed: overviewMouseArea.containsPress
Behavior on color { pressedOpacity: 0.18
ColorAnimation { duration: Kirigami.Units.shortDuration; easing.type: Easing.OutCubic }
}
} }
Kirigami.Icon { Kirigami.Icon {
@ -539,7 +536,7 @@ MouseArea {
color: "transparent" color: "transparent"
Behavior on opacity { Behavior on opacity {
NumberAnimation { duration: Kirigami.Units.shortDuration; easing.type: Easing.InOutQuad } MobileShell.MotionNumberAnimation { type: MobileShell.Motion.EffectsFast; duration: root.shortAnimationDuration }
} }
Accessible.role: Accessible.Button Accessible.role: Accessible.Button
@ -563,15 +560,13 @@ MouseArea {
visible: searchButton.activeFocus visible: searchButton.activeFocus
} }
Rectangle { MobileShell.MotionStateLayer {
anchors.fill: parent anchors.fill: parent
anchors.margins: root.dockItemInset anchors.margins: root.dockItemInset
radius: Kirigami.Units.cornerRadius radius: Kirigami.Units.cornerRadius
color: root.dockItemColor(searchMouseArea.containsPress, searchMouseArea.containsMouse, false) hovered: searchMouseArea.containsMouse
pressed: searchMouseArea.containsPress
Behavior on color { pressedOpacity: 0.18
ColorAnimation { duration: Kirigami.Units.shortDuration; easing.type: Easing.OutCubic }
}
} }
Kirigami.Icon { Kirigami.Icon {
@ -638,15 +633,16 @@ MouseArea {
width: root.pagerButtonWidth width: root.pagerButtonWidth
height: root.height height: root.height
Rectangle { MobileShell.MotionStateLayer {
anchors.fill: parent anchors.fill: parent
anchors.margins: root.dockItemInset anchors.margins: root.dockItemInset
radius: Kirigami.Units.cornerRadius radius: Kirigami.Units.cornerRadius
color: leftDesktopBtn.isCurrent || leftDesktopBtn.isDragTarget hovered: leftPagerHover.containsMouse
? Qt.rgba(Kirigami.Theme.highlightColor.r, Kirigami.Theme.highlightColor.g, Kirigami.Theme.highlightColor.b, pressed: leftPagerHover.containsPress
leftPagerHover.containsMouse || leftDesktopBtn.isDragTarget ? 0.25 : 0.18) active: leftDesktopBtn.isCurrent || leftDesktopBtn.isDragTarget
: root.dockItemColor(leftPagerHover.containsPress, leftPagerHover.containsMouse, false) pressedOpacity: 0.18
Behavior on color { ColorAnimation { duration: Kirigami.Units.shortDuration } } activeOpacity: 0.18
activeHoverOpacity: 0.25
} }
PC3.Label { PC3.Label {
@ -746,15 +742,16 @@ MouseArea {
width: root.pagerButtonWidth width: root.pagerButtonWidth
height: root.height height: root.height
Rectangle { MobileShell.MotionStateLayer {
anchors.fill: parent anchors.fill: parent
anchors.margins: root.dockItemInset anchors.margins: root.dockItemInset
radius: Kirigami.Units.cornerRadius radius: Kirigami.Units.cornerRadius
color: rightDesktopBtn.isCurrent || rightDesktopBtn.isDragTarget hovered: rightPagerHover.containsMouse
? Qt.rgba(Kirigami.Theme.highlightColor.r, Kirigami.Theme.highlightColor.g, Kirigami.Theme.highlightColor.b, pressed: rightPagerHover.containsPress
rightPagerHover.containsMouse || rightDesktopBtn.isDragTarget ? 0.25 : 0.18) active: rightDesktopBtn.isCurrent || rightDesktopBtn.isDragTarget
: root.dockItemColor(rightPagerHover.containsPress, rightPagerHover.containsMouse, false) pressedOpacity: 0.18
Behavior on color { ColorAnimation { duration: Kirigami.Units.shortDuration } } activeOpacity: 0.18
activeHoverOpacity: 0.25
} }
PC3.Label { PC3.Label {
@ -875,7 +872,7 @@ MouseArea {
color: "transparent" color: "transparent"
Behavior on opacity { Behavior on opacity {
NumberAnimation { duration: Kirigami.Units.shortDuration; easing.type: Easing.InOutQuad } MobileShell.MotionNumberAnimation { type: MobileShell.Motion.EffectsFast; duration: root.shortAnimationDuration }
} }
Accessible.role: Accessible.Button Accessible.role: Accessible.Button
@ -891,14 +888,13 @@ MouseArea {
visible: trashButton.activeFocus visible: trashButton.activeFocus
} }
Rectangle { MobileShell.MotionStateLayer {
anchors.fill: parent anchors.fill: parent
anchors.margins: root.dockItemInset anchors.margins: root.dockItemInset
radius: Kirigami.Units.cornerRadius radius: Kirigami.Units.cornerRadius
color: root.dockItemColor(trashMouseArea.containsPress, trashMouseArea.containsMouse, false) hovered: trashMouseArea.containsMouse
Behavior on color { pressed: trashMouseArea.containsPress
ColorAnimation { duration: Kirigami.Units.shortDuration; easing.type: Easing.OutCubic } pressedOpacity: 0.18
}
} }
Kirigami.Icon { Kirigami.Icon {
@ -1049,7 +1045,7 @@ MouseArea {
// get the normalized index position value from the center so we can animate it // get the normalized index position value from the center so we can animate it
property double fromCenterValue: model.index - (root.totalItemCount / 2) property double fromCenterValue: model.index - (root.totalItemCount / 2)
Behavior on fromCenterValue { Behavior on fromCenterValue {
NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.InOutQuad; } MobileShell.MotionNumberAnimation { type: MobileShell.Motion.SpatialDefault; duration: root.longAnimationDuration }
} }
// multiply the 'fromCenterValue' by the cell size to get the actual position // multiply the 'fromCenterValue' by the cell size to get the actual position
@ -1070,7 +1066,7 @@ MouseArea {
} }
Behavior on dragVisualShift { Behavior on dragVisualShift {
enabled: root.dragReorderIndex !== -1 && delegate.index !== root.dragReorderIndex enabled: root.dragReorderIndex !== -1 && delegate.index !== root.dragReorderIndex
NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.InOutQuad } MobileShell.MotionNumberAnimation { type: MobileShell.Motion.SpatialDefault; duration: root.longAnimationDuration }
} }
property real taskPinVisualShift: root.taskPinCanDrop && delegate.index >= root.taskPinTargetIndex ? root.dockCellWidth : 0 property real taskPinVisualShift: root.taskPinCanDrop && delegate.index >= root.taskPinTargetIndex ? root.dockCellWidth : 0
@ -1426,10 +1422,10 @@ MouseArea {
visible: showing || fadeAnim.running visible: showing || fadeAnim.running
opacity: showing ? 1 : 0 opacity: showing ? 1 : 0
Behavior on opacity { Behavior on opacity {
NumberAnimation { MobileShell.MotionNumberAnimation {
id: fadeAnim id: fadeAnim
duration: Kirigami.Units.shortDuration type: MobileShell.Motion.EffectsFast
easing.type: Easing.InOutQuad duration: root.shortAnimationDuration
} }
} }
@ -1718,7 +1714,7 @@ MouseArea {
// Position after all favourites // Position after all favourites
property double fromCenterValue: (repeater.count + taskDelegate.index) - (root.totalItemCount / 2) property double fromCenterValue: (repeater.count + taskDelegate.index) - (root.totalItemCount / 2)
Behavior on fromCenterValue { Behavior on fromCenterValue {
NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.InOutQuad; } MobileShell.MotionNumberAnimation { type: MobileShell.Motion.SpatialDefault; duration: root.longAnimationDuration }
} }
readonly property int centerPosition: (isLocationBottom ? root.dockCellWidth : root.dockCellHeight) * fromCenterValue readonly property int centerPosition: (isLocationBottom ? root.dockCellWidth : root.dockCellHeight) * fromCenterValue
@ -1740,7 +1736,7 @@ MouseArea {
color: root.dockItemColor(taskMouseArea.containsPress, taskMouseArea.containsMouse, taskDelegate.model.IsActive === true) color: root.dockItemColor(taskMouseArea.containsPress, taskMouseArea.containsMouse, taskDelegate.model.IsActive === true)
Behavior on color { Behavior on color {
ColorAnimation { duration: Kirigami.Units.shortDuration; easing.type: Easing.OutCubic } MobileShell.MotionColorAnimation { type: MobileShell.Motion.EffectsFast; duration: root.shortAnimationDuration }
} }
} }
@ -1825,7 +1821,7 @@ MouseArea {
opacity: taskDelegate.model.IsActive === true ? 1.0 : 0.45 opacity: taskDelegate.model.IsActive === true ? 1.0 : 0.45
Behavior on width { Behavior on width {
NumberAnimation { duration: Kirigami.Units.shortDuration; easing.type: Easing.OutCubic } MobileShell.MotionNumberAnimation { type: MobileShell.Motion.EffectsFast; duration: root.shortAnimationDuration }
} }
} }
} }

13
containments/homescreens/folio/qml/FolderView.qml
View file

@ -25,6 +25,9 @@ Folio.DelegateTouchArea {
property real folderPositionY property real folderPositionY
property Folio.FolioApplicationFolder folder: folio.HomeScreenState.currentFolder property Folio.FolioApplicationFolder folder: folio.HomeScreenState.currentFolder
readonly property int shortAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.EffectsFast)
readonly property int longAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.SpatialDefault)
readonly property color folderFeedbackColor: Qt.rgba(Kirigami.Theme.highlightColor.r, Kirigami.Theme.highlightColor.g, Kirigami.Theme.highlightColor.b, 0.24)
MobileShell.HapticsEffect { MobileShell.HapticsEffect {
id: haptics id: haptics
@ -83,7 +86,7 @@ Folio.DelegateTouchArea {
opacity: (root.opacity === 1) ? 1 : 0 opacity: (root.opacity === 1) ? 1 : 0
Behavior on opacity { Behavior on opacity {
NumberAnimation { duration: Kirigami.Units.shortDuration } MobileShell.MotionNumberAnimation { type: MobileShell.Motion.EffectsFast; duration: root.shortAnimationDuration }
} }
} }
@ -177,7 +180,7 @@ Folio.DelegateTouchArea {
Rectangle { Rectangle {
id: folderBackground id: folderBackground
color: Qt.rgba(255, 255, 255, 0.3) color: root.folderFeedbackColor
radius: Kirigami.Units.gridUnit radius: Kirigami.Units.gridUnit
readonly property int gridLength: folio.HomeScreenState.folderGridLength readonly property int gridLength: folio.HomeScreenState.folderGridLength
@ -282,9 +285,9 @@ Folio.DelegateTouchArea {
property double rowValue: model.rowIndex property double rowValue: model.rowIndex
property double pageValue: model.pageIndex property double pageValue: model.pageIndex
Behavior on columnValue { NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.InOutQuad } } Behavior on columnValue { MobileShell.MotionNumberAnimation { type: MobileShell.Motion.SpatialDefault; duration: root.longAnimationDuration } }
Behavior on rowValue { NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.InOutQuad } } Behavior on rowValue { MobileShell.MotionNumberAnimation { type: MobileShell.Motion.SpatialDefault; duration: root.longAnimationDuration } }
Behavior on pageValue { NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.InOutQuad } } Behavior on pageValue { MobileShell.MotionNumberAnimation { type: MobileShell.Motion.SpatialDefault; duration: root.longAnimationDuration } }
// multiply the index values by the cell size to get the actual position // multiply the index values by the cell size to get the actual position
readonly property int columnPosition: cellWidth * columnValue readonly property int columnPosition: cellWidth * columnValue

3
containments/homescreens/folio/qml/FolioHomeScreen.qml
View file

@ -31,6 +31,7 @@ Item {
property real rightMargin: 0 property real rightMargin: 0
property bool interactive: true property bool interactive: true
readonly property color favouritesBarScrimColor: Qt.rgba(Kirigami.Theme.highlightColor.r, Kirigami.Theme.highlightColor.g, Kirigami.Theme.highlightColor.b, 0.14)
// non-widget drop animation // non-widget drop animation
readonly property bool dropAnimationRunning: delegateDragItem.dropAnimationRunning || widgetDragItem.dropAnimationRunning readonly property bool dropAnimationRunning: delegateDragItem.dropAnimationRunning || widgetDragItem.dropAnimationRunning
@ -350,7 +351,7 @@ Item {
Rectangle { Rectangle {
id: favouritesBarScrim id: favouritesBarScrim
color: Qt.rgba(255, 255, 255, 0.2) color: root.favouritesBarScrimColor
Component.onCompleted: maskManager.assignToMask(this) Component.onCompleted: maskManager.assignToMask(this)

6
containments/homescreens/folio/qml/HomeScreenPage.qml
View file

@ -24,6 +24,8 @@ Item {
property var pageModel property var pageModel
property var homeScreen property var homeScreen
readonly property color editFeedbackColor: Qt.rgba(Kirigami.Theme.highlightColor.r, Kirigami.Theme.highlightColor.g, Kirigami.Theme.highlightColor.b, 0.24)
readonly property color dropFeedbackColor: Qt.rgba(Kirigami.Theme.highlightColor.r, Kirigami.Theme.highlightColor.g, Kirigami.Theme.highlightColor.b, 0.28)
onActiveFocusChanged: { onActiveFocusChanged: {
if (activeFocus) { if (activeFocus) {
@ -107,7 +109,7 @@ Item {
Rectangle { Rectangle {
id: settingsViewBackground id: settingsViewBackground
anchors.fill: parent anchors.fill: parent
color: Qt.rgba(255, 255, 255, 0.2) color: root.editFeedbackColor
opacity: folio.HomeScreenState.settingsOpenProgress opacity: folio.HomeScreenState.settingsOpenProgress
radius: Kirigami.Units.largeSpacing radius: Kirigami.Units.largeSpacing
} }
@ -152,7 +154,7 @@ Item {
pageModel.canAddDelegate(dropPosition.pageRow, dropPosition.pageColumn, dropDelegate) pageModel.canAddDelegate(dropPosition.pageRow, dropPosition.pageColumn, dropDelegate)
radius: Kirigami.Units.cornerRadius radius: Kirigami.Units.cornerRadius
color: Qt.rgba(255, 255, 255, 0.3) color: root.dropFeedbackColor
x: dropPosition.pageColumn * folio.HomeScreenState.pageCellWidth x: dropPosition.pageColumn * folio.HomeScreenState.pageCellWidth
y: dropPosition.pageRow * folio.HomeScreenState.pageCellHeight y: dropPosition.pageRow * folio.HomeScreenState.pageCellHeight

3
containments/homescreens/folio/qml/PlaceholderDelegate.qml
View file

@ -12,6 +12,7 @@ import "./delegate"
Item { Item {
id: root id: root
property Folio.HomeScreen folio property Folio.HomeScreen folio
readonly property color placeholderColor: Qt.rgba(Kirigami.Theme.highlightColor.r, Kirigami.Theme.highlightColor.g, Kirigami.Theme.highlightColor.b, 0.28)
width: folio.HomeScreenState.pageCellWidth width: folio.HomeScreenState.pageCellWidth
height: folio.HomeScreenState.pageCellHeight height: folio.HomeScreenState.pageCellHeight
@ -24,7 +25,7 @@ Item {
// icon position placement // icon position placement
Rectangle { Rectangle {
id: loader id: loader
color: Qt.rgba(255, 255, 255, 0.3) color: root.placeholderColor
radius: Kirigami.Units.cornerRadius radius: Kirigami.Units.cornerRadius
Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom

8
containments/homescreens/folio/qml/RunningAppsPanel.qml
View file

@ -6,6 +6,7 @@ import QtQuick.Layouts
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 as MobileShell
import org.kde.taskmanager as TaskManager import org.kde.taskmanager as TaskManager
import plasma.applet.org.kde.plasma.mobile.homescreen.folio as Folio import plasma.applet.org.kde.plasma.mobile.homescreen.folio as Folio
@ -16,6 +17,7 @@ Item {
required property var folio required property var folio
readonly property bool hasTasks: allTasksModel.count > 0 readonly property bool hasTasks: allTasksModel.count > 0
readonly property int shortAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.EffectsFast)
property bool sortByName: false property bool sortByName: false
property int dragTargetDesktopIndex: -1 property int dragTargetDesktopIndex: -1
property string pendingMoveTaskKey: "" property string pendingMoveTaskKey: ""
@ -280,10 +282,10 @@ Item {
: root.mixColor(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.14) : root.mixColor(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.14)
Behavior on color { Behavior on color {
ColorAnimation { duration: Kirigami.Units.shortDuration; easing.type: Easing.OutCubic } MobileShell.MotionColorAnimation { type: MobileShell.Motion.EffectsFast; duration: root.shortAnimationDuration }
} }
Behavior on scale { Behavior on scale {
NumberAnimation { duration: Kirigami.Units.shortDuration; easing.type: Easing.OutCubic } MobileShell.MotionNumberAnimation { type: MobileShell.Motion.EffectsFast; duration: root.shortAnimationDuration }
} }
} }
@ -509,7 +511,7 @@ Item {
: root.mixColor(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.12) : root.mixColor(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.12)
Behavior on color { Behavior on color {
ColorAnimation { duration: Kirigami.Units.shortDuration; easing.type: Easing.OutCubic } MobileShell.MotionColorAnimation { type: MobileShell.Motion.EffectsFast; duration: root.shortAnimationDuration }
} }
} }

4
containments/homescreens/folio/qml/RunningAppsPanelButton.qml
View file

@ -5,6 +5,7 @@ import QtQuick
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 as MobileShell
MouseArea { MouseArea {
id: button id: button
@ -12,6 +13,7 @@ MouseArea {
property string iconName property string iconName
property string toolTipText property string toolTipText
property bool checked: false property bool checked: false
readonly property int shortAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.EffectsFast)
signal triggered() signal triggered()
@ -43,7 +45,7 @@ MouseArea {
: "transparent" : "transparent"
Behavior on color { Behavior on color {
ColorAnimation { duration: Kirigami.Units.shortDuration; easing.type: Easing.OutCubic } MobileShell.MotionColorAnimation { type: MobileShell.Motion.EffectsFast; duration: button.shortAnimationDuration }
} }
} }

10
containments/homescreens/folio/qml/WidgetDragItem.qml
View file

@ -11,6 +11,7 @@ import org.kde.plasma.core as PlasmaCore
import org.kde.ksvg 1.0 as KSvg import org.kde.ksvg 1.0 as KSvg
import org.kde.plasma.components 3.0 as PC3 import org.kde.plasma.components 3.0 as PC3
import org.kde.plasma.private.mobileshell as MobileShell
import plasma.applet.org.kde.plasma.mobile.homescreen.folio as Folio import plasma.applet.org.kde.plasma.mobile.homescreen.folio as Folio
import './delegate' import './delegate'
@ -31,6 +32,7 @@ Item {
&& folio.HomeScreenState.dragState.dropDelegate.type === Folio.FolioDelegate.Widget && folio.HomeScreenState.dragState.dropDelegate.type === Folio.FolioDelegate.Widget
&& folio.HomeScreenState.dragState.dropDelegate.widget.visualApplet && folio.HomeScreenState.dragState.dropDelegate.widget.visualApplet
readonly property bool dropAnimationRunning: dragXAnim.running || dragYAnim.running readonly property bool dropAnimationRunning: dragXAnim.running || dragYAnim.running
readonly property int dropAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.EffectsDefault)
visible: false visible: false
x: Math.round(folio.HomeScreenState.delegateDragX) x: Math.round(folio.HomeScreenState.delegateDragX)
@ -52,8 +54,8 @@ Item {
XAnimator on x { XAnimator on x {
id: dragXAnim id: dragXAnim
running: false running: false
duration: Kirigami.Units.longDuration duration: root.dropAnimationDuration
easing.type: Easing.OutCubic easing.type: MobileShell.Motion.easing(MobileShell.Motion.EffectsDefault)
onFinished: { onFinished: {
root.visible = false; root.visible = false;
root.widget = null; root.widget = null;
@ -65,8 +67,8 @@ Item {
YAnimator on y { YAnimator on y {
id: dragYAnim id: dragYAnim
running: false running: false
duration: Kirigami.Units.longDuration duration: root.dropAnimationDuration
easing.type: Easing.OutCubic easing.type: MobileShell.Motion.easing(MobileShell.Motion.EffectsDefault)
onFinished: { onFinished: {
root.visible = false; root.visible = false;
root.widget = null; root.widget = null;

14
containments/homescreens/folio/qml/delegate/AbstractDelegate.qml
View file

@ -32,16 +32,19 @@ Folio.DelegateTouchArea {
// grow/shrink animation // grow/shrink animation
property real scaleAmount: 1 property real scaleAmount: 1
property bool clickRequested: false property bool clickRequested: false
readonly property int pressAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.Press)
readonly property real pressedScale: MobileShell.Motion.pressScaleIn
function keyboardFocus() { function keyboardFocus() {
delegateWrapper.forceActiveFocus(); delegateWrapper.forceActiveFocus();
} }
NumberAnimation on scaleAmount { MobileShell.MotionNumberAnimation on scaleAmount {
id: shrinkAnim id: shrinkAnim
type: MobileShell.Motion.Press
running: false running: false
duration: ShellSettings.Settings.animationsEnabled ? 80 : 1 duration: root.pressAnimationDuration
to: ShellSettings.Settings.animationsEnabled ? 0.8 : 1 to: root.pressedScale
onFinished: { onFinished: {
if (!root.pressed) { if (!root.pressed) {
growAnim.restart(); growAnim.restart();
@ -49,10 +52,11 @@ Folio.DelegateTouchArea {
} }
} }
NumberAnimation on scaleAmount { MobileShell.MotionNumberAnimation on scaleAmount {
id: growAnim id: growAnim
type: MobileShell.Motion.Press
running: false running: false
duration: ShellSettings.Settings.animationsEnabled ? 80 : 1 duration: root.pressAnimationDuration
to: 1 to: 1
onFinished: { onFinished: {
if (root.clickRequested) { if (root.clickRequested) {

14
containments/homescreens/folio/qml/delegate/AppDelegate.qml
View file

@ -26,6 +26,8 @@ AbstractDelegate {
property bool turnToFolder: false property bool turnToFolder: false
property bool turnToFolderAnimEnabled: false property bool turnToFolderAnimEnabled: false
readonly property int turnToFolderAnimationDuration: root.turnToFolderAnimEnabled ? MobileShell.Motion.duration(MobileShell.Motion.Standard) : 0
readonly property color folderFeedbackColor: Qt.rgba(Kirigami.Theme.highlightColor.r, Kirigami.Theme.highlightColor.g, Kirigami.Theme.highlightColor.b, 0.28)
function launchApp() { function launchApp() {
if (!application) { if (!application) {
@ -59,7 +61,7 @@ AbstractDelegate {
Rectangle { Rectangle {
id: rect id: rect
radius: Kirigami.Units.cornerRadius radius: Kirigami.Units.cornerRadius
color: Qt.rgba(255, 255, 255, 0.3) color: root.folderFeedbackColor
anchors.fill: parent anchors.fill: parent
Component.onCompleted: { Component.onCompleted: {
@ -69,15 +71,15 @@ AbstractDelegate {
} }
opacity: root.turnToFolder ? 1 : 0 opacity: root.turnToFolder ? 1 : 0
property real scaleAmount: root.turnToFolder ? 1.2 : 1.0 property real scaleAmount: root.turnToFolder ? 1.08 : 1.0
Behavior on scaleAmount { Behavior on scaleAmount {
enabled: root.turnToFolderAnimEnabled enabled: root.turnToFolderAnimEnabled
NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.InOutQuad } MobileShell.MotionNumberAnimation { type: MobileShell.Motion.Standard; duration: root.turnToFolderAnimationDuration }
} }
Behavior on opacity { Behavior on opacity {
enabled: root.turnToFolderAnimEnabled enabled: root.turnToFolderAnimEnabled
NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.InOutQuad } MobileShell.MotionNumberAnimation { type: MobileShell.Motion.Standard; duration: root.turnToFolderAnimationDuration }
} }
transform: Scale { transform: Scale {
@ -95,10 +97,10 @@ AbstractDelegate {
anchors.fill: parent anchors.fill: parent
source: root.application ? root.application.icon : "" source: root.application ? root.application.icon : ""
property real scaleAmount: root.turnToFolder ? 0.3 : 1.0 property real scaleAmount: root.turnToFolder ? 0.42 : 1.0
Behavior on scaleAmount { Behavior on scaleAmount {
enabled: root.turnToFolderAnimEnabled enabled: root.turnToFolderAnimEnabled
NumberAnimation { duration: root.turnToFolderAnimEnabled ? Kirigami.Units.longDuration : 0; easing.type: Easing.InOutQuad } MobileShell.MotionNumberAnimation { type: MobileShell.Motion.Standard; duration: root.turnToFolderAnimationDuration }
} }
transform: Scale { transform: Scale {

8
containments/homescreens/folio/qml/delegate/DelegateFolderIcon.qml
View file

@ -19,6 +19,8 @@ Item {
property Folio.FolioApplicationFolder folder property Folio.FolioApplicationFolder folder
property bool expandBackground: false property bool expandBackground: false
readonly property int longAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.Standard)
readonly property color folderFeedbackColor: Qt.rgba(Kirigami.Theme.highlightColor.r, Kirigami.Theme.highlightColor.g, Kirigami.Theme.highlightColor.b, 0.28)
height: folio.FolioSettings.delegateIconSize height: folio.FolioSettings.delegateIconSize
width: folio.FolioSettings.delegateIconSize width: folio.FolioSettings.delegateIconSize
@ -26,7 +28,7 @@ Item {
Rectangle { Rectangle {
id: rect id: rect
radius: Kirigami.Units.cornerRadius radius: Kirigami.Units.cornerRadius
color: Qt.rgba(255, 255, 255, 0.3) color: root.folderFeedbackColor
anchors.fill: parent anchors.fill: parent
Component.onCompleted: { Component.onCompleted: {
@ -35,9 +37,9 @@ Item {
} }
} }
property real scaleAmount: root.expandBackground ? 1.2 : 1.0 property real scaleAmount: root.expandBackground ? 1.08 : 1.0
Behavior on scaleAmount { NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.InOutQuad } } Behavior on scaleAmount { MobileShell.MotionNumberAnimation { type: MobileShell.Motion.Standard; duration: root.longAnimationDuration } }
transform: Scale { transform: Scale {
origin.x: root.width / 2 origin.x: root.width / 2

3
containments/homescreens/folio/qml/delegate/WidgetDelegate.qml
View file

@ -28,6 +28,7 @@ Folio.WidgetContainer {
readonly property real bottomWidgetBackgroundPadding: widgetBackground.margins.bottom readonly property real bottomWidgetBackgroundPadding: widgetBackground.margins.bottom
readonly property real leftWidgetBackgroundPadding: widgetBackground.margins.left readonly property real leftWidgetBackgroundPadding: widgetBackground.margins.left
readonly property real rightWidgetBackgroundPadding: widgetBackground.margins.right readonly property real rightWidgetBackgroundPadding: widgetBackground.margins.right
readonly property color placeholderColor: Qt.rgba(Kirigami.Theme.highlightColor.r, Kirigami.Theme.highlightColor.g, Kirigami.Theme.highlightColor.b, 0.28)
implicitWidth: (widget ? widget.gridWidth : 0) * folio.HomeScreenState.pageCellWidth implicitWidth: (widget ? widget.gridWidth : 0) * folio.HomeScreenState.pageCellWidth
implicitHeight: (widget ? widget.gridHeight : 0) * folio.HomeScreenState.pageCellHeight implicitHeight: (widget ? widget.gridHeight : 0) * folio.HomeScreenState.pageCellHeight
@ -94,7 +95,7 @@ Folio.WidgetContainer {
id: temporaryBackground id: temporaryBackground
anchors.fill: parent anchors.fill: parent
visible: root.widget && !root.widget.applet visible: root.widget && !root.widget.applet
color: Qt.rgba(255, 255, 255, 0.3) color: root.placeholderColor
radius: Kirigami.Units.cornerRadius radius: Kirigami.Units.cornerRadius
} }

6
containments/homescreens/folio/qml/delegate/WidgetDelegateConfig.qml
View file

@ -8,6 +8,7 @@ import Qt5Compat.GraphicalEffects
import org.kde.kirigami as Kirigami 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.ksvg 1.0 as KSvg import org.kde.ksvg 1.0 as KSvg
import org.kde.plasma.components 3.0 as PC3 import org.kde.plasma.components 3.0 as PC3
@ -41,6 +42,7 @@ Item {
signal removeRequested() signal removeRequested()
signal closed() signal closed()
readonly property int longAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.EffectsDefault)
function startOpen() { function startOpen() {
// prevent config overlay if lock layout is enabled // prevent config overlay if lock layout is enabled
@ -69,7 +71,7 @@ Item {
// in case this gets stuck open over the homescreen, just close on tap // in case this gets stuck open over the homescreen, just close on tap
onClicked: close() onClicked: close()
NumberAnimation on opacity { id: configOverlayOpacityAnim; duration: Kirigami.Units.longDuration } MobileShell.MotionNumberAnimation on opacity { id: configOverlayOpacityAnim; type: MobileShell.Motion.EffectsDefault; duration: root.longAnimationDuration }
function open() { function open() {
configOverlayOpacityAnim.to = 1; configOverlayOpacityAnim.to = 1;
@ -133,7 +135,7 @@ Item {
QQC2.Overlay.modal: Item {} QQC2.Overlay.modal: Item {}
exit: Transition { exit: Transition {
NumberAnimation { property: "opacity"; duration: Kirigami.Units.longDuration; from: 1.0; to: 0.0 } MobileShell.MotionNumberAnimation { property: "opacity"; type: MobileShell.Motion.EffectsDefault; duration: root.longAnimationDuration; from: 1.0; to: 0.0 }
} }
Connections { Connections {

13
containments/homescreens/folio/qml/main.qml
View file

@ -34,6 +34,7 @@ import "./private"
ContainmentItem { ContainmentItem {
id: root id: root
property var folio: root.plasmoid property var folio: root.plasmoid
readonly property int shortAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.EffectsFast)
// Tracks whether the Game Center grid is visible within gaming mode. // Tracks whether the Game Center grid is visible within gaming mode.
// If gaming mode is already enabled at startup, open it immediately so // If gaming mode is already enabled at startup, open it immediately so
@ -295,6 +296,8 @@ ContainmentItem {
// maximized. The reveal strip at the screen edge brings it back. // maximized. The reveal strip at the screen edge brings it back.
property real dockOffset: 0 property real dockOffset: 0
readonly property real dockHeight: MobileShell.Constants.convergenceDockHeight readonly property real dockHeight: MobileShell.Constants.convergenceDockHeight
readonly property int dockAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.SpatialDefault)
readonly property int dockFadeDuration: MobileShell.Motion.duration(MobileShell.Motion.EffectsFast)
// Height of the input-receive strip kept at the screen edge when // Height of the input-receive strip kept at the screen edge when
// the dock is hidden. Matches the navigation panel convention. // the dock is hidden. Matches the navigation panel convention.
@ -365,14 +368,14 @@ ContainmentItem {
} }
Behavior on dockOffset { Behavior on dockOffset {
NumberAnimation { MobileShell.MotionNumberAnimation {
easing.type: Easing.InOutCubic type: MobileShell.Motion.SpatialDefault
duration: Kirigami.Units.longDuration duration: dockOverlay.dockAnimationDuration
} }
} }
Behavior on opacity { Behavior on opacity {
NumberAnimation { duration: Kirigami.Units.shortDuration; easing.type: Easing.InOutQuad } MobileShell.MotionNumberAnimation { type: MobileShell.Motion.EffectsFast; duration: dockOverlay.dockFadeDuration }
} }
Rectangle { Rectangle {
@ -847,7 +850,7 @@ ContainmentItem {
border.color: Qt.rgba(1, 1, 1, 0.2) border.color: Qt.rgba(1, 1, 1, 0.2)
Behavior on opacity { Behavior on opacity {
NumberAnimation { duration: Kirigami.Units.shortDuration; easing.type: Easing.InOutQuad } MobileShell.MotionNumberAnimation { type: MobileShell.Motion.EffectsFast; duration: root.shortAnimationDuration }
} }
implicitWidth: hintText.implicitWidth + Kirigami.Units.gridUnit * 2 implicitWidth: hintText.implicitWidth + Kirigami.Units.gridUnit * 2

9
containments/homescreens/folio/qml/private/WidgetResizeHandle.qml
View file

@ -4,6 +4,7 @@
import QtQuick import QtQuick
import org.kde.kirigami as Kirigami import org.kde.kirigami as Kirigami
import org.kde.plasma.private.mobileshell as MobileShell
import '../delegate' import '../delegate'
@ -13,6 +14,8 @@ MouseArea {
width: 10 + touchPadding * 2 width: 10 + touchPadding * 2
readonly property real touchPadding: 20 readonly property real touchPadding: 20
readonly property int pressAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.EffectsSlow)
readonly property color resizeHandleColor: Kirigami.Theme.highlightColor
property int orientation property int orientation
@ -79,14 +82,14 @@ MouseArea {
id: rect id: rect
anchors.fill: parent anchors.fill: parent
anchors.margins: root.touchPadding anchors.margins: root.touchPadding
color: 'white' color: root.resizeHandleColor
radius: width / 2 radius: width / 2
transform: Scale { transform: Scale {
property real scaleFactor: root.pressed ? 1.2 : 1.0 property real scaleFactor: root.pressed ? MobileShell.Motion.pressScaleOut : 1.0
Behavior on scaleFactor { Behavior on scaleFactor {
NumberAnimation { duration: Kirigami.Units.veryLongDuration; easing.type: Easing.OutExpo } MobileShell.MotionNumberAnimation { type: MobileShell.Motion.EffectsSlow; duration: root.pressAnimationDuration }
} }
xScale: scaleFactor xScale: scaleFactor

29
containments/homescreens/folio/qml/private/WidgetResizeHandleFrame.qml
View file

@ -7,6 +7,7 @@ import QtQuick.Controls as QQC2
import Qt5Compat.GraphicalEffects import Qt5Compat.GraphicalEffects
import org.kde.kirigami as Kirigami import org.kde.kirigami as Kirigami
import org.kde.plasma.private.mobileshell as MobileShell
import plasma.applet.org.kde.plasma.mobile.homescreen.folio as Folio import plasma.applet.org.kde.plasma.mobile.homescreen.folio as Folio
import '../delegate' import '../delegate'
@ -41,6 +42,8 @@ Item {
property int widgetGridHeightAfterDrag: 0 property int widgetGridHeightAfterDrag: 0
property var lockDrag: null property var lockDrag: null
readonly property int resizeAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.SpatialDefault)
readonly property color resizeAccentColor: Qt.rgba(Kirigami.Theme.highlightColor.r, Kirigami.Theme.highlightColor.g, Kirigami.Theme.highlightColor.b, 0.85)
property alias handleContainer: handleContainer property alias handleContainer: handleContainer
@ -142,35 +145,35 @@ Item {
Item { Item {
id: handleContainer id: handleContainer
NumberAnimation on width { MobileShell.MotionNumberAnimation on width {
id: widthAnim id: widthAnim
duration: Kirigami.Units.longDuration type: MobileShell.Motion.SpatialDefault
easing.type: Easing.InOutQuad duration: root.resizeAnimationDuration
} }
NumberAnimation on height { MobileShell.MotionNumberAnimation on height {
id: heightAnim id: heightAnim
duration: Kirigami.Units.longDuration type: MobileShell.Motion.SpatialDefault
easing.type: Easing.InOutQuad duration: root.resizeAnimationDuration
} }
NumberAnimation on x { MobileShell.MotionNumberAnimation on x {
id: xAnim id: xAnim
duration: Kirigami.Units.longDuration type: MobileShell.Motion.SpatialDefault
easing.type: Easing.InOutQuad duration: root.resizeAnimationDuration
} }
NumberAnimation on y { MobileShell.MotionNumberAnimation on y {
id: yAnim id: yAnim
duration: Kirigami.Units.longDuration type: MobileShell.Motion.SpatialDefault
easing.type: Easing.InOutQuad duration: root.resizeAnimationDuration
} }
} }
Rectangle { Rectangle {
id: resizeOutline id: resizeOutline
color: 'transparent' color: 'transparent'
border.color: 'white' border.color: root.resizeAccentColor
radius: Kirigami.Units.cornerRadius radius: Kirigami.Units.cornerRadius
border.width: 1 border.width: 1

9
containments/homescreens/folio/qml/settings/AppletListDelegate.qml
View file

@ -18,8 +18,11 @@ Item {
property Folio.HomeScreen folio property Folio.HomeScreen folio
readonly property string pluginName: model.pluginName readonly property string pluginName: model.pluginName
readonly property int pressAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.Press)
readonly property real pressedScale: MobileShell.Motion.pressScaleIn
readonly property color hoverColor: Qt.rgba(Kirigami.Theme.highlightColor.r, Kirigami.Theme.highlightColor.g, Kirigami.Theme.highlightColor.b, 0.22)
property real zoomScale: (model.isSupported && mouseArea.pressed) ? 0.8 : 1 property real zoomScale: (model.isSupported && mouseArea.pressed) ? pressedScale : 1
transform: Scale { transform: Scale {
origin.x: delegate.width / 2; origin.x: delegate.width / 2;
origin.y: delegate.height / 2; origin.y: delegate.height / 2;
@ -27,7 +30,7 @@ Item {
yScale: delegate.zoomScale yScale: delegate.zoomScale
} }
Behavior on zoomScale { NumberAnimation { duration: 80 } } Behavior on zoomScale { MobileShell.MotionNumberAnimation { type: MobileShell.Motion.Press; duration: delegate.pressAnimationDuration } }
// Placeholder item used for implement drag & drop // Placeholder item used for implement drag & drop
Item { Item {
@ -72,7 +75,7 @@ Item {
Rectangle { Rectangle {
id: background id: background
color: Qt.rgba(255, 255, 255, 0.3) color: root.hoverColor
visible: model.isSupported && mouseArea.containsMouse visible: model.isSupported && mouseArea.containsMouse
radius: Kirigami.Units.cornerRadius radius: Kirigami.Units.cornerRadius
anchors.fill: parent anchors.fill: parent

22
containments/homescreens/halcyon/qml/FavoritesAppDelegate.qml
View file

@ -12,7 +12,6 @@ import org.kde.kquickcontrolsaddons 2.0
import org.kde.plasma.private.containmentlayoutmanager 1.0 as ContainmentLayoutManager import org.kde.plasma.private.containmentlayoutmanager 1.0 as ContainmentLayoutManager
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.private.mobileshell.state as MobileShellState import org.kde.plasma.private.mobileshell.state as MobileShellState
import org.kde.plasma.plasmoid import org.kde.plasma.plasmoid
@ -39,6 +38,9 @@ Item {
readonly property string applicationName: application ? application.name : "" readonly property string applicationName: application ? application.name : ""
readonly property string applicationStorageId: application ? application.storageId : "" readonly property string applicationStorageId: application ? application.storageId : ""
readonly property string applicationIcon: application ? application.icon : "" readonly property string applicationIcon: application ? application.icon : ""
readonly property int pressAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.Press)
readonly property color pressFeedbackColor: Qt.rgba(Kirigami.Theme.highlightColor.r, Kirigami.Theme.highlightColor.g, Kirigami.Theme.highlightColor.b, 0.18)
readonly property color folderFeedbackColor: Qt.rgba(Kirigami.Theme.highlightColor.r, Kirigami.Theme.highlightColor.g, Kirigami.Theme.highlightColor.b, 0.24)
signal folderOpenRequested() signal folderOpenRequested()
@ -142,11 +144,12 @@ Item {
property bool launchAppRequested: false property bool launchAppRequested: false
NumberAnimation on zoomScale { MobileShell.MotionNumberAnimation on zoomScale {
id: shrinkAnim id: shrinkAnim
type: MobileShell.Motion.Press
running: false running: false
duration: ShellSettings.Settings.animationsEnabled ? 80 : 1 duration: delegate.pressAnimationDuration
to: ShellSettings.Settings.animationsEnabled ? 0.95 : 1 to: MobileShell.Motion.pressScaleIn
onFinished: { onFinished: {
if (!mouseArea.pressed) { if (!mouseArea.pressed) {
growAnim.restart(); growAnim.restart();
@ -154,10 +157,11 @@ Item {
} }
} }
NumberAnimation on zoomScale { MobileShell.MotionNumberAnimation on zoomScale {
id: growAnim id: growAnim
type: MobileShell.Motion.Press
running: false running: false
duration: ShellSettings.Settings.animationsEnabled ? 80 : 1 duration: delegate.pressAnimationDuration
to: 1 to: 1
onFinished: { onFinished: {
if (mouseArea.launchAppRequested) { if (mouseArea.launchAppRequested) {
@ -188,7 +192,7 @@ Item {
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
radius: height / 2 radius: height / 2
color: mouseArea.pressed ? Qt.rgba(255, 255, 255, 0.2) : "transparent" color: mouseArea.pressed ? delegate.pressFeedbackColor : "transparent"
} }
RowLayout { RowLayout {
@ -263,7 +267,7 @@ Item {
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
anchors.margins: Kirigami.Units.smallSpacing anchors.margins: Kirigami.Units.smallSpacing
color: Qt.rgba(255, 255, 255, 0.2) color: delegate.folderFeedbackColor
radius: Kirigami.Units.cornerRadius radius: Kirigami.Units.cornerRadius
opacity: delegate.dragFolderAnimationProgress opacity: delegate.dragFolderAnimationProgress
@ -317,7 +321,7 @@ Item {
id: rect id: rect
anchors.fill: parent anchors.fill: parent
anchors.margins: Kirigami.Units.smallSpacing anchors.margins: Kirigami.Units.smallSpacing
color: Qt.rgba(255, 255, 255, 0.2) color: delegate.folderFeedbackColor
radius: Kirigami.Units.cornerRadius radius: Kirigami.Units.cornerRadius
transform: Scale { transform: Scale {

11
containments/homescreens/halcyon/qml/FavoritesGrid.qml
View file

@ -18,6 +18,7 @@ MobileShell.GridView {
id: root id: root
property MobileShell.MaskManager maskManager property MobileShell.MaskManager maskManager
required property var searchWidget required property var searchWidget
readonly property int shortAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.SpatialFast)
// don't set anchors.margins since we want everywhere to be draggable // don't set anchors.margins since we want everywhere to be draggable
required property bool twoColumn required property bool twoColumn
@ -198,11 +199,12 @@ MobileShell.GridView {
folderAnim.restart(); folderAnim.restart();
} }
NumberAnimation { MobileShell.MotionNumberAnimation {
id: folderAnim id: folderAnim
target: appDelegate target: appDelegate
properties: "dragFolderAnimationProgress" properties: "dragFolderAnimationProgress"
duration: Kirigami.Units.shortDuration type: MobileShell.Motion.SpatialFast
duration: root.shortAnimationDuration
} }
} }
@ -253,10 +255,11 @@ MobileShell.GridView {
// animations // animations
displaced: Transition { displaced: Transition {
NumberAnimation { MobileShell.MotionNumberAnimation {
id: transitionAnim id: transitionAnim
properties: "x,y" properties: "x,y"
easing.type: Easing.OutQuad type: MobileShell.Motion.SpatialFast
duration: root.shortAnimationDuration
} }
} }

32
containments/homescreens/halcyon/qml/FavoritesView.qml
View file

@ -11,7 +11,6 @@ import org.kde.draganddrop 2.0 as DragDrop
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
Item { Item {
id: root id: root
@ -26,6 +25,7 @@ Item {
readonly property real cellWidth: twoColumn ? (root.width - leftMargin - rightMargin) / 2 : (root.width - leftMargin - rightMargin) readonly property real cellWidth: twoColumn ? (root.width - leftMargin - rightMargin) / 2 : (root.width - leftMargin - rightMargin)
readonly property real cellHeight: delegateHeight readonly property real cellHeight: delegateHeight
readonly property int longAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.SpatialDefault)
readonly property real leftMargin: Math.round(width * 0.1) readonly property real leftMargin: Math.round(width * 0.1)
readonly property real rightMargin: Math.round(width * 0.1) readonly property real rightMargin: Math.round(width * 0.1)
@ -150,35 +150,35 @@ Item {
} }
} }
NumberAnimation { MobileShell.MotionNumberAnimation {
id: goToBeginningAnim id: goToBeginningAnim
target: favoritesGrid target: favoritesGrid
properties: 'contentY' properties: 'contentY'
to: favoritesGrid.originY to: favoritesGrid.originY
duration: Kirigami.Units.longDuration type: MobileShell.Motion.SpatialDefault
easing.type: Easing.InOutQuad duration: root.longAnimationDuration
} }
SequentialAnimation { SequentialAnimation {
id: openFolderAnim id: openFolderAnim
ParallelAnimation { ParallelAnimation {
NumberAnimation { MobileShell.MotionNumberAnimation {
target: favoritesGrid target: favoritesGrid
properties: 'openFolderProgress' properties: 'openFolderProgress'
duration: ShellSettings.Settings.animationsEnabled ? Kirigami.Units.longDuration : 0 type: MobileShell.Motion.SpatialDefault
duration: root.longAnimationDuration
to: 1 to: 1
easing.type: Easing.InOutQuad
} }
} }
ParallelAnimation { ParallelAnimation {
NumberAnimation { MobileShell.MotionNumberAnimation {
target: folderGrid target: folderGrid
properties: 'openProgress' properties: 'openProgress'
duration: ShellSettings.Settings.animationsEnabled ? Kirigami.Units.longDuration : 0 type: MobileShell.Motion.SpatialDefault
duration: root.longAnimationDuration
to: 1 to: 1
easing.type: Easing.InOutQuad
} }
} }
} }
@ -187,22 +187,22 @@ Item {
id: closeFolderAnim id: closeFolderAnim
ParallelAnimation { ParallelAnimation {
NumberAnimation { MobileShell.MotionNumberAnimation {
target: folderGrid target: folderGrid
properties: 'openProgress' properties: 'openProgress'
duration: ShellSettings.Settings.animationsEnabled ? Kirigami.Units.longDuration : 0 type: MobileShell.Motion.SpatialDefault
duration: root.longAnimationDuration
to: 0 to: 0
easing.type: Easing.InOutQuad
} }
} }
ParallelAnimation { ParallelAnimation {
NumberAnimation { MobileShell.MotionNumberAnimation {
target: favoritesGrid target: favoritesGrid
properties: 'openFolderProgress' properties: 'openFolderProgress'
duration: ShellSettings.Settings.animationsEnabled ? Kirigami.Units.longDuration : 0 type: MobileShell.Motion.SpatialDefault
duration: root.longAnimationDuration
to: 0 to: 0
easing.type: Easing.InOutQuad
} }
} }
} }

6
containments/homescreens/halcyon/qml/FolderGrid.qml
View file

@ -17,6 +17,7 @@ import plasma.applet.org.kde.plasma.mobile.homescreen.halcyon as Halcyon
MobileShell.GridView { MobileShell.GridView {
id: root id: root
property Halcyon.ApplicationFolder folder: null property Halcyon.ApplicationFolder folder: null
readonly property int shortAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.SpatialFast)
property string folderName: folder ? folder.name : "" property string folderName: folder ? folder.name : ""
property var folderModel: folder ? folder.applications : [] property var folderModel: folder ? folder.applications : []
@ -223,9 +224,10 @@ MobileShell.GridView {
// animations // animations
displaced: Transition { displaced: Transition {
NumberAnimation { MobileShell.MotionNumberAnimation {
properties: "x,y" properties: "x,y"
easing.type: Easing.OutQuad type: MobileShell.Motion.SpatialFast
duration: root.shortAnimationDuration
} }
} }
} }

15
containments/homescreens/halcyon/qml/GridAppDelegate.qml
View file

@ -15,7 +15,6 @@ import org.kde.kquickcontrolsaddons
import org.kde.plasma.plasmoid import org.kde.plasma.plasmoid
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 plasma.applet.org.kde.plasma.mobile.homescreen.halcyon as Halcyon import plasma.applet.org.kde.plasma.mobile.homescreen.halcyon as Halcyon
import org.kde.kirigami as Kirigami import org.kde.kirigami as Kirigami
@ -31,6 +30,8 @@ MouseArea {
property alias iconItem: icon property alias iconItem: icon
readonly property real margins: Math.floor(width * 0.2) readonly property real margins: Math.floor(width * 0.2)
readonly property int pressAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.Press)
readonly property real pressedScale: MobileShell.Motion.pressScaleIn
signal launch(int x, int y, var source, string title, string storageId) signal launch(int x, int y, var source, string title, string storageId)
@ -82,11 +83,12 @@ MouseArea {
property bool launchAppRequested: false property bool launchAppRequested: false
NumberAnimation on zoomScale { MobileShell.MotionNumberAnimation on zoomScale {
id: shrinkAnim id: shrinkAnim
type: MobileShell.Motion.Press
running: false running: false
duration: ShellSettings.Settings.animationsEnabled ? 80 : 1 duration: delegate.pressAnimationDuration
to: ShellSettings.Settings.animationsEnabled ? 0.8 : 1 to: delegate.pressedScale
onFinished: { onFinished: {
if (!delegate.pressed) { if (!delegate.pressed) {
growAnim.restart(); growAnim.restart();
@ -94,10 +96,11 @@ MouseArea {
} }
} }
NumberAnimation on zoomScale { MobileShell.MotionNumberAnimation on zoomScale {
id: growAnim id: growAnim
type: MobileShell.Motion.Press
running: false running: false
duration: ShellSettings.Settings.animationsEnabled ? 80 : 1 duration: delegate.pressAnimationDuration
to: 1 to: 1
onFinished: { onFinished: {
if (delegate.launchAppRequested) { if (delegate.launchAppRequested) {

7
containments/homescreens/halcyon/qml/GridAppList.qml
View file

@ -35,6 +35,7 @@ MobileShell.GridView {
readonly property int reservedSpaceForLabel: metrics.height readonly property int reservedSpaceForLabel: metrics.height
readonly property real effectiveContentWidth: width - leftMargin - rightMargin readonly property real effectiveContentWidth: width - leftMargin - rightMargin
readonly property int longAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.SpatialDefault)
cellWidth: gridView.effectiveContentWidth / Math.min(Math.floor(effectiveContentWidth / (Kirigami.Units.iconSizes.huge + Kirigami.Units.largeSpacing * 2)), 8) cellWidth: gridView.effectiveContentWidth / Math.min(Math.floor(effectiveContentWidth / (Kirigami.Units.iconSizes.huge + Kirigami.Units.largeSpacing * 2)), 8)
cellHeight: cellWidth + reservedSpaceForLabel cellHeight: cellWidth + reservedSpaceForLabel
@ -46,11 +47,11 @@ MobileShell.GridView {
goToBeginningAnim.restart(); goToBeginningAnim.restart();
} }
NumberAnimation on contentY { MobileShell.MotionNumberAnimation on contentY {
id: goToBeginningAnim id: goToBeginningAnim
type: MobileShell.Motion.SpatialDefault
to: gridView.originY to: gridView.originY
duration: Kirigami.Units.longDuration duration: gridView.longAnimationDuration
easing.type: Easing.InOutQuad
} }
model: Halcyon.ApplicationListModel model: Halcyon.ApplicationListModel

3
containments/homescreens/halcyon/qml/HomeScreen.qml
View file

@ -20,6 +20,7 @@ import "settings" as Settings
Item { Item {
id: root id: root
property MobileShell.MaskManager maskManager property MobileShell.MaskManager maskManager
readonly property int longAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.EffectsDefault)
required property real topMargin required property real topMargin
required property real bottomMargin required property real bottomMargin
@ -37,7 +38,7 @@ Item {
signal wallpaperSelectorTriggered() signal wallpaperSelectorTriggered()
Behavior on settingsOpenFactor { Behavior on settingsOpenFactor {
NumberAnimation { duration: Kirigami.Units.longDuration } MobileShell.MotionNumberAnimation { type: MobileShell.Motion.EffectsDefault; duration: root.longAnimationDuration }
} }
function triggerHomescreen() { function triggerHomescreen() {

7
containments/homescreens/halcyon/qml/SearchWidget.qml
View file

@ -21,6 +21,7 @@ Item {
property real bottomPadding: 0 property real bottomPadding: 0
property real leftPadding: 0 property real leftPadding: 0
property real rightPadding: 0 property real rightPadding: 0
readonly property int longAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.SpatialDefault)
// Call when the gesture has started // Call when the gesture has started
function startGesture() { function startGesture() {
@ -110,10 +111,10 @@ Item {
} }
} }
NumberAnimation on contentY { MobileShell.MotionNumberAnimation on contentY {
id: anim id: anim
duration: Kirigami.Units.longDuration type: MobileShell.Motion.SpatialDefault
easing.type: Easing.OutQuad duration: root.longAnimationDuration
running: false running: false
onFinished: { onFinished: {
if (anim.to === flickable.openedContentY) { if (anim.to === flickable.openedContentY) {

5
containments/homescreens/halcyon/qml/main.qml
View file

@ -17,6 +17,7 @@ import plasma.applet.org.kde.plasma.mobile.homescreen.halcyon as Halcyon
ContainmentItem { ContainmentItem {
id: root id: root
readonly property int longAnimationDuration: MobileShell.Motion.duration(MobileShell.Motion.EffectsDefault)
Component.onCompleted: { Component.onCompleted: {
Plasmoid.settings.load(); Plasmoid.settings.load();
@ -88,7 +89,7 @@ ContainmentItem {
property real darkenBackgroundFactor: halcyonHomeScreen.page == 1 ? 1 : 0 property real darkenBackgroundFactor: halcyonHomeScreen.page == 1 ? 1 : 0
Behavior on darkenBackgroundFactor { Behavior on darkenBackgroundFactor {
NumberAnimation { duration: Kirigami.Units.longDuration } MobileShell.MotionNumberAnimation { type: MobileShell.Motion.EffectsDefault; duration: root.longAnimationDuration }
} }
Rectangle { Rectangle {
@ -103,7 +104,7 @@ ContainmentItem {
opacity: halcyonHomeScreen.settingsOpenFactor opacity: halcyonHomeScreen.settingsOpenFactor
anchors.fill: parent anchors.fill: parent
Behavior on color { Behavior on color {
ColorAnimation { duration: Kirigami.Units.longDuration } MobileShell.MotionColorAnimation { type: MobileShell.Motion.EffectsDefault; duration: root.longAnimationDuration }
} }
} }