✨ feat(control-center/pages): new way to add pages with new animation

makes Pages widget derivate from GtkBox, allowing multiple childs, which are now page revealers(GtkRevealers) that reveal the Page widgets

ags/style/_control-center.scss

@@ -256,14 +256,13 @@ box.history {
   }
 }
 
-.tile-pages {
+.tile-pages .page {
-  & > .page {
+  transition: 180ms linear;
-    margin-top: 10px;
+  margin-top: 10px;
 
-    &.bluetooth {
+  &.bluetooth {
-      button.connected {
+    button.connected {
-        background: colors.$bg-tertiary;
+      background: colors.$bg-tertiary;
-      }
     }
   }
 

ags/widget/control-center/Pages.ts

@@ -1,4 +1,4 @@
-import { property, register, timeout } from "astal";
+import { register, timeout } from "astal";
 import { Gtk, Widget } from "astal/gtk3";
 import { Page } from "./pages/Page";
 
@@ -7,26 +7,21 @@ export { Pages };
 export type PagesProps = {
     initialPage?: Page;
     className?: string;
-    transitionType?: Gtk.RevealerTransitionType;
     transitionDuration?: number;
 };
 
 @register({ GTypeName: "Pages" })
-class Pages extends Widget.Revealer {
+class Pages extends Widget.Box {
     #page: (Page|undefined);
+    #transDuration: number;
+    #transType: Gtk.RevealerTransitionType = Gtk.RevealerTransitionType.SLIDE_DOWN;
 
-    @property(Page)
+    get isOpen() { return (this.get_children().length > 0); }
-    get page(): Page | undefined { return this.#page; }
-    private set page(newPage: Page | undefined) {
-        this.#page = newPage;
-        this.notify("page");
-    }
-
-    get isOpen() { return this.revealChild; }
 
     constructor(props?: PagesProps) {
         super({
-            className: props?.className
+            className: props?.className,
+            orientation: Gtk.Orientation.VERTICAL
         });
 
         this.name = "pages";
@@ -34,47 +29,57 @@ class Pages extends Widget.Revealer {
         if(props?.className !== null && props?.className !== undefined)
             this.className = props?.className;
 
-        this.transitionType = props?.transitionType ?? 
+        this.#transDuration = props?.transitionDuration ?? 280;
-            Gtk.RevealerTransitionType.SLIDE_DOWN;
-        
-        this.transitionDuration = props?.transitionDuration ?? 350;
 
         if(props?.initialPage) 
             this.open(props.initialPage);
     }
 
-    toggle(newPage?: Page): void {
+    toggle(newPage?: Page, onToggled?: () => void): void {
-        if(this.isOpen) {
+        if(!newPage || (this.#page?.id === newPage?.id)) {
-            if(newPage && this.#page!.id !== newPage.id) {
+            this.close(onToggled);
-                this.close(() => this.open(newPage));
-                return;
-            }
-
-            this.close();
             return;
         }
 
-        newPage && this.open(newPage);
+        if(!this.isOpen) {
+            newPage && this.open(newPage, onToggled);
+            return;
+        }
+
+        if(this.#page?.id !== newPage.id) {
+            this.close();
+            this.open(newPage, onToggled);
+        }
     }
 
     open(newPage: Page, onOpened?: () => void) {
-        if(this.get_child()) return;
+        this.add(new Widget.Revealer({
+            transitionDuration: this.#transDuration,
+            transitionType: this.#transType,
+            revealChild: false,
+            child: newPage
+        } as Widget.RevealerProps));
+        this.#page = newPage;
 
-        this.page = newPage;
+        this.reorder_child(this.get_children()[this.get_children().length - 1], 0);
-        this.add(newPage);
+        (this.get_children()[0] as Widget.Revealer).set_reveal_child(true);
-        this.revealChild = true;
+        onOpened?.();
-        onOpened && timeout(this.transitionDuration, onOpened);
     }
 
     close(onClosed?: () => void): void {
-        if(!this.get_child()) return;
+        (this.get_children() as Array<Widget.Revealer>).forEach((pageRevealer, i, pageRevealers) => {
+            pageRevealer.set_reveal_child(false);
+            if(this.#page?.id === (pageRevealer.get_child() as Page).id)
+                this.#page = undefined;
 
-        this.revealChild = false;
+            timeout(this.#transDuration, () => {
-        this.#page!.onClose?.();
+                pageRevealer.ref();
-        timeout(this.transitionDuration, () => {
+                this.remove(pageRevealer);
-            this.remove(this.#page!);
+                pageRevealer.destroy();
-            this.page = undefined;
+
-            onClosed?.();
+                i === (pageRevealers.length - 1) && 
+                    onClosed?.();
+            });
         });
     }
 }

ags/widget/control-center/pages/Page.ts

@@ -168,8 +168,7 @@ class Page extends Widget.Box {
         this.#title = props.title;
         this.#description = props.description;
 
-        if(props.onClose)
+        this.onClose = props.onClose;
-            this.onClose = props.onClose;
     }
 }