diff options
| -rw-r--r-- | scss/bar.scss | 25 | ||||
| -rw-r--r-- | src/config/defaults.ts | 1 | ||||
| -rw-r--r-- | src/config/types.ts | 1 | ||||
| -rw-r--r-- | src/modules/bar.tsx | 74 |
4 files changed, 71 insertions, 30 deletions
diff --git a/scss/bar.scss b/scss/bar.scss index a01e8ee..7a58b8a 100644 --- a/scss/bar.scss +++ b/scss/bar.scss @@ -70,12 +70,21 @@ &.labels-shown > button { color: color.change(scheme.$overlay1, $alpha: 1); + .icon { + font-size: lib.s(13); + color: color.change(scheme.$subtext0, $alpha: 1); + } + &.occupied { color: color.mix(scheme.$text, scheme.$mauve, 50%); } &.focused { color: color.change(scheme.$base, $alpha: 1); + + .icon { + color: color.change(scheme.$surface0, $alpha: 1); + } } } } @@ -163,6 +172,14 @@ padding-left: lib.s(20); padding-right: lib.s(20); } + + .icon { + margin-left: lib.s(5); + + &:nth-child(2) { + margin-left: lib.s(12); + } + } } } @@ -212,6 +229,14 @@ padding-top: lib.s(15); padding-bottom: lib.s(15); } + + .icon { + margin-top: lib.s(2); + + &:nth-child(2) { + margin-top: lib.s(3); + } + } } } diff --git a/src/config/defaults.ts b/src/config/defaults.ts index 7532d7f..f256265 100644 --- a/src/config/defaults.ts +++ b/src/config/defaults.ts @@ -49,6 +49,7 @@ export default { showLabels: false, labels: ["", "", "", "", ""], xalign: -1, + showWindows: false, }, dateTime: { format: "%d/%m/%y %R", diff --git a/src/config/types.ts b/src/config/types.ts index 0a30145..eea8738 100644 --- a/src/config/types.ts +++ b/src/config/types.ts @@ -37,6 +37,7 @@ export default { "bar.modules.workspaces.showLabels": BOOL, "bar.modules.workspaces.labels": ARR(STR), "bar.modules.workspaces.xalign": NUM, + "bar.modules.workspaces.showWindows": BOOL, "bar.modules.dateTime.format": STR, "bar.modules.dateTime.detailedFormat": STR, // Launcher diff --git a/src/modules/bar.tsx b/src/modules/bar.tsx index 97ce4d5..447b69d 100644 --- a/src/modules/bar.tsx +++ b/src/modules/bar.tsx @@ -204,47 +204,61 @@ const MediaPlaying = ({ monitor, ...props }: ModuleProps) => { }; const Workspace = ({ idx }: { idx: number }) => { - let wsId = hyprland.focusedWorkspace - ? Math.floor((hyprland.focusedWorkspace.id - 1) / config.modules.workspaces.shown.get()) * - config.modules.workspaces.shown.get() + - idx - : idx; + const wsId = Variable.derive([bind(hyprland, "focusedWorkspace"), config.modules.workspaces.shown], (f, s) => + f ? Math.floor((f.id - 1) / s) * s + idx : idx + ); + + const label = ( + <label + css={bind(config.modules.workspaces.xalign).as(a => `margin-left: ${a}px; margin-right: ${-a}px;`)} + label={bind(config.modules.workspaces.labels).as(l => l[idx - 1] ?? String(idx))} + /> + ); return ( <button halign={Gtk.Align.CENTER} valign={Gtk.Align.CENTER} - onClicked={() => hyprland.dispatch("workspace", String(wsId))} + onClicked={() => hyprland.dispatch("workspace", String(wsId.get()))} setup={self => { - const update = () => - self.toggleClassName( - "occupied", - hyprland.clients.some(c => c.workspace?.id === wsId) - ); - const updateWs = () => { - if (!hyprland.focusedWorkspace) return; - wsId = - Math.floor((hyprland.focusedWorkspace.id - 1) / config.modules.workspaces.shown.get()) * - config.modules.workspaces.shown.get() + - idx; - self.toggleClassName("focused", hyprland.focusedWorkspace.id === wsId); - update(); + const updateOccupied = () => { + const occupied = hyprland.clients.some(c => c.workspace?.id === wsId.get()); + self.toggleClassName("occupied", occupied); + }; + const updateFocused = () => { + self.toggleClassName("focused", hyprland.focusedWorkspace?.id === wsId.get()); + updateOccupied(); }; - self.hook(config.modules.workspaces.shown, updateWs); - self.hook(hyprland, "notify::focused-workspace", updateWs); - self.hook(hyprland, "client-added", update); - self.hook(hyprland, "client-moved", update); - self.hook(hyprland, "client-removed", update); - - self.toggleClassName("focused", hyprland.focusedWorkspace?.id === wsId); - update(); + self.hook(hyprland, "client-added", updateOccupied); + self.hook(hyprland, "client-moved", updateOccupied); + self.hook(hyprland, "client-removed", updateOccupied); + self.hook(hyprland, "notify::focused-workspace", updateFocused); + updateFocused(); }} + onDestroy={() => wsId.drop()} > - <label + <box visible={bind(config.modules.workspaces.showLabels)} - css={bind(config.modules.workspaces.xalign).as(a => `margin-left: ${a}px; margin-right: ${-a}px;`)} - label={bind(config.modules.workspaces.labels).as(l => l[idx - 1] ?? String(idx))} + vertical={bind(config.vertical)} + setup={self => { + const update = () => { + if (config.modules.workspaces.showWindows.get()) { + const clients = hyprland.clients.filter(c => c.workspace?.id === wsId.get()); + self.children = [ + label, + ...clients.map(c => ( + <label className="icon" label={bind(c, "class").as(getAppCategoryIcon)} /> + )), + ]; + } else self.children = [label]; + }; + self.hook(wsId, update); + self.hook(hyprland, "client-added", update); + self.hook(hyprland, "client-moved", update); + self.hook(hyprland, "client-removed", update); + update(); + }} /> </button> ); |