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,39 +19,32 @@ 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
         }
 
+        RowLayout {
+            Layout.alignment: Qt.AlignHCenter
+            spacing: Appearance.spacing.small
+
             Toggle {
                 icon: "wifi"
-            text: qsTr("WiFi")
                 checked: Network.wifiEnabled
-
+                onClicked: Network.toggleWifi()
-            function onClicked(): void {
-                Network.toggleWifi();
-            }
             }
 
             Toggle {
                 icon: "bluetooth"
-            text: qsTr("Bluetooth")
                 checked: Bluetooth.defaultAdapter?.enabled ?? false
-
+                onClicked: {
-            function onClicked(): void {
                     const adapter = Bluetooth.defaultAdapter;
                     if (adapter)
                         adapter.enabled = !adapter.enabled;
@@ -59,10 +53,8 @@ StyledRect {
 
             Toggle {
                 icon: "mic"
-            text: qsTr("Microphone")
                 checked: !Audio.sourceMuted
-
+                onClicked: {
-            function onClicked(): void {
                     const audio = Audio.source?.audio;
                     if (audio)
                         audio.muted = !audio.muted;
@@ -71,10 +63,9 @@ StyledRect {
 
             Toggle {
                 icon: "settings"
-            text: qsTr("Settings")
+                inactiveOnColour: Colours.palette.m3onSurfaceVariant
                 toggle: false
-
+                onClicked: {
-            function onClicked(): void {
                     root.visibilities.utilities = false;
                     WindowFactory.create(null, {
                         screen: QsWindow.window?.screen ?? null
@@ -82,63 +73,22 @@ StyledRect {
                 }
             }
         }
-
-    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
+    component Toggle: IconButton {
-
-        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
+        Layout.preferredWidth: implicitWidth + (stateLayer.pressed ? Appearance.padding.large : internalChecked ? Appearance.padding.smaller : 0)
-        implicitHeight: label.implicitHeight + Appearance.padding.smaller * 2
+        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
 
-        StateLayer {
+        Behavior on Layout.preferredWidth {
-            color: toggle.internalChecked ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
+            Anim {
-
+                duration: Appearance.anim.durations.expressiveFastSpatial
-            function onClicked(): void {
+                easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
-                if (toggle.toggle)
+            }
-                    toggle.internalChecked = !toggle.internalChecked;
-                toggle.onClicked();
-            }
-        }
-
-        RowLayout {
-            id: label
-
-            anchors.centerIn: parent
-            spacing: Appearance.spacing.small
-
-            MaterialIcon {
-                text: toggle.icon
-                color: toggle.internalChecked ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
-                fill: toggle.internalChecked ? 1 : 0
-
-                Behavior on fill {
-                    Anim {}
-                }
-            }
-
-            StyledText {
-                text: toggle.text
-                color: toggle.internalChecked ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
-                font.pointSize: Appearance.font.size.small
-            }
-        }
-
-        Behavior on radius {
-            Anim {}
         }
     }
 }