From 2fb3b6820402d2221b71ec094479762821f49ab5 Mon Sep 17 00:00:00 2001 From: retrozinndev Date: Mon, 7 Jul 2025 21:58:34 -0300 Subject: [PATCH] :boom: fix: correctly use centerbox with gtkbuilder types, fix styles also re-added some windows to the windows list(they were causing issues before) --- ags/app.ts | 4 +- ags/style.scss | 32 ++--- ags/style/_bar.scss | 182 +++++++++----------------- ags/style/_osd.scss | 20 ++- ags/widget/Notification.tsx | 11 +- ags/widget/PopupWindow.tsx | 5 +- ags/widget/Separator.tsx | 4 +- ags/widget/bar/FocusedClient.tsx | 6 +- ags/widget/bar/Media.tsx | 7 +- ags/widget/bar/Tray.tsx | 2 +- ags/widget/bar/Workspaces.tsx | 8 +- ags/widget/center-window/BigMedia.tsx | 6 +- ags/window/Bar.tsx | 26 ++-- ags/window/ControlCenter.tsx | 11 +- ags/windows.ts | 19 ++- 15 files changed, 144 insertions(+), 199 deletions(-) diff --git a/ags/app.ts b/ags/app.ts index c640ab7..9fe3357 100644 --- a/ags/app.ts +++ b/ags/app.ts @@ -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); - });*/ + }); } }); diff --git a/ags/style.scss b/ags/style.scss index 1eab054..7271654 100644 --- a/ags/style.scss +++ b/ags/style.scss @@ -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; } } } diff --git a/ags/style/_bar.scss b/ags/style/_bar.scss index 6d9b9b3..f8a6ed9 100644 --- a/ags/style/_bar.scss +++ b/ags/style/_bar.scss @@ -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); } } } diff --git a/ags/style/_osd.scss b/ags/style/_osd.scss index 5740e11..3ae0f81 100644 --- a/ags/style/_osd.scss +++ b/ags/style/_osd.scss @@ -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; } } } diff --git a/ags/widget/Notification.tsx b/ags/widget/Notification.tsx index bf15442..4d07322 100644 --- a/ags/widget/Notification.tsx +++ b/ags/widget/Notification.tsx @@ -40,7 +40,7 @@ export function NotificationWidget({ notification, actionClicked, holdOnHover, s const conns: Map> = new Map(); - return { @@ -102,11 +102,14 @@ export function NotificationWidget({ notification, actionClicked, holdOnHover, s + } + /> + wrapMode={Pango.WrapMode.WORD_CHAR} label={ + notification.body.replace(/[&]/g, "&") + } + /> diff --git a/ags/widget/PopupWindow.tsx b/ags/widget/PopupWindow.tsx index 4e6939d..be872cb 100644 --- a/ags/widget/PopupWindow.tsx +++ b/ags/widget/PopupWindow.tsx @@ -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 conns.forEach((id, obj) => obj.disconnect(id)))); + + props.$?.(self); }}> + css={`.vertical { padding: ${props.spacing ?? 0}px ${props.margin ?? 7}px; } + .horizontal { padding: ${props.margin ?? 4}px ${props.spacing ?? 0}px; }`}> { getSymbolicIcon(clss) ?? getAppIcon(clss) ?? getAppIcon(focusedClient.initialClass) ?? "application-x-executable-symbolic") - } css={"font-size: 18px;"} vexpand={true} /> + } vexpand={true} /> @@ -30,8 +30,8 @@ export const FocusedClient = () => { tooltipText={createBinding(focusedClient, "class")}/> + label={createBinding(focusedClient, "title")} + tooltipText={createBinding(focusedClient, "title")}/> } diff --git a/ags/widget/bar/Media.tsx b/ags/widget/bar/Media.tsx index f6fc265..a03ca10 100644 --- a/ags/widget/bar/Media.tsx +++ b/ags/widget/bar/Media.tsx @@ -18,7 +18,7 @@ export let [player, setPlayer] = createState(dummyPlayer); export const Media = () => { const connections: Map|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} /> + alpha={.3} spacing={6} /> artist ?? "No Artist")} maxWidthChars={18} ellipsize={Pango.EllipsizeMode.END} /> diff --git a/ags/widget/bar/Tray.tsx b/ags/widget/bar/Tray.tsx index c0efdb6..631b45b 100644 --- a/ags/widget/bar/Tray.tsx +++ b/ags/widget/bar/Tray.tsx @@ -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 + return {(item: AstalTray.TrayItem) => diff --git a/ags/widget/bar/Workspaces.tsx b/ags/widget/bar/Workspaces.tsx index 52d2cae..b56b528 100644 --- a/ags/widget/bar/Workspaces.tsx +++ b/ags/widget/bar/Workspaces.tsx @@ -114,18 +114,18 @@ export const Workspaces = () => { `${lastClient.get_class()}: ` : "" } ${lastClient.title}` : "" }` - )} onClicked={ws.focus}> + )} onClicked={() => ws.focus()}> {(lastClient: AstalHyprland.Client) => - + + hexpand> + class={"id"} hexpand /> {lastClient && diff --git a/ags/widget/center-window/BigMedia.tsx b/ags/widget/center-window/BigMedia.tsx index cc91c90..7b85e18 100644 --- a/ags/widget/center-window/BigMedia.tsx +++ b/ags/widget/center-window/BigMedia.tsx @@ -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" /> - + { @@ -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" /> diff --git a/ags/window/Bar.tsx b/ags/window/Bar.tsx index cd99bfe..38cd5bd 100644 --- a/ags/window/Bar.tsx +++ b/ags/window/Bar.tsx @@ -10,32 +10,30 @@ import { Status } from "../widget/bar/Status"; export const Bar = (mon: number) => { const widgetSpacing = 4; - return - - + return + + + halign={Gtk.Align.START} spacing={widgetSpacing} + $type="start"> + spacing={widgetSpacing} halign={Gtk.Align.CENTER} + $type="center"> + spacing={widgetSpacing} halign={Gtk.Align.END} + $type="end"> diff --git a/ags/window/ControlCenter.tsx b/ags/window/ControlCenter.tsx index 12fa5d1..4d3d1d6 100644 --- a/ags/window/ControlCenter.tsx +++ b/ags/window/ControlCenter.tsx @@ -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}> - - - - as Astal.Window; diff --git a/ags/windows.ts b/ags/windows.ts index ea21a4c..2359c33 100644 --- a/ags/windows.ts +++ b/ags/windows.ts @@ -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 | Array>)> = {}; #appConnections: Array = []; #windows: Record (Astal.Window | Array))> = { - //"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) {}