updated design
This commit is contained in:
@@ -18,6 +18,8 @@
|
||||
!brave-flags.conf
|
||||
!chromium-flags.conf
|
||||
!README.md
|
||||
!plans/
|
||||
!DESIGN-IS-2026-08-11/
|
||||
!rice.png
|
||||
!rice-2.png
|
||||
!rice-3.png
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
# Takemi shell design audit — scope
|
||||
|
||||
## Audited artifact
|
||||
|
||||
- Running Persona 5-inspired desktop shell shown in the two supplied 1920×1080 screenshots.
|
||||
- Quickshell implementation under `quickshell/`, including the top bar, right rail,
|
||||
pop-outs, tray menus, power overlay, notifications/OSD, and lock screen.
|
||||
- Shared design tokens and primitives in `quickshell/config/` and
|
||||
`quickshell/components/`.
|
||||
|
||||
## User and task
|
||||
|
||||
- Primary user: the workstation owner using the shell throughout the day.
|
||||
- Primary task: identify system state and reach common desktop controls quickly,
|
||||
without the theme obscuring application content.
|
||||
|
||||
## Constraints
|
||||
|
||||
- Preserve the Persona 5 / Tae Takemi identity.
|
||||
- Preserve the crimson, black, and white palette and screen-print character.
|
||||
- Stack remains Quickshell, Hyprland, and Fluxo.
|
||||
- The result must work at desktop scale, with keyboard and pointer input, and
|
||||
remain legible during long sessions.
|
||||
|
||||
## References
|
||||
|
||||
- Persona 5 interface language: asymmetric editorial composition, hard ink,
|
||||
decisive silhouettes, halftone texture, and rapid card-like motion.
|
||||
- Current implementation and supplied screenshots are the concrete baseline;
|
||||
fidelity to the game is subordinate to daily desktop usefulness.
|
||||
|
||||
## Out of scope
|
||||
|
||||
- Application-level themes outside the shell.
|
||||
- Replacing the wallpaper or character artwork.
|
||||
- Changing the desktop stack.
|
||||
@@ -0,0 +1,114 @@
|
||||
# Evidence
|
||||
|
||||
## 1. Innovative
|
||||
|
||||
- The shell applies one custom QML geometry and print system across panels,
|
||||
backdrops, motion, and textures (`quickshell/config/Theme.qml:118-153`,
|
||||
`quickshell/components/P5Panel.qml:7-56`).
|
||||
- This refreshes standard desktop bars/popovers, but the interaction model is
|
||||
still conventional bar + rail + popup + modal.
|
||||
|
||||
## 2. Useful
|
||||
|
||||
- The permanent bar exposes workspaces, active window, media, resources, and
|
||||
time in one slab (`quickshell/bar/Bar.qml:67-122`).
|
||||
- Power and lock are keyboard-operable; bar, rail, tray, and most pop-out
|
||||
actions remain pointer-only (`quickshell/overlays/PowerMenu.qml:242-261`,
|
||||
`quickshell/lock/LockFace.qml:290-311`,
|
||||
`quickshell/bar/RailIcon.qml:104-124`).
|
||||
- The primary surfaces contain at least 41 interactive targets; the live total
|
||||
grows with workspaces, devices, streams, notifications, and tray entries.
|
||||
|
||||
## 3. Aesthetic
|
||||
|
||||
- A clear system exists: spacing `[6,12,20,32]`, type
|
||||
`[9,11,12,15,20,34,92]`, 12 literal palette colors, one nominal 14° angle,
|
||||
and shared 10px cuts (`quickshell/config/Theme.qml:19-49,92-148`).
|
||||
- Runtime type exceptions include 8, 30, 42, and 156.4px; local geometry also
|
||||
introduces several non-token cuts and leans.
|
||||
- White on crimson is 3.68:1 and fails normal-text AA where selected destructive
|
||||
actions or unread badges use that pairing
|
||||
(`quickshell/components/P5Button.qml:32-73`,
|
||||
`quickshell/bar/NotifButton.qml:38-58`).
|
||||
- Screenshot #1: permanent chrome is visually continuous and disciplined, but
|
||||
competes with an already high-contrast Persona wallpaper/frame.
|
||||
- Screenshot #2: the left headline/right action-stack composition is strong;
|
||||
the repeated stripe field and still-legible desktop behind it dilute focus.
|
||||
|
||||
## 4. Understandable
|
||||
|
||||
- The power screen labels all actions and prints its keyboard map
|
||||
(`quickshell/overlays/PowerMenu.qml:31-38,216-261`).
|
||||
- Rail icons expose different left/right/middle/scroll behaviors without visible
|
||||
instruction (`quickshell/bar/Rail.qml:76-132`).
|
||||
- Several state labels behave as inverse actions: “Wi-Fi On,” Bluetooth “On,”
|
||||
“Scanning,” and “Silenced” toggle those states off.
|
||||
- “WHO GOES THERE,” “WRONG,” “HELD,” “PROCS,” “VRAM,” and unlabeled load values
|
||||
favor voice or jargon over immediate comprehension.
|
||||
|
||||
## 5. Unobtrusive
|
||||
|
||||
- Normal chrome consumes only a 40px top bar and 48px right rail
|
||||
(`quickshell/config/Theme.qml:109-116`).
|
||||
- The full-screen modes add stripes, a wedge, oversized split text, attribution,
|
||||
six slabs, and a hint simultaneously
|
||||
(`quickshell/overlays/PowerMenu.qml:50-228`).
|
||||
- Twelve action identities are repeated between permanent chrome and detail
|
||||
panels; repetition improves reach but adds competing affordances.
|
||||
|
||||
## 6. Honest
|
||||
|
||||
- No marketing inflation or dark patterns were found. Power labels map directly
|
||||
to their system action (`quickshell/overlays/PowerMenu.qml:31-38,230-239`).
|
||||
- “n HELD” counts all history rather than suppressed items
|
||||
(`quickshell/popouts/NotifPopout.qml:27`,
|
||||
`quickshell/services/Notifs.qml:36-44`).
|
||||
- Muted OSDs display 0% even when stored volume remains nonzero
|
||||
(`quickshell/overlays/Osd.qml:51-64,172-185`).
|
||||
- A visually disabled slider can still emit changes
|
||||
(`quickshell/components/P5Slider.qml:9-12,48-84`).
|
||||
|
||||
## 7. Long-lasting
|
||||
|
||||
- The system is based on reusable primitives rather than per-screen decoration.
|
||||
- Literal `P5` branding, the quote attribution, and the esports-like continuous
|
||||
frame tie the result closely to one entertainment reference and visual era
|
||||
(`quickshell/bar/Sigil.qml:31`,
|
||||
`quickshell/overlays/PowerMenu.qml:88-118`).
|
||||
|
||||
## 8. Thorough
|
||||
|
||||
- Empty, loading, failure, focus, and disabled states exist.
|
||||
- A rendered success state is absent; generic buttons lack a disabled state;
|
||||
focus treatment is concentrated in power and lock; explicit accessible names
|
||||
and roles total zero (`quickshell/components/P5Button.qml:6-107`).
|
||||
- The lock’s disabled state is clear, but `P5Slider` can look disabled while
|
||||
remaining interactive.
|
||||
|
||||
## 9. Environmentally friendly
|
||||
|
||||
- The shell has 0 JavaScript bytes, about 259KB of QML, 1.4KB of local texture
|
||||
assets, no declared HTTP request, and a measured load proxy below two seconds.
|
||||
- Seven Fluxo reads recur in polling batches; playing media creates 3–6 idle
|
||||
animation loops (`quickshell/services/Sys.qml:78-102`,
|
||||
`quickshell/bar/MediaPill.qml:125-153`).
|
||||
- No reduced-motion branch exists (`quickshell/config/Theme.qml:139-148`).
|
||||
|
||||
## 10. As little design as possible
|
||||
|
||||
- The one-slab bar avoids a row of redundant cards
|
||||
(`quickshell/bar/Bar.qml:8-14,40-63`).
|
||||
- The audited tree reaches seven declarative levels, contains twelve repeated
|
||||
action identities, and includes removable atmospheric elements in modal and
|
||||
lock compositions.
|
||||
- The permanent surface, transient surface, and cinematic surface currently
|
||||
share too much of the same visual intensity instead of forming a hierarchy.
|
||||
|
||||
## Known gaps
|
||||
|
||||
- Dynamic application strings, device counts, and menu depth cannot be fixed
|
||||
from static source.
|
||||
- Exact compositor frame time, GPU cost, and live accessibility-tree output
|
||||
were not available.
|
||||
- Screenshot evidence covers the normal desktop and power overlay; lock-screen
|
||||
judgments also use its implementation source.
|
||||
@@ -0,0 +1,43 @@
|
||||
# Rams scorecard
|
||||
|
||||
1. **Good design is innovative — 2/3**
|
||||
Evidence: one custom print/geometry system refreshes conventional shell surfaces (`01-evidence.md#1-innovative`).
|
||||
Justification: the expression is distinctive, but it does not introduce a new desktop interaction pattern.
|
||||
|
||||
2. **Good design makes a product useful — 2/3**
|
||||
Evidence: core state and actions are direct, while most shell controls require a pointer (`01-evidence.md#2-useful`).
|
||||
Justification: the primary tasks work quickly, but keyboard and discoverability gaps add friction.
|
||||
|
||||
3. **Good design is aesthetic — 2/3**
|
||||
Evidence: the token system is strong, with several type/geometry exceptions and a 3.68:1 text pairing (`01-evidence.md#3-aesthetic`).
|
||||
Justification: the visual system is unmistakable, but contrast and intensity inconsistencies prevent a fully resolved score.
|
||||
|
||||
4. **Good design makes a product understandable — 1/3**
|
||||
Evidence: multiple rail gestures are undisclosed and several state labels read like actions (`01-evidence.md#4-understandable`).
|
||||
Justification: more than three controls require prior knowledge or experimentation.
|
||||
|
||||
5. **Good design is unobtrusive — 1/3**
|
||||
Evidence: compact permanent chrome expands into visually competing full-screen decoration (`01-evidence.md#5-unobtrusive`).
|
||||
Justification: the theme sometimes becomes the figure when the user’s task should remain the figure.
|
||||
|
||||
6. **Good design is honest — 2/3**
|
||||
Evidence: no dark patterns exist, but held-count, muted-volume, and disabled-slider presentation diverge from behavior (`01-evidence.md#6-honest`).
|
||||
Justification: the mismatches are minor rather than deceptive, but prevent a one-to-one mapping everywhere.
|
||||
|
||||
7. **Good design is long-lasting — 2/3**
|
||||
Evidence: reusable primitives coexist with literal franchise and gaming-HUD markers (`01-evidence.md#7-long-lasting`).
|
||||
Justification: the craft will last, while the most literal references may date the surface.
|
||||
|
||||
8. **Good design is thorough — 1/3**
|
||||
Evidence: success, generic disabled, broad focus, and accessibility metadata are missing or rough (`01-evidence.md#8-thorough`).
|
||||
Justification: three or more important state families remain incomplete.
|
||||
|
||||
9. **Good design is environmentally friendly — 1/3**
|
||||
Evidence: source weight is small, but recurring polling and idle motion have no reduced-motion gate (`01-evidence.md#9-environmentally-friendly`).
|
||||
Justification: the runtime is lean yet motion is always on when its conditions are met.
|
||||
|
||||
10. **Good design is as little design as possible — 1/3**
|
||||
Evidence: restrained single slabs coexist with repeated affordances and multi-layer modal atmosphere (`01-evidence.md#10-as-little-design-as-possible`).
|
||||
Justification: at least three decorative or duplicated elements could be removed without breaking a task.
|
||||
|
||||
**Total: 15/30**
|
||||
@@ -0,0 +1,30 @@
|
||||
# Verdict — REDESIGN
|
||||
|
||||
The strict Rams verdict is **REDESIGN (15/30)**: preserve the excellent brand
|
||||
tokens and working shell primitives, but redesign the hierarchy so permanent,
|
||||
transient, and cinematic surfaces no longer compete at the same intensity.
|
||||
|
||||
## Highest-leverage moves
|
||||
|
||||
1. **Principles #4 and #8 — make behavior legible:** give every icon one primary
|
||||
click action, add concise Persona-styled hover labels, expose secondary actions
|
||||
inside its pop-out, and add real focus/disabled/accessibility states. Evidence:
|
||||
`01-evidence.md#4-understandable` and `#8-thorough`.
|
||||
2. **Principles #5 and #10 — introduce three intensity tiers:** quiet permanent
|
||||
chrome, expressive transient panels, theatrical full-screen scenes; reserve
|
||||
stripes, large split type, and strong halftone for the latter two. Evidence:
|
||||
`01-evidence.md#5-unobtrusive` and `#10-as-little-design-as-possible`.
|
||||
3. **Principles #3 and #6 — assign semantics by treatment, not red alone:** use
|
||||
white fill for selection, a red rule/slash for active state, solid red only
|
||||
for destructive/error, and pulse only for urgency; fix white-on-red small text.
|
||||
Evidence: `01-evidence.md#3-aesthetic` and `#6-honest`.
|
||||
4. **Principles #3 and #7 — move the chaos to macro-composition:** keep clean
|
||||
module geometry, but vary panel silhouette, title placement, and scale by
|
||||
context instead of repeating the same framed HUD grammar everywhere. Evidence:
|
||||
`01-evidence.md#3-aesthetic` and `#7-long-lasting`.
|
||||
5. **Principles #2 and #9 — add a calm mode:** stop idle equalizer/pulse/marquee
|
||||
motion when reduced motion is requested and reduce polling when a detail panel
|
||||
is closed. Evidence: `01-evidence.md#2-useful` and `#9-environmentally-friendly`.
|
||||
|
||||
This is a hierarchy redesign, not an instruction to discard the palette,
|
||||
textures, panel engine, services, or current functionality.
|
||||
@@ -0,0 +1,41 @@
|
||||
# Planning handoff
|
||||
|
||||
```text
|
||||
/make-plan Redesign the Takemi Persona 5 desktop shell. Current design failed audit at 15/30 with critical gaps in principles #4 understandable, #5 unobtrusive, #8 thorough, #9 environmentally friendly, and #10 as little design as possible.
|
||||
|
||||
Verdict paragraph:
|
||||
> The strict Rams verdict is REDESIGN (15/30): preserve the excellent brand tokens and working shell primitives, but redesign the hierarchy so permanent, transient, and cinematic surfaces no longer compete at the same intensity.
|
||||
|
||||
Why redesign and not refine: the total is below the 20-point refine threshold because the same high-intensity visual and interaction grammar spans permanent chrome, transient controls, and full-screen scenes.
|
||||
|
||||
Preserve from current design:
|
||||
- Crimson/black/white palette, type scale foundation, and motion timings in quickshell/config/Theme.qml:19-148.
|
||||
- Single-slab bar/rail architecture in quickshell/bar/Bar.qml:8-63 and quickshell/bar/Rail.qml:9-64.
|
||||
- Reusable P5Panel geometry/texture engine in quickshell/components/P5Panel.qml:7-248.
|
||||
- Existing services and feature coverage; this is an information/design hierarchy change, not a functionality cut.
|
||||
|
||||
Discard:
|
||||
- One-intensity-fits-all use of stripes, halftone, split type, slashes, and repeated framed geometry. Evidence: DESIGN-IS-2026-08-11/01-evidence.md#5-unobtrusive. Caused failure on principles #5 and #10.
|
||||
- Undisclosed multi-button/multi-gesture behavior on icon-only permanent controls. Evidence: DESIGN-IS-2026-08-11/01-evidence.md#4-understandable. Caused failure on principles #4 and #8.
|
||||
|
||||
Top moves:
|
||||
1. Principles #4 and #8 — make behavior legible: give every icon one primary click action, add concise Persona-styled hover labels, expose secondary actions inside its pop-out, and add real focus/disabled/accessibility states. Evidence: DESIGN-IS-2026-08-11/01-evidence.md#4-understandable and #8-thorough.
|
||||
2. Principles #5 and #10 — introduce three intensity tiers: quiet permanent chrome, expressive transient panels, theatrical full-screen scenes; reserve stripes, large split type, and strong halftone for the latter two. Evidence: DESIGN-IS-2026-08-11/01-evidence.md#5-unobtrusive and #10-as-little-design-as-possible.
|
||||
3. Principles #3 and #6 — assign semantics by treatment, not red alone: use white fill for selection, a red rule/slash for active state, solid red only for destructive/error, and pulse only for urgency; fix white-on-red small text. Evidence: DESIGN-IS-2026-08-11/01-evidence.md#3-aesthetic and #6-honest.
|
||||
4. Principles #3 and #7 — move the chaos to macro-composition: keep clean module geometry, but vary panel silhouette, title placement, and scale by context instead of repeating the same framed HUD grammar everywhere. Evidence: DESIGN-IS-2026-08-11/01-evidence.md#3-aesthetic and #7-long-lasting.
|
||||
5. Principles #2 and #9 — add a calm mode: stop idle equalizer/pulse/marquee motion when reduced motion is requested and reduce polling when a detail panel is closed. Evidence: DESIGN-IS-2026-08-11/01-evidence.md#2-useful and #9-environmentally-friendly.
|
||||
|
||||
Redesign priorities:
|
||||
1. Principle #4 — every visible control communicates its primary action without memorized mouse-button lore.
|
||||
2. Principles #5/#10 — visual intensity increases deliberately from chrome to pop-out to modal.
|
||||
3. Principles #3/#6 — color, fill, outline, pattern, and motion each have one stable semantic job.
|
||||
|
||||
Deliverables:
|
||||
- New information architecture, not derived mechanically from the old layout.
|
||||
- New labeled primary flow compared side-by-side with the current shell.
|
||||
- Empty/loading/error/success/focus/disabled state matrix.
|
||||
- Migration path that preserves existing service behavior and keybinds.
|
||||
- Cutover criteria based on discoverability, contrast, reduced motion, and visual hierarchy.
|
||||
|
||||
Guard against porting the old structure under new styling, running both hierarchies indefinitely, following generic gaming-HUD trends, or discarding the preserved brand tokens and primitives.
|
||||
```
|
||||
+1
-1
@@ -1 +1 @@
|
||||
monitor=eDP-1, disable
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ bindr = ALT, z, exec, ~/.config/hypr/scripts/replay-ctrl.sh toggle
|
||||
bindr = ALT SHIFT, c, exec, ~/.config/hypr/scripts/droidcam-ctrl.sh toggle
|
||||
|
||||
# general binds
|
||||
bind = $mainMod, M, exec, pdfs-prompt
|
||||
bind = $mainMod, M, exec, pdfs-prompt --dmenu --menu 'fuzzel --dmenu --width 60'
|
||||
bind = $mainMod, B, exec, fluxo bt menu
|
||||
bind = $mainMod, RETURN, exec, $terminal
|
||||
bind = $mainMod SHIFT, Q, killactive,
|
||||
|
||||
@@ -0,0 +1,503 @@
|
||||
# Takemi design hierarchy redesign
|
||||
|
||||
## Outcome
|
||||
|
||||
Turn the existing Persona 5 shell into a three-level visual system:
|
||||
|
||||
1. **Chrome** — quiet, glanceable, and subordinate to applications.
|
||||
2. **Transient** — expressive pop-outs with distinct compositions and obvious controls.
|
||||
3. **Cinematic** — theatrical power and lock scenes with focused hierarchy.
|
||||
|
||||
Preserve the crimson/black/white palette, services, keybinds, one-slab bar/rail,
|
||||
`P5Panel`, session-lock security, and current functional coverage. This plan changes
|
||||
visual hierarchy and interaction clarity, not the desktop stack.
|
||||
|
||||
## Non-goals
|
||||
|
||||
- Do not replace Quickshell, Hyprland, Fluxo, PAM, or the service layer.
|
||||
- Do not add new accent hues or generic glass/blur cards.
|
||||
- Do not reproduce Persona 5 screens literally; keep this a usable desktop shell.
|
||||
- Do not build a second “control center” that duplicates every existing pop-out.
|
||||
- Do not rewrite tray-menu recursion or the popup coordinator unless verification
|
||||
exposes a concrete defect.
|
||||
|
||||
## Definition of done
|
||||
|
||||
- Permanent chrome remains readable but no longer competes with application content.
|
||||
- Each primary rail icon has one obvious click action and a concise hover label.
|
||||
- Selected, active, destructive, error, and urgent states are distinguishable by
|
||||
treatment as well as color.
|
||||
- All small text meets WCAG AA; black-on-crimson replaces white-on-crimson where needed.
|
||||
- Pinned pop-outs and modal controls are keyboard reachable and visibly focused.
|
||||
- Power actions that end the session require a deliberate confirmation step.
|
||||
- Lock has idle, editing, busy, failure, and visible success compositions.
|
||||
- Reduced motion survives process restarts and stops all nonessential loops.
|
||||
- `qmllint`, live reload, interaction checks, and 1920×1080 plus 1366×768 visual
|
||||
captures pass without new warnings.
|
||||
|
||||
---
|
||||
|
||||
## Phase 0 — API and pattern lock
|
||||
|
||||
### Allowed APIs
|
||||
|
||||
- **Quickshell 0.3.0 `PopupWindow`:** `visible`, `anchor`, `grabFocus`, `screen`.
|
||||
Configure placement through `anchor.item/window`, `edges`, `gravity`, `margins`,
|
||||
`adjustment`; call `anchor.updateAnchor()` when a visible trigger moves.
|
||||
[Official PopupWindow docs](https://quickshell.org/docs/v0.3.0/types/Quickshell/PopupWindow/)
|
||||
and [PopupAnchor docs](https://quickshell.org/docs/v0.3.0/types/Quickshell/PopupAnchor/).
|
||||
- **Popup bounds:** combine `PopupAdjustment.Flip | Slide | Resize` where content
|
||||
can genuinely resize. Use `QsWindow.mask: Region { item: ... }` for transparent
|
||||
overshoot bleed only after testing transformed entry animation.
|
||||
[PopupAdjustment](https://quickshell.org/docs/v0.3.0/types/Quickshell/PopupAdjustment/),
|
||||
[Region](https://quickshell.org/docs/v0.3.0/types/Quickshell/Region/).
|
||||
- **Pinned dismissal:** current `HyprlandFocusGrab.active/windows/onCleared` is valid
|
||||
only after a visible window exists (`components/Popout.qml:83-97`). Do not combine
|
||||
it casually with `PopupWindow.grabFocus`; choose one owner per opening mode.
|
||||
[HyprlandFocusGrab](https://quickshell.org/docs/v0.3.0/types/Quickshell.Hyprland/HyprlandFocusGrab/).
|
||||
- **Durable preferences:** `FileView` + `JsonAdapter`, using
|
||||
`Quickshell.statePath("design-preferences.json")`, `watchChanges`, `reload()`, and
|
||||
`writeAdapter()`. `PersistentProperties` survives reload only, not restart.
|
||||
[FileView](https://quickshell.org/docs/v0.3.0/types/Quickshell.Io/FileView/),
|
||||
[JsonAdapter](https://quickshell.org/docs/v0.3.0/types/Quickshell.Io/JsonAdapter/).
|
||||
- **Accessibility:** `Accessible.role/name/description/focusable/focused/pressed`,
|
||||
`Accessible.onPressAction`, `onIncreaseAction`, and `onDecreaseAction`; decorative
|
||||
duplicates use `Accessible.ignored: true`.
|
||||
[Qt Accessible](https://doc.qt.io/qt-6/qml-qtquick-accessible.html).
|
||||
- **Focus:** `FocusScope`, `focusPolicy: Qt.StrongFocus`, `activeFocusOnTab`,
|
||||
`KeyNavigation`, `Keys`, and `forceActiveFocus(Qt.PopupFocusReason)`.
|
||||
[Qt focus model](https://doc.qt.io/qt-6/qtquick-input-focus.html).
|
||||
- **Disabled controls:** disable the root `Item`; this suppresses pointer and keyboard
|
||||
input and propagates to children. Explicitly bind `HoverHandler.enabled` when a
|
||||
disabled control must not react visually.
|
||||
[Qt Item](https://doc.qt.io/qt-6/qml-qtquick-item.html).
|
||||
- **System contrast:**
|
||||
`Application.styleHints.accessibility.contrastPreference === Qt.HighContrast`.
|
||||
Qt 6.11 has no documented reduced-motion preference, so motion policy is owned by
|
||||
`Preferences`.
|
||||
- **Secure lock:** retain `WlSessionLock`/`WlSessionLockSurface` in
|
||||
`lock/Lock.qml:12-28`; `Overlay + Exclusive` is not a secure replacement.
|
||||
[WlSessionLock](https://quickshell.org/docs/v0.3.0/types/Quickshell.Wayland/WlSessionLock/).
|
||||
|
||||
### Repository patterns to copy
|
||||
|
||||
- Copy singleton structure from `config/Theme.qml:1-16` and `services/Actions.qml:1-10`.
|
||||
- Copy popup show/hide ownership from `components/Popout.qml:58-116,150-190`.
|
||||
- Copy keyboard roving selection from `overlays/PowerMenu.qml:242-261`.
|
||||
- Copy development-safe lock preview boundary from `lock/Lock.qml:7-27` and
|
||||
`lockpreview.qml`; never style by repeatedly locking the real session.
|
||||
- Copy one-slab chrome composition from `bar/Bar.qml:40-63` and `bar/Rail.qml:43-64`.
|
||||
|
||||
### Verification
|
||||
|
||||
- Record `qs --version` and Qt version in the implementation PR: expected Quickshell
|
||||
0.3.0 and Qt 6.11.1.
|
||||
- Run `qmllint` on each copied API in a minimal changed component before broad rollout.
|
||||
- Use `qs ipc show` to confirm existing IPC surface before adding typed functions.
|
||||
|
||||
### Guards
|
||||
|
||||
- No deprecated `PopupWindow.parentWindow`, `relativeX`, or `relativeY`.
|
||||
- No direct `QsWindow.width/height`; use implicit sizes.
|
||||
- No `WlrKeyboardFocus.Exclusive` as a lock substitute.
|
||||
- No stock `QsMenuAnchor` or default Qt tooltip visuals inside the custom theme.
|
||||
- No claimed system reduced-motion detection; it does not exist in the documented API.
|
||||
|
||||
---
|
||||
|
||||
## Phase 1 — Establish the semantic design foundation
|
||||
|
||||
### 1.1 Durable preferences
|
||||
|
||||
Create `quickshell/config/Preferences.qml` using the Phase 0 `FileView`/`JsonAdapter`
|
||||
pattern. Persist:
|
||||
|
||||
- `reducedMotion: false`
|
||||
- `tooltips: true`
|
||||
- `highIntensityChrome: false` only as a migration escape hatch; default remains calm
|
||||
|
||||
Expose typed setters through the existing `IpcHandler` in
|
||||
`services/Actions.qml:60-68`, such as `setReducedMotion(enabled: bool): void`. Do not
|
||||
build a settings UI in this phase.
|
||||
|
||||
### 1.2 Three explicit surface presets
|
||||
|
||||
- Add `components/ChromeSurface.qml`: a thin `P5Panel` preset with opaque flat fill,
|
||||
one keyline, no halftone, no drop, and an active slash only when requested.
|
||||
- Refine `popouts/PopoutSurface.qml:7-23` as the transient preset: halftone becomes
|
||||
opt-in by composition rather than present on every panel; retain the hard offset
|
||||
and stronger border.
|
||||
- Keep `components/P5Backdrop.qml` cinematic-only. Bar, rail, tooltips, cards, and OSD
|
||||
must not instantiate it.
|
||||
|
||||
Do not add a generic numeric “intensity” prop to `P5Panel`; explicit presets make
|
||||
the hierarchy visible in code and prevent arbitrary intermediate tiers.
|
||||
|
||||
### 1.3 Semantic treatments
|
||||
|
||||
Document and encode in `config/Theme.qml`:
|
||||
|
||||
| State | Fill | Mark | Text | Motion |
|
||||
|---|---|---|---|---|
|
||||
| Rest | surface | neutral keyline | white | none |
|
||||
| Hover | surface | short red wipe | white | one short lunge |
|
||||
| Focus/selected | white | black keyline | black | snap once |
|
||||
| Active | surface | persistent red slash | white | none |
|
||||
| Destructive/error | solid red | black keyline | black | shake only on error |
|
||||
| Urgent | surface | red pulse mark | white | bounded pulse |
|
||||
| Disabled | surface | muted outline | muted | none |
|
||||
|
||||
Replace small white-on-crimson labels with black-on-crimson; measured contrast improves
|
||||
from 3.68:1 to 5.70:1. Do not add a new status color.
|
||||
|
||||
### 1.4 Base-control contract
|
||||
|
||||
- Convert `components/P5Button.qml` to a `FocusScope` or focusable root with one
|
||||
activation path shared by `TapHandler`, Enter, Space, and
|
||||
`Accessible.onPressAction`. Add `description`, visible focus state, and a real
|
||||
disabled state.
|
||||
- Replace `P5Slider.enabledControl` with root `enabled` and update its call sites.
|
||||
Gate tap, drag, hover, accessible increase/decrease, and left/right keys through
|
||||
the same enabled root.
|
||||
- Add semantic names and roles to `RailIcon`, `StatusIcon`, notification actions,
|
||||
media transport, calendar navigation, and tray-menu rows. Mark split-text ghosts,
|
||||
masks, texture layers, and duplicate glyphs ignored.
|
||||
|
||||
### Verification
|
||||
|
||||
- Focus every base control with Tab and confirm a visible non-color-only state.
|
||||
- Trigger each through pointer, Enter/Space, and its accessible action; assert one
|
||||
signal per activation.
|
||||
- Disable each control and assert no `clicked`/`moved` signal and no hover animation.
|
||||
- Recompute all foreground/background contrast pairs; normal text must be ≥4.5:1.
|
||||
- Restart Quickshell and confirm preferences persist.
|
||||
|
||||
### Guards
|
||||
|
||||
- Do not treat `Accessible` metadata as keyboard support; implement both.
|
||||
- Do not attach semantics to every decorative child.
|
||||
- Do not use `MouseArea.enabled` as the component-wide disabled gate.
|
||||
- Do not spread raw state colors through callers; state treatment belongs in base controls.
|
||||
|
||||
---
|
||||
|
||||
## Phase 2 — Quiet and clarify permanent chrome
|
||||
|
||||
### 2.1 Bar
|
||||
|
||||
Update `bar/Bar.qml` and `bar/BarPill.qml` to use `ChromeSurface` and remove all
|
||||
always-on texture. Keep the single slab and hairline dividers.
|
||||
|
||||
- `bar/Clock.qml`: remove permanent seconds; reveal them only inside Calendar.
|
||||
- `bar/Resources.qml`: render tiny `CPU`, `MEM`, and `GPU` labels beside values so
|
||||
`2.6G` is not contextless; remove the currently dead `Metric.label` path only after
|
||||
its visible replacement exists.
|
||||
- `bar/MediaPill.qml`: keep title/artist but replace the three continuously animated
|
||||
equalizer bars with one static play-state mark in normal mode. Allow the loop only
|
||||
when high-intensity chrome is explicitly enabled and reduced motion is off.
|
||||
- Preserve active-window elision and current collision calculation in
|
||||
`bar/Bar.qml:90-96`.
|
||||
|
||||
### 2.2 Rail interaction grammar
|
||||
|
||||
Make left click mean **open/pin details** for network, Bluetooth, audio, battery,
|
||||
notifications, and power. Remove undisclosed right/middle-click state changes from
|
||||
`bar/Rail.qml:76-132,151-171`; move those actions into their corresponding pop-outs.
|
||||
|
||||
Retain scrolling only for volume, microphone, and brightness because it directly
|
||||
maps to a continuous readout. Mention that gesture in the tooltip.
|
||||
|
||||
### 2.3 Persona tooltip
|
||||
|
||||
Add `components/P5Tooltip.qml` as a small anchored `PopupWindow`, not a stock Qt
|
||||
tooltip. Copy anchor/delay/hide behavior from `components/Popout.qml`, but use:
|
||||
|
||||
- calm `ChromeSurface`
|
||||
- 350–450ms delay
|
||||
- one-line name + current state
|
||||
- optional second micro-line such as `SCROLL TO ADJUST`
|
||||
- no focus grab, no halftone, no scale loop
|
||||
- `PopupAdjustment.Flip | Slide`
|
||||
|
||||
Add `label` and `hint` to `RailIcon`; tooltips honor `Preferences.tooltips` and never
|
||||
become the only source of an accessible name.
|
||||
|
||||
### 2.4 Pinned keyboard opening
|
||||
|
||||
Add explicit `openHover()` and `openPinned()` paths to `components/Popout.qml`.
|
||||
`openPinned()` must set its focus mode before mapping; if a hover popup is already
|
||||
visible, close and remap rather than assuming a live `grabFocus` change works. Start
|
||||
with Audio as the vertical slice. Choose either `PopupWindow.grabFocus` or the current
|
||||
`HyprlandFocusGrab` for pinned dismissal after runtime comparison; never leave both
|
||||
owning the same close event.
|
||||
|
||||
### Verification
|
||||
|
||||
- Screenshot clean desktop against both a quiet and high-contrast wallpaper.
|
||||
- First-time test: identify every rail icon and predict left click from tooltip.
|
||||
- Verify no secondary pointer action remains unless it is printed in the tooltip.
|
||||
- Open Audio by hover and click: hover must remain passive; pinned mode must accept
|
||||
keyboard focus, Esc-close, and outside-click close exactly once.
|
||||
- Move/rescale the rail while a popup is open and call `anchor.updateAnchor()` from
|
||||
the actual geometry-change path if it drifts.
|
||||
|
||||
### Guards
|
||||
|
||||
- Do not reintroduce separate floating cards into bar or rail.
|
||||
- Do not increase bar/rail footprint.
|
||||
- Do not put stripes, halftone, or large display text in permanent chrome.
|
||||
- Do not make a tooltip interactive.
|
||||
|
||||
---
|
||||
|
||||
## Phase 3 — Give transient surfaces distinct macro-compositions
|
||||
|
||||
Retain shared popup lifecycle, width discipline, coordinator, header baseline, and
|
||||
body controls. Redesign one family at a time; capture and approve each family before
|
||||
moving on so a bad motif is not copied eight times.
|
||||
|
||||
### 3.1 Control pop-outs
|
||||
|
||||
- **Audio (`AudioPopout.qml`)** — make current volume the headline number; output and
|
||||
microphone form two clear bands; applications become a restrained mixer list.
|
||||
Put Mute and `Open audio mixer` inside the panel.
|
||||
- **Network (`NetPopout.qml`)** — dossier composition: current connection/IP at top,
|
||||
download/upload fully named, network list as clipped paper rows. Use action labels
|
||||
`Turn Wi-Fi on/off` and `Network settings`.
|
||||
- **Bluetooth (`BtPopout.qml`)** — share list-row mechanics with Network but not its
|
||||
exact silhouette. Use action copy `Turn on/off`, `Start/stop scanning`; pair/connect
|
||||
status must not rely on color alone.
|
||||
- **Battery (`BatteryPopout.qml`)** — oversized percentage crossing one edge, with
|
||||
`Plugged in`/`On battery`, remaining time, draw, and health ordered underneath.
|
||||
Keep Suspend as the one explicit action.
|
||||
|
||||
### 3.2 Information pop-outs
|
||||
|
||||
- **Media (`MediaPopout.qml`)** — let album art define one side of the silhouette;
|
||||
keep metadata in a solid legibility zone; label transport actions accessibly.
|
||||
- **Calendar (`CalendarPopout.qml`)** — large selected day/month as the composition,
|
||||
grid subordinate; move seconds here from the permanent bar; label previous/next.
|
||||
- **Notifications (`NotifPopout.qml`, `NotifCard.qml`)** — overlapping-paper rhythm
|
||||
only at the list level, not on every inner action. Rename `n HELD` to `n IN HISTORY`;
|
||||
make DND copy an action (`Silence notifications` / `Resume notifications`).
|
||||
- **System (`SysPopout.qml`)** — treat it as a diagnostic poster: four primary metrics
|
||||
first, hardware detail second. Expand `PROCS`, `MEM`, `VRAM`, `Root`, and label load
|
||||
averages `1 / 5 / 15 min`.
|
||||
|
||||
### 3.3 Shared transient rules
|
||||
|
||||
- `PopoutHeader` supplies alignment and focus traversal, not the full silhouette.
|
||||
- Only one dominant numeral/image/headline per panel.
|
||||
- Maximum one halftone region and one red slash per panel.
|
||||
- Lists use consistent 32–40px targets and explicit selected/focused/disabled states.
|
||||
- Empty and loading layouts preserve the panel silhouette instead of collapsing.
|
||||
- Fix muted OSD honesty: show stored percentage beside `MUTED`, or omit percentage;
|
||||
never display a fabricated 0%.
|
||||
|
||||
### Verification
|
||||
|
||||
- Capture all eight pop-outs at rest plus empty/loading/error/disabled states where applicable.
|
||||
- Test with longest realistic SSID, device, track, app, and notification strings.
|
||||
- Verify list focus order, Enter/Space activation, Esc close, and disabled-row skipping.
|
||||
- Ensure only one transient window stays open through a rapid rail sweep.
|
||||
- Test popup bounds at every screen edge and both target resolutions.
|
||||
|
||||
### Guards
|
||||
|
||||
- Do not create eight copies of the same card grid.
|
||||
- Do not vary edge angle randomly inside one surface.
|
||||
- Do not use display italic for body copy or dense device lists.
|
||||
- Do not put action wording in state form (`Wi-Fi On`) when clicking performs the inverse.
|
||||
|
||||
---
|
||||
|
||||
## Phase 4 — Focus the cinematic scenes
|
||||
|
||||
### 4.1 Power menu
|
||||
|
||||
In `overlays/PowerMenu.qml`:
|
||||
|
||||
- Keep the left headline/right action-stack asymmetry.
|
||||
- Increase backdrop opacity enough that application text no longer competes.
|
||||
- Use one stripe band or wedge, not a full-screen stripe field plus every other motif.
|
||||
- Separate Lock/Suspend/Hibernate from Log Out/Reboot/Shut Down with a labeled break
|
||||
and greater spacing.
|
||||
- Keep white fill/black text for normal selection. Use solid crimson/black text for
|
||||
destructive selection.
|
||||
- Add `pendingAction`: the first activation of Log Out/Reboot/Shut Down replaces the
|
||||
action region with `CONFIRM LOG OUT`, `CONFIRM REBOOT`, or `CONFIRM SHUT DOWN`
|
||||
plus Cancel; second activation executes.
|
||||
Escape clears confirmation first and closes the menu only when no action is pending.
|
||||
- Keep roving Up/Down/J/K navigation and update focus order for confirmation.
|
||||
|
||||
### 4.2 Lock screen
|
||||
|
||||
Refactor `lock/LockFace.qml` into explicit visual states while retaining the single
|
||||
PAM context and `WlSessionLock` shell:
|
||||
|
||||
- **Idle:** clock is dominant; status is quiet; auth field is present but subordinate.
|
||||
- **Editing:** first user edit shifts emphasis to auth and dims/moves clock/status.
|
||||
- **Busy:** `CHECKING…`, disabled input, bounded sweep.
|
||||
- **Failure:** `PASSWORD INCORRECT` or PAM message, solid error treatment, one shake.
|
||||
- **Success:** paint a short `ACCESS GRANTED` state before unlocking; skip delay under
|
||||
reduced motion.
|
||||
|
||||
Replace `WHO GOES THERE`, `WRONG`, and `PAM ERROR` with explicit copy. Resolve the
|
||||
username safely from `USER` then `LOGNAME`; if both are empty, do not call PAM with a
|
||||
literal placeholder—show `AUTHENTICATION USER UNAVAILABLE`.
|
||||
|
||||
Keep responsive scaling, per-monitor wallpaper, and `lockpreview.qml`. Ensure the
|
||||
password input exposes `Accessible.EditableText`, name `Password`, `editable: true`,
|
||||
and `passwordEdit: true`.
|
||||
|
||||
### Verification
|
||||
|
||||
- Power: pointer and keyboard through safe action, destructive confirmation, cancel,
|
||||
outside click, and repeated open/close.
|
||||
- Lock preview: capture all five states at 1920×1080 and 1366×768.
|
||||
- Real lock test only after preview and PAM-path review; test wrong password, correct
|
||||
password, empty username environment simulation, and Quickshell reload behavior.
|
||||
- Confirm `WlSessionLock.secure` path remains unchanged.
|
||||
|
||||
### Guards
|
||||
|
||||
- Never execute destructive action on the first activation.
|
||||
- Never fake authentication success in preview or bypass PAM.
|
||||
- Never replace session lock with a focus-exclusive overlay.
|
||||
- Do not let theatrical copy obscure what the user must do.
|
||||
|
||||
---
|
||||
|
||||
## Phase 5 — Motion, contrast, and runtime calm
|
||||
|
||||
### 5.1 Motion policy
|
||||
|
||||
In `Theme.qml`, derive `motionScale` from `Preferences.reducedMotion`. Apply it to:
|
||||
|
||||
- every `Behavior`
|
||||
- popup enter/exit sequences
|
||||
- media equalizer and marquee loops
|
||||
- icon pulses
|
||||
- toast countdown/entry
|
||||
- OSD, power, and lock scene transitions
|
||||
|
||||
When reduced motion is on, set final state directly or disable `Behavior`; do not merely
|
||||
shorten loops to 1ms. Essential progress indicators may remain static with clear text.
|
||||
|
||||
### 5.2 High contrast
|
||||
|
||||
Read `Application.styleHints.accessibility.contrastPreference`. In high contrast:
|
||||
|
||||
- increase keyline/border separation
|
||||
- disable low-opacity texture behind text
|
||||
- retain shape/icon differences among selection, active, danger, and urgency
|
||||
- do not change the three-color identity
|
||||
|
||||
### 5.3 Polling cleanup
|
||||
|
||||
After visual behavior is stable, move `sysReader` from the 2-second batch to the
|
||||
20-second batch in `services/Sys.qml:78-102`; uptime/load/process count do not drive
|
||||
permanent animation. Keep CPU/MEM/GPU at 2 seconds because the bar renders them.
|
||||
Measure before making further demand-driven polling changes; do not introduce a
|
||||
consumer-count abstraction without evidence that it materially reduces work.
|
||||
|
||||
### Verification
|
||||
|
||||
- Restart with reduced motion and verify zero infinite animations via source grep and
|
||||
live observation; all final states must still appear.
|
||||
- Toggle high contrast and re-run contrast checks.
|
||||
- Compare Fluxo process-launch frequency before/after for 60 seconds.
|
||||
- Confirm notification timing, popup dismissal, and lock success still complete when
|
||||
animation is disabled.
|
||||
|
||||
### Guards
|
||||
|
||||
- Do not claim to follow an OS reduced-motion setting.
|
||||
- Do not gate functional timers such as notification lifetime or polling behind motion.
|
||||
- Do not add blur, gradients, or extra texture to compensate for removed motion.
|
||||
|
||||
---
|
||||
|
||||
## Phase 6 — Integrated verification and cutover
|
||||
|
||||
### Automated checks
|
||||
|
||||
1. `qmllint -I quickshell` on every changed QML file individually; the current tool can
|
||||
exit 255 without diagnostics on some recursive/singleton batches, so record files
|
||||
and results rather than treating one giant invocation as authoritative.
|
||||
2. `git diff --check`.
|
||||
3. Grep for:
|
||||
- white small text on solid accent
|
||||
- `enabledControl`
|
||||
- pointer handlers without an accessible name on shared controls
|
||||
- infinite animations not gated by reduced motion
|
||||
- deprecated popup properties
|
||||
- old copy: `WHO GOES THERE|PAM error|HELD|PROCS|VRAM`
|
||||
4. Reload through `qs ipc call shell reloadConfig` and inspect `qs log`.
|
||||
|
||||
### Interaction matrix
|
||||
|
||||
Test each bar/rail/pop-out action with pointer, keyboard where focusable, outside-click,
|
||||
Esc, disabled state, and service unavailable. Specifically test tray menus with nested
|
||||
submenus, Wi-Fi off, no Bluetooth adapter, no battery, no player, no notifications,
|
||||
and missing album art.
|
||||
|
||||
### Visual matrix
|
||||
|
||||
Capture:
|
||||
|
||||
- 1920×1080 and 1366×768
|
||||
- calm and high-contrast wallpaper
|
||||
- default, reduced-motion, and high-contrast preferences
|
||||
- desktop, every pop-out, tray menu, OSD, toast, power normal/confirm, and all lock states
|
||||
|
||||
Compare against these invariants:
|
||||
|
||||
- Chrome has no texture and never dominates content.
|
||||
- Transient panels each have one dominant composition.
|
||||
- Cinematic scenes retain the strongest typography and atmosphere.
|
||||
- Nothing important is encoded by color alone.
|
||||
- No text clips, crosses a cut edge, or falls below contrast requirements.
|
||||
|
||||
### Cutover sequence
|
||||
|
||||
Implement in six reviewable commits matching Phases 1–6. Do not delete the old visual
|
||||
path until its phase passes screenshots and interaction tests. Remove migration aliases
|
||||
(`enabledControl`, high-intensity escape hatch) only in the final cleanup commit after
|
||||
all call sites and preferences have migrated.
|
||||
|
||||
## Expected file map
|
||||
|
||||
### New
|
||||
|
||||
- `quickshell/config/Preferences.qml`
|
||||
- `quickshell/components/ChromeSurface.qml`
|
||||
- `quickshell/components/P5Tooltip.qml`
|
||||
|
||||
### Foundation edits
|
||||
|
||||
- `quickshell/config/Theme.qml`
|
||||
- `quickshell/components/P5Panel.qml`
|
||||
- `quickshell/components/P5Button.qml`
|
||||
- `quickshell/components/P5Slider.qml`
|
||||
- `quickshell/components/Popout.qml`
|
||||
- `quickshell/components/Icon.qml`
|
||||
- `quickshell/components/Marquee.qml`
|
||||
- `quickshell/services/Actions.qml`
|
||||
|
||||
### Surface edits
|
||||
|
||||
- `quickshell/bar/{Bar,BarPill,Rail,RailIcon,StatusIcon,Clock,Resources,MediaPill,Tray}.qml`
|
||||
- `quickshell/popouts/{PopoutSurface,PopoutHeader,AudioPopout,NetPopout,BtPopout,BatteryPopout,MediaPopout,CalendarPopout,NotifPopout,SysPopout,TrayMenuList}.qml`
|
||||
- `quickshell/components/NotifCard.qml`
|
||||
- `quickshell/overlays/{Osd,Toasts,PowerMenu}.qml`
|
||||
- `quickshell/lock/LockFace.qml`
|
||||
- `quickshell/services/Sys.qml`
|
||||
|
||||
## Recommended execution order
|
||||
|
||||
Execute Phase 1 first and review its state matrix before any visual restyling. Then use
|
||||
Audio as the full vertical slice through Phases 2–3. Once its tooltip, pinned focus,
|
||||
semantic states, reduced motion, and transient composition pass, repeat that proven
|
||||
pattern across the remaining surfaces. Leave real session-lock testing until the lock
|
||||
preview and power confirmation work are complete.
|
||||
@@ -80,7 +80,13 @@ contentPad * 2`), which keeps the shape maths out of binding loops.
|
||||
| CPU/MEM/GPU | bar | btop | | | | resource dashboard |
|
||||
|
||||
Popouts open on a short dwell and stay while the pointer is over the trigger or
|
||||
the panel. Clicking pins one open.
|
||||
the panel. Clicking pins one open. A shell-wide coordinator keeps only one
|
||||
transient surface mapped at a time, including tray context menus, so sweeping
|
||||
across the rail cannot stack several animated panels over one another.
|
||||
|
||||
The power menu is fully keyboard-driven as well as clickable: `Up`/`Down` or
|
||||
`J`/`K` moves the active slab, `Enter`/`Space` confirms it, and `Escape`
|
||||
dismisses the screen.
|
||||
|
||||
## Keybinds
|
||||
|
||||
|
||||
@@ -11,13 +11,14 @@ Item {
|
||||
property color accent: Theme.primary
|
||||
property color hoverFill: Theme.accent
|
||||
property bool destructive: false
|
||||
property bool selected: false
|
||||
property real lean: Theme.skew
|
||||
property real lunge: 6
|
||||
property bool wide: false
|
||||
|
||||
signal clicked()
|
||||
|
||||
readonly property bool hovered: hover.hovered
|
||||
readonly property bool hovered: hover.hovered || root.selected
|
||||
readonly property bool pressed: tap.pressed
|
||||
|
||||
implicitWidth: wide ? 260 : (row.implicitWidth + panel.contentPad * 2)
|
||||
|
||||
@@ -103,6 +103,7 @@ PopupWindow {
|
||||
}
|
||||
|
||||
function open() {
|
||||
PopupCoordinator.claim(root);
|
||||
exitAnim.stop();
|
||||
shown = true;
|
||||
enterAnim.restart();
|
||||
@@ -183,6 +184,7 @@ PopupWindow {
|
||||
root.pinned = false;
|
||||
contentHolder.x = root.bleed;
|
||||
contentHolder.y = root.bleed;
|
||||
PopupCoordinator.release(root);
|
||||
root.dismissedFully();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
pragma Singleton
|
||||
|
||||
import QtQuick
|
||||
import Quickshell
|
||||
|
||||
// One transient surface at a time. Without a shared owner, a quick sweep over
|
||||
// the bar/rail can leave several independently animated windows mapped on top
|
||||
// of each other. Every coordinated surface exposes dismiss().
|
||||
Singleton {
|
||||
property var active: null
|
||||
|
||||
function claim(surface: var) {
|
||||
if (active && active !== surface)
|
||||
active.dismiss();
|
||||
active = surface;
|
||||
}
|
||||
|
||||
function release(surface: var) {
|
||||
if (active === surface)
|
||||
active = null;
|
||||
}
|
||||
|
||||
function dismissAll() {
|
||||
if (active)
|
||||
active.dismiss();
|
||||
}
|
||||
}
|
||||
@@ -20,6 +20,8 @@ Item {
|
||||
property string status: ""
|
||||
property bool failed: false
|
||||
property bool busy: pam.active
|
||||
readonly property real uiScale: Math.max(0.72, Math.min(1.15,
|
||||
Math.min(width / 1920, height / 1080)))
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
@@ -137,7 +139,9 @@ Item {
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: parent.height * 0.2
|
||||
spacing: Theme.padM
|
||||
width: 300
|
||||
width: Math.min(300, parent.width * 0.28)
|
||||
scale: surface.uiScale
|
||||
transformOrigin: Item.TopRight
|
||||
|
||||
RailRow {
|
||||
width: parent.width
|
||||
@@ -181,8 +185,10 @@ Item {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: parent.height * 0.14
|
||||
width: 460
|
||||
width: Math.min(460, parent.width - Theme.padXL * 2)
|
||||
height: 150
|
||||
scale: surface.uiScale
|
||||
transformOrigin: Item.Bottom
|
||||
|
||||
transform: Translate { id: shakeShift }
|
||||
|
||||
@@ -206,7 +212,7 @@ Item {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.top: prompt.bottom
|
||||
anchors.topMargin: Theme.padL
|
||||
width: 380
|
||||
width: Math.min(380, authBlock.width - Theme.padL * 2)
|
||||
height: 56
|
||||
lean: 0.12
|
||||
chop: 16
|
||||
@@ -320,7 +326,7 @@ Item {
|
||||
|
||||
Text {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: Quickshell.env("USER") || "narl"
|
||||
text: Quickshell.env("USER") || "USER"
|
||||
color: Theme.muted
|
||||
font.family: Theme.fontMono
|
||||
font.pixelSize: Theme.fsSmall
|
||||
@@ -349,7 +355,7 @@ Item {
|
||||
id: pam
|
||||
|
||||
config: "hyprlock"
|
||||
user: Quickshell.env("USER") || "narl"
|
||||
user: Quickshell.env("USER") || "USER"
|
||||
|
||||
onPamMessage: {
|
||||
if (pam.responseRequired) pam.respond(surface.entry);
|
||||
|
||||
@@ -26,9 +26,21 @@ PanelWindow {
|
||||
exclusionMode: ExclusionMode.Ignore
|
||||
|
||||
readonly property bool open: Actions.powerMenuOpen
|
||||
property int selectedAction: 0
|
||||
|
||||
readonly property var actionModel: [
|
||||
{ label: "Lock", icon: "", danger: false, act: "lock" },
|
||||
{ label: "Suspend", icon: "", danger: false, act: "suspend" },
|
||||
{ label: "Hibernate", icon: "", danger: false, act: "hibernate" },
|
||||
{ label: "Log Out", icon: "", danger: true, act: "logout" },
|
||||
{ label: "Reboot", icon: "", danger: true, act: "reboot" },
|
||||
{ label: "Shut Down", icon: "", danger: true, act: "shutdown" }
|
||||
]
|
||||
|
||||
onOpenChanged: {
|
||||
if (open) {
|
||||
PopupCoordinator.dismissAll();
|
||||
selectedAction = 0;
|
||||
openAnim.restart();
|
||||
} else {
|
||||
closeAnim.restart();
|
||||
@@ -122,14 +134,7 @@ PanelWindow {
|
||||
Repeater {
|
||||
id: buttonRepeater
|
||||
|
||||
model: [
|
||||
{ label: "Lock", icon: "", danger: false, act: "lock" },
|
||||
{ label: "Suspend", icon: "", danger: false, act: "suspend" },
|
||||
{ label: "Hibernate", icon: "", danger: false, act: "hibernate" },
|
||||
{ label: "Log Out", icon: "", danger: true, act: "logout" },
|
||||
{ label: "Reboot", icon: "", danger: true, act: "reboot" },
|
||||
{ label: "Shut Down", icon: "", danger: true, act: "shutdown" }
|
||||
]
|
||||
model: root.actionModel
|
||||
|
||||
// A carrier item owns the staggered slide so the button keeps its
|
||||
// own hover transform.
|
||||
@@ -159,10 +164,12 @@ PanelWindow {
|
||||
text: entry.modelData.label
|
||||
icon: entry.modelData.icon
|
||||
destructive: entry.modelData.danger
|
||||
selected: root.selectedAction === entry.index
|
||||
accent: entry.modelData.danger ? Theme.accent : Theme.primary
|
||||
lean: Theme.skew
|
||||
lunge: -10
|
||||
onClicked: root.invoke(entry.modelData.act)
|
||||
onHoveredChanged: if (hovered) root.selectedAction = entry.index
|
||||
}
|
||||
|
||||
// Staggered entry, one button after another.
|
||||
@@ -211,7 +218,7 @@ PanelWindow {
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 40
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
text: "ESC TO CANCEL"
|
||||
text: "↑ ↓ SELECT ENTER CONFIRM ESC CANCEL"
|
||||
color: Theme.muted
|
||||
font.family: Theme.fontMono
|
||||
font.pixelSize: Theme.fsMicro
|
||||
@@ -237,6 +244,21 @@ PanelWindow {
|
||||
anchors.fill: parent
|
||||
focus: root.open
|
||||
Keys.onEscapePressed: Actions.closePowerMenu()
|
||||
Keys.onPressed: event => {
|
||||
if (!root.open) return;
|
||||
if (event.key === Qt.Key_Up || event.key === Qt.Key_K) {
|
||||
root.selectedAction = (root.selectedAction + root.actionModel.length - 1)
|
||||
% root.actionModel.length;
|
||||
event.accepted = true;
|
||||
} else if (event.key === Qt.Key_Down || event.key === Qt.Key_J) {
|
||||
root.selectedAction = (root.selectedAction + 1) % root.actionModel.length;
|
||||
event.accepted = true;
|
||||
} else if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter
|
||||
|| event.key === Qt.Key_Space) {
|
||||
root.invoke(root.actionModel[root.selectedAction].act);
|
||||
event.accepted = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ParallelAnimation {
|
||||
|
||||
@@ -53,6 +53,7 @@ PopupWindow {
|
||||
|
||||
function open() {
|
||||
if (!menuHandle) return;
|
||||
PopupCoordinator.claim(root);
|
||||
closeAnim.stop();
|
||||
shown = true;
|
||||
openAnim.restart();
|
||||
@@ -68,6 +69,11 @@ PopupWindow {
|
||||
if (shown) close(); else open();
|
||||
}
|
||||
|
||||
// Shared name used by PopupCoordinator for every transient surface.
|
||||
function dismiss() {
|
||||
close();
|
||||
}
|
||||
|
||||
// The grab can only take hold once the popup is actually mapped. Asked for
|
||||
// in the same tick as `shown`, Hyprland has no surface to hand it and
|
||||
// clears it immediately — which closed the menu the instant it opened.
|
||||
@@ -145,6 +151,7 @@ PopupWindow {
|
||||
onFinished: {
|
||||
root.shown = false;
|
||||
holder.x = root.bleed;
|
||||
PopupCoordinator.release(root);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -188,7 +188,7 @@ Column {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: row.entry.hasChildren ? 18 : 0
|
||||
visible: row.entry.hasChildren
|
||||
text: row.expanded ? "" : ""
|
||||
text: row.expanded ? "" : ""
|
||||
color: row.hovered ? Theme.ink : Theme.subtext
|
||||
font.family: Theme.fontIcon
|
||||
font.pixelSize: Theme.fsMicro
|
||||
|
||||
Reference in New Issue
Block a user