✨ 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,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({
+    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,
-        onClick: () => {
+        visible: props.visible,
-            if(toggled.get()) {
-                toggled.set(false);
-                console.log(toggled.get());
-                props.onToggledOff && props.onToggledOff();
-                return;
-            }
-
-            toggled.set(true);
-            props.onToggledOn && props.onToggledOn(); 
-        },
         onDestroy: () => subscription?.(),
-        child: new Widget.Box({
+        children: [
-            className: (props.className instanceof Binding) ? 
+            new Widget.Button({
-                props.className.as((clsName: (string|undefined)) => 
+                className: "toggle-button",
-                    `tile ${clsName || ""}`)
+                onClick: () => {
-                : `tile ${props.className || ""}`,
+                    if(toggled.get()) {
-            visible: props.visible,
+                        toggled.set(false);
-            expand: true,
+                        console.log(toggled.get());
-            hexpand: true,
+                        props.onToggledOff && props.onToggledOff();
-            children: [
+                        return;
-                new Widget.Box({
+                    }
+
+                    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),
+                } as Widget.BoxProps)
-                new Widget.Button({
+            } as Widget.ButtonProps),
-                    className: "more icon",
+            new Widget.Button({
-                    visible: props.onClickMore !== undefined,
+                className: "more icon",
-                    halign: Gtk.Align.END,
+                visible: props.onClickMore !== undefined,
-                    tooltipText: tr("control_center.tiles.more") || "More",
+                halign: Gtk.Align.END,
-                    image: new Widget.Icon({
+                tooltipText: tr("control_center.tiles.more") || "More",
-                        icon: "go-next-symbolic",
+                image: new Widget.Icon({
-                        css: "icon { font-size: 16px; }"
+                    icon: "go-next-symbolic",
-                    }),
+                    css: "icon { font-size: 16px; }"
-                    onClick: () => {
+                }),
-                        ((props.enableOnClickMore instanceof Binding) ? 
+                onClick: () => {
-                            props.enableOnClickMore.get()
+                    ((props.enableOnClickMore instanceof Binding) ? 
-                        : props.enableOnClickMore) && props?.onToggledOn();
+                        props.enableOnClickMore.get()
+                    : props.enableOnClickMore) && props?.onToggledOn();
 
-                        props.onClickMore && props?.onClickMore()
+                    props.onClickMore && props?.onClickMore()
-                    },
+                },
-                    widthRequest: 32
+                widthRequest: 32
-                })
+            })
-            ]
+        ]
-        })
+    });
-    } as Widget.EventBoxProps)
 }