From 80969071c468b02dd977de4d8d93077ac992f150 Mon Sep 17 00:00:00 2001 From: retrozinndev Date: Tue, 4 Feb 2025 21:45:18 -0300 Subject: [PATCH] :boom: ags: fix startup issues (and with that, errors with focusedClient bar widget) --- ags/app.ts | 18 ++- ags/scripts/pywal.ts | 10 -- ags/scripts/reload-handler.ts | 2 +- ags/scripts/volume.ts | 78 ++++++++++-- ags/scripts/windows.ts | 14 +-- ags/style/_bar.scss | 9 ++ ags/style/_control-center.scss | 1 - ags/widget/bar/{Audio.tsx => Audio.ts} | 19 ++- ags/widget/bar/{Clock.tsx => Clock.ts} | 0 .../{FocusedWindow.tsx => FocusedWindow.ts} | 10 +- ags/widget/bar/{Media.tsx => Media.ts} | 0 ags/widget/bar/{Tray.tsx => Tray.ts} | 0 .../bar/{Workspaces.tsx => Workspaces.ts} | 0 ags/widget/control-center/ButtonGrid.ts | 30 ----- ags/widget/control-center/QuickActions.ts | 75 ++++++------ ags/widget/control-center/Tiles.ts | 11 ++ ags/widget/control-center/tiles/Internet.ts | 8 ++ ags/widget/control-center/tiles/MoreTile.ts | 60 ++++++++++ ags/widget/control-center/tiles/NormalTile.ts | 61 ++++++++++ ags/window/Bar.ts | 111 ++++++++---------- ags/window/ControlCenter.ts | 46 ++++---- 21 files changed, 363 insertions(+), 200 deletions(-) delete mode 100644 ags/scripts/pywal.ts rename ags/widget/bar/{Audio.tsx => Audio.ts} (70%) rename ags/widget/bar/{Clock.tsx => Clock.ts} (100%) rename ags/widget/bar/{FocusedWindow.tsx => FocusedWindow.ts} (82%) rename ags/widget/bar/{Media.tsx => Media.ts} (100%) rename ags/widget/bar/{Tray.tsx => Tray.ts} (100%) rename ags/widget/bar/{Workspaces.tsx => Workspaces.ts} (100%) delete mode 100644 ags/widget/control-center/ButtonGrid.ts create mode 100644 ags/widget/control-center/Tiles.ts create mode 100644 ags/widget/control-center/tiles/Internet.ts create mode 100644 ags/widget/control-center/tiles/MoreTile.ts create mode 100644 ags/widget/control-center/tiles/NormalTile.ts diff --git a/ags/app.ts b/ags/app.ts index 1c1cb43..31e776a 100644 --- a/ags/app.ts +++ b/ags/app.ts @@ -1,8 +1,12 @@ import { App } from "astal/gtk3" +import { Bar } from "./window/Bar"; +import { OSD } from "./window/OSD"; +import { ControlCenter } from "./window/ControlCenter"; import { runStyleHandler } from "./scripts/style-handler"; -//import { monitorPaths } from "./scripts/reload-handler"; // Only for debugging purposes(testing new widgets and stuff) import { handleArguments } from "./scripts/arg-handler"; +import { monitorPaths } from "./scripts/reload-handler"; + export const astalInstanceName = "astal" @@ -17,6 +21,16 @@ App.start({ console.log(`[LOG] Running Stylesheet handler`); runStyleHandler(); //console.log(`[LOG] Starting to monitor scripts to automatically reload instance`); - //monitorPaths(); + //monitorPaths(); // Only for debugging purposes(testing new widgets and stuff) } }); + +// Windows list +export function getWindowsMap(): Object { + return { + "bar": Bar, + "osd": OSD, + "control-center": ControlCenter, + //"floating-notifications": FloatingNotifications + }; +} diff --git a/ags/scripts/pywal.ts b/ags/scripts/pywal.ts deleted file mode 100644 index a19fcc3..0000000 --- a/ags/scripts/pywal.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { readFile } from "astal"; -import { getUserDirs } from "./user"; - -export class Wal { - public static getColors(): JSON { - return JSON.parse( - readFile(`${getUserDirs().cache}/wal/colors.json`)! - ); - } -} diff --git a/ags/scripts/reload-handler.ts b/ags/scripts/reload-handler.ts index 1754223..4f1c13d 100644 --- a/ags/scripts/reload-handler.ts +++ b/ags/scripts/reload-handler.ts @@ -4,7 +4,7 @@ import { getUserDirs } from "./user"; const monitoringPaths = [ "./scripts", "./window", "./app.ts", "env.d.ts" ]; -interface InstanceProps { +export interface InstanceProps { instanceName?: string; log?: boolean; } diff --git a/ags/scripts/volume.ts b/ags/scripts/volume.ts index 411dca9..a4764d6 100644 --- a/ags/scripts/volume.ts +++ b/ags/scripts/volume.ts @@ -36,33 +36,91 @@ export class Wireplumber { return this.getDefaultSource().get_volume() * 100; } - public setSinkVolume(newSinkVolume: number) { + public setSinkVolume(newSinkVolume: number): void { this.defaultSink.set_volume( (newSinkVolume > this.maxSinkVolume ? this.maxSinkVolume : newSinkVolume) / 100 ); } - public setSourceVolume(newSourceVolume: number) { + public setSourceVolume(newSourceVolume: number): void { this.defaultSource.set_volume( newSourceVolume > this.maxSourceVolume ? this.maxSourceVolume : newSourceVolume / 100 ); } - public increaseSinkVolume(volumeIncrease: number) { - if(volumeIncrease > this.maxSinkVolume - || (this.maxSinkVolume + volumeIncrease) > this.maxSinkVolume) { + public increaseSinkVolume(volumeIncrease: number): void { + if((this.getSinkVolume() + volumeIncrease) > this.maxSinkVolume) { this.setSinkVolume(this.maxSinkVolume); + return; } this.setSinkVolume(this.getSinkVolume() + volumeIncrease); } - public increaseSourceVolume(volumeIncrease: number) { - if(volumeIncrease > this.maxSourceVolume //TODO - || (this.maxSinkVolume + volumeIncrease) > this.maxSinkVolume) { - this.setSinkVolume(this.maxSinkVolume); + public increaseSourceVolume(volumeIncrease: number): void { + if((this.getSourceVolume() + volumeIncrease) > this.maxSourceVolume) { + this.setSourceVolume(this.maxSourceVolume); + return; } - this.setSinkVolume(this.getSinkVolume() + volumeIncrease); + this.setSourceVolume(this.getSourceVolume() + volumeIncrease); + } + + public decreaseSinkVolume(volumeDecrease: number): void { + const absDecrease = Math.abs(volumeDecrease); + + if((this.getSinkVolume() - absDecrease) < 0) { + this.setSinkVolume(0); + return; + } + + this.setSinkVolume(this.getSinkVolume() - absDecrease); + } + + public decreaseSourceVolume(volumeDecrease: number): void { + const absDecrease = Math.abs(volumeDecrease); + + if((this.getSourceVolume() - absDecrease) < 0) + return this.setSourceVolume(0); + + this.setSourceVolume(this.getSourceVolume() - absDecrease); + } + + public muteSink(): void { + this.getDefaultSink().set_mute(true); + } + + public muteSource(): void { + this.getDefaultSource().set_mute(true); + } + + public unmuteSink(): void { + this.getDefaultSink().set_mute(false); + } + + public unmuteSource(): void { + this.getDefaultSource().set_mute(false); + } + + public isMutedSink(): boolean { + return this.getDefaultSink().get_mute(); + } + + public isMutedSource(): boolean { + return this.getDefaultSource().get_mute(); + } + + public toggleMuteSink(): void { + if(this.isMutedSink()) + return this.unmuteSink(); + + return this.muteSink(); + } + + public toggleMuteSource(): void { + if(this.isMutedSource()) + return this.unmuteSource(); + + return this.muteSource(); } } diff --git a/ags/scripts/windows.ts b/ags/scripts/windows.ts index f255e9b..62bccf3 100644 --- a/ags/scripts/windows.ts +++ b/ags/scripts/windows.ts @@ -1,22 +1,12 @@ // get open windows / interact with windows(e.g.: close, open or toggle) import { Widget } from "astal/gtk3"; -import { Bar } from "../window/Bar"; -import { OSD } from "../window/OSD"; -import { ControlCenter } from "../window/ControlCenter"; -//import { FloatingNotifications } from "../window/FloatingNotifications"; +import { getWindowsMap } from "../app"; export class Windows { private static inst: Windows = new Windows(); - /* Windows List(js object): - * add all windows here */ - private readonly windows = { - "bar": Bar, - "osd": OSD, - "control-center": ControlCenter - //"floating-notifications": FloatingNotifications - }; + private readonly windows = getWindowsMap(); public static getDefault(): Windows { return Windows.inst; diff --git a/ags/style/_bar.scss b/ags/style/_bar.scss index 7f248d7..db41b86 100644 --- a/ags/style/_bar.scss +++ b/ags/style/_bar.scss @@ -188,6 +188,15 @@ } .audio { + &:hover > box { + background: wal.$color1; + } + + & > box { + padding: 0 9px; + border-radius: 12px; + } + & .sink .icon { margin-right: 6px; } diff --git a/ags/style/_control-center.scss b/ags/style/_control-center.scss index 0517e67..ef2b7e4 100644 --- a/ags/style/_control-center.scss +++ b/ags/style/_control-center.scss @@ -5,7 +5,6 @@ background: rgba(wal.$background, .6); border-top-left-radius: 16px; border-bottom-left-radius: 16px; - margin: 32px 0; & * { all: unset; diff --git a/ags/widget/bar/Audio.tsx b/ags/widget/bar/Audio.ts similarity index 70% rename from ags/widget/bar/Audio.tsx rename to ags/widget/bar/Audio.ts index e2934d6..28a34be 100644 --- a/ags/widget/bar/Audio.tsx +++ b/ags/widget/bar/Audio.ts @@ -1,16 +1,22 @@ import { bind } from "astal"; -import { Gtk, Widget } from "astal/gtk3"; +import { Astal, Widget } from "astal/gtk3"; import AstalWp from "gi://AstalWp?version=0.1"; +import { Wireplumber } from "../../scripts/volume"; const wp = AstalWp.get_default(); export function Audio() { - return wp && new Widget.Button({ + return wp && new Widget.EventBox({ className: "audio", child: new Widget.Box({ children: [ new Widget.EventBox({ className: "sink", + onScroll: (_, event) => + event.delta_y > 0 ? + Wireplumber.getDefault().decreaseSinkVolume(5) + : + Wireplumber.getDefault().increaseSinkVolume(5), child: new Widget.Box({ children: [ new Widget.Label({ @@ -22,11 +28,16 @@ export function Audio() { label: bind(wp!.defaultSpeaker, "volume").as((volume: number) => Math.round(volume * 100).toString() + "%") } as Widget.LabelProps) - ] + ] }) } as Widget.EventBoxProps), new Widget.EventBox({ className: "source", + onScroll: (_, event) => + event.delta_y > 0 ? + Wireplumber.getDefault().decreaseSourceVolume(5) + : + Wireplumber.getDefault().increaseSourceVolume(5), child: new Widget.Box({ children: [ new Widget.Label({ @@ -42,5 +53,5 @@ export function Audio() { } as Widget.EventBoxProps) ] } as Widget.BoxProps) - } as Widget.ButtonProps); + } as Widget.EventBoxProps); } diff --git a/ags/widget/bar/Clock.tsx b/ags/widget/bar/Clock.ts similarity index 100% rename from ags/widget/bar/Clock.tsx rename to ags/widget/bar/Clock.ts diff --git a/ags/widget/bar/FocusedWindow.tsx b/ags/widget/bar/FocusedWindow.ts similarity index 82% rename from ags/widget/bar/FocusedWindow.tsx rename to ags/widget/bar/FocusedWindow.ts index b6413e8..822bcb3 100644 --- a/ags/widget/bar/FocusedWindow.tsx +++ b/ags/widget/bar/FocusedWindow.ts @@ -13,7 +13,11 @@ export function FocusedWindow() { new Widget.Icon({ className: "icon", icon: bind(hyprland, "focusedClient").as((client: AstalHyprland.Client) => - getAppIcon(client.initialClass) || "image-missing"), + client ? + (getAppIcon(client.initialClass) || client.initialClass) + : + "image-missing" + ), iconSize: Gtk.IconSize.SMALL_TOOLBAR }), new Widget.Box({ @@ -25,13 +29,13 @@ export function FocusedWindow() { className: "class", xalign: 0, label: bind(hyprland, "focusedClient").as((client: AstalHyprland.Client) => - client?.["class"]) + client ? client.class : "") } as Widget.LabelProps), new Widget.Label({ className: "title", xalign: 0, label: bind(hyprland, "focusedClient").as((client: AstalHyprland.Client) => - client?.["title"]) + client ? client.title : "") } as Widget.LabelProps) ] }) diff --git a/ags/widget/bar/Media.tsx b/ags/widget/bar/Media.ts similarity index 100% rename from ags/widget/bar/Media.tsx rename to ags/widget/bar/Media.ts diff --git a/ags/widget/bar/Tray.tsx b/ags/widget/bar/Tray.ts similarity index 100% rename from ags/widget/bar/Tray.tsx rename to ags/widget/bar/Tray.ts diff --git a/ags/widget/bar/Workspaces.tsx b/ags/widget/bar/Workspaces.ts similarity index 100% rename from ags/widget/bar/Workspaces.tsx rename to ags/widget/bar/Workspaces.ts diff --git a/ags/widget/control-center/ButtonGrid.ts b/ags/widget/control-center/ButtonGrid.ts deleted file mode 100644 index 8d87dd7..0000000 --- a/ags/widget/control-center/ButtonGrid.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { Gtk, Widget } from "astal/gtk3"; - -export function ButtonGrid(): Widget.Box { - return new Widget.Box({ - child: new Gtk.Grid({ - orientation: Gtk.Orientation.HORIZONTAL, - rowHomogeneous: true - } as Gtk.Grid.ConstructorProps, BluetoothToggle()) - } as Widget.BoxProps); -} - -// Buttons and Toggles! - -export function BluetoothToggle(): Gtk.ToggleButton { - return new Gtk.ToggleButton({ - child: new Widget.Box({ - orientation: Gtk.Orientation.VERTICAL, - children: [ - new Widget.Label({ - className: "title", - label: "Bluetooth" - } as Widget.LabelProps), - new Widget.Label({ - className: "extra", - label: "[dev] [dev_bat]" - } as Widget.LabelProps) - ] - } as Widget.BoxProps) - }); -} diff --git a/ags/widget/control-center/QuickActions.ts b/ags/widget/control-center/QuickActions.ts index 9968342..c0adea9 100644 --- a/ags/widget/control-center/QuickActions.ts +++ b/ags/widget/control-center/QuickActions.ts @@ -8,45 +8,6 @@ const uptime = new Variable("Just turned on") return Process.exec("uptime -p").replace(/^up /, "") })(); -const quickActionsBox: Widget.Box = new Widget.Box({ - className: "quickactions", - hexpand: true, - children: [ - new Widget.Box({ - orientation: Gtk.Orientation.VERTICAL, - halign: Gtk.Align.START, - children: [ - new Widget.Label({ - className: "hostname", - xalign: 0, - label: hostname.toString() - } as Widget.LabelProps), - new Widget.Label({ - className: "uptime", - xalign: 0, - label: uptime.as((uptime: string) => `󱡢 ${uptime}`) - } as Widget.LabelProps) - ] - } as Widget.BoxProps), - new Widget.Box({ - orientation: Gtk.Orientation.HORIZONTAL, - className: "button-row", - halign: Gtk.Align.END, - children: [ - LockButton(), - ColorPickerButton(), - ScreenshotButton(), - SelectWallpaperButton(), - LogoutButton() - ] - } as Widget.BoxProps) - ] -} as Widget.BoxProps); - -export function QuickActionsWidget(): Widget.Box { - return quickActionsBox; -} - function LockButton(): Widget.Button { return new Widget.Button({ label: "󰌾", @@ -93,3 +54,39 @@ function LogoutButton(): Widget.Button { ) } as Widget.ButtonProps); } + +export const QuickActions: Widget.Box = new Widget.Box({ + className: "quickactions", + children: [ + new Widget.Box({ + orientation: Gtk.Orientation.VERTICAL, + halign: Gtk.Align.START, + hexpand: true, + children: [ + new Widget.Label({ + className: "hostname", + xalign: 0, + label: hostname.toString() + } as Widget.LabelProps), + new Widget.Label({ + className: "uptime", + xalign: 0, + label: uptime.as((uptime: string) => `󱡢 ${uptime}`) + } as Widget.LabelProps) + ] + } as Widget.BoxProps), + new Widget.Box({ + orientation: Gtk.Orientation.HORIZONTAL, + className: "button-row", + halign: Gtk.Align.END, + hexpand: true, + children: [ + LockButton(), + ColorPickerButton(), + ScreenshotButton(), + SelectWallpaperButton(), + LogoutButton() + ] + } as Widget.BoxProps) + ] +} as Widget.BoxProps); diff --git a/ags/widget/control-center/Tiles.ts b/ags/widget/control-center/Tiles.ts new file mode 100644 index 0000000..31778c8 --- /dev/null +++ b/ags/widget/control-center/Tiles.ts @@ -0,0 +1,11 @@ +import { Gtk, Widget } from "astal/gtk3"; + +export const tileList: Array = [ +] + +export const Tiles: Widget.Box = new Widget.Box({ + child: new Gtk.Grid({ + orientation: Gtk.Orientation.HORIZONTAL, + rowHomogeneous: true + } as Gtk.Grid.ConstructorProps) +} as Widget.BoxProps); diff --git a/ags/widget/control-center/tiles/Internet.ts b/ags/widget/control-center/tiles/Internet.ts new file mode 100644 index 0000000..41b6a40 --- /dev/null +++ b/ags/widget/control-center/tiles/Internet.ts @@ -0,0 +1,8 @@ +import { Gtk, Widget } from "astal/gtk3"; + +export const TileInternet = new Widget.Box({ + className: "tile more internet", + children: [ + toggleButton + ] +} as Widget.BoxProps); diff --git a/ags/widget/control-center/tiles/MoreTile.ts b/ags/widget/control-center/tiles/MoreTile.ts new file mode 100644 index 0000000..2b3973f --- /dev/null +++ b/ags/widget/control-center/tiles/MoreTile.ts @@ -0,0 +1,60 @@ +import { Binding } from "astal"; +import { Gtk, Widget } from "astal/gtk3"; + +export interface MoreTileProps { + className?: string | Binding; + iconName?: string | Binding; + iconSize?: Gtk.IconSize; + title: string | Binding; + description?: string | Binding; + defaultToggleState?: boolean; + onToggledOn: Function; + onToggledOff: Function; + onClickMore: Function; +} + +export function MoreTile(props: MoreTileProps): Gtk.Widget { + + let toggleState: boolean = props?.defaultToggleState !== undefined ? + props.defaultToggleState : false; + + const mainEventBox = new Widget.EventBox({ + onClick: () => toggleState ? props.onToggledOff() : props.onToggledOn(), + expand: true, + child: new Widget.Box({ + className: props?.className || "", + expand: true, + children: [ + new Widget.Icon({ + iconName: props?.iconName, + visible: props.iconName !== undefined, + iconSize: props.iconSize || Gtk.IconSize.BUTTON + }), + new Widget.Box({ + className: "text", + orientation: Gtk.Orientation.VERTICAL, + children: [ + new Widget.Label({ + className: "title", + label: props.title + } as Widget.LabelProps), + new Widget.Label({ + className: "description", + visible: props?.description !== undefined, + label: props?.description + } as Widget.LabelProps) + ] + } as Widget.BoxProps), + new Widget.Button({ + onClick: () => props.onClickMore(), + child: new Widget.Icon({ + iconName: "go-next", + iconSize: Gtk.IconSize.BUTTON + } as Widget.IconProps), + } as Widget.ButtonProps) + ] + } as Widget.BoxProps) + } as Widget.EventBoxProps); + + return mainEventBox; +} diff --git a/ags/widget/control-center/tiles/NormalTile.ts b/ags/widget/control-center/tiles/NormalTile.ts new file mode 100644 index 0000000..10fc0db --- /dev/null +++ b/ags/widget/control-center/tiles/NormalTile.ts @@ -0,0 +1,61 @@ +import { Binding } from "astal"; +import { Gtk, Widget } from "astal/gtk3"; + +export interface NormalTileProps { + className?: string | Binding; + iconName?: string | Binding; + iconSize?: Gtk.IconSize; + title: string | Binding; + description?: string | Binding; + toggleState?: boolean | Binding; + onToggledOn: Function; + onToggledOff: Function; +} + +export function MoreTile(props: NormalTileProps): Gtk.Widget { + + let toggleState: boolean = props?.toggleState !== undefined ? + props.toggleState : false; + + const mainEventBox = new Widget.EventBox({ + onClick: () => toggleState ? props.onToggledOff() : props.onToggledOn(), + expand: true, + child: new Widget.Box({ + className: props?.className || "", + expand: true, + children: [ + new Widget.Icon({ + iconName: props?.iconName, + visible: props.iconName !== undefined, + iconSize: props.iconSize || Gtk.IconSize.BUTTON + }), + new Widget.Box({ + className: "text", + orientation: Gtk.Orientation.VERTICAL, + children: [ + new Widget.Label({ + className: "title", + label: props.title + } as Widget.LabelProps), + new Widget.Label({ + className: "description", + visible: props?.description !== undefined, + label: props?.description + } as Widget.LabelProps) + ] + } as Widget.BoxProps) + ] + } as Widget.BoxProps) + } as Widget.EventBoxProps); + + function toggleOn(): void { + mainEventBox.set_class_name(mainEventBox + "") + props.onToggledOn(); + } + + function toggleOff(): void { + props.onToggledOff(); + } + + return mainEventBox; +} diff --git a/ags/window/Bar.ts b/ags/window/Bar.ts index 8b25a5e..b2fff2b 100644 --- a/ags/window/Bar.ts +++ b/ags/window/Bar.ts @@ -9,66 +9,53 @@ import { Audio } from "../widget/bar/Audio"; import { FocusedWindow } from "../widget/bar/FocusedWindow"; //import { Media } from "../widget/bar/Media"; -interface BarProps { - monitor: number; - width?: number; - height?: number; -} - -export const Bar: Widget.Window = newBar({ - monitor: 0 -} as BarProps); - -function newBar(props: BarProps): Widget.Window { - return new Widget.Window({ - className: "bar", - monitor: props.monitor, - namespace: "top-bar", - anchor: Astal.WindowAnchor.TOP, - layer: Astal.Layer.TOP, - exclusivity: Astal.Exclusivity.EXCLUSIVE, - canFocus: false, - visible: true, // Recommendation: set visible to false if you don't want this window to appear on app start - heightRequest: props.height || 0, - widthRequest: props.width || Gdk.Screen.get_default()?.get_monitor_geometry(props.monitor)?.width, - hexpand: false, - vexpand: false, - child: new Widget.Box({ - className: "bar-container", - child: new Widget.CenterBox({ - className: "bar-centerbox", - expand: true, +export const Bar: Widget.Window = new Widget.Window({ + className: "bar", + monitor: 0, + namespace: "top-bar", + anchor: Astal.WindowAnchor.TOP, + layer: Astal.Layer.TOP, + exclusivity: Astal.Exclusivity.EXCLUSIVE, + canFocus: false, + visible: true, + widthRequest: Gdk.Screen.get_default()?.get_monitor_geometry(0)?.width, + hexpand: false, + vexpand: false, + child: new Widget.Box({ + className: "bar-container", + child: new Widget.CenterBox({ + className: "bar-centerbox", + expand: true, + homogeneous: false, + startWidget: new Widget.Box({ + className: "widgets-left", homogeneous: false, - startWidget: new Widget.Box({ - className: "widgets-left", - homogeneous: false, - halign: Gtk.Align.START, - children: [ - Logo(), - Workspaces(), - FocusedWindow() - ] - } as Widget.BoxProps), - centerWidget: new Widget.Box({ - className: "widgets-center", - homogeneous: false, - halign: Gtk.Align.CENTER, - children: [ - Clock(), - /**/ - ] - } as Widget.BoxProps), - endWidget: new Widget.Box({ - className: "widgets-right", - homogeneous: false, - halign: Gtk.Align.END, - children: [ - Tray(), - Audio(), - CCToggle() - ] - } as Widget.BoxProps) - } as Widget.CenterBoxProps) - } as Widget.BoxProps) - } as Widget.WindowProps); -} + halign: Gtk.Align.START, + children: [ + Logo(), + Workspaces(), + FocusedWindow() + ] + } as Widget.BoxProps), + centerWidget: new Widget.Box({ + className: "widgets-center", + homogeneous: false, + halign: Gtk.Align.CENTER, + children: [ + Clock(), + /**/ + ] + } as Widget.BoxProps), + endWidget: new Widget.Box({ + className: "widgets-right", + homogeneous: false, + halign: Gtk.Align.END, + children: [ + Tray(), + Audio(), + CCToggle() + ] + } as Widget.BoxProps) + } as Widget.CenterBoxProps) + } as Widget.BoxProps) +} as Widget.WindowProps); diff --git a/ags/window/ControlCenter.ts b/ags/window/ControlCenter.ts index 57dfab4..e6dd614 100644 --- a/ags/window/ControlCenter.ts +++ b/ags/window/ControlCenter.ts @@ -1,31 +1,25 @@ import { Astal, Gdk, Gtk, Widget } from "astal/gtk3"; -import { QuickActionsWidget } from "../widget/control-center/QuickActions"; +import { QuickActions } from "../widget/control-center/QuickActions"; +import { Bar } from "./Bar"; +import { Tiles } from "../widget/control-center/Tiles"; -export const ControlCenter: Widget.Window = CC(); -export const widgetsBox: Widget.Box = new Widget.Box({ - visible: true, +const monitorHeight: number = Gdk.Screen.get_default()?.get_monitor_geometry(0)?.height!; + +const widgetsContainer: Widget.Box = new Widget.Box({ className: "control-center-container", orientation: Gtk.Orientation.VERTICAL, - children: [ - QuickActionsWidget() - ] -} as Widget.BoxProps); +} as Widget.BoxProps, +QuickActions, +Tiles); -widgetsBox.connect("add", (_: Widget.Box, widget: Gtk.Widget) => { - widget.set_size_request(widgetsBox.get_allocated_width(), widget.get_allocated_height()); -}); - -function CC(): Widget.Window { - return new Widget.Window({ - className: "control-center", - namespace: "control-center", - canFocus: true, - exclusivity: Astal.Exclusivity.NORMAL, - anchor: Astal.WindowAnchor.RIGHT, - width_request: 450, - height_request: Gdk.Screen.get_default()?.get_monitor_geometry(0)?.height || 800, - monitor: 0, - visible: false, - child: widgetsBox - } as Widget.WindowProps); -} +export const ControlCenter: Widget.Window = new Widget.Window({ + className: "control-center", + namespace: "control-center", + canFocus: true, + exclusivity: Astal.Exclusivity.NORMAL, + anchor: Astal.WindowAnchor.RIGHT, + width_request: 450, + height_request: Bar.is_visible() ? monitorHeight - Bar.get_size()[1] - 18 : 700, + monitor: 0, + visible: false +} as Widget.WindowProps, widgetsContainer);