never/noctalia-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Bluetooth Panel: UI cleanup/factorization

Browse source
This commit is contained in:
LemmyCook 2025-09-04 23:26:19 -04:00
parent 5910c65bcf
commit cc8a24f445
5 changed files with 135 additions and 187 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Modules/Bar/Widgets/Bluetooth.qml
View file

@ -21,6 +21,6 @@ NIconButton {
colorBorderHover: Color.transparent colorBorderHover: Color.transparent
icon: "bluetooth" icon: "bluetooth"
tooltipText: "Bluetooth devices" tooltipText: "Bluetooth"
onClicked: PanelService.getPanel("bluetoothPanel")?.toggle(screen, this) onClicked: PanelService.getPanel("bluetoothPanel")?.toggle(screen, this)
} }

1
Modules/Bar/Widgets/Workspace.qml
View file

@ -132,7 +132,6 @@ Item {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
} }
Row { Row {

278
Modules/BluetoothPanel/BluetoothDevicesList.qml
View file

@ -36,65 +36,39 @@ ColumnLayout {
visible: BluetoothService.adapter && BluetoothService.adapter.enabled visible: BluetoothService.adapter && BluetoothService.adapter.enabled
Rectangle { Rectangle {
id: bluetoothDeviceRectangle id: device
property bool canConnect: BluetoothService.canConnect(modelData)
property bool canDisconnect: BluetoothService.canDisconnect(modelData)
property bool isBusy: BluetoothService.isDeviceBusy(modelData)
Layout.fillWidth: true readonly property bool canConnect: BluetoothService.canConnect(modelData)
Layout.preferredHeight: 64 * scaling + (10 * scaling * modelData.batteryAvailable) readonly property bool canDisconnect: BluetoothService.canDisconnect(modelData)
radius: Style.radiusM * scaling readonly property bool isBusy: BluetoothService.isDeviceBusy(modelData)
color: {
if (availableDeviceArea.containsMouse) {
if (canDisconnect && !isBusy)
return Color.mError
if (!isBusy)
return Color.mTertiary
return Color.mPrimary
}
function getContentColor(defaultColor = Color.mOnSurface) {
if (modelData.pairing || modelData.state === BluetoothDeviceState.Connecting) if (modelData.pairing || modelData.state === BluetoothDeviceState.Connecting)
return Color.mPrimary return Color.mPrimary
if (modelData.blocked) if (modelData.blocked)
return Color.mError return Color.mError
return defaultColor
return Color.mSurfaceVariant
} }
border.color: Color.mOutline
Layout.fillWidth: true
Layout.preferredHeight: deviceLayout.implicitHeight + (Style.marginM * scaling * 2)
radius: Style.radiusM * scaling
color: Color.mSurface
border.width: Math.max(1, Style.borderS * scaling) border.width: Math.max(1, Style.borderS * scaling)
border.color: getContentColor(Color.mOutline)
NTooltip {
id: tooltip
target: bluetoothDeviceRectangle
positionAbove: Settings.data.bar.position === "bottom"
text: root.tooltipText
}
RowLayout { RowLayout {
id: deviceLayout
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginM * scaling anchors.margins: Style.marginM * scaling
spacing: Style.marginS * scaling spacing: Style.marginM * scaling
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
// One device BT icon // One device BT icon
NIcon { NIcon {
text: BluetoothService.getDeviceIcon(modelData) text: BluetoothService.getDeviceIcon(modelData)
font.pointSize: Style.fontSizeXXL * scaling font.pointSize: Style.fontSizeXXL * scaling
color: { color: getContentColor(Color.mOnSurface)
if (availableDeviceArea.containsMouse)
return Color.mOnTertiary
if (modelData.pairing || modelData.state === BluetoothDeviceState.Connecting)
return Color.mOnPrimary
if (modelData.blocked)
return Color.mOnError
return Color.mOnSurface
}
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
} }
@ -106,25 +80,23 @@ ColumnLayout {
NText { NText {
text: modelData.name || modelData.deviceName text: modelData.name || modelData.deviceName
font.pointSize: Style.fontSizeM * scaling font.pointSize: Style.fontSizeM * scaling
elide: Text.ElideRight
color: {
if (availableDeviceArea.containsMouse)
return Color.mOnTertiary
if (modelData.pairing || modelData.state === BluetoothDeviceState.Connecting)
return Color.mOnPrimary
if (modelData.blocked)
return Color.mOnError
return Color.mOnSurface
}
font.weight: Style.fontWeightMedium font.weight: Style.fontWeightMedium
elide: Text.ElideRight
color: getContentColor(Color.mOnSurface)
Layout.fillWidth: true Layout.fillWidth: true
} }
// Status
NText {
text: BluetoothService.getStatusString(modelData)
visible: text !== ""
font.pointSize: Style.fontSizeXS * scaling
color: getContentColor(Color.mOnSurfaceVariant)
}
// Signal Strength // Signal Strength
RowLayout { RowLayout {
visible: modelData.signalStrength !== undefined
Layout.fillWidth: true Layout.fillWidth: true
spacing: Style.marginXS * scaling spacing: Style.marginXS * scaling
@ -132,76 +104,32 @@ ColumnLayout {
NText { NText {
text: BluetoothService.getSignalStrength(modelData) text: BluetoothService.getSignalStrength(modelData)
font.pointSize: Style.fontSizeXS * scaling font.pointSize: Style.fontSizeXS * scaling
color: { color: getContentColor(Color.mOnSurfaceVariant)
if (availableDeviceArea.containsMouse)
return Color.mOnTertiary
if (modelData.pairing || modelData.state === BluetoothDeviceState.Connecting)
return Color.mOnPrimary
if (modelData.blocked)
return Color.mOnError
return Color.mOnSurfaceVariant
}
} }
NIcon { NIcon {
visible: modelData.signalStrength > 0 && !modelData.pairing && !modelData.blocked
text: BluetoothService.getSignalIcon(modelData) text: BluetoothService.getSignalIcon(modelData)
font.pointSize: Style.fontSizeXS * scaling font.pointSize: Style.fontSizeXS * scaling
color: { color: getContentColor(Color.mOnSurface)
if (availableDeviceArea.containsMouse)
return Color.mOnTertiary
if (modelData.pairing || modelData.state === BluetoothDeviceState.Connecting)
return Color.mOnPrimary
if (modelData.blocked)
return Color.mOnError
return Color.mOnSurface
}
visible: modelData.signalStrength !== undefined && modelData.signalStrength > 0 && !modelData.pairing
&& !modelData.blocked
} }
NText { NText {
visible: modelData.signalStrength > 0 && !modelData.pairing
&& !modelData.blocked
text: (modelData.signalStrength !== undefined text: (modelData.signalStrength !== undefined
&& modelData.signalStrength > 0) ? modelData.signalStrength + "%" : "" && modelData.signalStrength > 0) ? modelData.signalStrength + "%" : ""
font.pointSize: Style.fontSizeXS * scaling font.pointSize: Style.fontSizeXS * scaling
color: { color: getContentColor(Color.mOnSurface)
if (availableDeviceArea.containsMouse)
return Color.mOnTertiary
if (modelData.pairing || modelData.state === BluetoothDeviceState.Connecting)
return Color.mOnPrimary
if (modelData.blocked)
return Color.mOnError
return Color.mOnSurface
}
visible: modelData.signalStrength !== undefined && modelData.signalStrength > 0 && !modelData.pairing
&& !modelData.blocked
} }
} }
// Battery
NText { NText {
visible: modelData.batteryAvailable visible: modelData.batteryAvailable
text: BluetoothService.getBattery(modelData) text: BluetoothService.getBattery(modelData)
font.pointSize: Style.fontSizeXS * scaling font.pointSize: Style.fontSizeXS * scaling
color: { color: getContentColor(Color.mOnSurfaceVariant)
if (availableDeviceArea.containsMouse)
return Color.mOnTertiary
if (modelData.pairing || modelData.state === BluetoothDeviceState.Connecting)
return Color.mOnPrimary
if (modelData.blocked)
return Color.mOnError
return Color.mOnSurfaceVariant
}
} }
} }
@ -211,96 +139,86 @@ ColumnLayout {
} }
// Call to action // Call to action
Rectangle { NButton {
Layout.preferredWidth: 80 * scaling id: button
Layout.preferredHeight: 28 * scaling
radius: Style.radiusM * scaling
visible: (modelData.state !== BluetoothDeviceState.Connecting) visible: (modelData.state !== BluetoothDeviceState.Connecting)
color: Color.transparent enabled: (canConnect || canDisconnect) && !isBusy
outlined: !button.hovered
border.color: { fontSize: Style.fontSizeXS * scaling
if (availableDeviceArea.containsMouse) { fontWeight: Style.fontWeightMedium
return Color.mOnTertiary backgroundColor: {
} if (device.canDisconnect && !isBusy) {
if (bluetoothDeviceRectangle.canDisconnect && !isBusy) {
return Color.mError return Color.mError
} }
return Color.mPrimary return Color.mPrimary
} }
border.width: Math.max(1, Style.borderS * scaling) tooltipText: root.tooltipText
opacity: canConnect || isBusy || canDisconnect ? 1 : 0.5 text: {
if (modelData.pairing) {
NText { return "Pairing..."
anchors.centerIn: parent
text: {
if (modelData.pairing) {
return "Pairing..."
}
if (modelData.blocked) {
return "Blocked"
}
if (modelData.connected) {
return "Disconnect"
}
return "Connect"
} }
font.pointSize: Style.fontSizeXS * scaling if (modelData.blocked) {
font.weight: Style.fontWeightMedium return "Blocked"
color: {
if (availableDeviceArea.containsMouse) {
return Color.mOnTertiary
}
if (bluetoothDeviceRectangle.canDisconnect && !isBusy) {
return Color.mError
} else {
return Color.mPrimary
}
} }
if (modelData.connected) {
return "Disconnect"
}
return "Connect"
} }
} icon: (isBusy ? "hourglass_full" : null)
} onClicked: {
MouseArea {
id: availableDeviceArea
acceptedButtons: Qt.LeftButton | Qt.RightButton
anchors.fill: parent
hoverEnabled: true
cursorShape: (canConnect || canDisconnect)
&& !isBusy ? Qt.PointingHandCursor : (isBusy ? Qt.BusyCursor : Qt.ArrowCursor)
onEntered: {
if (root.tooltipText && !isBusy) {
tooltip.show()
}
}
onExited: {
if (root.tooltipText && !isBusy) {
tooltip.hide()
}
}
onClicked: function (mouse) {
if (!modelData || modelData.pairing) {
return
}
if (root.tooltipText && !isBusy) {
tooltip.hide()
}
if (mouse.button === Qt.LeftButton) {
if (modelData.connected) { if (modelData.connected) {
BluetoothService.disconnectDevice(modelData) BluetoothService.disconnectDevice(modelData)
} else { } else {
BluetoothService.connectDeviceWithTrust(modelData) BluetoothService.connectDeviceWithTrust(modelData)
} }
} else if (mouse.button === Qt.RightButton) { }
onRightClicked:
{
BluetoothService.forgetDevice(modelData) BluetoothService.forgetDevice(modelData)
} }
} }
} }
// MouseArea {
// id: availableDeviceArea
// acceptedButtons: Qt.LeftButton | Qt.RightButton
// anchors.fill: parent
// hoverEnabled: true
// cursorShape: (canConnect || canDisconnect)
// && !isBusy ? Qt.PointingHandCursor : (isBusy ? Qt.BusyCursor : Qt.ArrowCursor)
// onEntered: {
// if (root.tooltipText && !isBusy) {
// tooltip.show()
// }
// }
// onExited: {
// if (root.tooltipText && !isBusy) {
// tooltip.hide()
// }
// }
// onClicked: function (mouse) {
// if (!modelData || modelData.pairing) {
// return
// }
// if (root.tooltipText && !isBusy) {
// tooltip.hide()
// }
// if (mouse.button === Qt.LeftButton) {
// if (modelData.connected) {
// BluetoothService.disconnectDevice(modelData)
// } else {
// BluetoothService.connectDeviceWithTrust(modelData)
// }
// } else if (mouse.button === Qt.RightButton) {
// BluetoothService.forgetDevice(modelData)
// }
// }
// }
} }
} }
} }

