From dbccc14f9af29c10143e65c19c47ebaabbc1af90 Mon Sep 17 00:00:00 2001 From: zach Date: Tue, 9 Jun 2026 13:09:31 +0200 Subject: [PATCH] settings window category navrail changes and padding decreases --- Modules/Settings/Categories.qml | 266 +++++++++++++++------ Modules/Settings/Content.qml | 2 +- Modules/Settings/Controls/SettingsPage.qml | 2 +- 3 files changed, 198 insertions(+), 72 deletions(-) diff --git a/Modules/Settings/Categories.qml b/Modules/Settings/Categories.qml index cce3bb6..059dfd8 100644 --- a/Modules/Settings/Categories.qml +++ b/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; } } } diff --git a/Modules/Settings/Content.qml b/Modules/Settings/Content.qml index 81d33cf..b9157fb 100644 --- a/Modules/Settings/Content.qml +++ b/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 } } diff --git a/Modules/Settings/Controls/SettingsPage.qml b/Modules/Settings/Controls/SettingsPage.qml index 1bd46b7..d46d535 100644 --- a/Modules/Settings/Controls/SettingsPage.qml +++ b/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