diff --git a/ags/style/_bar.scss b/ags/style/_bar.scss index d71f3f4..6802eec 100644 --- a/ags/style/_bar.scss +++ b/ags/style/_bar.scss @@ -51,18 +51,25 @@ .workspaces { @include mixins.reset-props; - padding: 2px 2px; + padding: 1px 1px; & button { + @include mixins.reset-props; + border-radius: 16px; transition: 80ms linear; - padding: 12px 12px; + min-width: 12px; + padding: 0 6px; background: colors.$bg-tertiary; margin: 1px 2px; &.focus { background: colors.$fg-primary; - padding: 12px 20px; + min-width: 31px; + } + + & icon { + font-size: 16px; } } } @@ -180,6 +187,21 @@ margin: 0 2px; } + & trough { + min-width: 65px; + min-height: 10px; + margin-right: 4px; + } + + & slider { + min-width: 10px; + min-height: 10px; + } + + & highlight { + min-height: 10px; + } + & .nf { margin: { right: 3px; diff --git a/ags/widget/bar/Workspaces.ts b/ags/widget/bar/Workspaces.ts index 75c013f..ce5b5dd 100644 --- a/ags/widget/bar/Workspaces.ts +++ b/ags/widget/bar/Workspaces.ts @@ -1,31 +1,42 @@ -import { bind } from "astal"; +import { bind, Variable } from "astal"; import { Gtk, Widget } from "astal/gtk3"; import AstalHyprland from "gi://AstalHyprland"; +import { getAppIcon } from "../../scripts/apps"; const hyprland = AstalHyprland.get_default(); export function Workspaces(): Gtk.Widget { - const workspacesEventBox = new Widget.EventBox({ + + return new Widget.EventBox({ onScroll: (_, event) => event.delta_y > 0 ? hyprland.dispatch("workspace", "e-1") : hyprland.dispatch("workspace", "e+1"), - child: new Widget.Box({ className: "workspaces", - vexpand: false, - valign: Gtk.Align.CENTER, children: bind(hyprland, "workspaces").as((workspaces) => { - const sortedWorkspaces = workspaces.sort((a: AstalHyprland.Workspace, b: AstalHyprland.Workspace) => a.get_id() - b.get_id()); + const sortedWorkspaces = workspaces.sort( + (a: AstalHyprland.Workspace, b: AstalHyprland.Workspace) => a.get_id() - b.get_id()); + return sortedWorkspaces.map((workspace: AstalHyprland.Workspace) => new Widget.Button({ - className: bind(hyprland, "focusedWorkspace").as((focusedWs: AstalHyprland.Workspace) => workspace === focusedWs ? "focus" : ""), + className: bind(hyprland, "focusedWorkspace").as( + (focusedWs: AstalHyprland.Workspace) => workspace.id === focusedWs.id ? "focus" : ""), visible: true, + child: 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), onClicked: () => workspace.focus() } as Widget.ButtonProps) ) }) } as Widget.BoxProps) } as Widget.EventBoxProps); - - - return workspacesEventBox; }