utilities/toggles: convert to row of icon buttons

1 files changed, 47 insertions, 97 deletions

diff --git a/modules/utilities/cards/Toggles.qml b/modules/utilities/cards/Toggles.qml
index 6e2d227..b74fa02 100644
--- a/modules/utilities/cards/Toggles.qml
+++ b/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
-
-        columns: 2
-        rowSpacing: Appearance.spacing.normal
-        columnSpacing: Appearance.spacing.normal
-        uniformCellWidths: true
+        spacing: Appearance.spacing.normal
 
         StyledText {
-            Layout.columnSpan: 2
             text: qsTr("Quick Toggles")
             font.pointSize: Appearance.font.size.normal
         }
 
-        Toggle {
-            icon: "wifi"
-            text: qsTr("WiFi")
-            checked: Network.wifiEnabled
+        RowLayout {
+            Layout.alignment: Qt.AlignHCenter
+            spacing: Appearance.spacing.small
 
-            function onClicked(): void {
-                Network.toggleWifi();
+            Toggle {
+                icon: "wifi"
+                checked: Network.wifiEnabled
+                onClicked: 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: "bluetooth"
+                checked: Bluetooth.defaultAdapter?.enabled ?? false
+                onClicked: {
+                    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: "mic"
+                checked: !Audio.sourceMuted
+                onClicked: {
+                    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
-                });
+            Toggle {
+                icon: "settings"
+                inactiveOnColour: Colours.palette.m3onSurfaceVariant
+                toggle: false
+                onClicked: {
+                    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
-
+    component Toggle: IconButton {
         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.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
 
-            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 {}
-                }
+        Behavior on Layout.preferredWidth {
+            Anim {
+                duration: Appearance.anim.durations.expressiveFastSpatial
+                easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
             }
-
-            StyledText {
-                text: toggle.text
-                color: toggle.internalChecked ? Colours.palette.m3onPrimary : Colours.palette.m3onSurface
-                font.pointSize: Appearance.font.size.small
-            }
-        }
-
-        Behavior on radius {
-            Anim {}
         }
     }
 }