settings window pages replace anims

Modules/Settings/Categories.qml

@@ -19,23 +19,26 @@ Item {
 	// Function to select category by key
 	function selectCategory(categoryKey: string) {
 		for (let i = 0; i < appearanceCats.count; i++) {
-			if (appearanceCats.get(i).key === categoryKey) {
+			const item = appearanceCats.get(i);
-				clayout.currentIndex = i;
+			if (item.key === categoryKey) {
-				root.content.currentCategory = categoryKey;
+				appearanceView.currentIndex = i;
+				root.content.setCategory(item.key, item._index);
 				return;
 			}
 		}
 		for (let i = 0; i < systemCats.count; i++) {
-			if (systemCats.get(i).key === categoryKey) {
+			const item = systemCats.get(i);
-				clayout.currentIndex = i;
+			if (item.key === categoryKey) {
-				root.content.currentCategory = categoryKey;
+				sysView.currentIndex = i;
+				root.content.setCategory(item.key, item._index);
 				return;
 			}
 		}
 		for (let i = 0; i < panelCats.count; i++) {
-			if (panelCats.get(i).key === categoryKey) {
+			const item = panelCats.get(i);
-				clayout.currentIndex = i;
+			if (item.key === categoryKey) {
-				root.content.currentCategory = categoryKey;
+				panelsView.currentIndex = i;
+				root.content.setCategory(item.key, item._index);
 				return;
 			}
 		}
@@ -44,56 +47,39 @@ Item {
 	implicitHeight: searchBar.implicitHeight + Appearance.spacing.smaller + clayout.contentHeight + clayout.anchors.margins * 2
 	implicitWidth: clayout.contentWidth + clayout.anchors.margins * 2
 
-	ListModel {
-		id: appearanceCats
-
-		ListElement {
-			icon: "wallpaper"
-			key: "wallpaper"
-			name: "Wallpaper"
-		}
-
-		ListElement {
-			icon: "screenshot_region"
-			key: "screenshot"
-			name: "Screenshot"
-		}
-
-		ListElement {
-			icon: "colors"
-			key: "appearance"
-			name: "Appearance"
-		}
-	}
-
 	ListModel {
 		id: systemCats
 
 		ListElement {
+			_index: 0
 			icon: "settings"
 			key: "general"
 			name: "General"
 		}
 
 		ListElement {
+			_index: 1
 			icon: "build_circle"
 			key: "services"
 			name: "Services"
 		}
 
 		ListElement {
+			_index: 2
 			icon: "notifications"
 			key: "notifications"
 			name: "Notifications"
 		}
 
 		ListElement {
+			_index: 3
 			icon: "handyman"
 			key: "utilities"
 			name: "Utilities"
 		}
 
 		ListElement {
+			_index: 4
 			icon: "cached"
 			key: "updates"
 			name: "Updates"
@@ -104,42 +90,73 @@ Item {
 		id: panelCats
 
 		ListElement {
+			_index: 5
 			icon: "settop_component"
 			key: "bar"
 			name: "Bar"
 		}
 
 		ListElement {
+			_index: 6
 			icon: "lock"
 			key: "lockscreen"
 			name: "Lockscreen"
 		}
 
 		ListElement {
+			_index: 7
 			icon: "view_sidebar"
 			key: "sidebar"
 			name: "Sidebar"
 		}
 
 		ListElement {
+			_index: 8
 			icon: "dashboard"
 			key: "dashboard"
 			name: "Dashboard"
 		}
 
 		ListElement {
+			_index: 9
 			icon: "display_settings"
 			key: "osd"
 			name: "On screen display"
 		}
 
 		ListElement {
+			_index: 10
 			icon: "rocket_launch"
 			key: "launcher"
 			name: "Launcher"
 		}
 	}
 
+	ListModel {
+		id: appearanceCats
+
+		ListElement {
+			_index: 11
+			icon: "wallpaper"
+			key: "wallpaper"
+			name: "Wallpaper"
+		}
+
+		ListElement {
+			_index: 12
+			icon: "screenshot_region"
+			key: "screenshot"
+			name: "Screenshot"
+		}
+
+		ListElement {
+			_index: 13
+			icon: "colors"
+			key: "appearance"
+			name: "Appearance"
+		}
+	}
+
 	CustomClippingRect {
 		anchors.fill: parent
 		color: DynamicColors.tPalette.m3surfaceContainer
@@ -259,19 +276,23 @@ Item {
 	component Category: CustomRect {
 		id: categoryItem
 
+		required property int _index
+		readonly property bool first: index === 0
 		required property string icon
 		required property int index
 		required property string key
+		readonly property bool last: index === view.model.count - 1
 		required property string name
+		readonly property bool selected: key === root.content.currentCategory
 		required property ListView view
 
-		bottomLeftRadius: key === root.content.currentCategory || index === view.model.count - 1 ? (layer.pressed ? (Appearance.rounding.extraSmall / 2) : Appearance.rounding.normal - clayout.anchors.margins) : (layer.pressed ? (Appearance.rounding.extraSmall / 2) : Appearance.rounding.extraSmall)
+		bottomLeftRadius: layer.pressed ? Appearance.rounding.smallest : selected || last ? Appearance.rounding.normal - clayout.anchors.margins : Appearance.rounding.extraSmall
-		bottomRightRadius: key === root.content.currentCategory || index === view.model.count - 1 ? (layer.pressed ? (Appearance.rounding.extraSmall / 2) : Appearance.rounding.normal - clayout.anchors.margins) : (layer.pressed ? (Appearance.rounding.extraSmall / 2) : Appearance.rounding.extraSmall)
+		bottomRightRadius: layer.pressed ? Appearance.rounding.smallest : selected || last ? Appearance.rounding.normal - clayout.anchors.margins : Appearance.rounding.extraSmall
-		color: key === root.content.currentCategory ? DynamicColors.palette.m3primary : DynamicColors.tPalette.m3surfaceContainer
+		color: selected ? DynamicColors.palette.m3primary : DynamicColors.tPalette.m3surfaceContainer
-		implicitHeight: 42
+		implicitHeight: 50
 		implicitWidth: 256
-		topLeftRadius: key === root.content.currentCategory || index === 0 ? (layer.pressed ? (Appearance.rounding.extraSmall / 2) : Appearance.rounding.normal - clayout.anchors.margins) : (layer.pressed ? (Appearance.rounding.extraSmall / 2) : Appearance.rounding.extraSmall)
+		topLeftRadius: layer.pressed ? Appearance.rounding.smallest : selected || first ? Appearance.rounding.normal - clayout.anchors.margins : Appearance.rounding.extraSmall
-		topRightRadius: key === root.content.currentCategory || index === 0 ? (layer.pressed ? (Appearance.rounding.extraSmall / 2) : Appearance.rounding.normal - clayout.anchors.margins) : (layer.pressed ? (Appearance.rounding.extraSmall / 2) : Appearance.rounding.extraSmall)
+		topRightRadius: layer.pressed ? Appearance.rounding.smallest : selected || first ? Appearance.rounding.normal - clayout.anchors.margins : Appearance.rounding.extraSmall
 
 		Behavior on bottomLeftRadius {
 			Anim {
@@ -307,6 +328,7 @@ Item {
 
 				Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
 				Layout.fillHeight: true
+				Layout.leftMargin: Appearance.padding.small
 				Layout.preferredWidth: icon.contentWidth
 				color: categoryItem.key === root.content.currentCategory ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 				fill: categoryItem.key === root.content.currentCategory ? 1 : 0
@@ -339,7 +361,7 @@ Item {
 			color: categoryItem.key === root.content.currentCategory ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 
 			onClicked: {
-				root.content.currentCategory = categoryItem.key;
+				root.content.setCategory(categoryItem.key, categoryItem._index);
 				categoryItem.view.currentIndex = categoryItem.index;
 			}
 		}

Modules/Settings/Content.qml

@@ -14,6 +14,8 @@ Item {
 	id: root
 
 	property string currentCategory: "general"
+	property int currentIndex: 0
+	property int lastIndex: 0
 	readonly property real nonAnimHeight: Math.floor(screen.height / 1.5) + viewWrapper.anchors.margins * 2
 	readonly property real nonAnimWidth: view.implicitWidth + Math.floor(screen.width / 2) + viewWrapper.anchors.margins * 2
 	property string pendingSection: ""
@@ -27,8 +29,9 @@ Item {
 		scrollTimer.restart();
 	}
 
-	function selectCategory(categoryKey: string) {
+	function setCategory(category: string, index: int): void {
-		layout.selectCategory(categoryKey);
+		currentIndex = index;
+		currentCategory = category;
 	}
 
 	implicitHeight: nonAnimHeight
@@ -50,35 +53,88 @@ Item {
 
 	Connections {
 		function onCurrentCategoryChanged() {
-			stack.pop();
+			if (root.currentCategory === "general") {
-			if (currentCategory === "general")
+				stack.replaceCurrentItem(general, [], StackView.PopTransition);
-				stack.push(general);
+				root.lastIndex = root.currentIndex;
-			else if (currentCategory === "wallpaper")
+			} else if (root.currentCategory === "wallpaper") {
-				stack.push(background);
+				if (root.currentIndex < root.lastIndex)
-			else if (currentCategory === "bar")
+					stack.replaceCurrentItem(background, [], StackView.PopTransition);
-				stack.push(bar);
+				else
-			else if (currentCategory === "appearance")
+					stack.replaceCurrentItem(background, [], StackView.PushTransition);
-				stack.push(appearance);
+				root.lastIndex = root.currentIndex;
-			else if (currentCategory === "lockscreen")
+			} else if (root.currentCategory === "bar") {
-				stack.push(lockscreen);
+				if (root.currentIndex < root.lastIndex)
-			else if (currentCategory === "services")
+					stack.replaceCurrentItem(bar, [], StackView.PopTransition);
-				stack.push(services);
+				else
-			else if (currentCategory === "notifications")
+					stack.replaceCurrentItem(bar, [], StackView.PushTransition);
-				stack.push(notifications);
+				root.lastIndex = root.currentIndex;
-			else if (currentCategory === "sidebar")
+			} else if (root.currentCategory === "appearance") {
-				stack.push(sidebar);
+				if (root.currentIndex < root.lastIndex)
-			else if (currentCategory === "utilities")
+					stack.replaceCurrentItem(appearance, [], StackView.PopTransition);
-				stack.push(utilities);
+				else
-			else if (currentCategory === "dashboard")
+					stack.replaceCurrentItem(appearance, [], StackView.PushTransition);
-				stack.push(dashboard);
+				root.lastIndex = root.currentIndex;
-			else if (currentCategory === "osd")
+			} else if (root.currentCategory === "lockscreen") {
-				stack.push(osd);
+				if (root.currentIndex < root.lastIndex)
-			else if (currentCategory === "launcher")
+					stack.replaceCurrentItem(lockscreen, [], StackView.PopTransition);
-				stack.push(launcher);
+				else
-			else if (currentCategory === "screenshot")
+					stack.replaceCurrentItem(lockscreen, [], StackView.PushTransition);
-				stack.push(screenshot);
+				root.lastIndex = root.currentIndex;
-			else if (currentCategory === "updates")
+			} else if (root.currentCategory === "services") {
-				stack.push(updates);
+				if (root.currentIndex < root.lastIndex)
+					stack.replaceCurrentItem(services, [], StackView.PopTransition);
+				else
+					stack.replaceCurrentItem(services, [], StackView.PushTransition);
+				root.lastIndex = root.currentIndex;
+			} else if (root.currentCategory === "notifications") {
+				if (root.currentIndex < root.lastIndex)
+					stack.replaceCurrentItem(notifications, [], StackView.PopTransition);
+				else
+					stack.replaceCurrentItem(notifications, [], StackView.PushTransition);
+				root.lastIndex = root.currentIndex;
+			} else if (root.currentCategory === "sidebar") {
+				if (root.currentIndex < root.lastIndex)
+					stack.replaceCurrentItem(sidebar, [], StackView.PopTransition);
+				else
+					stack.replaceCurrentItem(sidebar, [], StackView.PushTransition);
+				root.lastIndex = root.currentIndex;
+			} else if (root.currentCategory === "utilities") {
+				if (root.currentIndex < root.lastIndex)
+					stack.replaceCurrentItem(utilities, [], StackView.PopTransition);
+				else
+					stack.replaceCurrentItem(utilities, [], StackView.PushTransition);
+				root.lastIndex = root.currentIndex;
+			} else if (root.currentCategory === "dashboard") {
+				if (root.currentIndex < root.lastIndex)
+					stack.replaceCurrentItem(dashboard, [], StackView.PopTransition);
+				else
+					stack.replaceCurrentItem(dashboard, [], StackView.PushTransition);
+				root.lastIndex = root.currentIndex;
+			} else if (root.currentCategory === "osd") {
+				if (root.currentIndex < root.lastIndex)
+					stack.replaceCurrentItem(osd, [], StackView.PopTransition);
+				else
+					stack.replaceCurrentItem(osd, [], StackView.PushTransition);
+				root.lastIndex = root.currentIndex;
+			} else if (root.currentCategory === "launcher") {
+				if (root.currentIndex < root.lastIndex)
+					stack.replaceCurrentItem(launcher, [], StackView.PopTransition);
+				else
+					stack.replaceCurrentItem(launcher, [], StackView.PushTransition);
+				root.lastIndex = root.currentIndex;
+			} else if (root.currentCategory === "screenshot") {
+				if (root.currentIndex < root.lastIndex)
+					stack.replaceCurrentItem(screenshot, [], StackView.PopTransition);
+				else
+					stack.replaceCurrentItem(screenshot, [], StackView.PushTransition);
+				root.lastIndex = root.currentIndex;
+			} else if (root.currentCategory === "updates") {
+				if (root.currentIndex < root.lastIndex)
+					stack.replaceCurrentItem(updates, [], StackView.PopTransition);
+				else
+					stack.replaceCurrentItem(updates, [], StackView.PushTransition);
+				root.lastIndex = root.currentIndex;
+			}
 		}
 
 		target: root
@@ -99,7 +155,7 @@ Item {
 			anchors.top: parent.top
 
 			onSettingSelected: (category, section, settingName) => {
-				root.selectCategory(category);
+				layout.selectCategory(category);
 				root.scrollToSetting(section, settingName);
 			}
 		}
@@ -143,6 +199,101 @@ Item {
 				anchors.fill: parent
 				anchors.margins: Appearance.padding.extraSmall
 				initialItem: general
+
+				popEnter: Transition {
+					SequentialAnimation {
+						Anim {
+							duration: 0
+							from: 0
+							property: "opacity"
+							to: 0
+						}
+
+						PauseAnimation {
+							duration: Appearance.anim.durations.expressiveEffects
+						}
+
+						ParallelAnimation {
+							Anim {
+								duration: Appearance.anim.durations.expressiveFastSpatial
+								from: 0
+								property: "opacity"
+								to: 1
+							}
+
+							Anim {
+								duration: Appearance.anim.durations.expressiveFastSpatial
+								from: -50
+								property: "y"
+								to: 0
+							}
+						}
+					}
+				}
+				popExit: Transition {
+					ParallelAnimation {
+						Anim {
+							duration: Appearance.anim.durations.expressiveFastSpatial
+							from: 1
+							property: "opacity"
+							to: 0
+						}
+
+						Anim {
+							duration: Appearance.anim.durations.expressiveFastSpatial
+							from: 0
+							property: "y"
+							to: 50
+						}
+					}
+				}
+				pushEnter: Transition {
+					SequentialAnimation {
+						Anim {
+							duration: 0
+							from: 0
+							property: "opacity"
+							to: 0
+						}
+
+						PauseAnimation {
+							duration: Appearance.anim.durations.expressiveEffects
+						}
+
+						ParallelAnimation {
+							Anim {
+								duration: Appearance.anim.durations.expressiveFastSpatial
+								from: 0
+								property: "opacity"
+								to: 1
+							}
+
+							Anim {
+								duration: Appearance.anim.durations.expressiveFastSpatial
+								from: 50
+								property: "y"
+								to: 0
+							}
+						}
+					}
+				}
+				pushExit: Transition {
+					ParallelAnimation {
+						Anim {
+							duration: Appearance.anim.durations.expressiveFastSpatial
+							from: 1
+							property: "opacity"
+							to: 0
+						}
+
+						Anim {
+							duration: Appearance.anim.durations.expressiveFastSpatial
+							from: 0
+							property: "y"
+							to: -50
+						}
+					}
+				}
 			}
 		}
 	}