settings app: expandable navrail buttons

.config/quickshell/modules/common/Appearance.qml

@@ -177,7 +177,7 @@ Singleton {
             property int larger: 19
             property int huge: 22
             property int hugeass: 23
-            property int title: 28
+            property int title: huge
         }
     }
 

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

@@ -11,7 +11,7 @@ RippleButton {
     id: root
     property string iconText: "add"
     property bool expanded: false
-    property real baseSize: 50
+    property real baseSize: 56
     property real elementSpacing: 5
     implicitWidth: Math.max(contentRowLayout.implicitWidth + 10 * 2, baseSize)
     implicitHeight: baseSize
@@ -33,23 +33,27 @@ RippleButton {
             id: icon
             Layout.fillWidth: true
             horizontalAlignment: Text.AlignHCenter
-            iconSize: Appearance.font.pixelSize.huge
+            iconSize: 24
             color: Appearance.colors.colOnLayer1
             text: root.iconText
         }
-        Revealer {
+        Loader {
-            visible: root.expanded || implicitWidth > 0
+            active: true
-            reveal: root.expanded
+            sourceComponent: Revealer {
-            implicitWidth: reveal ? (buttonText.implicitWidth + root.elementSpacing + contentRowLayout.horizontalMargins) : 0
+                visible: root.expanded || implicitWidth > 0
-            StyledText {
+                reveal: root.expanded
-                id: buttonText
+                implicitWidth: reveal ? (buttonText.implicitWidth + root.elementSpacing + contentRowLayout.horizontalMargins) : 0
-                anchors {
+                StyledText {
-                    left: parent.left
+                    id: buttonText
-                    leftMargin: root.elementSpacing
+                    anchors {
+                        left: parent.left
+                        leftMargin: root.elementSpacing
+                    }
+                    text: root.buttonText
+                    color: Appearance.colors.colOnLayer1
+                    font.pixelSize: 14
+                    font.weight: 450
                 }
-                text: root.buttonText
-                color: Appearance.colors.colOnLayer1
-                font.pixelSize: Appearance.font.pixelSize.small
             }
         }
     }

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

@@ -0,0 +1,66 @@
+import "root:/modules/common"
+import "root:/modules/common/widgets"
+import "root:/modules/common/functions/color_utils.js" as ColorUtils
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell.Io
+
+/**
+ * Old implementation. For future widgets use NavigationRailButton instead.
+ */
+Button {
+    id: button
+
+    property bool toggled
+    property string buttonIcon
+    property string buttonText
+    property bool expanded: false
+
+    property real baseSize: 56
+
+    Layout.alignment: Qt.AlignHCenter
+    implicitHeight: columnLayout.implicitHeight
+    implicitWidth: columnLayout.implicitWidth
+
+    background: null
+    PointingHandInteraction {}
+
+    // Real stuff
+    ColumnLayout {
+        id: columnLayout
+        spacing: 5
+        Rectangle {
+            implicitWidth: 56
+            implicitHeight: navRailButtonIcon.height + 2 * 2
+            Layout.alignment: Qt.AlignHCenter
+            radius: Appearance.rounding.full
+            color: toggled ? 
+                (button.down ? Appearance.colors.colSecondaryContainerActive : button.hovered ? Appearance.colors.colSecondaryContainerHover : Appearance.colors.colSecondaryContainer) :
+                (button.down ? Appearance.colors.colLayer1Active : button.hovered ? Appearance.colors.colLayer1Hover : ColorUtils.transparentize(Appearance.colors.colLayer1Hover, 1))
+
+            Behavior on color {
+                animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+            }
+            MaterialSymbol {
+                id: navRailButtonIcon
+                anchors.centerIn: parent
+                iconSize: Appearance.font.pixelSize.hugeass
+                fill: toggled ? 1 : 0
+                text: buttonIcon
+                color: toggled ? Appearance.m3colors.m3onSecondaryContainer : Appearance.colors.colOnLayer1
+
+                Behavior on color {
+                    animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+                }
+            }
+        }
+
+        StyledText {
+            Layout.alignment: Qt.AlignHCenter
+            text: buttonText
+            color: Appearance.colors.colOnLayer1
+        }
+    }
+
+}

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

@@ -7,7 +7,6 @@ import "root:/modules/common/widgets/"
 ColumnLayout { // Window content with navigation rail and content pane
     id: root
     property bool expanded: true
-    spacing: 10
+    property int currentIndex: 0
-
+    spacing: 5
-
 }

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

@@ -7,42 +7,82 @@ import QtQuick.Layouts
 import Quickshell.Io
 
 Button {
-    id: button
+    id: root
 
     property bool toggled
     property string buttonIcon
     property string buttonText
     property bool expanded: false
 
-    property real baseSize: 50
+    property real baseSize: 56
+    property real baseHighlightHeight: 32
+    padding: 0
 
-    Layout.alignment: Qt.AlignHCenter
+    implicitHeight: baseSize
-    implicitHeight: columnLayout.implicitHeight
+    implicitWidth: contentItem.implicitWidth
-    implicitWidth: columnLayout.implicitWidth
 
     background: null
     PointingHandInteraction {}
 
     // Real stuff
-    ColumnLayout {
+    contentItem: Item {
-        id: columnLayout
+        id: buttonContent
-        spacing: 5
+        anchors {
+            left: parent.left
+            verticalCenter: parent.verticalCenter
+        }
+        
+        implicitWidth: root.expanded ? itemIconBackground.implicitWidth + 20 + itemText.implicitWidth :
+            itemIconBackground.implicitWidth
+        implicitHeight: root.expanded ? itemIconBackground.implicitHeight : itemIconBackground.implicitHeight + itemText.implicitHeight 
+
         Rectangle {
-            implicitWidth: 62
+            id: itemBackground
-            implicitHeight: navRailButtonIcon.height + 2 * 2
+            anchors.top: itemIconBackground.top
-            Layout.alignment: Qt.AlignHCenter
+            anchors.left: itemIconBackground.left
+            anchors.right: itemIconBackground.right
+            anchors.bottom: itemIconBackground.bottom
             radius: Appearance.rounding.full
             color: toggled ? 
-                (button.down ? Appearance.colors.colSecondaryContainerActive : button.hovered ? Appearance.colors.colSecondaryContainerHover : Appearance.colors.colSecondaryContainer) :
+                (root.down ? Appearance.colors.colSecondaryContainerActive : root.hovered ? Appearance.colors.colSecondaryContainerHover : Appearance.colors.colSecondaryContainer) :
-                (button.down ? Appearance.colors.colLayer1Active : button.hovered ? Appearance.colors.colLayer1Hover : ColorUtils.transparentize(Appearance.colors.colLayer1Hover, 1))
+                (root.down ? Appearance.colors.colLayer1Active : root.hovered ? Appearance.colors.colLayer1Hover : ColorUtils.transparentize(Appearance.colors.colLayer1Hover, 1))
+
+            states: State {
+                name: "expanded"
+                when: root.expanded
+                AnchorChanges {
+                    target: itemBackground
+                    anchors.top: buttonContent.top
+                    anchors.left: buttonContent.left
+                    anchors.right: buttonContent.right
+                    anchors.bottom: buttonContent.bottom
+                }
+            }
+            transitions: Transition {
+                AnchorAnimation {
+                    duration: Appearance.animation.elementMoveFast.duration
+                    easing.type: Appearance.animation.elementMoveFast.type
+                    easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
+                }
+            }
 
             Behavior on color {
                 animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
             }
+        }
+
+        Item {
+            id: itemIconBackground
+            implicitWidth: root.baseSize
+            implicitHeight: root.baseHighlightHeight
+            anchors {
+                left: parent.left
+                verticalCenter: parent.verticalCenter
+            }
             MaterialSymbol {
                 id: navRailButtonIcon
                 anchors.centerIn: parent
-                iconSize: Appearance.font.pixelSize.hugeass
+                iconSize: 24
                 fill: toggled ? 1 : 0
                 text: buttonIcon
                 color: toggled ? Appearance.m3colors.m3onSecondaryContainer : Appearance.colors.colOnLayer1
@@ -54,8 +94,34 @@ Button {
         }
 
         StyledText {
-            Layout.alignment: Qt.AlignHCenter
+            id: itemText
+            anchors {
+                top: itemIconBackground.bottom
+                topMargin: 6
+                horizontalCenter: itemIconBackground.horizontalCenter
+            }
+            states: State {
+                name: "expanded"
+                when: root.expanded
+                AnchorChanges {
+                    target: itemText
+                    anchors {
+                        top: undefined
+                        horizontalCenter: undefined
+                        left: itemIconBackground.right
+                        verticalCenter: itemIconBackground.verticalCenter
+                    }
+                }
+            }
+            transitions: Transition {
+                AnchorAnimation {
+                    duration: Appearance.animation.elementMoveFast.duration
+                    easing.type: Appearance.animation.elementMoveFast.type
+                    easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
+                }
+            }
             text: buttonText
+            font.pixelSize: 14
             color: Appearance.colors.colOnLayer1
         }
     }

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

@@ -9,7 +9,7 @@ RippleButton {
     Layout.alignment: Qt.AlignLeft
     implicitWidth: 40
     implicitHeight: 40
-    Layout.leftMargin: 5
+    Layout.leftMargin: 8
     onClicked: {
         parent.expanded = !parent.expanded;
     }
@@ -18,7 +18,7 @@ RippleButton {
         id: icon
         anchors.centerIn: parent
         horizontalAlignment: Text.AlignHCenter
-        iconSize: Appearance.font.pixelSize.hugeass
+        iconSize: 24
         color: Appearance.colors.colOnLayer1
         text: root.parent.expanded ? "menu_open" : "menu"
     }

.config/quickshell/modules/sidebarRight/BottomWidgetGroup.qml

@@ -135,7 +135,7 @@ Rectangle {
                 anchors.left: parent.left
                 anchors.leftMargin: 5
                 id: tabBar
-                spacing: 15
+                spacing: 8
                 Repeater {
                     model: root.tabs
                     NavigationRailButton {

.config/quickshell/scripts/colors/switchwall.sh

@@ -219,7 +219,7 @@ switch() {
             # Set wallpaper with swww
             swww img "$imgpath" --transition-step 100 --transition-fps 120 \
                 --transition-type grow --transition-angle 30 --transition-duration 1 \
-                --transition-pos "$cursorposx, $cursorposy_inverted"
+                --transition-pos "$cursorposx, $cursorposy_inverted" &
             remove_restore
         fi
     fi

.config/quickshell/settings.qml

@@ -24,8 +24,9 @@ ApplicationWindow {
     id: root
     property string firstRunFilePath: FileUtils.trimFileProtocol(`${Directories.state}/user/first_run.txt`)
     property string firstRunFileContent: "This file is just here to confirm you've been greeted :>"
-    property real contentPadding: 5
+    property real contentPadding: 8
     property bool showNextTime: false
+    property int currentPage: 0
     visible: true
     onClosing: Qt.quit()
     title: "illogical-impulse Settings"
@@ -37,7 +38,7 @@ ApplicationWindow {
 
     minimumWidth: 600
     minimumHeight: 400
-    width: 800
+    width: 900
     height: 650
     color: Appearance.m3colors.m3background
 
@@ -74,7 +75,7 @@ ApplicationWindow {
                 anchors.centerIn: parent
                 color: Appearance.colors.colOnLayer0
                 text: "Settings"
-                font.pixelSize: Appearance.font.pixelSize.hugeass
+                font.pixelSize: Appearance.font.pixelSize.title
                 font.family: Appearance.font.family.title
             }
             RowLayout { // Window controls row
@@ -99,12 +100,13 @@ ApplicationWindow {
         RowLayout { // Window content with navigation rail and content pane
             Layout.fillWidth: true
             Layout.fillHeight: true
+            spacing: contentPadding
             NavigationRail { // Window content with navigation rail and content pane
                 id: navRail
                 Layout.fillHeight: true
                 Layout.margins: 5
                 spacing: 10
-                expanded: root.width > 800
+                expanded: root.width > 900
                 
                 NavigationRailExpandButton {}
 
@@ -118,7 +120,32 @@ ApplicationWindow {
                     }
                 }
 
-                
+                ColumnLayout {
+                    Layout.topMargin: 25
+                    spacing: 4
+
+                    NavigationRailButton {
+                        toggled: root.currentPage === 0
+                        onClicked: root.currentPage = 0;
+                        expanded: navRail.expanded
+                        buttonIcon: "tune"
+                        buttonText: "General"
+                    }
+                    NavigationRailButton {
+                        toggled: root.currentPage === 1
+                        onClicked: root.currentPage = 1;
+                        expanded: navRail.expanded
+                        buttonIcon: "dashboard"
+                        buttonText: "Widgets"
+                    }
+                    NavigationRailButton {
+                        toggled: root.currentPage === 2
+                        onClicked: root.currentPage = 2;
+                        expanded: navRail.expanded
+                        buttonIcon: "settings"
+                        buttonText: "Services"
+                    }
+                }
 
                 Item {
                     Layout.fillHeight: true