Olivier/colorshell
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ ags(pages): add ´show more´ kind of button to pages

Browse Source
This commit is contained in:
retrozinndev
2025-04-10 16:32:53 -03:00
parent 4ca4d5914d
commit afc0a5dacf
2 changed files with 128 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ags/widget/control-center/pages/Bluetooth.ts
+63 -47
View File
@@ -1,21 +1,32 @@
import { AstalIO, bind, timeout } from "astal";
import { bind, Variable } from "astal";
import { Gtk, Widget } from "astal/gtk3";
import AstalBluetooth from "gi://AstalBluetooth";
import { Page } from "./Page";
import { Separator, SeparatorProps } from "../../Separator";
let watchingDevices: boolean = false;
let watchTimeout: (AstalIO.Time|undefined);
const watchingDevices = new Variable<boolean>(false);
export const BluetoothPage: Page = new Page({
title: "Bluetooth Devices",
description: "Manage your Bluetooth devices and add new ones.",
className: "bluetooth",
setup: () => {
watchingDevices = true;
headerButtons: () => [
new Widget.Button({
className: "discover nf",
label: watchingDevices(watching => !watching ? '󰑓' : '󰙦'),
tooltipText: watchingDevices(watching => !watching ? "Start discovering" : "Stop discovery"),
onClick: () => {
if(watchingDevices.get()) {
stopBluetoothDevicesWatch();
return;
}
watchNewDevices();
},
onClose: stopBluetoothDevicesWatch,
}
} as Widget.ButtonProps)
],
onClose: () => stopBluetoothDevicesWatch(),
pageChild: () => new Widget.Box({
className: "connections",
orientation: Gtk.Orientation.VERTICAL,
@@ -25,28 +36,49 @@ export const BluetoothPage: Page = new Page({
new Widget.Box({
className: "paired",
orientation: Gtk.Orientation.VERTICAL,
children: bind(AstalBluetooth.get_default(), "devices").as((devices: Array<AstalBluetooth.Device>) =>
devices.filter((device: AstalBluetooth.Device) => device.connected || device.paired)
.map((dev: AstalBluetooth.Device) =>
DeviceWidget(dev)
)
)
visible: bind(AstalBluetooth.get_default(), "devices").as((devs) =>
devs.filter(dev => dev.paired || dev.connected).length > 0),
children: bind(AstalBluetooth.get_default(), "devices").as((devs: Array<AstalBluetooth.Device>) => {
const connectedDevices = devs.filter((dev: AstalBluetooth.Device) => dev.connected || dev.paired)
return [
new Widget.Label({
className: "sub-header",
label: "Paired Devices",
xalign: 0,
} as Widget.LabelProps),
...connectedDevices.map((dev: AstalBluetooth.Device) => DeviceWidget(dev))
]
})
} as Widget.BoxProps),
Separator({
size: .5,
orientation: Gtk.Orientation.VERTICAL,
alpha: .7
} as SeparatorProps),
new Widget.Box({
className: "discovered",
orientation: Gtk.Orientation.VERTICAL,
children: bind(AstalBluetooth.get_default(), "devices").as((devices: Array<AstalBluetooth.Device>) =>
devices.filter((device: AstalBluetooth.Device) => !device.connected && !device.paired)
.map((dev: AstalBluetooth.Device) =>
DeviceWidget(dev)
)
)
} as Widget.BoxProps)
visible: bind(AstalBluetooth.get_default(), "devices").as((devs) =>
devs.filter((dev) => !dev.connected && !dev.paired).length > 0),
children: bind(AstalBluetooth.get_default(), "devices").as((devices: Array<AstalBluetooth.Device>) => {
const discoveredDevices = devices.filter((dev: AstalBluetooth.Device) => !dev.connected && !dev.paired);
return [
new Widget.Label({
className: "sub-header",
label: "Others",
xalign: 0
} as Widget.LabelProps),
...discoveredDevices.map((dev: AstalBluetooth.Device) => DeviceWidget(dev))
]
})
} as Widget.BoxProps),
Separator({
size: .2,
orientation: Gtk.Orientation.VERTICAL,
alpha: .2
} as SeparatorProps),
new Widget.Button({
className: "more",
label: "More settings",
xalign: 0
} as Widget.ButtonProps)
]
} as Widget.BoxProps)
});
@@ -70,7 +102,8 @@ function DeviceWidget(dev: AstalBluetooth.Device): Gtk.Widget {
className: "alias",
halign: Gtk.Align.START,
hexpand: true,
label: bind(dev, "alias")
label: bind(dev, "alias").as((alias) => alias.split('-').length === 6 ?
`Unknown (${alias})` : alias)
} as Widget.LabelProps),
new Widget.Label({
className: "battery",
@@ -86,30 +119,13 @@ function DeviceWidget(dev: AstalBluetooth.Device): Gtk.Widget {
}
function watchNewDevices(): void {
if(!watchTimeout) {
watchTimeout = timeout(5000, () => {
reloadBluetoothDevicesList(2500);
watchNewDevices();
watchTimeout = undefined;
});
return;
}
stopBluetoothDevicesWatch();
watchingDevices.set(true);
!AstalBluetooth.get_default().adapter.discovering &&
AstalBluetooth.get_default().adapter.start_discovery();
}
export function stopBluetoothDevicesWatch(): void {
watchingDevices = false;
watchTimeout?.cancel();
watchTimeout = undefined;
watchingDevices.set(false);
AstalBluetooth.get_default().adapter.discovering &&
AstalBluetooth.get_default().adapter.stop_discovery();
}
export function reloadBluetoothDevicesList(discoveryTimeout?: number): void {
AstalBluetooth.get_default().adapter.start_discovery();
timeout(discoveryTimeout || 2500, () =>
AstalBluetooth.get_default().adapter.stop_discovery());
}
ags/widget/control-center/pages/Network.ts
+56 -5
View File
@@ -2,6 +2,10 @@ import { Gtk, Widget } from "astal/gtk3";
import { Page } from "./Page";
import AstalNetwork from "gi://AstalNetwork";
import { bind } from "astal";
import NM from "gi://NM";
import { Separator, SeparatorProps } from "../../Separator";
import { Windows } from "../../../windows";
import AstalHyprland from "gi://AstalHyprland?version=0.1";
export const PageNetwork = new Page({
title: "Network",
@@ -19,27 +23,61 @@ export const PageNetwork = new Page({
],
pageChild: () => new Widget.Box({
expand: true,
orientation: Gtk.Orientation.VERTICAL,
children: [
new Widget.Box({
className: "devices",
hexpand: true,
orientation: Gtk.Orientation.VERTICAL,
visible: bind(AstalNetwork.get_default().get_client(), "devices").as((devs) => devs.length > 0),
children: bind(AstalNetwork.get_default().get_client(), "devices").as((devices) => [
children: bind(AstalNetwork.get_default().get_client(), "devices").as((devices) => {
devices = devices.filter(dev => dev.interface !== "lo");
return [
new Widget.Label({
label: "Devices",
xalign: 0,
className: "sub-header",
} as Widget.LabelProps),
...devices.map(dev => new Widget.Button({
...devices.filter(device => device.real).map(dev => new Widget.Button({
className: "device",
child: new Widget.Label({
child: bind(AstalNetwork.get_default(), "client").as((client) => new Widget.Box({
children: [
new Widget.Icon({
className: "icon",
icon: bind(dev, "deviceType").as(deviceType =>
deviceType === NM.DeviceType.WIFI ?
"network-wireless-symbolic"
: "network-wired-symbolic"),
css: "font-size: 20px; margin-right: 6px;"
} as Widget.IconProps),
new Widget.Label({
className: "interface name",
xalign: 0,
label: dev.interface
hexpand: true,
label: bind(dev, "interface").as(iface => iface ?? "Unknown Interface")
} as Widget.LabelProps),
new Widget.Icon({
icon: "object-select-symbolic",
halign: Gtk.Align.END,
visible: bind(client, "primaryConnection").as((primaryConn) =>
primaryConn.devices.filter(device => device === dev)?.[0]).as(Boolean)
} as Widget.IconProps),
new Widget.EventBox({
child: new Widget.Icon({
icon: "view-more-symbolic"
} as Widget.IconProps),
onClick: () => {
Windows.close("control-center");
AstalHyprland.get_default().dispatch("exec",
`[animationstyle gnomed] nm-connection-editor --edit ${dev.get_udi()}`);
}
} as Widget.EventBoxProps)
]
} as Widget.BoxProps))
} as Widget.ButtonProps))
])
]
})
} as Widget.BoxProps),
new Widget.Box({
className: "wireless-aps",
@@ -70,6 +108,19 @@ export const PageNetwork = new Page({
} as Widget.BoxProps)
} as Widget.ButtonProps))) : [],
} as Widget.BoxProps),
Separator({
orientation: Gtk.Orientation.VERTICAL,
alpha: .2,
size: .2
} as SeparatorProps),
new Widget.Button({
label: "More settings",
xalign: 0,
onClick: () => {
Windows.close("control-center");
AstalHyprland.get_default().dispatch("exec", "[animationstyle gnomed] nm-connection-editor");
}
} as Widget.ButtonProps)
]
} as Widget.BoxProps)
});