From c32358c1f8908ed954792bb185f84a491209d613 Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Wed, 27 Mar 2024 17:47:44 +0700 Subject: [PATCH] sidebar: add bluetooth devices --- .../sideright/centermodules/bluetooth.js | 93 +++++++++++++++++++ .config/ags/modules/sideright/sideright.js | 12 +++ .config/ags/scss/_colors.scss | 2 + .config/ags/scss/_sidebars.scss | 29 +++++- 4 files changed, 133 insertions(+), 3 deletions(-) create mode 100644 .config/ags/modules/sideright/centermodules/bluetooth.js diff --git a/.config/ags/modules/sideright/centermodules/bluetooth.js b/.config/ags/modules/sideright/centermodules/bluetooth.js new file mode 100644 index 00000000..ed2c9e9c --- /dev/null +++ b/.config/ags/modules/sideright/centermodules/bluetooth.js @@ -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, + ] + }); +} diff --git a/.config/ags/modules/sideright/sideright.js b/.config/ags/modules/sideright/sideright.js index be9f9bb2..52e4937a 100644 --- a/.config/ags/modules/sideright/sideright.js +++ b/.config/ags/modules/sideright/sideright.js @@ -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({ diff --git a/.config/ags/scss/_colors.scss b/.config/ags/scss/_colors.scss index 540eeea9..39608b4e 100644 --- a/.config/ags/scss/_colors.scss +++ b/.config/ags/scss/_colors.scss @@ -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; diff --git a/.config/ags/scss/_sidebars.scss b/.config/ags/scss/_sidebars.scss index 59210bd3..9094dab8 100644 --- a/.config/ags/scss/_sidebars.scss +++ b/.config/ags/scss/_sidebars.scss @@ -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; } \ No newline at end of file