10
Services/BluetoothService.qml
View file

@ -107,13 +107,21 @@ Singleton {
return device.connected && !device.pairing && !device.blocked return device.connected && !device.pairing && !device.blocked
} }
function getSignalStrength(device) { function getStatusString(device) {
if (device.state === BluetoothDeviceState.Connecting) {
return "Connecting..."
}
if (device.pairing) { if (device.pairing) {
return "Pairing..." return "Pairing..."
} }
if (device.blocked) { if (device.blocked) {
return "Blocked" return "Blocked"
} }
return ""
}
function getSignalStrength(device) {
if (!device || device.signalStrength === undefined || device.signalStrength <= 0) { if (!device || device.signalStrength === undefined || device.signalStrength <= 0) {
return "Signal: Unknown" return "Signal: Unknown"
} }

31
Widgets/NButton.qml
View file

@ -9,13 +9,15 @@ Rectangle {
// Public properties // Public properties
property string text: "" property string text: ""
property string icon: "" property string icon: ""
property string tooltipText
property color backgroundColor: Color.mPrimary property color backgroundColor: Color.mPrimary
property color textColor: Color.mOnPrimary property color textColor: Color.mOnPrimary
property color hoverColor: Color.mTertiary property color hoverColor: Color.mTertiary
property color pressColor: Color.mSecondary property color pressColor: Color.mSecondary
property bool enabled: true property bool enabled: true
property int fontSize: Style.fontSizeM * scaling property real fontSize: Style.fontSizeM * scaling
property int iconSize: Style.fontSizeL * scaling property int fontWeight: Style.fontWeightBold
property real iconSize: Style.fontSizeL * scaling
property bool outlined: false property bool outlined: false
property real customWidth: -1 property real customWidth: -1
property real customHeight: -1 property real customHeight: -1
@ -106,7 +108,7 @@ Rectangle {
visible: root.text !== "" visible: root.text !== ""
text: root.text text: root.text
font.pointSize: root.fontSize font.pointSize: root.fontSize
font.weight: Style.fontWeightBold font.weight: root.fontWeight
color: { color: {
if (!root.enabled) if (!root.enabled)
return Color.mOnSurfaceVariant return Color.mOnSurfaceVariant
@ -127,6 +129,13 @@ Rectangle {
} }
} }
NTooltip {
id: tooltip
target: root
positionAbove: Settings.data.bar.position === "bottom"
text: root.tooltipText
}
// Mouse interaction // Mouse interaction
MouseArea { MouseArea {
id: mouseArea id: mouseArea
@ -136,16 +145,27 @@ Rectangle {
acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
cursorShape: root.enabled ? Qt.PointingHandCursor : Qt.ArrowCursor cursorShape: root.enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
onEntered: root.hovered = true onEntered: {
root.hovered = true
if (tooltipText) {
tooltip.show()
}
}
onExited: { onExited: {
root.hovered = false root.hovered = false
root.pressed = false root.pressed = false
if (tooltipText) {
tooltip.hide()
}
} }
onPressed: mouse => { onPressed: mouse => {
root.pressed = true root.pressed = true
} }
onReleased: mouse => { onReleased: mouse => {
root.pressed = false root.pressed = false
if (tooltipText) {
tooltip.hide()
}
if (!root.hovered) { if (!root.hovered) {
return return
} }
@ -161,6 +181,9 @@ Rectangle {
onCanceled: { onCanceled: {
root.pressed = false root.pressed = false
root.hovered = false root.hovered = false
if (tooltipText) {
tooltip.hide()
}
} }
} }
} }