Merge pull request #906 from atdma/main

controlcenter: many setting panes and minor features

1 files changed, 109 insertions, 198 deletions

diff --git a/modules/controlcenter/bluetooth/DeviceList.qml b/modules/controlcenter/bluetooth/DeviceList.qml
index 3831e4a..b978a2d 100644
--- a/modules/controlcenter/bluetooth/DeviceList.qml
+++ b/modules/controlcenter/bluetooth/DeviceList.qml
@@ -1,6 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import ".."
+import "../components"
 import qs.components
 import qs.components.controls
 import qs.components.containers
@@ -12,172 +13,142 @@ import Quickshell.Bluetooth
 import QtQuick
 import QtQuick.Layouts
 
-ColumnLayout {
+DeviceList {
     id: root
 
     required property Session session
     readonly property bool smallDiscoverable: width <= 540
     readonly property bool smallPairable: width <= 480
 
-    spacing: Appearance.spacing.small
+    title: qsTr("Devices (%1)").arg(Bluetooth.devices.values.length)
+    description: qsTr("All available bluetooth devices")
+    activeItem: session.bt.active
 
-    RowLayout {
-        spacing: Appearance.spacing.smaller
+    model: ScriptModel {
+        id: deviceModel
 
-        StyledText {
-            text: qsTr("Settings")
-            font.pointSize: Appearance.font.size.large
-            font.weight: 500
-        }
-
-        Item {
-            Layout.fillWidth: true
-        }
+        values: [...Bluetooth.devices.values].sort((a, b) => (b.connected - a.connected) || (b.paired - a.paired))
+    }
 
-        ToggleButton {
-            toggled: Bluetooth.defaultAdapter?.enabled ?? false
-            icon: "power"
-            accent: "Tertiary"
+    headerComponent: Component {
+        RowLayout {
+            spacing: Appearance.spacing.smaller
 
-            function onClicked(): void {
-                const adapter = Bluetooth.defaultAdapter;
-                if (adapter)
-                    adapter.enabled = !adapter.enabled;
+            StyledText {
+                text: qsTr("Bluetooth")
+                font.pointSize: Appearance.font.size.large
+                font.weight: 500
             }
-        }
-
-        ToggleButton {
-            toggled: Bluetooth.defaultAdapter?.discoverable ?? false
-            icon: root.smallDiscoverable ? "group_search" : ""
-            label: root.smallDiscoverable ? "" : qsTr("Discoverable")
 
-            function onClicked(): void {
-                const adapter = Bluetooth.defaultAdapter;
-                if (adapter)
-                    adapter.discoverable = !adapter.discoverable;
+            Item {
+                Layout.fillWidth: true
             }
-        }
 
-        ToggleButton {
-            toggled: Bluetooth.defaultAdapter?.pairable ?? false
-            icon: "missing_controller"
-            label: root.smallPairable ? "" : qsTr("Pairable")
+            ToggleButton {
+                toggled: Bluetooth.defaultAdapter?.enabled ?? false
+                icon: "power"
+                accent: "Tertiary"
+                iconSize: Appearance.font.size.normal
+                horizontalPadding: Appearance.padding.normal
+                verticalPadding: Appearance.padding.smaller
+                tooltip: qsTr("Toggle Bluetooth")
 
-            function onClicked(): void {
-                const adapter = Bluetooth.defaultAdapter;
-                if (adapter)
-                    adapter.pairable = !adapter.pairable;
+                onClicked: {
+                    const adapter = Bluetooth.defaultAdapter;
+                    if (adapter)
+                        adapter.enabled = !adapter.enabled;
+                }
             }
-        }
 
-        ToggleButton {
-            toggled: !root.session.bt.active
-            icon: "settings"
-            accent: "Primary"
+            ToggleButton {
+                toggled: Bluetooth.defaultAdapter?.discoverable ?? false
+                icon: root.smallDiscoverable ? "group_search" : ""
+                label: root.smallDiscoverable ? "" : qsTr("Discoverable")
+                iconSize: Appearance.font.size.normal
+                horizontalPadding: Appearance.padding.normal
+                verticalPadding: Appearance.padding.smaller
+                tooltip: qsTr("Make discoverable")
 
-            function onClicked(): void {
-                if (root.session.bt.active)
-                    root.session.bt.active = null;
-                else {
-                    root.session.bt.active = deviceModel.values[0] ?? null;
+                onClicked: {
+                    const adapter = Bluetooth.defaultAdapter;
+                    if (adapter)
+                        adapter.discoverable = !adapter.discoverable;
                 }
             }
-        }
-    }
 
-    RowLayout {
-        Layout.topMargin: Appearance.spacing.large
-        Layout.fillWidth: true
-        spacing: Appearance.spacing.normal
+            ToggleButton {
+                toggled: Bluetooth.defaultAdapter?.pairable ?? false
+                icon: "missing_controller"
+                label: root.smallPairable ? "" : qsTr("Pairable")
+                iconSize: Appearance.font.size.normal
+                horizontalPadding: Appearance.padding.normal
+                verticalPadding: Appearance.padding.smaller
+                tooltip: qsTr("Make pairable")
 
-        ColumnLayout {
-            Layout.fillWidth: true
-            spacing: Appearance.spacing.small
-
-            StyledText {
-                Layout.fillWidth: true
-                text: qsTr("Devices (%1)").arg(Bluetooth.devices.values.length)
-                font.pointSize: Appearance.font.size.large
-                font.weight: 500
-            }
-
-            StyledText {
-                Layout.fillWidth: true
-                text: qsTr("All available bluetooth devices")
-                color: Colours.palette.m3outline
+                onClicked: {
+                    const adapter = Bluetooth.defaultAdapter;
+                    if (adapter)
+                        adapter.pairable = !adapter.pairable;
+                }
             }
-        }
-
-        StyledRect {
-            implicitWidth: implicitHeight
-            implicitHeight: scanIcon.implicitHeight + Appearance.padding.normal * 2
 
-            radius: Bluetooth.defaultAdapter?.discovering ? Appearance.rounding.normal : implicitHeight / 2 * Math.min(1, Appearance.rounding.scale)
-            color: Bluetooth.defaultAdapter?.discovering ? Colours.palette.m3secondary : Colours.palette.m3secondaryContainer
+            ToggleButton {
+                toggled: Bluetooth.defaultAdapter?.discovering ?? false
+                icon: "bluetooth_searching"
+                accent: "Secondary"
+                iconSize: Appearance.font.size.normal
+                horizontalPadding: Appearance.padding.normal
+                verticalPadding: Appearance.padding.smaller
+                tooltip: qsTr("Scan for devices")
 
-            StateLayer {
-                color: Bluetooth.defaultAdapter?.discovering ? Colours.palette.m3onSecondary : Colours.palette.m3onSecondaryContainer
-
-                function onClicked(): void {
+                onClicked: {
                     const adapter = Bluetooth.defaultAdapter;
                     if (adapter)
                         adapter.discovering = !adapter.discovering;
                 }
             }
 
-            MaterialIcon {
-                id: scanIcon
-
-                anchors.centerIn: parent
-                animate: true
-                text: "bluetooth_searching"
-                color: Bluetooth.defaultAdapter?.discovering ? Colours.palette.m3onSecondary : Colours.palette.m3onSecondaryContainer
-                fill: Bluetooth.defaultAdapter?.discovering ? 1 : 0
-            }
+            ToggleButton {
+                toggled: !root.session.bt.active
+                icon: "settings"
+                accent: "Primary"
+                iconSize: Appearance.font.size.normal
+                horizontalPadding: Appearance.padding.normal
+                verticalPadding: Appearance.padding.smaller
+                tooltip: qsTr("Bluetooth settings")
 
-            Behavior on radius {
-                Anim {}
+                onClicked: {
+                    if (root.session.bt.active)
+                        root.session.bt.active = null;
+                    else {
+                        root.session.bt.active = root.model.values[0] ?? null;
+                    }
+                }
             }
         }
     }
 
-    StyledListView {
-        id: view
-
-        model: ScriptModel {
-            id: deviceModel
-
-            values: [...Bluetooth.devices.values].sort((a, b) => (b.connected - a.connected) || (b.paired - a.paired))
-        }
-
-        Layout.fillWidth: true
-        Layout.fillHeight: true
-        clip: true
-        spacing: Appearance.spacing.small / 2
-
-        StyledScrollBar.vertical: StyledScrollBar {
-            flickable: view
-        }
 
-        delegate: StyledRect {
+    delegate: Component {
+        StyledRect {
             id: device
 
             required property BluetoothDevice modelData
-            readonly property bool loading: modelData.state === BluetoothDeviceState.Connecting || modelData.state === BluetoothDeviceState.Disconnecting
-            readonly property bool connected: modelData.state === BluetoothDeviceState.Connected
+            readonly property bool loading: modelData && (modelData.state === BluetoothDeviceState.Connecting || modelData.state === BluetoothDeviceState.Disconnecting)
+            readonly property bool connected: modelData && modelData.state === BluetoothDeviceState.Connected
 
-            anchors.left: parent.left
-            anchors.right: parent.right
+            width: ListView.view ? ListView.view.width : undefined
             implicitHeight: deviceInner.implicitHeight + Appearance.padding.normal * 2
 
-            color: Qt.alpha(Colours.tPalette.m3surfaceContainer, root.session.bt.active === modelData ? Colours.tPalette.m3surfaceContainer.a : 0)
+            color: Qt.alpha(Colours.tPalette.m3surfaceContainer, root.activeItem === modelData ? Colours.tPalette.m3surfaceContainer.a : 0)
             radius: Appearance.rounding.normal
 
             StateLayer {
                 id: stateLayer
 
                 function onClicked(): void {
-                    root.session.bt.active = device.modelData;
+                    if (device.modelData)
+                        root.session.bt.active = device.modelData;
                 }
             }
 
@@ -194,20 +165,20 @@ ColumnLayout {
                     implicitHeight: icon.implicitHeight + Appearance.padding.normal * 2
 
                     radius: Appearance.rounding.normal
-                    color: device.connected ? Colours.palette.m3primaryContainer : device.modelData.bonded ? Colours.palette.m3secondaryContainer : Colours.tPalette.m3surfaceContainerHigh
+                    color: device.connected ? Colours.palette.m3primaryContainer : (device.modelData && device.modelData.bonded) ? Colours.palette.m3secondaryContainer : Colours.tPalette.m3surfaceContainerHigh
 
                     StyledRect {
                         anchors.fill: parent
                         radius: parent.radius
-                        color: Qt.alpha(device.connected ? Colours.palette.m3onPrimaryContainer : device.modelData.bonded ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface, stateLayer.pressed ? 0.1 : stateLayer.containsMouse ? 0.08 : 0)
+                        color: Qt.alpha(device.connected ? Colours.palette.m3onPrimaryContainer : (device.modelData && device.modelData.bonded) ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface, stateLayer.pressed ? 0.1 : stateLayer.containsMouse ? 0.08 : 0)
                     }
 
                     MaterialIcon {
                         id: icon
 
                         anchors.centerIn: parent
-                        text: Icons.getBluetoothIcon(device.modelData.icon)
-                        color: device.connected ? Colours.palette.m3onPrimaryContainer : device.modelData.bonded ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
+                        text: Icons.getBluetoothIcon(device.modelData ? device.modelData.icon : "")
+                        color: device.connected ? Colours.palette.m3onPrimaryContainer : (device.modelData && device.modelData.bonded) ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
                         font.pointSize: Appearance.font.size.large
                         fill: device.connected ? 1 : 0
 
@@ -224,13 +195,13 @@ ColumnLayout {
 
                     StyledText {
                         Layout.fillWidth: true
-                        text: device.modelData.name
+                        text: device.modelData ? device.modelData.name : qsTr("Unknown")
                         elide: Text.ElideRight
                     }
 
                     StyledText {
                         Layout.fillWidth: true
-                        text: device.modelData.address + (device.connected ? qsTr(" (Connected)") : device.modelData.bonded ? qsTr(" (Paired)") : "")
+                        text: (device.modelData ? device.modelData.address : "") + (device.connected ? qsTr(" (Connected)") : (device.modelData && device.modelData.bonded) ? qsTr(" (Paired)") : "")
                         color: Colours.palette.m3outline
                         font.pointSize: Appearance.font.size.small
                         elide: Text.ElideRight
@@ -256,7 +227,18 @@ ColumnLayout {
                         disabled: device.loading
 
                         function onClicked(): void {
-                            device.modelData.connected = !device.modelData.connected;
+                            if (device.loading)
+                                return;
+
+                            if (device.connected) {
+                                device.modelData.connected = false;
+                            } else {
+                                if (device.modelData.bonded) {
+                                    device.modelData.connected = true;
+                                } else {
+                                    device.modelData.pair();
+                                }
+                            }
                         }
                     }
 
@@ -265,7 +247,7 @@ ColumnLayout {
 
                         anchors.centerIn: parent
                         animate: true
-                        text: device.modelData.connected ? "link_off" : "link"
+                        text: device.connected ? "link_off" : "link"
                         color: device.connected ? Colours.palette.m3onPrimaryContainer : Colours.palette.m3onSurface
 
                         opacity: device.loading ? 0 : 1
@@ -279,78 +261,7 @@ ColumnLayout {
         }
     }
 
-    component ToggleButton: StyledRect {
-        id: toggleBtn
-
-        required property bool toggled
-        property string icon
-        property string label
-        property string accent: "Secondary"
-
-        function onClicked(): void {
-        }
-
-        Layout.preferredWidth: implicitWidth + (toggleStateLayer.pressed ? Appearance.padding.normal * 2 : toggled ? Appearance.padding.small * 2 : 0)
-        implicitWidth: toggleBtnInner.implicitWidth + Appearance.padding.large * 2
-        implicitHeight: toggleBtnIcon.implicitHeight + Appearance.padding.normal * 2
-
-        radius: toggled || toggleStateLayer.pressed ? Appearance.rounding.small : Math.min(width, height) / 2 * Math.min(1, Appearance.rounding.scale)
-        color: toggled ? Colours.palette[`m3${accent.toLowerCase()}`] : Colours.palette[`m3${accent.toLowerCase()}Container`]
-
-        StateLayer {
-            id: toggleStateLayer
-
-            color: toggleBtn.toggled ? Colours.palette[`m3on${toggleBtn.accent}`] : Colours.palette[`m3on${toggleBtn.accent}Container`]
-
-            function onClicked(): void {
-                toggleBtn.onClicked();
-            }
-        }
-
-        RowLayout {
-            id: toggleBtnInner
-
-            anchors.centerIn: parent
-            spacing: Appearance.spacing.normal
-
-            MaterialIcon {
-                id: toggleBtnIcon
-
-                visible: !!text
-                fill: toggleBtn.toggled ? 1 : 0
-                text: toggleBtn.icon
-                color: toggleBtn.toggled ? Colours.palette[`m3on${toggleBtn.accent}`] : Colours.palette[`m3on${toggleBtn.accent}Container`]
-                font.pointSize: Appearance.font.size.large
-
-                Behavior on fill {
-                    Anim {}
-                }
-            }
-
-            Loader {
-                asynchronous: true
-                active: !!toggleBtn.label
-                visible: active
-
-                sourceComponent: StyledText {
-                    text: toggleBtn.label
-                    color: toggleBtn.toggled ? Colours.palette[`m3on${toggleBtn.accent}`] : Colours.palette[`m3on${toggleBtn.accent}Container`]
-                }
-            }
-        }
-
-        Behavior on radius {
-            Anim {
-                duration: Appearance.anim.durations.expressiveFastSpatial
-                easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
-            }
-        }
-
-        Behavior on Layout.preferredWidth {
-            Anim {
-                duration: Appearance.anim.durations.expressiveFastSpatial
-                easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
-            }
-        }
+    onItemSelected: function(item) {
+        session.bt.active = item;
     }
 }