diff --git a/.config/ags/modules/.commonwidgets/statusicons.js b/.config/ags/modules/.commonwidgets/statusicons.js index dc3ba3e85..2b587f409 100644 --- a/.config/ags/modules/.commonwidgets/statusicons.js +++ b/.config/ags/modules/.commonwidgets/statusicons.js @@ -84,6 +84,31 @@ export const BluetoothIndicator = () => Widget.Stack({ , }); +const BluetoothDevices = () => Widget.Box({ + className: 'spacing-h-10', + setup: self => self.hook(Bluetooth, self => { + self.children = Bluetooth.connected_devices.map((device) => { + return Widget.Box({ + className: 'bar-bluetooth-device spacing-h-5', + vpack: 'center', + tooltipText: device.name, + children: [ + Widget.Icon(`${device.iconName}-symbolic`), + (device.batteryPercentage ? Widget.Label({ + className: 'txt-smallie', + label: `${device.batteryPercentage}`, + setup: (self) => { + self.hook(device, (self) => { + self.label = `${device.batteryPercentage}`; + }, 'notify::batteryPercentage') + } + }) : null), + ] + }); + }); + self.visible = Bluetooth.connected_devices.length > 0; + }, 'notify::connected-devices'), +}) const NetworkWiredIndicator = () => Widget.Stack({ transition: 'slide_up_down', @@ -247,7 +272,10 @@ export const StatusIcons = (props = {}) => Widget.Box({ optionalKeyboardLayoutInstance, NotificationIndicator(), NetworkIndicator(), - BluetoothIndicator(), + Widget.Box({ + className: 'spacing-h-5', + children: [BluetoothIndicator(), BluetoothDevices()] + }) ] }) }); diff --git a/.config/ags/scss/_bar.scss b/.config/ags/scss/_bar.scss index 4797d4380..e209a4579 100644 --- a/.config/ags/scss/_bar.scss +++ b/.config/ags/scss/_bar.scss @@ -350,4 +350,15 @@ $bar_subgroup_bg: $surfaceVariant; .bar-util-btn:active { background-color: mix($bar_subgroup_bg, $onSurfaceVariant, 80%); +} + +.bar-bluetooth-device { + @include full-rounding; + @include element_decel; + min-height: 1.032rem; + min-width: 1.032rem; + font-size: 1.032rem; + background-color: $surface; + color: $onSurface; + padding: 0.205rem 0.341rem; } \ No newline at end of file