From e04bb9150af5c5c1de5745eb4e816042f444afb4 Mon Sep 17 00:00:00 2001 From: retrozinndev Date: Mon, 21 Apr 2025 18:10:14 -0300 Subject: [PATCH] :sparkles: ags(control-center/tiles): migrate from old `Pages` widget --- ags/widget/control-center/Tiles.ts | 27 ++++- ags/widget/control-center/tiles/Bluetooth.ts | 4 +- ags/widget/control-center/tiles/Network.ts | 8 +- ags/widget/control-center/tiles/NightLight.ts | 4 +- ags/widget/control-center/tiles/Tile.ts | 100 ++++++++++-------- 5 files changed, 86 insertions(+), 57 deletions(-) diff --git a/ags/widget/control-center/Tiles.ts b/ags/widget/control-center/Tiles.ts index e478a23..9fb06aa 100644 --- a/ags/widget/control-center/Tiles.ts +++ b/ags/widget/control-center/Tiles.ts @@ -4,6 +4,7 @@ import { TileBluetooth } from "./tiles/Bluetooth"; import { TileDND } from "./tiles/DoNotDisturb"; import { TileRecording } from "./tiles/Recording"; import { TileNightLight } from "./tiles/NightLight"; +import { Pages } from "./Pages"; export const tileList: Array<() => Gtk.Widget> = [ TileNetwork, @@ -13,6 +14,8 @@ export const tileList: Array<() => Gtk.Widget> = [ TileNightLight ]; +export let TilesPages: (Pages|null) = null; + export function Tiles(): Gtk.Widget { const tilesFlowBox: Gtk.FlowBox = new Gtk.FlowBox({ visible: true, @@ -25,11 +28,29 @@ export function Tiles(): Gtk.Widget { homogeneous: true, } as Gtk.FlowBox.ConstructorProps); - tileList.map((item: (() => Gtk.Widget)) => - tilesFlowBox.insert(item(), -1)); + tileList.map((item: (() => Gtk.Widget)) => { + tilesFlowBox.insert(item(), -1); + + const children = tilesFlowBox.get_children(); + children[children.length-1]!.set_can_focus(false); + }); return new Widget.Box({ className: "tiles-container", - child: tilesFlowBox + orientation: Gtk.Orientation.VERTICAL, + onDestroy: () => { + TilesPages?.close(); + TilesPages = null; + }, + setup: (box) => { + if(!TilesPages) TilesPages = new Pages({ + className: "tile-pages" + }); + + box.set_children([ + tilesFlowBox, + TilesPages! + ]); + } } as Widget.BoxProps); } diff --git a/ags/widget/control-center/tiles/Bluetooth.ts b/ags/widget/control-center/tiles/Bluetooth.ts index 8f2f2da..43271e5 100644 --- a/ags/widget/control-center/tiles/Bluetooth.ts +++ b/ags/widget/control-center/tiles/Bluetooth.ts @@ -1,8 +1,8 @@ import { bind, Variable } from "astal"; import { Tile, TileProps } from "./Tile"; import AstalBluetooth from "gi://AstalBluetooth"; -import { togglePage } from "../Pages"; import { BluetoothPage } from "../pages/Bluetooth"; +import { TilesPages } from "../Tiles"; export const TileBluetooth = Tile({ title: "Bluetooth", @@ -12,7 +12,7 @@ export const TileBluetooth = Tile({ }), onToggledOn: () => AstalBluetooth.get_default().adapter.set_powered(true), onToggledOff: () => AstalBluetooth.get_default().adapter.set_powered(false), - onClickMore: () => togglePage(BluetoothPage), + onClickMore: () => TilesPages?.toggle(BluetoothPage()), enableOnClickMore: true, icon: Variable.derive([ bind(AstalBluetooth.get_default().adapter, "powered"), diff --git a/ags/widget/control-center/tiles/Network.ts b/ags/widget/control-center/tiles/Network.ts index 2217c01..2f129c2 100644 --- a/ags/widget/control-center/tiles/Network.ts +++ b/ags/widget/control-center/tiles/Network.ts @@ -2,9 +2,9 @@ import { bind, execAsync, Variable } from "astal"; import { Tile, TileProps } from "./Tile"; import AstalNetwork from "gi://AstalNetwork"; import { Widget } from "astal/gtk3"; -import { togglePage } from "../Pages"; import { PageNetwork } from "../pages/Network"; import { tr } from "../../../i18n/intl"; +import { TilesPages } from "../Tiles"; export const TileNetwork = () => new Widget.Box({ child: Variable.derive([ @@ -32,7 +32,7 @@ export const TileNetwork = () => new Widget.Box({ )(), onToggledOn: () => wifi.set_enabled(true), onToggledOff: () => wifi.set_enabled(false), - onClickMore: () => togglePage(PageNetwork), + onClickMore: () => TilesPages?.toggle(PageNetwork()), icon: "󰤨", iconSize: 16, toggleState: bind(wifi, "enabled") @@ -53,7 +53,7 @@ export const TileNetwork = () => new Widget.Box({ }), onToggledOn: () => execAsync("nmcli n on"), onToggledOff: () => execAsync("nmcli n off"), - onClickMore: () => togglePage(PageNetwork), + onClickMore: () => TilesPages?.toggle(PageNetwork()), icon: bind(wired, "internet").as((internet: AstalNetwork.Internet) => { switch(internet) { case AstalNetwork.Internet.CONNECTED: @@ -77,7 +77,7 @@ export const TileNetwork = () => new Widget.Box({ description: tr("control_center.tiles.network.disconnected") || "Disconnected", onToggledOn: () => execAsync("nmcli n on"), onToggledOff: () => execAsync("nmcli n off"), - onClickMore: () => togglePage(PageNetwork), + onClickMore: () => TilesPages?.toggle(PageNetwork()), icon: "󰲛", iconSize: 16, toggleState: bind(wired, "internet").as((internet: AstalNetwork.Internet) => diff --git a/ags/widget/control-center/tiles/NightLight.ts b/ags/widget/control-center/tiles/NightLight.ts index f28050d..83d37de 100644 --- a/ags/widget/control-center/tiles/NightLight.ts +++ b/ags/widget/control-center/tiles/NightLight.ts @@ -1,9 +1,9 @@ import { bind, Variable } from "astal"; import { Tile, TileProps } from "./Tile"; import { NightLight } from "../../../scripts/nightlight"; -import { togglePage } from "../Pages"; import { PageNightLight } from "../pages/NightLight"; import { tr } from "../../../i18n/intl"; +import { TilesPages } from "../Tiles"; export const TileNightLight = Tile({ title: tr("control_center.tiles.night_light.title"), @@ -20,6 +20,6 @@ export const TileNightLight = Tile({ onToggledOff: () => NightLight.getDefault().identity = true, onToggledOn: () => NightLight.getDefault().identity = false, enableOnClickMore: true, - onClickMore: () => togglePage(PageNightLight), + onClickMore: () => TilesPages?.toggle(PageNightLight()), toggleState: bind(NightLight.getDefault(), "identity").as(identity => !identity) } as TileProps); diff --git a/ags/widget/control-center/tiles/Tile.ts b/ags/widget/control-center/tiles/Tile.ts index 8c1d612..f818509 100644 --- a/ags/widget/control-center/tiles/Tile.ts +++ b/ags/widget/control-center/tiles/Tile.ts @@ -16,7 +16,7 @@ export type TileProps = { onClickMore?: () => void; } -export function Tile(props: TileProps): (() => Widget.EventBox) { +export function Tile(props: TileProps): (() => Gtk.Widget) { const toggled = new Variable(props.toggleState instanceof Binding ? (props.toggleState.get() || false) : (props.toggleState || false)); @@ -25,34 +25,42 @@ export function Tile(props: TileProps): (() => Widget.EventBox) { if(props?.toggleState instanceof Binding) subscription = props.toggleState.subscribe(val => toggled.set(val || false)); - return () => new Widget.EventBox({ - className: toggled().as((state: boolean) => - state ? "tile-eventbox toggled" : "tile-eventbox"), + return () => new Widget.Box({ + className: (props.className instanceof Binding) ? + Variable.derive([ + props.className, + toggled() + ], (className, isToggled) => + `tile ${className} ${isToggled ? "toggled" : ""} ${ + props.onClickMore ? "has-more" : "" + }` + )() + : toggled().as((state: boolean) => + `tile ${state ? "toggled" : ""} ${ + props.onClickMore ? "has-more" : "" + }` + ), expand: true, - onClick: () => { - if(toggled.get()) { - toggled.set(false); - console.log(toggled.get()); - props.onToggledOff && props.onToggledOff(); - return; - } - - toggled.set(true); - props.onToggledOn && props.onToggledOn(); - }, + visible: props.visible, onDestroy: () => subscription?.(), - child: new Widget.Box({ - className: (props.className instanceof Binding) ? - props.className.as((clsName: (string|undefined)) => - `tile ${clsName || ""}`) - : `tile ${props.className || ""}`, - visible: props.visible, - expand: true, - hexpand: true, - children: [ - new Widget.Box({ + children: [ + new Widget.Button({ + className: "toggle-button", + onClick: () => { + if(toggled.get()) { + toggled.set(false); + console.log(toggled.get()); + props.onToggledOff && props.onToggledOff(); + return; + } + + toggled.set(true); + props.onToggledOn && props.onToggledOn(); + }, + child: new Widget.Box({ className: "content", expand: true, + hexpand: true, children: [ new Widget.Label({ className: "icon nf", @@ -88,26 +96,26 @@ export function Tile(props: TileProps): (() => Widget.EventBox) { ] } as Widget.BoxProps) ] - } as Widget.BoxProps), - new Widget.Button({ - className: "more icon", - visible: props.onClickMore !== undefined, - halign: Gtk.Align.END, - tooltipText: tr("control_center.tiles.more") || "More", - image: new Widget.Icon({ - icon: "go-next-symbolic", - css: "icon { font-size: 16px; }" - }), - onClick: () => { - ((props.enableOnClickMore instanceof Binding) ? - props.enableOnClickMore.get() - : props.enableOnClickMore) && props?.onToggledOn(); + } as Widget.BoxProps) + } as Widget.ButtonProps), + new Widget.Button({ + className: "more icon", + visible: props.onClickMore !== undefined, + halign: Gtk.Align.END, + tooltipText: tr("control_center.tiles.more") || "More", + image: new Widget.Icon({ + icon: "go-next-symbolic", + css: "icon { font-size: 16px; }" + }), + onClick: () => { + ((props.enableOnClickMore instanceof Binding) ? + props.enableOnClickMore.get() + : props.enableOnClickMore) && props?.onToggledOn(); - props.onClickMore && props?.onClickMore() - }, - widthRequest: 32 - }) - ] - }) - } as Widget.EventBoxProps) + props.onClickMore && props?.onClickMore() + }, + widthRequest: 32 + }) + ] + }); }