✨ ags(control-center/tiles): migrate from old Pages widget

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)) => 
+    tileList.map((item: (() => Gtk.Widget)) => {
-        tilesFlowBox.insert(item(), -1));
+        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);
 }

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"),

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) => 

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);

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<boolean>(props.toggleState instanceof Binding ?
         (props.toggleState.get() || false) : (props.toggleState || false));
 
@@ -25,10 +25,27 @@ 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({
+    return () => new Widget.Box({
-        className: toggled().as((state: boolean) => 
+        className: (props.className instanceof Binding) ? 
-            state ? "tile-eventbox toggled" : "tile-eventbox"),
+            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,
+        visible: props.visible,
+        onDestroy: () => subscription?.(),
+        children: [
+            new Widget.Button({
+                className: "toggle-button",
                 onClick: () => {
                     if(toggled.get()) {
                         toggled.set(false);
@@ -40,19 +57,10 @@ export function Tile(props: TileProps): (() => Widget.EventBox) {
                     toggled.set(true);
                     props.onToggledOn && props.onToggledOn(); 
                 },
-        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({
                     className: "content",
                     expand: true,
+                    hexpand: true,
                     children: [
                         new Widget.Label({
                             className: "icon nf",
@@ -88,7 +96,8 @@ export function Tile(props: TileProps): (() => Widget.EventBox) {
                             ]
                         } as Widget.BoxProps)
                     ]
-                } as Widget.BoxProps),
+                } as Widget.BoxProps)
+            } as Widget.ButtonProps),
             new Widget.Button({
                 className: "more icon",
                 visible: props.onClickMore !== undefined,
@@ -108,6 +117,5 @@ export function Tile(props: TileProps): (() => Widget.EventBox) {
                 widthRequest: 32
             })
         ]
-        })
+    });
-    } as Widget.EventBoxProps)
 }