💥 fix: correctly use centerbox with gtkbuilder types, fix styles

also re-added some windows to the windows list(they were causing issues before)
2025-07-07 21:58:34 -03:00
parent 246698c642
commit 2fb3b68204
15 changed files with 144 additions and 199 deletions
@@ -78,11 +78,11 @@ App.start({
        runnerPlugins.map(plugin => Runner.addPlugin(plugin));

        console.log("Opening default windows");
-        /* Open openOnStart windows
+        // Open openOnStart windows
        defaultWindows.map(name => {
            if(Windows.getDefault().isVisible(name)) return;
            Windows.getDefault().open(name);
-        });*/
+        });
    }
 });

@@ -200,24 +200,26 @@ tooltip > box {
  }
 }

-menu {
+popover {
  padding: 4px;
  background: wal.$background;
  border-radius: 14px;
-                               
-  & separator {
-    margin: 0 4px;
-    color: wal.$background;
-  }
-                               
-  & menuitem {
-    padding: 8px 16px;
-    border-radius: 10px;
-    font-size: 12px;
-    font-weight: 600;
-                               
-    &:hover, &:focus {
-      background: wal.$color1;
+  & contents {
+    & * {
+      padding: 2px 4px;
+      border-radius: 10px;
+      font-size: 12px;
+      font-weight: 600;
+                                 
+      &:hover, &:focus {
+        background: wal.$color1;
+      }
+    }
+
+    & separator {
+      all: unset;
+      margin: 0 4px;
+      color: wal.$background;
    }
  }
 }
@@ -25,27 +25,11 @@
    border-radius: $radius;
    padding: 0 $padding;

-    & > eventbox {
-      &:hover {
-        & > box {
-          background: $color-hover;
-        }
-      }
-      & > box {
-        border-radius: calc($radius - $padding);
-        margin: $padding 0;
-      }
-
-      & > box {
-        padding: 0 8px;
-      }
-    }
-
-    & > button,
-    & > box > button {
+    & > box:not(.workspaces-row):not(.tray):not(.focused-client), 
+    & > button {
      border-radius: calc($radius - $padding);
      margin: $padding 0;
-      padding: 0 9px;
+      padding: 0 8px;

      &:hover {
        background: $color-hover;
@@ -56,23 +40,21 @@
  .workspaces-row {
    padding: 4px;

-    & eventbox > box > eventbox {
-      & > box {
-        margin: 3px 0;
-        border-radius: 16px;
-        transition: 80ms linear;
-        min-width: 16px;
-        padding: 0 6px;
-        background: colors.$bg-tertiary;
+    & .workspace {
+      margin: 3px 0;
+      border-radius: 16px;
+      transition: 80ms linear;
+      min-width: 16px;
+      padding: 0 6px;
+      background: colors.$bg-tertiary;

-        & label.id {
-          font-weight: 600;
-          margin-right: 4px;
-          opacity: 0;
-        }
+      & label.id {
+        font-weight: 600;
+        margin-right: 4px;
+        opacity: 0;
      }

-      &.focus > box {
+      &.focus {
        background: colors.$fg-primary;
        min-width: 32px;

@@ -90,20 +72,8 @@
        opacity: 1;
      }

-      &:hover > box {
-        box-shadow: inset 0 0 0 100px rgba($color: colors.$fg-primary, $alpha: .2);
-      }
-    }
-
-    &.special-workspaces {
-      & > eventbox {
-        & box {
-          background: wal.$color4;
-        }
-
-        &:hover > box {
-          background: functions.toRGB(color.adjust(wal.$color4, $lightness: -6%));
-        }
+      &:hover:not(.last-client-icon):not(.focus) {
+        box-shadow: inset 0 0 0 14px rgba($color: colors.$fg-primary, $alpha: .2);
      }
    }
  }
@@ -111,12 +81,13 @@
  .focused-client {
    padding: 0 6px;

-    & > .icon {
+    & image {
      margin-right: 6px;
+      -gtk-icon-size: 18px;
    }

-    & > .text-content {
-      & > .class {
+    & .text-content {
+      & .class {
        font-size: 9px;
        font-family: monospace;
        font-weight: 600;
@@ -124,7 +95,7 @@
        margin-top: 0px;
      }
      
-      & > .title {
+      & .title {
        font-size: 12px;
        font-weight: 500;
        margin-top: -2px;
@@ -136,42 +107,32 @@
    background-color: colors.$bg-primary;
  }

-  .media-eventbox {
-    & > .media {
-      background: colors.$bg-primary;
-      padding: 0 8px;
-    }
+  .media {
+    background: colors.$bg-primary;
+    padding: 0 2px;

-    &:hover > .media {
+    &:hover {
      box-shadow: inset 0 0 0 300px rgba(colors.$fg-primary, .2);
    }

-    & icon {
-      font-size: 14px;
+    & image {
+      -gtk-icon-size: 14px;
+      margin-right: 4px;
    }

    & .media-controls {
-        transition: none;
-        margin-left: 6px;
-        border-top-right-radius: 12px;
-        border-bottom-right-radius: 12px;
+      transition: none;
+      margin-left: 6px;
+      border-top-right-radius: 12px;
+      border-bottom-right-radius: 12px;

-        & > button {
-          margin: 4px 1px;
+      & > button {
+        margin: 4px 1px;

-          & icon {
-            font-size: 10px;
-          }
+        & icon {
+          font-size: 10px;
        }
      }
-
-
-    &.reveal {
-      & .media > box {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-
    }
  }

@@ -179,71 +140,52 @@
    padding: 0 6px;

    & .item {
-      &:hover {
-        background: none;
-      }
-
-      margin: 0 6px;
-      padding: 0;
-
-      &:first-child {
-        margin-left: 0;
-      }
-
-      &:last-child {
-        margin-right: 0;
-      }
+      all: unset;
    }
  }

  .status {
    @include mixins.reset-props;

-    &:hover > box,
-    &.open > box {
+    &.open {
      background: colors.$bg-primary;
    }

-    & > box {
-      padding: 0 8px;
+    & image {
+      -gtk-icon-size: 14px;
+    }

-      & icon {
-        font-size: 14px;
-      }
+    & revealer > box {
+      background: rgba($color: colors.$bg-tertiary, $alpha: .7);
+      border-radius: 12px; 
+      margin: 4px 0; 
+      margin-left: 5px;
+      padding: 2px 6px;
+    }

-      & revealer > eventbox > box {
-        background: rgba($color: colors.$bg-tertiary, $alpha: .7);
-        border-radius: 12px; 
-        margin: 4px 0; 
-        margin-left: 5px;
-        padding: 2px 6px;
-      }
+    & .status-icons {
+      padding-left: 4px;

-      & .status-icons {
-        padding-left: 4px;
-
-        & icon.notification-count {
-          font-size: 6px;
-          margin-top: -14px;
-        }
+      & icon.notification-count {
+        font-size: 6px;
+        margin-top: -14px;
      }
    }
  }

  .apps {
-    & > box {
-      min-width: 22px;
-      & > icon {
-        transition: 120ms linear;
-        font-size: 14px;
-      }
+    min-width: 18px;
+    & image {
+      transition: 120ms linear;
+      -gtk-icon-size: 14px;
    }
-    &.open > box {
+
+    &.open {
      background: colors.$bg-primary;
    }

-    &:hover icon {
-      -gtk-icon-transform: scale(1.144);
+    &:hover image {
+      -gtk-icon-transform: scale(1.01);
    }
  }
 }
@@ -1,17 +1,15 @@
@use "sass:color";
-@use "./wal";
-@use "./functions" as funs;
-
+@use "colors";

 .osd {
-  background: funs.toRGB(color.change($color: wal.$background, $alpha: 65%));
-  padding: 16px;
+  background: rgba(colors.$bg-translucent-secondary, .6);
+  padding: 14px 14px;
  border-radius: 24px;
  min-width: 180px;

  .icon {
    margin-right: 10px;
-    font-size: 24px;
+    -gtk-icon-size: 24px;
  }

  .volume {
@@ -25,16 +23,16 @@

    levelbar {
      trough block {
-        border-radius: 2px;
-        background: funs.toRGB(color.adjust($color: wal.$color1, $lightness: -36%));
+        border-radius: 3px;
+        background: colors.$bg-primary;

        &.empty {
-          border-radius: 2px;
+          border-radius: 3px;
        }

        &.filled {
-          padding: 3px 0;
-          background: wal.$color1;
+          min-height: 8px;
+          background: colors.$bg-secondary;
        }
      }
    }
@@ -40,7 +40,7 @@ export function NotificationWidget({ notification, actionClicked, holdOnHover, s

    const conns: Map<GObject.Object, Array<number>> = new Map();

-    return <Gtk.Box hexpand={true} vexpand={true} class={`notification ${
+    return <Gtk.Box hexpand={false} vexpand={false} class={`notification ${
          Notifications.getDefault().getUrgencyString(notification.urgency)
      }`} orientation={Gtk.Orientation.VERTICAL} spacing={5}
      $={(self) => {
@@ -102,11 +102,14 @@ export function NotificationWidget({ notification, actionClicked, holdOnHover, s
                <Gtk.Label class={"summary"} useMarkup={true} xalign={0}
                  ellipsize={Pango.EllipsizeMode.END} label={
                      notification.summary.replace(/[&]/g, "&amp;")
-                } />
+                  }
+                />

                <Gtk.Label class={"body"} useMarkup={true} xalign={0} wrap={true} 
-                  wrapMode={Pango.WrapMode.WORD_CHAR} singleLineMode={false}
-                  label={notification.body.replace(/[&]/g, "&amp;")} />
+                  wrapMode={Pango.WrapMode.WORD_CHAR} label={
+                      notification.body.replace(/[&]/g, "&amp;")
+                  }
+                />
            </Gtk.Box>
        </Gtk.Box>

@@ -6,6 +6,7 @@ import { omitObjectKeys, WidgetNodeType } from "../scripts/utils";


 type PopupWindowSpecificProps = {
+    $?: (self: Astal.Window) => void;
    children?: WidgetNodeType;
    onDestroy?: (self: Astal.Window) => void;
    /** Stylesheet for the background of the popup-window */
@@ -57,7 +58,7 @@ export function PopupWindow(props: PopupWindowProps): GObject.Object {
        "marginBottom"
    ]);

-    return <Astal.Window {...omittedProps}
+    return <Astal.Window {...omittedProps} visible
      namespace={props.namespace ?? "popup-window"} class={
          (props.class instanceof Accessor) ? 
              ((props.namespace instanceof Accessor) ?
@@ -110,6 +111,8 @@ export function PopupWindow(props: PopupWindowProps): GObject.Object {

          conns.set(self, self.connect("destroy", () => conns.forEach((id, obj) =>
              obj.disconnect(id))));
+
+          props.$?.(self);
      }}>
          <Gtk.Box
            halign={props.halign}
@@ -28,8 +28,8 @@ export function Separator(props: SeparatorProps = {
      hexpand={props.orientation === Gtk.Orientation.VERTICAL}
      class={`separator ${ props.orientation === Gtk.Orientation.VERTICAL ? 
        "vertical" : "horizontal" }`} visible={props.visible}
-      css={`.vertical { padding: {${props.spacing ?? 0}px ${props.margin ?? 7}px; }
-        .horizontal { padding: {${props.margin ?? 4}px ${props.spacing ?? 0}px; }`}>
+      css={`.vertical { padding: ${props.spacing ?? 0}px ${props.margin ?? 7}px; }
+        .horizontal { padding: ${props.margin ?? 4}px ${props.spacing ?? 0}px; }`}>

        <Gtk.Box class={`${props.orientation === Gtk.Orientation.VERTICAL ? 
            "vertical"
@@ -19,7 +19,7 @@ export const FocusedClient = () => {
                        getSymbolicIcon(clss) ?? getAppIcon(clss) ?? 
                          getAppIcon(focusedClient.initialClass) ?? 
                              "application-x-executable-symbolic")
-                  } css={"font-size: 18px;"} vexpand={true} />
+                  } vexpand={true} />
                
                <Gtk.Box valign={Gtk.Align.CENTER} class={"text-content"} 
                  orientation={Gtk.Orientation.VERTICAL}>
@@ -30,8 +30,8 @@ export const FocusedClient = () => {
                      tooltipText={createBinding(focusedClient, "class")}/>
                    <Gtk.Label class={"title"} xalign={0} maxWidthChars={50} 
                      ellipsize={Pango.EllipsizeMode.END} 
-                      label={createBinding(focusedClient, "class")}
-                      tooltipText={createBinding(focusedClient, "class")}/>
+                      label={createBinding(focusedClient, "title")}
+                      tooltipText={createBinding(focusedClient, "title")}/>
                </Gtk.Box>
            </Gtk.Box>}
        </With>
@@ -18,7 +18,7 @@ export let [player, setPlayer] = createState(dummyPlayer);
 export const Media = () => {
    const connections: Map<GObject.Object, Array<number>|number> = new Map();

-    if(AstalMpris.get_default().players[0] && player.get() !== dummyPlayer)
+    if(AstalMpris.get_default().players[0])
        setPlayer(AstalMpris.get_default().players[0]);

    connections.set(AstalMpris.get_default(), [
@@ -26,9 +26,6 @@ export const Media = () => {
            player.available && setPlayer(player)),

        AstalMpris.get_default().connect("player-closed", (_, closedPlayer) => {
-            if(player.get()?.busName !== closedPlayer.busName) 
-                return;
-
            const players = AstalMpris.get_default().players.filter(pl => pl?.available);

            if(players.length > 0) {
@@ -113,7 +110,7 @@ export const Media = () => {
                        title ?? "No Title")} maxWidthChars={20} ellipsize={Pango.EllipsizeMode.END}
                    />
                    <Separator orientation={Gtk.Orientation.HORIZONTAL} size={1} margin={5}
-                      alpha={.3} />
+                      alpha={.3} spacing={6} />
                    <Gtk.Label class={"artist"} label={createBinding(player.get(), "artist").as(artist =>
                        artist ?? "No Artist")} maxWidthChars={18} ellipsize={Pango.EllipsizeMode.END}
                    />
@@ -19,7 +19,7 @@ function popoverFromModel(model: Gio.MenuModel, actionGroup: Gio.ActionGroup | n
 export const Tray = () => {
    const items = createBinding(astalTray, "items").as(items => items.filter(item => item?.gicon));

-    return <Gtk.Box class={"tray"} visible={variableToBoolean(items)}>
+    return <Gtk.Box class={"tray"} visible={variableToBoolean(items)} spacing={10}>
        <For each={items}>
            {(item: AstalTray.TrayItem) => <Gtk.Box class={"item"}>

@@ -114,18 +114,18 @@ export const Workspaces = () => {
                                  `${lastClient.get_class()}: `
                              : ""
                          } ${lastClient.title}` : "" }`
-                      )} onClicked={ws.focus}>
+                      )} onClicked={() => ws.focus()}>
                        
                        
                        <With value={createBinding(ws, "lastClient")}>
                            {(lastClient: AstalHyprland.Client) => 
-                                <Gtk.Box class={"last-client"}>
+                                <Gtk.Box class={"last-client"} hexpand>
                                    <Gtk.Revealer transitionDuration={200} revealChild={showId}
                                      transitionType={Gtk.RevealerTransitionType.SLIDE_LEFT}
-                                      hexpand={true}>
+                                      hexpand>

                                        <Gtk.Label label={createBinding(ws, "id").as(String)}
-                                          class={"id"} />
+                                          class={"id"} hexpand />
                                    </Gtk.Revealer>
                                    {lastClient && <Gtk.Image class={"last-client-icon"} iconName={
                                      createBinding(lastClient, "initialClass").as(initialClass =>
@@ -91,10 +91,10 @@ export const BigMedia = () => {
                              return pos > 0 && player.length > 0 ? 
                                  `${Math.floor(pos / 60)}:${sec < 10 ? "0" : ""}${sec}`
                              : "0:00";
-                          })}
+                          })} $type="start"
                        />

-                        <Gtk.Box class={"controls button-row"}>
+                        <Gtk.Box class={"controls button-row"} $type="center">
                            <Gtk.Button class={"link"} iconName={"edit-paste-symbolic"}
                              tooltipText={"Copy link to clipboard"}
                              onClicked={() => {
@@ -157,7 +157,7 @@ export const BigMedia = () => {
                              return (len > 0 && Number.isFinite(len)) ? 
                                  `${Math.floor(len / 60)}:${sec < 10 ? "0" : ""}${sec}`
                              : "0:00";
-                          })}
+                          })} $type="end"
                        />
                    </Gtk.CenterBox>
                </Gtk.Box>
@@ -10,32 +10,30 @@ import { Status } from "../widget/bar/Status";

 export const Bar = (mon: number) => {
    const widgetSpacing = 4;
-    return <Astal.Window 
-        namespace={"top-bar"}
-        anchor={Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT | Astal.WindowAnchor.RIGHT}
-        layer={Astal.Layer.TOP}
-        exclusivity={Astal.Exclusivity.EXCLUSIVE}
-        heightRequest={46}
-        monitor={mon}
-        visible={true}
-        canFocus={false}>
-            <Gtk.Box class={"bar-container"}>
-            <Gtk.CenterBox class={"bar-centerbox"}>
+    return <Astal.Window namespace={"top-bar"} layer={Astal.Layer.TOP}
+      anchor={Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT | Astal.WindowAnchor.RIGHT}
+      exclusivity={Astal.Exclusivity.EXCLUSIVE} heightRequest={46} monitor={mon}
+      visible={true} canFocus={false}>
+        <Gtk.Box class={"bar-container"}>
+            <Gtk.CenterBox class={"bar-centerbox"} hexpand>
                <Gtk.Box class={"widgets-left"} homogeneous={false}
-                         halign={Gtk.Align.START} spacing={widgetSpacing}>
+                  halign={Gtk.Align.START} spacing={widgetSpacing}
+                  $type="start">

                    <Apps />
                    <Workspaces />
                    <FocusedClient />
                </Gtk.Box>
                <Gtk.Box class={"widgets-center"} homogeneous={false}
-                         spacing={widgetSpacing} halign={Gtk.Align.CENTER}>
+                  spacing={widgetSpacing} halign={Gtk.Align.CENTER}
+                  $type="center">

                    <Clock />
                    <Media />
                </Gtk.Box>
                <Gtk.Box class={"widgets-right"} homogeneous={false}
-                         spacing={widgetSpacing} halign={Gtk.Align.END}>
+                  spacing={widgetSpacing} halign={Gtk.Align.END}
+                  $type="end">
                    <Tray />
                    <Status />
                </Gtk.Box>
@@ -1,9 +1,7 @@
 import { Astal, Gtk } from "ags/gtk4";
-import { QuickActions } from "../widget/control-center/QuickActions";
-import { Tiles } from "../widget/control-center/Tiles";
-import { Sliders } from "../widget/control-center/Sliders";
-import { NotifHistory } from "../widget/control-center/NotifHistory";
 import { PopupWindow } from "../widget/PopupWindow";
+import { NotifHistory } from "../widget/control-center/NotifHistory";
+import { QuickActions } from "../widget/control-center/QuickActions";


 export const ControlCenter = (mon: number) => 
@@ -12,17 +10,14 @@ export const ControlCenter = (mon: number) =>
      marginTop={10} marginRight={10} marginBottom={10} monitor={mon}
      widthRequest={395}>

-        <Gtk.Box orientation={Gtk.Orientation.VERTICAL}
+      <Gtk.Box orientation={Gtk.Orientation.VERTICAL}
          spacing={16}>
            
            <Gtk.Box class={"control-center-container"} 
              orientation={Gtk.Orientation.VERTICAL} vexpand={false}>
                
                <QuickActions />
-                <Sliders />
-                <Tiles />
            </Gtk.Box>
-
            <NotifHistory />
        </Gtk.Box>
    </PopupWindow> as Astal.Window;
@@ -1,8 +1,15 @@
-import App from "ags/gtk4/app"
-import AstalHyprland from "gi://AstalHyprland";
 import GObject, { getter, register, signal } from "ags/gobject";
 import { Astal } from "ags/gtk4";
+import { Bar } from "./window/Bar";
+
+import App from "ags/gtk4/app"
+import AstalHyprland from "gi://AstalHyprland";
+import { OSD } from "./window/OSD";
 import { ControlCenter } from "./window/ControlCenter";
+import { FloatingNotifications } from "./window/FloatingNotifications";
+import { CenterWindow } from "./window/CenterWindow";
+import { LogoutMenu } from "./window/LogoutMenu";
+import { AppsWindow } from "./window/AppsWindow";


 export { Windows };
@@ -22,13 +29,13 @@ class Windows extends GObject.Object {
    #windowConnections: Record<string, (Array<number> | Array<Array<number>>)> = {};
    #appConnections: Array<number> = [];
    #windows: Record<string, (() => (Astal.Window | Array<Astal.Window>))> = {
-        //"bar": this.createWindowForMonitors(Bar),
-        //"osd": this.createWindowForFocusedMonitor(OSD),
+        "bar": this.createWindowForMonitors(Bar),
+        "osd": this.createWindowForFocusedMonitor(OSD),
        "control-center": this.createWindowForFocusedMonitor(ControlCenter),
-        /*"center-window": this.createWindowForFocusedMonitor(CenterWindow),
+        "center-window": this.createWindowForFocusedMonitor(CenterWindow),
        "logout-menu": this.createWindowForFocusedMonitor(LogoutMenu),
        "floating-notifications": this.createWindowForFocusedMonitor(FloatingNotifications),
-        "apps-window": this.createWindowForFocusedMonitor(AppsWindow)*/
+        "apps-window": this.createWindowForFocusedMonitor(AppsWindow)
    };

    @signal(String) opened(_name: string) {}