settings: pages

.config/quickshell/modules/common/widgets/NavigationRailButton.qml

@@ -13,13 +13,19 @@ TabButton {
     property string buttonIcon
     property string buttonText
     property bool expanded: false
+    property bool showToggledHighlight: true
+    readonly property real visualWidth: root.expanded ? root.baseSize + 20 + itemText.implicitWidth : root.baseSize
 
     property real baseSize: 56
     property real baseHighlightHeight: 32
+    property real highlightCollapsedTopMargin: 8
     padding: 0
 
+    // The navigation item’s target area always spans the full width of the
+    // nav rail, even if the item container hugs its contents.
+    Layout.fillWidth: true
+    // implicitWidth: contentItem.implicitWidth
     implicitHeight: baseSize
-    implicitWidth: contentItem.implicitWidth
 
     background: null
     PointingHandInteraction {}
@@ -28,23 +34,26 @@ TabButton {
     contentItem: Item {
         id: buttonContent
         anchors {
+            top: parent.top
+            bottom: parent.bottom
             left: parent.left
-            verticalCenter: parent.verticalCenter
+            right: undefined
         }
         
-        implicitWidth: root.expanded ? itemIconBackground.implicitWidth + 20 + itemText.implicitWidth :
-            itemIconBackground.implicitWidth
+        implicitWidth: root.visualWidth
         implicitHeight: root.expanded ? itemIconBackground.implicitHeight : itemIconBackground.implicitHeight + itemText.implicitHeight 
 
         Rectangle {
             id: itemBackground
             anchors.top: itemIconBackground.top
             anchors.left: itemIconBackground.left
-            anchors.right: itemIconBackground.right
             anchors.bottom: itemIconBackground.bottom
+            implicitWidth: root.visualWidth
             radius: Appearance.rounding.full
             color: toggled ? 
-                (root.down ? Appearance.colors.colSecondaryContainerActive : root.hovered ? Appearance.colors.colSecondaryContainerHover : Appearance.colors.colSecondaryContainer) :
+                root.showToggledHighlight ?
+                    (root.down ? Appearance.colors.colSecondaryContainerActive : root.hovered ? Appearance.colors.colSecondaryContainerHover : Appearance.colors.colSecondaryContainer)
+                    : ColorUtils.transparentize(Appearance.colors.colSecondaryContainer) :
                 (root.down ? Appearance.colors.colLayer1Active : root.hovered ? Appearance.colors.colLayer1Hover : ColorUtils.transparentize(Appearance.colors.colLayer1Hover, 1))
 
             states: State {
@@ -54,9 +63,12 @@ TabButton {
                     target: itemBackground
                     anchors.top: buttonContent.top
                     anchors.left: buttonContent.left
-                    anchors.right: buttonContent.right
                     anchors.bottom: buttonContent.bottom
                 }
+                PropertyChanges {
+                    target: itemBackground
+                    implicitWidth: root.visualWidth
+                }
             }
             transitions: Transition {
                 AnchorAnimation {
@@ -64,6 +76,13 @@ TabButton {
                     easing.type: Appearance.animation.elementMoveFast.type
                     easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
                 }
+                PropertyAnimation {
+                    target: itemBackground
+                    property: "implicitWidth"
+                    duration: Appearance.animation.elementMove.duration
+                    easing.type: Appearance.animation.elementMove.type
+                    easing.bezierCurve: Appearance.animation.elementMove.bezierCurve
+                }
             }
 
             Behavior on color {
@@ -84,6 +103,7 @@ TabButton {
                 anchors.centerIn: parent
                 iconSize: 24
                 fill: toggled ? 1 : 0
+                font.weight: (toggled || root.hovered) ? Font.DemiBold : Font.Normal
                 text: buttonIcon
                 color: toggled ? Appearance.m3colors.m3onSecondaryContainer : Appearance.colors.colOnLayer1
 
@@ -97,7 +117,7 @@ TabButton {
             id: itemText
             anchors {
                 top: itemIconBackground.bottom
-                topMargin: 6
+                topMargin: 2
                 horizontalCenter: itemIconBackground.horizontalCenter
             }
             states: State {

.config/quickshell/modules/settings/About.qml

@@ -0,0 +1,13 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import "root:/services/"
+import "root:/modules/common/"
+import "root:/modules/common/widgets/"
+
+ContentPage {
+    StyledText {
+        text: qsTr("About page")
+        font.pixelSize: Appearance.font.pixelSize.larger
+    }
+}

.config/quickshell/modules/settings/General.qml

@@ -0,0 +1,13 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import "root:/services/"
+import "root:/modules/common/"
+import "root:/modules/common/widgets/"
+
+ContentPage {
+    StyledText {
+        text: qsTr("General page")
+        font.pixelSize: Appearance.font.pixelSize.larger
+    }
+}

.config/quickshell/modules/settings/Services.qml

@@ -0,0 +1,13 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import "root:/services/"
+import "root:/modules/common/"
+import "root:/modules/common/widgets/"
+
+ContentPage {
+    StyledText {
+        text: qsTr("Services page")
+        font.pixelSize: Appearance.font.pixelSize.larger
+    }
+}

.config/quickshell/modules/settings/Style.qml

@@ -0,0 +1,13 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import "root:/services/"
+import "root:/modules/common/"
+import "root:/modules/common/widgets/"
+
+ContentPage {
+    StyledText {
+        text: qsTr("Style settings page")
+        font.pixelSize: Appearance.font.pixelSize.larger
+    }
+}