sidebar: bluetooth: add connection toggle

.config/ags/modules/.commonwidgets/configwidgets.js

@@ -1,37 +1,60 @@
+import Variable from 'resource:///com/github/Aylur/ags/variable.js';
 import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
 import { MaterialIcon } from './materialicon.js';
 import { setupCursorHover } from '../.widgetutils/cursorhover.js';
 const { Box, Button, Label, Revealer } = Widget;
 
-export const ConfigToggle = ({ icon, name, desc = '', initValue, onChange, expandWidget = true, ...rest }) => {
+export const ConfigToggle = ({
-    let value = initValue;
+    icon, name, desc = '', initValue,
+    expandWidget = true,
+    onChange = () => { }, extraSetup = () => { },
+    ...rest
+}) => {
+    const enabled = Variable(initValue);
     const toggleIcon = Label({
-        className: `icon-material txt-bold ${value ? '' : 'txt-poof'}`,
+        className: `icon-material txt-bold ${enabled.value ? '' : 'txt-poof'}`,
-        label: `${value ? 'check' : ''}`,
+        label: `${enabled.value ? 'check' : ''}`,
+        setup: (self) => self.hook(enabled, (self) => {
+            self.toggleClassName('switch-fg-toggling-false', false);
+            if (!enabled.value) {
+                self.label = '';
+                self.toggleClassName('txt-poof', true);
+            }
+            else Utils.timeout(1, () => {
+                toggleIcon.label = 'check';
+                toggleIcon.toggleClassName('txt-poof', false);
+            })
+        }),
     })
     const toggleButtonIndicator = Box({
-        className: `switch-fg ${value ? 'switch-fg-true' : ''}`,
+        className: `switch-fg ${enabled.value ? 'switch-fg-true' : ''}`,
         vpack: 'center',
         hpack: 'start',
         homogeneous: true,
         children: [toggleIcon,],
+        setup: (self) => self.hook(enabled, (self) => {
+            self.toggleClassName('switch-fg-true', enabled.value);
+        }),
     });
     const toggleButton = Box({
         hpack: 'end',
-        className: `switch-bg ${value ? 'switch-bg-true' : ''}`,
+        className: `switch-bg ${enabled.value ? 'switch-bg-true' : ''}`,
         homogeneous: true,
-        children: [toggleButtonIndicator,],
+        children: [toggleButtonIndicator],
+        setup: (self) => self.hook(enabled, (self) => {
+            self.toggleClassName('switch-bg-true', enabled.value);
+        }),
     });
     const widgetContent = Box({
         tooltipText: desc,
         className: 'txt spacing-h-5 configtoggle-box',
         children: [
-            MaterialIcon(icon, 'norm'),
+            (icon !== undefined ? MaterialIcon(icon, 'norm') : null),
-            Label({
+            (name !== undefined ? Label({
                 className: 'txt txt-small',
                 label: name,
-            }),
+            }) : null),
             expandWidget ? Box({ hexpand: true }) : null,
             toggleButton,
         ]
@@ -39,33 +62,24 @@ export const ConfigToggle = ({ icon, name, desc = '', initValue, onChange, expan
     const interactionWrapper = Button({
         attribute: {
             toggle: (newValue) => {
-                value = !value;
+                enabled.value = !enabled.value;
-                toggleIcon.toggleClassName('switch-fg-toggling-false', false);
+                onChange(interactionWrapper, enabled.value);
-                if (!value) {
-                    toggleIcon.label = '';
-                    toggleIcon.toggleClassName('txt-poof', true);
-                }
-                toggleButtonIndicator.toggleClassName('switch-fg-true', value);
-                toggleButton.toggleClassName('switch-bg-true', value);
-                if (value) Utils.timeout(1, () => {
-                    toggleIcon.label = 'check';
-                    toggleIcon.toggleClassName('txt-poof', false);
-                })
-                onChange(interactionWrapper, value);
             }
         },
         child: widgetContent,
         onClicked: (self) => self.attribute.toggle(self),
-        setup: (button) => {
+        setup: (self) => {
-            setupCursorHover(button),
+            setupCursorHover(self);
-                button.connect('pressed', () => { // mouse down
+            self.connect('pressed', () => { // mouse down
                 toggleIcon.toggleClassName('txt-poof', true);
                 toggleIcon.toggleClassName('switch-fg-true', false);
-                    if (!value) toggleIcon.toggleClassName('switch-fg-toggling-false', true);
+                if (!enabled.value) toggleIcon.toggleClassName('switch-fg-toggling-false', true);
             });
+            extraSetup(self)
         },
         ...rest,
     });
+    interactionWrapper.enabled = enabled;
     return interactionWrapper;
 }
 

.config/ags/modules/sideright/centermodules/bluetooth.js

@@ -8,23 +8,23 @@ 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';
+import { ConfigToggle } from '../../.commonwidgets/configwidgets.js';
+
+// can't connect: sync_problem
 
 const USE_SYMBOLIC_ICONS = false;
 
 const BluetoothDevice = (device) => {
-    console.log(device);
+    // console.log(device);
-    return Box({
+    const deviceIcon = Icon({
-        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({
+    const deviceStatus = Box({
         hexpand: true,
         vpack: 'center',
         vertical: true,
@@ -50,13 +50,36 @@ const BluetoothDevice = (device) => {
                 }),
             }),
         ]
+    });
+    const deviceConnectButton = ConfigToggle({
+        vpack: 'center',
+        expandWidget: false,
+        initValue: device.connected,
+        onChange: (self, newValue) => {
+            device.setConnection(newValue);
+        },
+        extraSetup: (self) => self.hook(device, (self) => {
+            Utils.timeout(200, () => self.enabled.value = device.connected);
         }),
-            Button({
+    })
+    const deviceRemoveButton = Button({
         vpack: 'center',
         className: 'sidebar-bluetooth-device-remove',
         child: MaterialIcon('delete', 'norm'),
         setup: setupCursorHover,
         onClicked: () => execAsync(['bluetoothctl', 'remove', device.address]).catch(print),
+    });
+    return Box({
+        className: 'sidebar-bluetooth-device spacing-h-10',
+        children: [
+            deviceIcon,
+            deviceStatus,
+            Box({
+                className: 'spacing-h-5',
+                children: [
+                    deviceConnectButton,
+                    deviceRemoveButton,
+                ]
             })
         ]
     })