matt1432/nixos-configs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(ags bt): add devices dynamically
All checks were successful
Discord / discord commits (push) Has been skipped
Details

Browse source
This commit is contained in:
matt1432 2024-12-04 22:21:52 -05:00
parent d02d82c7e1
commit 7b889c24ce
3 changed files with 104 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
nixosModules/ags/config/widgets/bluetooth/_index.scss
View file

@ -5,15 +5,15 @@
margin-top: 0;
.toggle-button {
background-color: colors.$window_bg_color;
padding: 4px;
min-width: 30px;
min-height: 30px;
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
box-shadow: 2px 1px 2px colors.$accent-color;
padding: 4px;
margin: 4px 4px 4px 4px;
background-color: colors.$window_bg_color;
&.active {
box-shadow: 0 0 0 white;

101
nixosModules/ags/config/widgets/bluetooth/device.tsx
View file

@ -1,57 +1,74 @@
import { bind } from 'astal';
import { bind, idle } from 'astal';
import { Gtk, Widget } from 'astal/gtk3';
import { register } from 'astal/gobject';
import AstalBluetooth from 'gi://AstalBluetooth';
import Separator from '../misc/separator';
export default (dev: AstalBluetooth.Device) => {
const rev = (
<revealer
transitionType={Gtk.RevealerTransitionType.SLIDE_DOWN}
>
<box>
TODO: add buttons here
</box>
</revealer>
) as Widget.Revealer;
@register()
export default class DeviceWidget extends Widget.Revealer {
readonly dev: AstalBluetooth.Device;
const button = (
<button
onButtonReleaseEvent={() => {
rev.revealChild = !rev.revealChild;
}}
>
<box>
<icon
icon={bind(dev, 'connected').as((isConnected) => isConnected ?
'check-active-symbolic' :
'check-mixed-symbolic')}
constructor({ dev }: { dev: AstalBluetooth.Device }) {
const rev = (
<revealer
transitionType={Gtk.RevealerTransitionType.SLIDE_DOWN}
>
<box>
TODO: add buttons here
</box>
</revealer>
) as Widget.Revealer;
css={bind(dev, 'paired').as((isPaired) => isPaired ?
'' :
'opacity: 0;')}
/>
const button = (
<button
onButtonReleaseEvent={() => {
rev.revealChild = !rev.revealChild;
}}
>
<box>
<icon
icon={bind(dev, 'connected').as((isConnected) => isConnected ?
'check-active-symbolic' :
'check-mixed-symbolic')}
<Separator size={8} />
css={bind(dev, 'paired').as((isPaired) => isPaired ?
'' :
'opacity: 0;')}
/>
<icon
icon={bind(dev, 'icon').as((iconName) =>
iconName ? `${iconName}-symbolic` : 'help-browser-symbolic')}
/>
<Separator size={8} />
<Separator size={8} />
<icon
icon={bind(dev, 'icon').as((iconName) =>
iconName ? `${iconName}-symbolic` : 'help-browser-symbolic')}
/>
<label label={bind(dev, 'name')} />
</box>
</button>
);
<Separator size={8} />
return (
<box vertical>
{button}
{rev}
</box>
);
<label label={bind(dev, 'name')} />
</box>
</button>
);
super({
revealChild: false,
transitionType: Gtk.RevealerTransitionType.SLIDE_DOWN,
child: (
<box vertical>
{button}
{rev}
</box>
),
});
this.dev = dev;
this.connect('realize', () => idle(() => {
this.revealChild = true;
}));
};
};

45
nixosModules/ags/config/widgets/bluetooth/main.tsx
View file

@ -12,6 +12,45 @@ import DeviceWidget from './device';
export default () => {
const bluetooth = AstalBluetooth.get_default();
const deviceList = (
<scrollable
className="list"
css="min-height: 200px;"
hscroll={Gtk.PolicyType.NEVER}
vscroll={Gtk.PolicyType.AUTOMATIC}
>
<box
vertical
setup={(self) => {
self.children = bluetooth.devices
.filter((dev) => dev.name)
.map((dev) => <DeviceWidget dev={dev} />);
self.hook(bluetooth, 'device-added', (_, dev) => {
if (dev.name) {
self.add(<DeviceWidget dev={dev} />);
}
});
self.hook(bluetooth, 'device-removed', (_, dev) => {
const children = self.children as DeviceWidget[];
const devWidget = children.find((ch) => ch.dev === dev);
if (devWidget) {
devWidget.revealChild = false;
setTimeout(() => {
devWidget.destroy();
}, devWidget.transitionDuration + 100);
}
});
}}
>
</box>
</scrollable>
);
return (
<box
className="bluetooth widget"
@ -53,15 +92,13 @@ export default () => {
}
}}
>
<icon icon="emblem-synchronizing-symbolic" css="font-size: 20px;" />
<icon icon="emblem-synchronizing-symbolic" css="font-size: 30px;" />
</ToggleButton>
</centerbox>
<Separator size={8} vertical />
{bind(bluetooth, 'devices').as((devices) => devices
.filter((dev) => dev.name)
.map((dev) => DeviceWidget(dev)))}
{deviceList}
</box>
);
};