diff --git a/Modules/SysTray/Popouts/BluetoothPopout.qml b/Modules/SysTray/Popouts/BluetoothPopout.qml index 4547f32..bbea15d 100644 --- a/Modules/SysTray/Popouts/BluetoothPopout.qml +++ b/Modules/SysTray/Popouts/BluetoothPopout.qml @@ -2,8 +2,10 @@ pragma ComponentBehavior: Bound import QtQuick import QtQuick.Layouts +import QtQml.Models import Quickshell import Quickshell.Bluetooth +import ZShell.Components import qs.Components import qs.Helpers import qs.Config @@ -24,7 +26,7 @@ CustomClippingRect { CustomText { Layout.rightMargin: Appearance.padding.extraSmall Layout.topMargin: Appearance.padding.normal - font.pointSize: Appearance.font.size.medium + font.pointSize: Appearance.font.size.large text: qsTr("Bluetooth") } @@ -43,6 +45,7 @@ CustomClippingRect { Toggle { checked: Bluetooth.defaultAdapter?.discovering ?? false // qmllint disable unresolved-type + last: rows.sortedConnected.length === 0 subtext: qsTr("Enable scanning for new devices") text: qsTr("Discover") @@ -53,43 +56,83 @@ CustomClippingRect { } } - Repeater { - id: connected + ListView { + id: rows + readonly property var sortedConnected: { + const byName = (a, b) => a.name.localeCompare(b.name); + return [...Bluetooth.devices.values].filter(d => d.connected).sort(byName).slice(0, 5); + } + + Layout.fillWidth: true + Layout.preferredHeight: contentHeight + interactive: false + section.property: "connected" + spacing: Appearance.spacing.extraSmall / 2 + + add: Transition { + Anim { + from: 0 + property: "opacity" + to: 1 + } + } + delegate: DelegateChooser { + role: "isDivider" + + DelegateChoice { + roleValue: true + + delegate: StatusDivider { + } + } + + DelegateChoice { + delegate: BluetoothItem { + list: rows + width: rows.width + } + } + } + displaced: Transition { + Anim { + easing.type: Easing.OutCubic + property: "y" + } + } model: ScriptModel { - values: [...Bluetooth.devices.values].filter(d => d.connected).sort((a, b) => a.name.localeCompare(b.name)).slice(0, 5) // qmllint disable unresolved-type + objectProp: "address" + values: { + const byName = (a, b) => a.name.localeCompare(b.name); + return [...[...Bluetooth.devices.values].filter(d => d.connected).sort(byName).slice(0, 5), + { + isDivider: true + }, + ...[...Bluetooth.devices.values].filter(d => !d.connected).sort(byName).slice(0, 5)]; + } } - - BluetoothItem { - first: false - repeater: connected + move: Transition { + Anim { + easing.type: Easing.OutCubic + property: "y" + } } - } - - CustomText { - Layout.rightMargin: Appearance.padding.extraSmall - Layout.topMargin: Appearance.spacing.small - color: DynamicColors.palette.m3onSurfaceVariant - font.pointSize: Appearance.font.size.small - text: { - const devices = Bluetooth.devices.values; // qmllint disable unresolved-type - let available = qsTr("%1 device%2 available").arg(devices.filter(d => !d.connected).length).arg(devices.length === 1 ? "" : "s"); - const connected = devices.filter(d => d.connected).length; - if (connected > 0) - available += qsTr(" (%1 connected)").arg(connected); - return available; + remove: Transition { + Anim { + property: "opacity" + to: 0 + } } - } + section.delegate: Rectangle { + required property string section - Repeater { - id: disconnected + color: "transparent" + height: childrenRect.height + width: ListView.view.width - model: ScriptModel { - values: [...Bluetooth.devices.values].filter(d => !d.connected).sort((a, b) => a.name.localeCompare(b.name)).slice(0, 5) // qmllint disable unresolved-type - } - - BluetoothItem { - repeater: disconnected + CustomText { + text: parent.section + } } } } @@ -97,21 +140,35 @@ CustomClippingRect { component BluetoothItem: ConnectedRect { id: btItem + readonly property int connectedCount: rows.sortedConnected.length readonly property bool connecting: Network.connectingNetwork === modelData property int horizontalPadding: Appearance.padding.largeIncreased + readonly property bool inConnectedGroup: index < connectedCount required property int index + required property ListView list readonly property bool loading: modelData.state === BluetoothDeviceState.Connecting || modelData.state === BluetoothDeviceState.Disconnecting // qmllint disable unresolved-type required property BluetoothDevice modelData - required property Repeater repeater + property int verticalPadding: Appearance.padding.smaller - Layout.fillWidth: true - Layout.preferredHeight: visible ? rowLayout.implicitHeight + Appearance.padding.smaller * 2 : 0 - first: index === 0 - last: index === (repeater.count - 1) + first: !inConnectedGroup && index === connectedCount + 1 + implicitHeight: rowLayout.implicitHeight + verticalPadding * 2 + last: inConnectedGroup ? index === connectedCount - 1 : index === list.count - 1 radius: Appearance.rounding.small + Timer { + interval: 50 + running: btItem.ListView.delayRemove + + onTriggered: btItem.ListView.delayRemove = false + } + Connections { + function onConnectedChanged(): void { + if (!btItem.modelData.connected) + btItem.ListView.delayRemove = true; + } + function onPairedChanged(): void { if (btItem.modelData.paired) btItem.modelData.connect(); @@ -148,7 +205,7 @@ CustomClippingRect { color: DynamicColors.palette.m3outline elide: Text.ElideRight font.pointSize: Appearance.font.size.small - text: qsTr("%1 battery left").arg(Math.round(btItem.modelData.battery * 100) + "%") + text: btItem.modelData.connected ? (btItem.modelData.batteryAvailable ? qsTr("%1 battery left").arg(Math.round(btItem.modelData.battery * 100) + "%") : qsTr("Battery status unknown")) : btItem.modelData.address } } @@ -162,7 +219,7 @@ CustomClippingRect { font.pointSize: Appearance.font.size.large opacity: btItem.connecting ? 0 : 1 - text: btItem.modelData.batteryAvailable ? Icons.getBatteryIcon(btItem.modelData.battery) : "battery_alert" + text: btItem.modelData.batteryAvailable ? Icons.getBatteryIcon(btItem.modelData.battery) : "battery_unknown" visible: btItem.modelData.state === BluetoothDeviceState.Connected // qmllint disable unresolved-type Behavior on opacity { @@ -186,33 +243,28 @@ CustomClippingRect { } } } - } - StateLayer { - onClicked: { - if (btItem.modelData.paired && !btItem.modelData.connected) - btItem.modelData.connect(); - else if (btItem.modelData.pairing) - btItem.modelData.cancelPair(); - else if (!btItem.modelData.paired) - btItem.modelData.pair(); - else if (btItem.modelData.connected) - btItem.modelData.disconnect(); + ButtonRow { + spacing: Appearance.spacing.small + + IconTextButton { + font.pointSize: Appearance.font.size.small + icon: btItem.modelData.connected ? "link_off" : btItem.modelData.paired ? "link" : "add_link" + text: btItem.modelData.connected ? qsTr("Disconnect") : btItem.modelData.paired ? qsTr("Connect") : qsTr("Pair") + + onClicked: { + if (btItem.modelData.connected) + btItem.modelData.disconnect(); + else if (btItem.modelData.paired) + btItem.modelData.connect(); + else if (!btItem.modelData.paired) + btItem.modelData.pair(); + else if (btItem.modelData.pairing) + btItem.modelData.cancelPair(); + } + } } } - - IconButton { - anchors.right: rowLayout.right - anchors.rightMargin: rowLayout.anchors.rightMargin + icon.width - anchors.verticalCenter: parent.verticalCenter - font.pointSize: Appearance.font.size.large - icon: "cancel" - implicitHeight: parent.height - Appearance.padding.larger * 2 - type: IconButton.Text - visible: btItem.modelData.paired - - onClicked: btItem.modelData.forget() - } } component ConnectedRect: CustomRect { id: bg @@ -225,6 +277,35 @@ CustomClippingRect { color: DynamicColors.tPalette.m3surfaceContainer topLeftRadius: first ? Appearance.rounding.large : Appearance.rounding.extraSmall topRightRadius: first ? Appearance.rounding.large : Appearance.rounding.extraSmall + + Behavior on bottomLeftRadius { + Anim { + } + } + Behavior on bottomRightRadius { + Anim { + } + } + Behavior on topLeftRadius { + Anim { + } + } + Behavior on topRightRadius { + Anim { + } + } + } + component StatusDivider: CustomText { + bottomPadding: Appearance.spacing.extraSmall + color: DynamicColors.palette.m3onSurfaceVariant + font.pointSize: Appearance.font.size.smaller + text: { + const devices = Bluetooth.devices.values; // qmllint disable unresolved-type + const connectedCount = devices.filter(d => d.connected).length; + let available = qsTr("%1 device%2 available").arg(devices.length - connectedCount).arg(devices.length === 1 ? "" : "s"); + return available; + } + topPadding: Appearance.spacing.small } component Toggle: CustomSwitch { id: toggleItem diff --git a/Modules/SysTray/Popouts/NetworkPopout.qml b/Modules/SysTray/Popouts/NetworkPopout.qml index c8b0463..3904f71 100644 --- a/Modules/SysTray/Popouts/NetworkPopout.qml +++ b/Modules/SysTray/Popouts/NetworkPopout.qml @@ -253,19 +253,6 @@ CustomClippingRect { } } } - - IconButton { - anchors.right: rowLayout.right - anchors.rightMargin: rowLayout.anchors.rightMargin + icon.width - anchors.verticalCenter: parent.verticalCenter - font.pointSize: Appearance.font.size.large - icon: "cancel" - implicitHeight: parent.height - Appearance.padding.larger * 2 - type: IconButton.Text - visible: networkItem.known - - onClicked: networkItem.modelData.forget() - } } component Spacer: Item { id: spacer