sidebar: add bluetooth devices

This commit is contained in:
end-4 2024-03-27 17:47:44 +07:00
parent d291993985
commit c32358c1f8
4 changed files with 133 additions and 3 deletions

View file

@ -0,0 +1,93 @@
// This file is for the notification list on the sidebar
// For the popup notifications, see onscreendisplay.js
// The actual widget for each single notification is in ags/modules/.commonwidgets/notification.js
import Widget from 'resource:///com/github/Aylur/ags/widget.js';
import Bluetooth from 'resource:///com/github/Aylur/ags/service/bluetooth.js';
import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
const { Box, Button, Icon, Label, Scrollable, Slider, Stack } = Widget;
const { execAsync, exec } = Utils;
import { MaterialIcon } from '../../.commonwidgets/materialicon.js';
import { setupCursorHover } from '../../.widgetutils/cursorhover.js';
const USE_SYMBOLIC_ICONS = false;
const BluetoothDevice = (device) => {
console.log(device);
return Box({
className: 'sidebar-bluetooth-device spacing-h-10',
children: [
Icon({
className: 'sidebar-bluetooth-appicon',
vpack: 'center',
tooltipText: device.name,
setup: (self) => self.hook(device, (self) => {
self.icon = `${device.iconName}${USE_SYMBOLIC_ICONS ? '-symbolic' : ''}`;
}),
}),
Box({
hexpand: true,
vpack: 'center',
vertical: true,
children: [
Label({
xalign: 0,
maxWidthChars: 10,
truncate: 'end',
label: device.name,
className: 'txt-small',
setup: (self) => self.hook(device, (self) => {
self.label = device.name;
}),
}),
Label({
xalign: 0,
maxWidthChars: 10,
truncate: 'end',
label: device.connected ? 'Connected' : (device.paired ? 'Paired' : ''),
className: 'txt-subtext',
setup: (self) => self.hook(device, (self) => {
self.label = device.connected ? 'Connected' : (device.paired ? 'Paired' : '');
}),
}),
]
}),
Button({
vpack: 'center',
className: 'sidebar-bluetooth-device-remove',
child: MaterialIcon('delete', 'norm'),
setup: setupCursorHover,
onClicked: () => execAsync(['bluetoothctl', 'remove', device.address]).catch(print),
})
]
})
}
export default (props) => {
const deviceList = Scrollable({
vexpand: true,
child: Box({
attribute: {
'updateDevices': (self) => {
const devices = Bluetooth.devices;
self.children = devices.map(d => BluetoothDevice(d));
},
},
vertical: true,
className: 'spacing-v-5',
setup: (self) => self
.hook(Bluetooth, self.attribute.updateDevices, 'device-added')
.hook(Bluetooth, self.attribute.updateDevices, 'device-removed')
,
})
})
return Box({
...props,
className: 'spacing-v-5',
vertical: true,
children: [
deviceList,
// mainContent,
// status,
]
});
}

View file

@ -17,6 +17,8 @@ import {
} from "./quicktoggles.js";
import ModuleNotificationList from "./centermodules/notificationlist.js";
import ModuleVolumeMixer from "./centermodules/volumemixer.js";
// import ModuleNetworks from "./centermodules/networks.js";
import ModuleBluetooth from "./centermodules/bluetooth.js";
import { ModuleCalendar } from "./calendar.js";
import { getDistroIcon } from '../.miscutils/system.js';
import { MaterialIcon } from '../.commonwidgets/materialicon.js';
@ -34,6 +36,16 @@ const centerWidgets = [
materialIcon: 'volume_up',
contentWidget: ModuleVolumeMixer(),
},
// {
// name: 'Networks',
// materialIcon: 'lan',
// contentWidget: ModuleNetworks(),
// },
{
name: 'Bluetooth',
materialIcon: 'bluetooth',
contentWidget: ModuleBluetooth(),
},
];
const timeRow = Box({

View file

@ -57,6 +57,8 @@ $layer1Hover: mix($layer1, $onLayer1, 85%);
$layer1Active: mix($layer1, $onLayer1, 70%);
$layer2Hover: mix($layer2, $onLayer2, 90%);
$layer2Active: mix($layer2, $onLayer2, 80%);
$layer3Hover: mix($layer3, $onLayer3, 90%);
$layer3Active: mix($layer3, $onLayer3, 80%);
// Elements
$windowtitleOnLayer0Inactive: $onLayer0Inactive;
$windowtitleOnLayer0: $onLayer0;

View file

@ -847,9 +847,6 @@ $waifu_image_overlay_transparency: 0.7;
}
.sidebar-volmixer-stream {
// @include normal-rounding;
// background-color: $layer2;
// color: $onLayer2;
border-bottom: 0.068rem solid $outlineVariant;
padding: 0.682rem;
color: $onSurface;
@ -884,4 +881,30 @@ $waifu_image_overlay_transparency: 0.7;
.sidebar-volmixer-status {
color: $onSurface;
margin: 0rem 0.682rem;
}
.sidebar-bluetooth-device {
padding: 0.682rem;
@include normal-rounding;
background-color: $layer2;
color: $onLayer2;
}
.sidebar-bluetooth-appicon {
font-size: 3.273rem;
}
.sidebar-bluetooth-device-remove {
@include full-rounding;
min-width: 2.045rem;
min-height: 2.045rem;
// background-color: $layer3;
padding: 0.341rem;
}
.sidebar-bluetooth-device-remove:hover,
.sidebar-bluetooth-device-remove:focus {
@include full-rounding;
background-color: $layer2Hover;
padding: 0.341rem;
}