Olivier/colorshell
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💥 ags: fix startup issues (and with that, errors with focusedClient bar widget)

Browse Source
This commit is contained in:
retrozinndev
2025-02-04 21:45:18 -03:00
parent 11f919ab1d
commit 80969071c4
21 changed files with 363 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ags/app.ts
+16 -2
View File
@@ -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
};
}
ags/scripts/pywal.ts
-10
View File
@@ -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`)!
);
}
}
ags/scripts/reload-handler.ts
+1 -1
View File
@@ -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;
}
ags/scripts/volume.ts
+68 -10
View File
@@ -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();
}
}
ags/scripts/windows.ts
+2 -12
View File
@@ -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;
ags/style/_bar.scss
+9
View File
@@ -188,6 +188,15 @@
}
.audio {
&:hover > box {
background: wal.$color1;
}
& > box {
padding: 0 9px;
border-radius: 12px;
}
& .sink .icon {
margin-right: 6px;
}
ags/style/_control-center.scss
-1
View File
@@ -5,7 +5,6 @@
background: rgba(wal.$background, .6);
border-top-left-radius: 16px;
border-bottom-left-radius: 16px;
margin: 32px 0;
& * {
all: unset;
ags/widget/bar/Audio.tsx → ags/widget/bar/Audio.ts
+15 -4
View File
@@ -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);
}
ags/widget/bar/Clock.tsx → ags/widget/bar/Clock.ts
View File
ags/widget/bar/FocusedWindow.tsx → ags/widget/bar/FocusedWindow.ts
+7 -3
View File
@@ -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)
]
})
ags/widget/bar/Media.tsx → ags/widget/bar/Media.ts
View File
ags/widget/bar/Tray.tsx → ags/widget/bar/Tray.ts
View File
ags/widget/bar/Workspaces.tsx → ags/widget/bar/Workspaces.ts
View File
ags/widget/control-center/ButtonGrid.ts
-30
View File
@@ -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)
});
}
ags/widget/control-center/QuickActions.ts
+36 -39
View File
@@ -8,45 +8,6 @@ const uptime = new Variable<string>("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);
ags/widget/control-center/Tiles.ts
+11
View File
@@ -0,0 +1,11 @@
import { Gtk, Widget } from "astal/gtk3";
export const tileList: Array<Gtk.Widget> = [
]
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);
ags/widget/control-center/tiles/Internet.ts
+8
View File
@@ -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);
ags/widget/control-center/tiles/MoreTile.ts
+60
View File
@@ -0,0 +1,60 @@
import { Binding } from "astal";
import { Gtk, Widget } from "astal/gtk3";
export interface MoreTileProps {
className?: string | Binding<string | undefined>;
iconName?: string | Binding<string | undefined>;
iconSize?: Gtk.IconSize;
title: string | Binding<string>;
description?: string | Binding<string | undefined>;
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;
}
ags/widget/control-center/tiles/NormalTile.ts
+61
View File
@@ -0,0 +1,61 @@
import { Binding } from "astal";
import { Gtk, Widget } from "astal/gtk3";
export interface NormalTileProps {
className?: string | Binding<string | undefined>;
iconName?: string | Binding<string | undefined>;
iconSize?: Gtk.IconSize;
title: string | Binding<string>;
description?: string | Binding<string | undefined>;
toggleState?: boolean | Binding<boolean | undefined>;
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;
}
ags/window/Bar.ts
+49 -62
View File
@@ -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(),
/*<Media />*/
]
} 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(),
/*<Media />*/
]
} 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);
ags/window/ControlCenter.ts
+20 -26
View File
@@ -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);