utilities/toggles: convert to row of icon buttons

components/controls/IconButton.qml

@@ -21,6 +21,7 @@ StyledRect {
 
     property alias stateLayer: stateLayer
     property alias label: label
+    property alias radiusAnim: radiusAnim
 
     property bool internalChecked
     property color activeColour: type === IconButton.Filled ? Colours.palette.m3primary : Colours.palette.m3secondary
@@ -71,6 +72,8 @@ StyledRect {
     }
 
     Behavior on radius {
-        Anim {}
+        Anim {
+            id: radiusAnim
+        }
     }
 }

modules/utilities/cards/Toggles.qml

@@ -1,4 +1,5 @@
 import qs.components
+import qs.components.controls
 import qs.services
 import qs.config
 import qs.modules.controlcenter
@@ -18,127 +19,76 @@ StyledRect {
     radius: Appearance.rounding.normal
     color: Colours.palette.m3surfaceContainer
 
-    GridLayout {
+    ColumnLayout {
         id: layout
 
         anchors.fill: parent
         anchors.margins: Appearance.padding.large
-
+        spacing: Appearance.spacing.normal
-        columns: 2
-        rowSpacing: Appearance.spacing.normal
-        columnSpacing: Appearance.spacing.normal
-        uniformCellWidths: true
 
         StyledText {
-            Layout.columnSpan: 2
             text: qsTr("Quick Toggles")
             font.pointSize: Appearance.font.size.normal
         }
 
-        Toggle {
-            icon: "wifi"
-            text: qsTr("WiFi")
-            checked: Network.wifiEnabled
-
-            function onClicked(): void {
-                Network.toggleWifi();
-            }
-        }
-
-        Toggle {
-            icon: "bluetooth"
-            text: qsTr("Bluetooth")
-            checked: Bluetooth.defaultAdapter?.enabled ?? false
-
-            function onClicked(): void {
-                const adapter = Bluetooth.defaultAdapter;
-                if (adapter)
-                    adapter.enabled = !adapter.enabled;
-            }
-        }
-
-        Toggle {
-            icon: "mic"
-            text: qsTr("Microphone")
-            checked: !Audio.sourceMuted
-
-            function onClicked(): void {
-                const audio = Audio.source?.audio;
-                if (audio)
-                    audio.muted = !audio.muted;
-            }
-        }
-
-        Toggle {
-            icon: "settings"
-            text: qsTr("Settings")
-            toggle: false
-
-            function onClicked(): void {
-                root.visibilities.utilities = false;
-                WindowFactory.create(null, {
-                    screen: QsWindow.window?.screen ?? null
-                });
-            }
-        }
-    }
-
-    component Toggle: StyledRect {
-        id: toggle
-
-        required property string icon
-        required property string text
-        property bool checked
-        property bool toggle: true
-        property bool internalChecked
-
-        function onClicked(): void {
-        }
-
-        onCheckedChanged: internalChecked = checked
-
-        radius: internalChecked ? Appearance.rounding.small : implicitHeight / 2
-        color: internalChecked ? Colours.palette.m3primary : Colours.palette.m3surfaceContainerHigh
-
-        Layout.fillWidth: true
-        implicitWidth: label.implicitWidth + Appearance.padding.larger * 2
-        implicitHeight: label.implicitHeight + Appearance.padding.smaller * 2
-
-        StateLayer {
-            color: toggle.internalChecked ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
-
-            function onClicked(): void {
-                if (toggle.toggle)
-                    toggle.internalChecked = !toggle.internalChecked;
-                toggle.onClicked();
-            }
-        }
-
         RowLayout {
-            id: label
+            Layout.alignment: Qt.AlignHCenter
-
-            anchors.centerIn: parent
             spacing: Appearance.spacing.small
 
-            MaterialIcon {
+            Toggle {
-                text: toggle.icon
+                icon: "wifi"
-                color: toggle.internalChecked ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
+                checked: Network.wifiEnabled
-                fill: toggle.internalChecked ? 1 : 0
+                onClicked: Network.toggleWifi()
+            }
 
-                Behavior on fill {
+            Toggle {
-                    Anim {}
+                icon: "bluetooth"
+                checked: Bluetooth.defaultAdapter?.enabled ?? false
+                onClicked: {
+                    const adapter = Bluetooth.defaultAdapter;
+                    if (adapter)
+                        adapter.enabled = !adapter.enabled;
                 }
             }
 
-            StyledText {
+            Toggle {
-                text: toggle.text
+                icon: "mic"
-                color: toggle.internalChecked ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
+                checked: !Audio.sourceMuted
-                font.pointSize: Appearance.font.size.small
+                onClicked: {
+                    const audio = Audio.source?.audio;
+                    if (audio)
+                        audio.muted = !audio.muted;
+                }
+            }
+
+            Toggle {
+                icon: "settings"
+                inactiveOnColour: Colours.palette.m3onSurfaceVariant
+                toggle: false
+                onClicked: {
+                    root.visibilities.utilities = false;
+                    WindowFactory.create(null, {
+                        screen: QsWindow.window?.screen ?? null
+                    });
+                }
             }
         }
+    }
 
-        Behavior on radius {
+    component Toggle: IconButton {
-            Anim {}
+        Layout.fillWidth: true
+        Layout.preferredWidth: implicitWidth + (stateLayer.pressed ? Appearance.padding.large : internalChecked ? Appearance.padding.smaller : 0)
+        radius: stateLayer.pressed ? Appearance.rounding.small / 2 : internalChecked ? Appearance.rounding.small : Appearance.rounding.normal
+        inactiveColour: Colours.palette.m3surfaceContainerHighest
+        toggle: true
+        radiusAnim.duration: Appearance.anim.durations.expressiveFastSpatial
+        radiusAnim.easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+
+        Behavior on Layout.preferredWidth {
+            Anim {
+                duration: Appearance.anim.durations.expressiveFastSpatial
+                easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+            }
         }
     }
 }