✨ ags: better separator properties, add more separators on widgets
This commit is contained in:
retrozinndev
@@ -9,44 +9,42 @@ export function FocusedClient(): Gtk.Widget {
|
||||
return new Widget.Box({
|
||||
className: "focused-client",
|
||||
visible: bind(hyprland, "focusedClient").as(Boolean),
|
||||
children: [
|
||||
children: bind(hyprland, "focusedClient").as(focusedClient => focusedClient ? [
|
||||
new Widget.Icon({
|
||||
className: "icon",
|
||||
vexpand: true,
|
||||
css: ".icon { font-size: 18px; }",
|
||||
icon: bind(hyprland, "focusedClient").as((client: AstalHyprland.Client) =>
|
||||
client ? getAppIcon(client.initialClass) : "image-missing")
|
||||
icon: bind(focusedClient, "class").as(clss =>
|
||||
getAppIcon(clss) ?? "application-x-executable-symbolic")
|
||||
}),
|
||||
new Widget.Box({
|
||||
className: "text-content",
|
||||
orientation: Gtk.Orientation.VERTICAL,
|
||||
homogeneous: false,
|
||||
valign: Gtk.Align.CENTER,
|
||||
children: bind(hyprland, "focusedClient").as((focusedClient: AstalHyprland.Client) =>
|
||||
focusedClient ? [
|
||||
new Widget.Label({
|
||||
className: "class",
|
||||
xalign: 0,
|
||||
visible: bind(focusedClient, "class").as(Boolean),
|
||||
maxWidthChars: 55,
|
||||
truncate: true,
|
||||
tooltipText: bind(focusedClient, "class").as((clientClass: string) =>
|
||||
clientClass.length > 55 ? clientClass : ""),
|
||||
label: bind(focusedClient, "class")
|
||||
} as Widget.LabelProps),
|
||||
new Widget.Label({
|
||||
className: "title",
|
||||
xalign: 0,
|
||||
maxWidthChars: 50,
|
||||
visible: bind(focusedClient, "title").as(Boolean),
|
||||
truncate: true,
|
||||
tooltipText: bind(focusedClient, "title").as((clientTitle: string) =>
|
||||
clientTitle.length > 55 ? clientTitle : ""),
|
||||
label: bind(focusedClient, "title")
|
||||
} as Widget.LabelProps)
|
||||
] : []
|
||||
)
|
||||
children: [
|
||||
new Widget.Label({
|
||||
className: "class",
|
||||
xalign: 0,
|
||||
visible: bind(focusedClient, "class").as(Boolean),
|
||||
maxWidthChars: 55,
|
||||
truncate: true,
|
||||
tooltipText: bind(focusedClient, "class").as((clientClass: string) =>
|
||||
clientClass.length > 55 ? clientClass : ""),
|
||||
label: bind(focusedClient, "class")
|
||||
} as Widget.LabelProps),
|
||||
new Widget.Label({
|
||||
className: "title",
|
||||
xalign: 0,
|
||||
maxWidthChars: 50,
|
||||
visible: bind(focusedClient, "title").as(Boolean),
|
||||
truncate: true,
|
||||
tooltipText: bind(focusedClient, "title").as((clientTitle: string) =>
|
||||
clientTitle.length > 55 ? clientTitle : ""),
|
||||
label: bind(focusedClient, "title")
|
||||
} as Widget.LabelProps)
|
||||
]
|
||||
})
|
||||
]
|
||||
]: [])
|
||||
} as Widget.BoxProps);
|
||||
}
|
||||
|
||||
+21
-26
@@ -2,10 +2,8 @@ import { bind, execAsync, GLib } from "astal";
|
||||
import { Gtk, Widget } from "astal/gtk3";
|
||||
import AstalMpris from "gi://AstalMpris";
|
||||
import { Separator, SeparatorProps } from "../Separator";
|
||||
import { CenterWindow } from "../../window/CenterWindow";
|
||||
import { Windows } from "../../windows";
|
||||
|
||||
const mpris: AstalMpris.Mpris = AstalMpris.get_default();
|
||||
|
||||
const playerIcons = {
|
||||
spotify: '',
|
||||
@@ -16,8 +14,8 @@ const playerIcons = {
|
||||
}
|
||||
|
||||
export function Media(): Gtk.Widget {
|
||||
let hoverConnectionId: number;
|
||||
let hoverLostConnectionId: number;
|
||||
|
||||
const connections: Array<number> = [];
|
||||
|
||||
const mediaControlsRevealer: Widget.Revealer = new Widget.Revealer({
|
||||
transitionType: Gtk.RevealerTransitionType.SLIDE_RIGHT,
|
||||
@@ -27,7 +25,7 @@ export function Media(): Gtk.Widget {
|
||||
className: "media-controls button-row",
|
||||
expand: false,
|
||||
homogeneous: false,
|
||||
children: bind(mpris, "players").as((players: Array<AstalMpris.Player>) =>
|
||||
children: bind(AstalMpris.get_default(), "players").as((players: Array<AstalMpris.Player>) =>
|
||||
players[0] ? [
|
||||
new Widget.Button({
|
||||
className: "link nf",
|
||||
@@ -71,21 +69,16 @@ export function Media(): Gtk.Widget {
|
||||
|
||||
const mediaWidget = new Widget.EventBox({
|
||||
className: "media-eventbox",
|
||||
visible: bind(mpris, "players").as((players: Array<AstalMpris.Player>) =>
|
||||
visible: bind(AstalMpris.get_default(), "players").as((players: Array<AstalMpris.Player>) =>
|
||||
players[0] && players[0].get_available()),
|
||||
onDestroy: (_) => {
|
||||
hoverConnectionId !== undefined &&
|
||||
_.disconnect(hoverConnectionId);
|
||||
|
||||
hoverLostConnectionId !== undefined &&
|
||||
_.disconnect(hoverLostConnectionId);
|
||||
},
|
||||
onDestroy: (_) => connections.map(id => _.disconnect(id)),
|
||||
onClick: () => Windows.toggle("center-window"),
|
||||
child: new Widget.Box({
|
||||
className: "media",
|
||||
children: [
|
||||
new Widget.Box({
|
||||
children: bind(mpris, "players").as((players: Array<AstalMpris.Player>) =>
|
||||
spacing: 4,
|
||||
children: bind(AstalMpris.get_default(), "players").as((players: Array<AstalMpris.Player>) =>
|
||||
players[0] ? [
|
||||
new Widget.Label({
|
||||
className: "icon nf",
|
||||
@@ -102,9 +95,10 @@ export function Media(): Gtk.Widget {
|
||||
} as Widget.LabelProps),
|
||||
Separator({
|
||||
orientation: Gtk.Orientation.HORIZONTAL,
|
||||
size: 2,
|
||||
cssColor: `rgb(180, 180, 180)`,
|
||||
alpha: 0.3
|
||||
size: 1,
|
||||
margin: 5,
|
||||
//cssColor: `rgb(180, 180, 180)`,
|
||||
alpha: .3
|
||||
} as SeparatorProps),
|
||||
new Widget.Label({
|
||||
className: "artist",
|
||||
@@ -122,15 +116,16 @@ export function Media(): Gtk.Widget {
|
||||
} as Widget.BoxProps)
|
||||
} as Widget.EventBoxProps);
|
||||
|
||||
hoverConnectionId = mediaWidget.connect("hover", () => {
|
||||
mediaControlsRevealer.set_reveal_child(true);
|
||||
mediaWidget.className = mediaWidget.className + " reveal";
|
||||
});
|
||||
|
||||
hoverLostConnectionId = mediaWidget.connect("hover-lost", (_) => {
|
||||
mediaControlsRevealer.set_reveal_child(false);
|
||||
_.className = mediaWidget.className.replaceAll(" reveal", "");
|
||||
});
|
||||
connections.push(
|
||||
mediaWidget.connect("hover", () => {
|
||||
mediaControlsRevealer.set_reveal_child(true);
|
||||
mediaWidget.className = mediaWidget.className + " reveal";
|
||||
}),
|
||||
mediaWidget.connect("hover-lost", (_) => {
|
||||
mediaControlsRevealer.set_reveal_child(false);
|
||||
_.className = mediaWidget.className.replaceAll(" reveal", "");
|
||||
})
|
||||
);
|
||||
|
||||
return mediaWidget;
|
||||
}
|
||||
|
||||
@@ -41,7 +41,8 @@ export function Workspaces(): Gtk.Widget {
|
||||
: ""
|
||||
} ${lastClient.title}` : "" }`)(),
|
||||
child: new Widget.Box({
|
||||
children: [
|
||||
visible: bind(workspace, "lastClient").as(Boolean),
|
||||
children: bind(workspace, "lastClient").as((lastClient) => [
|
||||
new Widget.Revealer({
|
||||
transitionDuration: 200,
|
||||
transitionType: Gtk.RevealerTransitionType.SLIDE_LEFT,
|
||||
@@ -55,17 +56,16 @@ export function Workspaces(): Gtk.Widget {
|
||||
} as Widget.RevealerProps),
|
||||
new Widget.Icon({
|
||||
className: "last-app-icon",
|
||||
visible: Variable.derive([
|
||||
bind(workspace, "lastClient"),
|
||||
bind(hyprland, "focusedWorkspace")
|
||||
], (lastClient, focusedWorkspace) => focusedWorkspace?.id === workspace.id ?
|
||||
false : Boolean(lastClient))(),
|
||||
icon: bind(workspace, "lastClient").as((lastClient) =>
|
||||
lastClient ?
|
||||
getAppIcon(lastClient.initialClass) || "image-missing"
|
||||
: "image-missing")
|
||||
} as Widget.IconProps),
|
||||
]
|
||||
visible: bind(hyprland, "focusedWorkspace").as(focusedWorkspace =>
|
||||
workspace.id === focusedWorkspace.id ?
|
||||
false
|
||||
: Boolean(lastClient)),
|
||||
icon: lastClient ?
|
||||
bind(lastClient, "class").as((clss) =>
|
||||
getAppIcon(clss) ?? "application-x-executable-symbolic")
|
||||
: undefined
|
||||
} as Widget.IconProps)
|
||||
])
|
||||
} as Widget.BoxProps),
|
||||
onClicked: () => workspace.focus()
|
||||
} as Widget.ButtonProps)
|
||||
|
||||
Reference in New Issue
Block a user