funman300
1646dfcd90
GTK 3 CSS (used by waybar) treats `transform` as a fatal parse error, so the rotation approach killed waybar entirely. Use a color shift from @tn-fg-muted to @tn-fg as the expanded-state feedback instead. Matches the existing style.css convention (battery/cpu/temperature states all use color shifts, not transforms). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
94 lines
3.6 KiB
Markdown
94 lines
3.6 KiB
Markdown
# Waybar Tray Drawer Design
|
|
|
|
**Date:** 2026-04-30
|
|
**Status:** Approved
|
|
|
|
## Summary
|
|
|
|
Add a Windows-style "show hidden icons" arrow to the waybar system tray. By default the tray icons are collapsed behind a single chevron glyph; clicking the chevron expands them inline to its right with a short slide animation. Clicking again collapses them back. No custom scripting — implemented entirely with waybar's built-in `group/drawer` module.
|
|
|
|
## Current Behaviour
|
|
|
|
The `tray` module sits at the rightmost end of `modules-right` and always shows every status-icon a running program emits. When several apps are running (Discord, Steam, mouse manager, syncthing, etc.) the tray takes up significant horizontal space.
|
|
|
|
## Target Behaviour
|
|
|
|
```
|
|
collapsed: ... battery [>]
|
|
expanded: ... battery [<] [icon][icon][icon]
|
|
```
|
|
|
|
- Default state on bar startup: collapsed (only the arrow visible).
|
|
- Click the arrow → tray icons appear to its right, ~200 ms slide.
|
|
- Click the arrow again → tray icons collapse.
|
|
- Tray icons keep their normal click/scroll behaviour while expanded.
|
|
- State is per-bar-session; no persistence across waybar restarts.
|
|
|
|
## Implementation
|
|
|
|
### `waybar/config.jsonc`
|
|
|
|
Replace `"tray"` in `modules-right` with `"group/tray-drawer"`. Add the group definition and the chevron module:
|
|
|
|
```jsonc
|
|
"modules-right": [
|
|
"cpu", "temperature", "custom/power-profile", "custom/fan-profile",
|
|
"pulseaudio", "network", "battery", "custom/mouse-battery",
|
|
"group/tray-drawer"
|
|
],
|
|
|
|
"group/tray-drawer": {
|
|
"orientation": "horizontal",
|
|
"drawer": {
|
|
"transition-duration": 200,
|
|
"children-class": "tray-drawer-child",
|
|
"transition-left-to-right": true,
|
|
"click-to-reveal": true
|
|
},
|
|
"modules": ["custom/tray-arrow", "tray"]
|
|
},
|
|
|
|
"custom/tray-arrow": {
|
|
"format": "",
|
|
"tooltip": false
|
|
}
|
|
```
|
|
|
|
The arrow is the first module in the group, so it stays visible when collapsed; `tray` is revealed/hidden by the drawer.
|
|
|
|
Glyph `` is `nf-fa-chevron_right` from Nerd Fonts. Pointing right when collapsed reads as "more stuff is hidden over here — click to reveal". The arrow does not rotate when expanded — GTK 3 CSS (which waybar uses) does not support the `transform` property and treats it as a fatal parse error. Instead, the chevron's color brightens from muted to full foreground as visual feedback that the drawer is open.
|
|
|
|
### `waybar/style.css`
|
|
|
|
Add a base style for the chevron and a brightened-color rule keyed off the drawer's expanded state:
|
|
|
|
```css
|
|
#custom-tray-arrow {
|
|
padding: 0 12px;
|
|
color: @tn-fg-muted;
|
|
transition: color 200ms ease;
|
|
}
|
|
|
|
#group-tray-drawer.expanded #custom-tray-arrow {
|
|
color: @tn-fg;
|
|
}
|
|
```
|
|
|
|
`@tn-fg-muted` matches the unfocused-workspace color elsewhere in the bar — the chevron reads as an inactive control, not a status icon. When the drawer is open, the arrow brightens to `@tn-fg` (full foreground) over 200 ms — same duration as the drawer's slide. This matches the existing `style.css` pattern of using color shifts (not transforms) to convey state, e.g. `battery.warning`, `cpu.critical`, `temperature.warm`.
|
|
|
|
### Compatibility
|
|
|
|
`click-to-reveal` was added in waybar 0.10. Installed version is 0.15.0 — supported.
|
|
|
|
## Files Touched
|
|
|
|
- `waybar/config.jsonc` — replace `tray` entry, add two module definitions
|
|
- `waybar/style.css` — add `#custom-tray-arrow` rules
|
|
|
|
## Out of Scope
|
|
|
|
- Persisting expanded/collapsed state across waybar restarts
|
|
- Per-icon hide/show (waybar's `tray` module is monolithic — all icons or none)
|
|
- Animating the surrounding modules; they shift left to make room as the drawer opens, which is unavoidable with waybar's drawer
|
|
- Extending the same pattern to other right-side modules
|