settings window category navrail changes and padding decreases

Modules/Settings/Categories.qml

@@ -18,8 +18,22 @@ Item {
 
 	// Function to select category by key
 	function selectCategory(categoryKey: string) {
-		for (let i = 0; i < listModel.count; i++) {
-			if (listModel.get(i).key === categoryKey) {
+		for (let i = 0; i < appearanceCats.count; i++) {
+			if (appearanceCats.get(i).key === categoryKey) {
+				clayout.currentIndex = i;
+				root.content.currentCategory = categoryKey;
+				return;
+			}
+		}
+		for (let i = 0; i < systemCats.count; i++) {
+			if (systemCats.get(i).key === categoryKey) {
+				clayout.currentIndex = i;
+				root.content.currentCategory = categoryKey;
+				return;
+			}
+		}
+		for (let i = 0; i < panelCats.count; i++) {
+			if (panelCats.get(i).key === categoryKey) {
 				clayout.currentIndex = i;
 				root.content.currentCategory = categoryKey;
 				return;
@@ -27,17 +41,11 @@ Item {
 		}
 	}
 
-	implicitHeight: searchBar.implicitHeight + Appearance.spacing.smaller + clayout.contentHeight + Appearance.padding.smaller * 2
-	implicitWidth: clayout.contentWidth + Appearance.padding.smaller * 2
+	implicitHeight: searchBar.implicitHeight + Appearance.spacing.smaller + clayout.contentHeight + clayout.anchors.margins * 2
+	implicitWidth: clayout.contentWidth + clayout.anchors.margins * 2
 
 	ListModel {
-		id: listModel
-
-		ListElement {
-			icon: "settings"
-			key: "general"
-			name: "General"
-		}
+		id: appearanceCats
 
 		ListElement {
 			icon: "wallpaper"
@@ -46,15 +54,25 @@ Item {
 		}
 
 		ListElement {
-			icon: "settop_component"
-			key: "bar"
-			name: "Bar"
+			icon: "screenshot_region"
+			key: "screenshot"
+			name: "Screenshot"
 		}
 
 		ListElement {
-			icon: "lock"
-			key: "lockscreen"
-			name: "Lockscreen"
+			icon: "colors"
+			key: "appearance"
+			name: "Appearance"
+		}
+	}
+
+	ListModel {
+		id: systemCats
+
+		ListElement {
+			icon: "settings"
+			key: "general"
+			name: "General"
 		}
 
 		ListElement {
@@ -69,12 +87,6 @@ Item {
 			name: "Notifications"
 		}
 
-		ListElement {
-			icon: "view_sidebar"
-			key: "sidebar"
-			name: "Sidebar"
-		}
-
 		ListElement {
 			icon: "handyman"
 			key: "utilities"
@@ -82,15 +94,37 @@ Item {
 		}
 
 		ListElement {
-			icon: "dashboard"
-			key: "dashboard"
-			name: "Dashboard"
+			icon: "cached"
+			key: "updates"
+			name: "Updates"
+		}
+	}
+
+	ListModel {
+		id: panelCats
+
+		ListElement {
+			icon: "settop_component"
+			key: "bar"
+			name: "Bar"
 		}
 
 		ListElement {
-			icon: "colors"
-			key: "appearance"
-			name: "Appearance"
+			icon: "lock"
+			key: "lockscreen"
+			name: "Lockscreen"
+		}
+
+		ListElement {
+			icon: "view_sidebar"
+			key: "sidebar"
+			name: "Sidebar"
+		}
+
+		ListElement {
+			icon: "dashboard"
+			key: "dashboard"
+			name: "Dashboard"
 		}
 
 		ListElement {
@@ -104,18 +138,6 @@ Item {
 			key: "launcher"
 			name: "Launcher"
 		}
-
-		ListElement {
-			icon: "screenshot_region"
-			key: "screenshot"
-			name: "Screenshot"
-		}
-
-		ListElement {
-			icon: "cached"
-			key: "updates"
-			name: "Updates"
-		}
 	}
 
 	CustomClippingRect {
@@ -123,34 +145,112 @@ Item {
 		color: DynamicColors.tPalette.m3surfaceContainer
 		radius: Appearance.rounding.normal
 
-		CustomListView {
+		Flickable {
 			id: clayout
 
-			anchors.bottom: parent.bottom
-			anchors.horizontalCenter: parent.horizontalCenter
-			anchors.margins: Appearance.padding.smaller
-			anchors.top: parent.top
-			boundsBehavior: Flickable.StopAtBounds
+			anchors.fill: parent
+			anchors.margins: Appearance.padding.extraSmall
 			contentWidth: contentItem.childrenRect.width
-			highlightFollowsCurrentItem: false
-			implicitWidth: contentItem.childrenRect.width
-			model: listModel
-			spacing: 5
+			flickableDirection: Flickable.VerticalFlick
 
-			delegate: Category {
-			}
-			highlight: CustomRect {
-				color: DynamicColors.palette.m3primary
-				implicitHeight: clayout.currentItem?.implicitHeight ?? 0
-				implicitWidth: clayout.width
-				radius: Appearance.rounding.normal - Appearance.padding.smaller
-				y: clayout.currentItem?.y ?? 0
+			ColumnLayout {
+				anchors.horizontalCenter: parent.horizontalCenter
+				anchors.top: parent.top
+				spacing: Appearance.spacing.normal
 
-				Behavior on y {
-					Anim {
-						duration: Appearance.anim.durations.small
-						easing.bezierCurve: Appearance.anim.curves.expressiveEffects
+				CustomListView {
+					id: sysView
+
+					Layout.fillWidth: true
+					Layout.preferredHeight: contentItem.childrenRect.height
+					Layout.preferredWidth: contentItem.childrenRect.width
+					boundsBehavior: Flickable.StopAtBounds
+					highlightFollowsCurrentItem: false
+					interactive: false
+					model: systemCats
+					spacing: 2
+
+					delegate: Category {
+						view: sysView
 					}
+					// highlight: CustomRect {
+					// 	color: DynamicColors.palette.m3primary
+					// 	implicitHeight: sysView.currentItem?.implicitHeight ?? 0
+					// 	implicitWidth: sysView.width
+					// 	radius: Appearance.rounding.normal - Appearance.padding.smaller
+					// 	y: sysView.currentItem?.y ?? 0
+					//
+					// 	Behavior on y {
+					// 		Anim {
+					// 			duration: Appearance.anim.durations.small
+					// 			easing.bezierCurve: Appearance.anim.curves.expressiveEffects
+					// 		}
+					// 	}
+					// }
+				}
+
+				CustomListView {
+					id: panelsView
+
+					Layout.fillWidth: true
+					Layout.preferredHeight: contentItem.childrenRect.height
+					Layout.preferredWidth: contentItem.childrenRect.width
+					boundsBehavior: Flickable.StopAtBounds
+					contentWidth: contentItem.childrenRect.width
+					highlightFollowsCurrentItem: false
+					interactive: false
+					model: panelCats
+					spacing: 2
+
+					delegate: Category {
+						view: panelsView
+					}
+					// highlight: CustomRect {
+					// 	color: DynamicColors.palette.m3primary
+					// 	implicitHeight: panelsView.currentItem?.implicitHeight ?? 0
+					// 	implicitWidth: panelsView.width
+					// 	radius: Appearance.rounding.normal - Appearance.padding.smaller
+					// 	y: panelsView.currentItem?.y ?? 0
+					//
+					// 	Behavior on y {
+					// 		Anim {
+					// 			duration: Appearance.anim.durations.small
+					// 			easing.bezierCurve: Appearance.anim.curves.expressiveEffects
+					// 		}
+					// 	}
+					// }
+				}
+
+				CustomListView {
+					id: appearanceView
+
+					Layout.fillWidth: true
+					Layout.preferredHeight: contentItem.childrenRect.height
+					Layout.preferredWidth: contentItem.childrenRect.width
+					boundsBehavior: Flickable.StopAtBounds
+					contentWidth: contentItem.childrenRect.width
+					highlightFollowsCurrentItem: false
+					interactive: false
+					model: appearanceCats
+					spacing: 2
+
+					delegate: Category {
+						view: appearanceView
+					}
+					// highlight: CustomRect {
+					// 	color: DynamicColors.palette.m3primary
+					// 	implicitHeight: appearanceView.currentItem?.implicitHeight ?? 0
+					// 	implicitWidth: appearanceView.width
+					// 	radius: Appearance.rounding.normal - Appearance.padding.smaller
+					// 	y: appearanceView.currentItem?.y ?? 0
+					//
+					// 	Behavior on y {
+					// 		Anim {
+					// 			duration: Appearance.anim.durations.small
+					// 			easing.bezierCurve: Appearance.anim.curves.expressiveEffects
+					// 		}
+					// 	}
+					// }
 				}
 			}
 		}
@@ -163,10 +263,36 @@ Item {
 		required property int index
 		required property string key
 		required property string name
+		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)
+		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)
+		color: key === root.content.currentCategory ? DynamicColors.palette.m3primary : DynamicColors.tPalette.m3surfaceContainer
 		implicitHeight: 42
-		implicitWidth: 250
-		radius: Appearance.rounding.normal - Appearance.padding.smaller
+		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)
+		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)
+
+		Behavior on bottomLeftRadius {
+			Anim {
+				type: Anim.FastEffects
+			}
+		}
+		Behavior on bottomRightRadius {
+			Anim {
+				type: Anim.FastEffects
+			}
+		}
+		Behavior on topLeftRadius {
+			Anim {
+				type: Anim.FastEffects
+			}
+		}
+		Behavior on topRightRadius {
+			Anim {
+				type: Anim.FastEffects
+			}
+		}
 
 		RowLayout {
 			id: layout
@@ -182,8 +308,8 @@ Item {
 				Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
 				Layout.fillHeight: true
 				Layout.preferredWidth: icon.contentWidth
-				color: categoryItem.index === clayout.currentIndex ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
-				fill: categoryItem.index === clayout.currentIndex ? 1 : 0
+				color: categoryItem.key === root.content.currentCategory ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+				fill: categoryItem.key === root.content.currentCategory ? 1 : 0
 				font.pointSize: Appearance.font.size.small * 2
 				text: categoryItem.icon
 				verticalAlignment: Text.AlignVCenter
@@ -201,7 +327,7 @@ Item {
 				Layout.fillHeight: true
 				Layout.fillWidth: true
 				Layout.leftMargin: Appearance.spacing.normal
-				color: categoryItem.index === clayout.currentIndex ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+				color: categoryItem.key === root.content.currentCategory ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 				text: categoryItem.name
 				verticalAlignment: Text.AlignVCenter
 			}
@@ -210,11 +336,11 @@ Item {
 		StateLayer {
 			id: layer
 
-			color: categoryItem.index === clayout.currentIndex ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+			color: categoryItem.key === root.content.currentCategory ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 
 			onClicked: {
 				root.content.currentCategory = categoryItem.key;
-				clayout.currentIndex = categoryItem.index;
+				categoryItem.view.currentIndex = categoryItem.index;
 			}
 		}
 	}

Modules/Settings/Content.qml

@@ -141,7 +141,7 @@ Item {
 				id: stack
 
 				anchors.fill: parent
-				anchors.margins: Appearance.padding.smaller
+				anchors.margins: Appearance.padding.extraSmall
 				initialItem: general
 			}
 		}

Modules/Settings/Controls/SettingsPage.qml

@@ -27,7 +27,7 @@ CustomClippingRect {
 		return false;
 	}
 
-	radius: Appearance.rounding.normal - Appearance.padding.smaller
+	radius: Appearance.rounding.normal - Appearance.padding.extraSmall
 
 	CustomFlickable {
 		id: flickable