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

✨ ags: add brightness class, media widget on center-window and more

Browse Source
This commit is contained in:
retrozinndev
2025-02-15 08:24:00 -03:00
parent 2eb2f15db9
commit 6e9f2d4a7d
23 changed files with 441 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ags/widget/PopupWindow.ts
+18
View File
@@ -0,0 +1,18 @@
import { Astal, Gtk, Widget } from "astal/gtk3";
const { TOP, BOTTOM, LEFT, RIGHT }: typeof Astal.WindowAnchor = Astal.WindowAnchor;
/**
* Creates a screen-size window and opens the provided window after it.
* When clicking in the transparent background window, it closes(hides)
* the provided window.
* @param window the window to be rendered and closed when clicking outside of it
*/
export function PopupWindow(window: Gtk.Window) {
const bgWindow: Gtk.Window = new Widget.Window({
namespace: "popup-bg-window",
anchor: TOP | BOTTOM | LEFT | RIGHT,
} as Widget.WindowProps);
}
ags/widget/bar/FocusedClient.ts
+4
View File
@@ -29,11 +29,15 @@ export function FocusedClient() {
new Widget.Label({
className: "class",
xalign: 0,
max_width_chars: 65,
truncate: false,
label: bind(focusedClient, "class")
} as Widget.LabelProps),
new Widget.Label({
className: "title",
xalign: 0,
max_width_chars: 48,
truncate: false,
label: bind(focusedClient, "title")
} as Widget.LabelProps)
] : []
ags/widget/bar/Media.ts
+1
View File
@@ -54,6 +54,7 @@ export function Media(): Gtk.Widget {
new Widget.Button({
className: "next nf",
label: "󰒭",
tooltipText: "Next",
onClick: () => players[0].canGoNext && players[0].next()
} as Widget.ButtonProps)
] : new Widget.Label({
ags/widget/center-window/BigMedia.ts
+111 -1
View File
@@ -1,6 +1,116 @@
import { AstalIO, bind, GLib, Process, timeout } from "astal";
import { Gtk, Widget } from "astal/gtk3";
import AstalMpris from "gi://AstalMpris";
let dragTimer: (AstalIO.Time|undefined);
export const BigMedia: Gtk.Widget = new Widget.Box({
className: "big-media",
//TODO
orientation: Gtk.Orientation.VERTICAL,
homogeneous: false,
children: bind(AstalMpris.get_default(), "players").as((players: Array<AstalMpris.Player>) =>
players[0] ? [
new Widget.Box({
halign: Gtk.Align.CENTER,
child: new Widget.Box({
className: "image",
hexpand: false,
orientation: Gtk.Orientation.VERTICAL,
visible: bind(players[0], "coverArt").as((coverArt: string) =>
coverArt !== ""),
css: bind(players[0], "coverArt").as((coverArt: string) =>
`.image { background-image: url('${coverArt}'); }`),
width_request: 132,
height_request: 128
} as Widget.BoxProps)
} as Widget.BoxProps),
new Widget.Box({
className: "info",
orientation: Gtk.Orientation.VERTICAL,
children: [
new Widget.Label({
className: "title",
tooltipText: bind(players[0], "title").as((title: string) => !title ? "No Title" : title),
label: bind(players[0], "title").as((title: string) => !title ? "No Title" : title),
truncate: true
} as Widget.LabelProps),
new Widget.Label({
className: "artist",
tooltipText: bind(players[0], "artist").as((artist: string) => !artist ? "No Artist" : artist),
label: bind(players[0], "artist").as((artist: string) => !artist ? "No Artist" : artist),
truncate: true
} as Widget.LabelProps)
]
} as Widget.BoxProps),
new Widget.Box({
className: "progress",
hexpand: true,
visible: bind(players[0], "canSeek"),
children: [
/*new Widget.Label({
className: "elapsed",
label: bind(players[0], "position").as((position: number) =>
Math.floor(position).toString())
}),*/
new Widget.Slider({
min: 0,
hexpand: true,
max: bind(players[0], "length").as((length: number) =>
Math.floor(length)),
value: bind(players[0], "position").as((position: number) =>
Math.floor(position)),
onDragged: (slider: Widget.Slider) => {
if(dragTimer === undefined)
dragTimer = timeout(600, () =>
players[0].set_position(Math.round(slider.value)));
else {
dragTimer.cancel();
dragTimer = timeout(600, () =>
players[0].set_position(Math.round(slider.value)));
}
}
})
]
}),
new Widget.Box({
className: "controls button-row",
hexpand: true,
halign: Gtk.Align.CENTER,
children: [
new Widget.Button({
className: "link nf",
label: "󰌹",
tooltipText: "Copy link to Clipboard",
visible: bind(players[0], "metadata").as((_metadata: GLib.HashTable) =>
players[0].get_meta("xesam:url") === null),
onClick: () => Process.exec(`wl-copy ${players[0].get_meta("xesam:url")?.get_string()[0]}`)
} as Widget.ButtonProps),
new Widget.Button({
className: "previous nf",
label: "󰒮",
tooltipText: "Previous",
onClick: () => players[0].canGoPrevious && players[0].previous()
} as Widget.ButtonProps),
new Widget.Button({
className: "pause nf",
tooltipText: bind(players[0], "playback_status").as((status: AstalMpris.PlaybackStatus) =>
status === AstalMpris.PlaybackStatus.PLAYING ? "Pause" : "Play"),
label: bind(players[0], "playbackStatus").as((status: AstalMpris.PlaybackStatus) =>
status === AstalMpris.PlaybackStatus.PLAYING ? "󰏤" : "󰐊"),
onClick: () => {
players[0].playbackStatus === AstalMpris.PlaybackStatus.PAUSED ?
players[0].play()
:
players[0].pause()
}
} as Widget.ButtonProps),
new Widget.Button({
className: "next nf",
label: "󰒭",
tooltipText: "Next",
onClick: () => players[0].canGoNext && players[0].next()
} as Widget.ButtonProps)
]
})
] : new Widget.Box({ className: "empty no-media" }))
} as Widget.BoxProps);
ags/widget/center-window/NotificationHistory.ts → ags/widget/control-center/NotificationHistory.ts
View File
ags/widget/control-center/Tiles.ts
+18 -8
View File
@@ -1,12 +1,22 @@
import { Gtk, Widget } from "astal/gtk3";
export const tileList: Array<Gtk.Widget> = [
]
export const tileList: Array<Gtk.Widget> = [];
export const Tiles: Widget.Box = new Widget.Box({
child: new Gtk.Grid({
export function TilesWidget(): Gtk.Widget {
const tilesFlowBox: Gtk.FlowBox = new Gtk.FlowBox({
visible: true,
orientation: Gtk.Orientation.HORIZONTAL,
rowHomogeneous: true
} as Gtk.Grid.ConstructorProps)
} as Widget.BoxProps);
noShowAll: false,
orientation: Gtk.Orientation.HORIZONTAL
} as Gtk.Grid.ConstructorProps);
tileList.map((item: Gtk.Widget) =>
tilesFlowBox.insert(item, -1));
return new Widget.Box({
children: [
tilesFlowBox
]
} as Widget.BoxProps);
}
export const Tiles: Gtk.Widget = TilesWidget();
ags/widget/control-center/tiles/MoreTile.ts
-60
View File
@@ -1,60 +0,0 @@
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
-58
View File
@@ -1,58 +0,0 @@
import { Binding, Variable } 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 {
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/widget/control-center/tiles/Tile.ts
+39
View File
@@ -0,0 +1,39 @@
import { Binding } from "astal";
import { Gtk, Widget } from "astal/gtk3";
export type TileProps = {
className?: string | Binding<string | undefined>;
iconName?: string | Binding<string | undefined>;
visible?: boolean | Binding<boolean | undefined>;
iconSize?: number | Binding<number | undefined>;
title: string | Binding<string>;
description?: string | Binding<string | undefined>;
defaultToggleState?: boolean;
onToggledOn: () => void;
onToggledOff: () => void;
onClickMore?: () => void;
}
export function Tile(props: TileProps): Widget.Box {
const toggleButton = new Gtk.ToggleButton();
toggleButton.set_active(props.defaultToggleState || false);
const moreButton = new Widget.Button({
className: "more",
visible: props.onClickMore
});
return new Widget.Box({
className: (typeof Binding<string | undefined>) === (typeof props.className) ?
(props.className as Binding<string | undefined>).as((clsName: (string|undefined)) =>
`tile ${clsName || ""}`)
:
props.className,
visible: props.visible,
children: [
toggleButton,
moreButton
]
})
}