Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 nvrl
|
a868f50ab7 | ||
|
nvrl
|
39f925cb58 |
@@ -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,542 @@
|
||||
# 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.
|
||||
|
||||
## Phase 1 execution override — 2026-08-11
|
||||
|
||||
For the current Phase 1 implementation, the user explicitly removed reduced-motion
|
||||
work and screen-reader metadata from scope. This override supersedes Phase 1.1, the
|
||||
`Accessible.*` parts of Phase 1.4, and their related definition-of-done and
|
||||
verification requirements for this execution only.
|
||||
|
||||
- Do not create durable motion preferences or change animation policy.
|
||||
- Do not add or alter `Accessible.*` metadata or accessible action handlers.
|
||||
- Keep keyboard focus, visible focus treatment, keyboard navigation, root-disabled
|
||||
input behavior, semantic color/treatment tokens, and the surface hierarchy in
|
||||
scope.
|
||||
- Defer the remaining overridden requirements to a separately approved milestone.
|
||||
|
||||
## Implementation progress — 2026-08-11
|
||||
|
||||
- **Phase 1 foundation: complete for the approved scope.** Added explicit surface
|
||||
presets and semantic treatment tokens; made `P5Button` and `P5Slider`
|
||||
keyboard-capable with visible focus and root-gated disabled behavior. The user
|
||||
explicitly excluded durable reduced-motion work and `Accessible.*` metadata, so
|
||||
those items remain deferred rather than incomplete regressions.
|
||||
- **Phase 2 calm chrome: complete.** Bar and rail use the quiet `ChromeSurface`
|
||||
tier without permanent texture; the clock omits seconds; CPU/MEM/GPU are visibly
|
||||
labelled; MediaPill uses elided static text and a static play/pause mark; rail
|
||||
clicks consistently pin detail panels and undisclosed secondary state actions
|
||||
were removed; delayed Persona tooltips show state and scroll hints without
|
||||
taking focus or overlapping an opening detail panel.
|
||||
- **Audio vertical slice: complete.** Output percentage is dominant, output/input
|
||||
are distinct bands, application streams are subordinate, and mute plus mixer
|
||||
actions are explicit. Pinned popouts use `PopupWindow.grabFocus` as their sole
|
||||
focus/dismiss owner, remap when promoted from hover, focus the first Audio
|
||||
control, support Tab and Escape, and synchronously release coordinator ownership.
|
||||
- **Verification status.** Changed QML passes individual Qt 6 `qmllint` and the
|
||||
repository diff passes whitespace validation. Tooltip placement/suppression and
|
||||
hover open/close were exercised in a live Quickshell session and passed. Pinned
|
||||
click/remap, outside-click dismissal, Escape, and compositor-close synchronization
|
||||
remain untested and require interaction QA before the milestone is considered
|
||||
runtime-verified.
|
||||
|
||||
## 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.
|
||||
+33
-11
@@ -39,10 +39,18 @@ cost 4.4% of the height on top of what the bar already takes.
|
||||
- **rail** — one slab: network, bluetooth, audio, mic, backlight, battery, tray,
|
||||
notifications, power. Popouts open leftward, into the screen.
|
||||
|
||||
Each surface is a single continuous `P5Panel` with modules divided by sheared
|
||||
hairlines. `BarPill` is chromeless by default — a module is *content inside* a
|
||||
surface, not a surface of its own — and marks hover with a crimson underline.
|
||||
Pass `standalone: true` for the rare thing that really is its own panel.
|
||||
Each permanent surface is a single continuous `ChromeSurface` with modules
|
||||
divided by sheared hairlines. `BarPill` is chromeless by default — a module is
|
||||
*content inside* a surface, not a surface of its own — and marks hover with a
|
||||
crimson underline. Pass `standalone: true` for the rare thing that really is its
|
||||
own panel.
|
||||
|
||||
The shell uses three deliberate surface tiers. **Chrome** (`ChromeSurface`) is
|
||||
the calm, texture-free bar, rail, and tooltip layer. **Transient**
|
||||
(`PopoutSurface`) is reserved for expressive menus and detail panels, with one
|
||||
clear composition and stronger separation from the desktop. **Cinematic**
|
||||
(`P5Backdrop`) belongs only to scene-scale experiences such as power and lock;
|
||||
it is never used as decoration inside ordinary chrome or popouts.
|
||||
|
||||
```
|
||||
shell.qml entrypoint — bar, rail, power menu, toasts, OSD per screen
|
||||
@@ -67,20 +75,34 @@ contentPad * 2`), which keeps the shape maths out of binding loops.
|
||||
| Sigil | bar | app menu | reload shell | | | |
|
||||
| Workspaces | bar | switch | | | | |
|
||||
| Clock | bar | pin calendar | | | | calendar |
|
||||
| Network | rail | pin panel | toggle Wi-Fi | nm-connection-editor | | networks |
|
||||
| Bluetooth | rail | pin panel | toggle adapter | | | devices |
|
||||
| Volume | rail | mute | pin panel | pavucontrol | volume | audio mixer |
|
||||
| Mic | rail | mute | pin panel | | mic volume | audio mixer |
|
||||
| Brightness | rail | | | | brightness | |
|
||||
| Network | rail | pin details | | | | state + networks |
|
||||
| Bluetooth | rail | pin details | | | | state + devices |
|
||||
| Volume | rail | pin audio | | | volume | state + scroll hint + audio |
|
||||
| Mic | rail | pin audio | | | mic volume | state + scroll hint + audio |
|
||||
| Brightness | rail | | | | brightness | state + scroll hint |
|
||||
| Battery | rail | pin panel | | | | power detail |
|
||||
| Tray | rail | activate | app menu | secondary | | |
|
||||
| Bell | rail | history + mark read | do not disturb | | | history |
|
||||
| Bell | rail | pin history + mark read | | | | state + history |
|
||||
| Power | rail | power menu | | | | |
|
||||
| Media | bar | play/pause | next | raise player | next/prev | full player |
|
||||
| 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. Hover openings remain passive. Clicking remaps a detail panel as a
|
||||
keyboard-focused popup: Tab moves through its controls, Escape dismisses it,
|
||||
and an outside click closes it. 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.
|
||||
|
||||
Audio is the reference vertical-slice popout: current output percentage leads,
|
||||
output and input have distinct bands, and application streams form a subordinate
|
||||
mixer list. Output/input mute actions and **Open audio mixer** are explicit
|
||||
buttons inside the panel; scrolling the rail icons remains the fast level
|
||||
adjustment.
|
||||
|
||||
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
|
||||
|
||||
|
||||
@@ -4,8 +4,8 @@ import Quickshell.Hyprland
|
||||
import "root:/config"
|
||||
import "root:/components"
|
||||
|
||||
// Focused window title, glitching on every change the way a Persona 5 caption
|
||||
// snaps into place.
|
||||
// Focused window title. Rapid application title churn is settled before it is
|
||||
// painted, then the stable caption lands like a misregistered print layer.
|
||||
Item {
|
||||
id: root
|
||||
|
||||
@@ -19,7 +19,8 @@ Item {
|
||||
&& (root.monitor === null || toplevel.monitor === null
|
||||
|| toplevel.monitor.id === root.monitor.id)
|
||||
|
||||
readonly property string title: mine && toplevel.title ? toplevel.title : "—"
|
||||
readonly property string incomingTitle: mine && toplevel.title ? toplevel.title : "—"
|
||||
property string displayedTitle: "—"
|
||||
|
||||
// The bar shrinks this when the three clusters would otherwise collide.
|
||||
property real maxWidth: 240
|
||||
@@ -31,18 +32,60 @@ Item {
|
||||
NumberAnimation { duration: Theme.durSlow; easing.type: Easing.OutExpo }
|
||||
}
|
||||
|
||||
Marquee {
|
||||
id: label
|
||||
Item {
|
||||
id: titleStage
|
||||
anchors.fill: parent
|
||||
text: root.title
|
||||
clip: true
|
||||
|
||||
Text {
|
||||
id: label
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: parent.width
|
||||
text: root.displayedTitle
|
||||
color: root.mine ? Theme.subtext : Theme.muted
|
||||
pixelSize: Theme.fsSmall
|
||||
family: Theme.fontDisplay
|
||||
italic: true
|
||||
weight: Font.DemiBold
|
||||
elide: Text.ElideRight
|
||||
font.pixelSize: Theme.fsSmall
|
||||
font.family: Theme.fontDisplay
|
||||
font.italic: true
|
||||
font.weight: Font.DemiBold
|
||||
renderType: Text.NativeRendering
|
||||
}
|
||||
|
||||
onTitleChanged: flash.restart()
|
||||
// Crimson duplicate: visible only during the landing transition. The
|
||||
// small opposing offset gives the title Persona's rough print snap
|
||||
// without leaving permanent motion in the bar.
|
||||
Text {
|
||||
id: ghost
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: parent.width
|
||||
text: root.displayedTitle
|
||||
color: Theme.accent
|
||||
opacity: 0
|
||||
elide: Text.ElideRight
|
||||
font: label.font
|
||||
renderType: Text.NativeRendering
|
||||
}
|
||||
}
|
||||
|
||||
function commitTitle(): void {
|
||||
if (root.displayedTitle === root.incomingTitle)
|
||||
return;
|
||||
root.displayedTitle = root.incomingTitle;
|
||||
titleLanding.restart();
|
||||
}
|
||||
|
||||
// Browser tabs, terminals and editors can update titles several times in a
|
||||
// frame. Keep the old caption steady until the stream settles instead of
|
||||
// restarting an animation for every intermediate value.
|
||||
Timer {
|
||||
id: titleSettle
|
||||
interval: 120
|
||||
repeat: false
|
||||
onTriggered: root.commitTitle()
|
||||
}
|
||||
|
||||
onIncomingTitleChanged: titleSettle.restart()
|
||||
Component.onCompleted: displayedTitle = incomingTitle
|
||||
|
||||
// A quick crimson wipe under the title on focus change.
|
||||
Rectangle {
|
||||
@@ -55,7 +98,7 @@ Item {
|
||||
}
|
||||
|
||||
SequentialAnimation {
|
||||
id: flash
|
||||
id: titleLanding
|
||||
ParallelAnimation {
|
||||
NumberAnimation {
|
||||
target: wipe; property: "width"
|
||||
@@ -66,6 +109,24 @@ Item {
|
||||
target: wipe; property: "opacity"
|
||||
from: 0; to: 1; duration: Theme.durFast
|
||||
}
|
||||
NumberAnimation {
|
||||
target: label; property: "x"
|
||||
from: -10; to: 0
|
||||
duration: Theme.durBase; easing.type: Easing.OutBack
|
||||
}
|
||||
NumberAnimation {
|
||||
target: label; property: "opacity"
|
||||
from: 0.35; to: 1; duration: Theme.durFast
|
||||
}
|
||||
NumberAnimation {
|
||||
target: ghost; property: "x"
|
||||
from: 9; to: -3
|
||||
duration: Theme.durBase; easing.type: Easing.OutExpo
|
||||
}
|
||||
NumberAnimation {
|
||||
target: ghost; property: "opacity"
|
||||
from: 0.8; to: 0; duration: Theme.durBase
|
||||
}
|
||||
}
|
||||
NumberAnimation {
|
||||
target: wipe; property: "opacity"
|
||||
|
||||
+3
-16
@@ -37,29 +37,16 @@ PanelWindow {
|
||||
exclusiveZone: Theme.barHeight + Theme.barMargin
|
||||
color: "transparent"
|
||||
|
||||
// The slab. One panel, full width, flat fill, black keyline.
|
||||
P5Panel {
|
||||
// Calm permanent chrome: one opaque slab with no texture or offset copy.
|
||||
ChromeSurface {
|
||||
id: slab
|
||||
anchors.fill: parent
|
||||
lean: Theme.skew
|
||||
chop: Theme.cut
|
||||
chopCorners: [1, 3]
|
||||
padding: 0
|
||||
fill: Theme.surface
|
||||
fillOpacity: 1.0
|
||||
border: Theme.alpha(Theme.outline, 0.9)
|
||||
borderWidth: 1
|
||||
slash: true
|
||||
slashColor: Theme.accent
|
||||
active: true
|
||||
slashWidth: 5
|
||||
|
||||
// No offset copy on the big slabs. The 3px black silhouette behind the
|
||||
// fill is a print-misregistration trick, and at this scale it stops
|
||||
// reading as one: on a 1900px bar you only ever see it at the chopped
|
||||
// corners, where it turns the single clean cut into a staggered double
|
||||
// edge that looks like a rendering fault. The black keyline still
|
||||
// carries the heavy outer contour, which is what the corner needs.
|
||||
drop: false
|
||||
}
|
||||
|
||||
readonly property real edgeInset: Theme.barHeight * Theme.skew + Theme.padM
|
||||
|
||||
@@ -17,7 +17,7 @@ BarPill {
|
||||
|
||||
SystemClock {
|
||||
id: clock
|
||||
precision: SystemClock.Seconds
|
||||
precision: SystemClock.Minutes
|
||||
}
|
||||
|
||||
onClicked: calendar.pinned = !calendar.pinned
|
||||
@@ -65,16 +65,6 @@ BarPill {
|
||||
split: 1.4
|
||||
}
|
||||
|
||||
// Seconds, kept quiet so they read as a ticking detail rather than noise.
|
||||
Text {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.verticalCenterOffset: 4
|
||||
text: Qt.formatDateTime(clock.date, "ss")
|
||||
color: Theme.alpha(Theme.primary, 0.8)
|
||||
font.family: Theme.fontMono
|
||||
font.pixelSize: Theme.fsMicro
|
||||
renderType: Text.NativeRendering
|
||||
}
|
||||
}
|
||||
|
||||
// Glitch the time on the hour, because it should feel like something happened.
|
||||
|
||||
@@ -17,7 +17,7 @@ BarPill {
|
||||
visible: Media.hasPlayer || width > 1
|
||||
|
||||
// Track position, drawn by the pill in its own rule band.
|
||||
progress: Media.canSeek ? Media.progress : -1
|
||||
progress: Media.hasTimeline ? Media.progress : -1
|
||||
|
||||
implicitWidth: Media.hasPlayer
|
||||
? layout.implicitWidth + contentPad * 2
|
||||
@@ -83,8 +83,6 @@ BarPill {
|
||||
text: Media.sourceIcon
|
||||
font.pixelSize: Theme.fsLarge
|
||||
color: Theme.primary
|
||||
pulsing: Media.playing
|
||||
pulseScale: 1.12
|
||||
}
|
||||
}
|
||||
|
||||
@@ -101,28 +99,33 @@ BarPill {
|
||||
|
||||
readonly property real cap: 150
|
||||
|
||||
Marquee {
|
||||
Text {
|
||||
width: Math.min(meta.cap, implicitWidth)
|
||||
height: 14
|
||||
text: Media.title || Media.identity
|
||||
color: Theme.text
|
||||
pixelSize: Theme.fsSmall
|
||||
family: Theme.fontDisplay
|
||||
weight: Font.DemiBold
|
||||
italic: true
|
||||
elide: Text.ElideRight
|
||||
font.pixelSize: Theme.fsSmall
|
||||
font.family: Theme.fontDisplay
|
||||
font.weight: Font.DemiBold
|
||||
font.italic: true
|
||||
renderType: Text.NativeRendering
|
||||
}
|
||||
|
||||
Marquee {
|
||||
Text {
|
||||
width: Math.min(meta.cap, implicitWidth)
|
||||
height: 12
|
||||
text: Media.artist || Media.album || Media.identity
|
||||
color: Theme.muted
|
||||
pixelSize: Theme.fsMicro
|
||||
family: Theme.fontMono
|
||||
elide: Text.ElideRight
|
||||
font.pixelSize: Theme.fsMicro
|
||||
font.family: Theme.fontMono
|
||||
renderType: Text.NativeRendering
|
||||
}
|
||||
}
|
||||
|
||||
// Play state, as a two-bar equaliser that freezes when paused.
|
||||
// Compact play-state equaliser. It moves only while audio is playing
|
||||
// and freezes into three quiet bars when paused.
|
||||
Row {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: 2
|
||||
|
||||
+36
-26
@@ -40,8 +40,8 @@ PanelWindow {
|
||||
exclusiveZone: Theme.railWidth + Theme.barMargin
|
||||
color: "transparent"
|
||||
|
||||
// The slab.
|
||||
P5Panel {
|
||||
// The same calm permanent-chrome preset used by the top bar.
|
||||
ChromeSurface {
|
||||
id: slab
|
||||
anchors.fill: parent
|
||||
vertical: true
|
||||
@@ -49,18 +49,8 @@ PanelWindow {
|
||||
chop: Theme.cut
|
||||
chopCorners: [1, 3]
|
||||
padding: 0
|
||||
fill: Theme.surface
|
||||
fillOpacity: 1.0
|
||||
border: Theme.alpha(Theme.outline, 0.9)
|
||||
borderWidth: 1
|
||||
slash: true
|
||||
slashColor: Theme.accent
|
||||
active: true
|
||||
slashWidth: 5
|
||||
|
||||
// Same as the bar — see the note there. The doubled corner is worse on
|
||||
// the rail, because its chopped corners sit against the wallpaper's
|
||||
// high-contrast stripes rather than against other chrome.
|
||||
drop: false
|
||||
}
|
||||
|
||||
readonly property real edgeInset: Theme.railWidth * Theme.skew + Theme.padM
|
||||
@@ -76,18 +66,21 @@ PanelWindow {
|
||||
RailIcon {
|
||||
id: netIcon
|
||||
icon: Net.icon
|
||||
label: "Network"
|
||||
statusText: Net.label
|
||||
suppressTooltip: netPopout.detailActive
|
||||
dim: !Sys.netUp
|
||||
onClicked: netPopout.pinned = !netPopout.pinned
|
||||
onRightClicked: Net.toggleWifi()
|
||||
onMiddleClicked: Actions.openNetworkSettings()
|
||||
onClicked: netPopout.togglePinned()
|
||||
}
|
||||
|
||||
RailIcon {
|
||||
id: btIcon
|
||||
icon: Bt.icon
|
||||
label: "Bluetooth"
|
||||
statusText: Bt.label
|
||||
suppressTooltip: btPopout.detailActive
|
||||
dim: !Bt.enabled
|
||||
onClicked: btPopout.pinned = !btPopout.pinned
|
||||
onRightClicked: Bt.toggle()
|
||||
onClicked: btPopout.togglePinned()
|
||||
}
|
||||
|
||||
Divider {}
|
||||
@@ -96,19 +89,24 @@ PanelWindow {
|
||||
id: volIcon
|
||||
icon: Audio.icon
|
||||
readout: Audio.muted ? "" : Audio.volumePercent + "%"
|
||||
label: "Volume"
|
||||
statusText: Audio.muted ? "Muted" : Audio.volumePercent + "% · " + Audio.sinkName
|
||||
hint: "Scroll to adjust"
|
||||
suppressTooltip: audioPopout.detailActive
|
||||
alert: Audio.muted
|
||||
onClicked: Audio.toggleMute()
|
||||
onRightClicked: audioPopout.pinned = !audioPopout.pinned
|
||||
onMiddleClicked: Actions.openAudioSettings()
|
||||
onClicked: audioPopout.togglePinned()
|
||||
onScrolled: delta => Audio.changeVolume(delta > 0 ? 0.05 : -0.05)
|
||||
}
|
||||
|
||||
RailIcon {
|
||||
id: micIcon
|
||||
icon: Audio.micIcon
|
||||
label: "Microphone"
|
||||
statusText: Audio.micMuted ? "Muted" : Audio.micPercent + "% · " + Audio.sourceName
|
||||
hint: "Scroll to adjust"
|
||||
suppressTooltip: audioPopout.detailActive
|
||||
alert: Audio.micMuted
|
||||
onClicked: Audio.toggleMicMute()
|
||||
onRightClicked: audioPopout.pinned = !audioPopout.pinned
|
||||
onClicked: audioPopout.togglePinned()
|
||||
onScrolled: delta => Audio.setMicVolume(Audio.micVolume + (delta > 0 ? 0.05 : -0.05))
|
||||
}
|
||||
|
||||
@@ -117,6 +115,9 @@ PanelWindow {
|
||||
visible: Brightness.available
|
||||
icon: Brightness.icon
|
||||
readout: Math.round(Brightness.percent) + "%"
|
||||
label: "Brightness"
|
||||
statusText: Math.round(Brightness.percent) + "%"
|
||||
hint: "Scroll to adjust"
|
||||
onScrolled: delta => Brightness.change(delta > 0 ? 5 : -5)
|
||||
}
|
||||
|
||||
@@ -127,9 +128,12 @@ PanelWindow {
|
||||
visible: Battery.available
|
||||
icon: Battery.icon
|
||||
readout: Math.round(Battery.percent) + "%"
|
||||
label: "Battery"
|
||||
statusText: Math.round(Battery.percent) + "% · " + Battery.timeLabel
|
||||
suppressTooltip: battPopout.detailActive
|
||||
alert: Battery.critical
|
||||
pulsing: Battery.critical
|
||||
onClicked: battPopout.pinned = !battPopout.pinned
|
||||
onClicked: battPopout.togglePinned()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -151,21 +155,27 @@ PanelWindow {
|
||||
RailIcon {
|
||||
id: bellIcon
|
||||
icon: Notifs.icon
|
||||
label: "Notifications"
|
||||
statusText: Notifs.dnd
|
||||
? "Do not disturb"
|
||||
: (Notifs.unread > 0 ? Notifs.unread + " unread" : "All caught up")
|
||||
readout: Notifs.unread > 0
|
||||
? (Notifs.unread > 9 ? "9+" : String(Notifs.unread))
|
||||
: ""
|
||||
dim: Notifs.dnd
|
||||
alert: Notifs.hasUnread && !Notifs.dnd
|
||||
suppressTooltip: notifPopout.detailActive
|
||||
onClicked: {
|
||||
notifPopout.pinned = !notifPopout.pinned;
|
||||
notifPopout.togglePinned();
|
||||
Notifs.markRead();
|
||||
}
|
||||
onRightClicked: Notifs.toggleDnd()
|
||||
}
|
||||
|
||||
RailIcon {
|
||||
id: powerIcon
|
||||
icon: ""
|
||||
label: "Power"
|
||||
statusText: "Session actions"
|
||||
alert: Actions.powerMenuOpen
|
||||
onClicked: Actions.togglePowerMenu()
|
||||
}
|
||||
|
||||
+13
-10
@@ -12,6 +12,10 @@ Item {
|
||||
|
||||
property string icon: ""
|
||||
property string readout: ""
|
||||
property string label: ""
|
||||
property string statusText: ""
|
||||
property string hint: ""
|
||||
property bool suppressTooltip: false
|
||||
property color tint: Theme.primary
|
||||
property bool alert: false
|
||||
property bool dim: false
|
||||
@@ -24,8 +28,6 @@ Item {
|
||||
readonly property real wipeInset: 5
|
||||
|
||||
signal clicked()
|
||||
signal rightClicked()
|
||||
signal middleClicked()
|
||||
signal scrolled(real delta)
|
||||
|
||||
implicitWidth: Theme.railWidth
|
||||
@@ -110,16 +112,17 @@ Item {
|
||||
acceptedButtons: Qt.LeftButton
|
||||
onTapped: root.clicked()
|
||||
}
|
||||
TapHandler {
|
||||
acceptedButtons: Qt.RightButton
|
||||
onTapped: root.rightClicked()
|
||||
}
|
||||
TapHandler {
|
||||
acceptedButtons: Qt.MiddleButton
|
||||
onTapped: root.middleClicked()
|
||||
}
|
||||
WheelHandler {
|
||||
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
|
||||
onWheel: event => root.scrolled(event.angleDelta.y)
|
||||
}
|
||||
|
||||
P5Tooltip {
|
||||
anchorItem: root
|
||||
triggerHovered: root.hovered
|
||||
title: root.label
|
||||
status: root.statusText
|
||||
hint: root.hint
|
||||
suppressed: root.suppressTooltip
|
||||
}
|
||||
}
|
||||
|
||||
@@ -56,10 +56,8 @@ BarPill {
|
||||
color: Theme.alpha(Theme.outline, 0.8)
|
||||
}
|
||||
|
||||
// The CPU/MEM/GPU labels are gone: three characters of chrome per metric,
|
||||
// repeated three times, in the most cramped part of the shell. The number
|
||||
// over its meter is legible on its own, and dropping them buys the room to
|
||||
// set the figure in display italic instead of squeezing it into mono.
|
||||
// A tiny fixed label makes every number self-describing without turning the
|
||||
// compact meter cluster back into three separate cards.
|
||||
component Metric: Column {
|
||||
id: metric
|
||||
|
||||
@@ -70,7 +68,22 @@ BarPill {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: 2
|
||||
|
||||
Row {
|
||||
spacing: 4
|
||||
|
||||
Text {
|
||||
anchors.baseline: readoutText.baseline
|
||||
text: metric.label
|
||||
color: Theme.muted
|
||||
font.family: Theme.fontMono
|
||||
font.pixelSize: Theme.fsMicro
|
||||
font.weight: Font.Bold
|
||||
font.letterSpacing: 0.5
|
||||
renderType: Text.NativeRendering
|
||||
}
|
||||
|
||||
Text {
|
||||
id: readoutText
|
||||
text: metric.readout
|
||||
color: Theme.heat(metric.value)
|
||||
font.family: Theme.fontDisplay
|
||||
@@ -84,6 +97,7 @@ BarPill {
|
||||
ColorAnimation { duration: Theme.durBase }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MeterBar {
|
||||
value: metric.value
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
import QtQuick
|
||||
import "root:/config"
|
||||
import "root:/components"
|
||||
|
||||
// Calm, permanent-chrome preset. It is deliberately flat and opaque: one
|
||||
// neutral keyline, no texture, no offset copy, and no accent unless active.
|
||||
P5Panel {
|
||||
property bool active: false
|
||||
property color tone: Theme.treatmentActiveMark
|
||||
|
||||
fill: Theme.treatmentRestFill
|
||||
fillOpacity: 1.0
|
||||
border: Theme.treatmentRestMark
|
||||
borderWidth: 1
|
||||
// Keep the hard ink contour. Removing both texture and keyline made the
|
||||
// permanent slabs read as generic broadcast HUD chrome.
|
||||
keyline: true
|
||||
drop: false
|
||||
halftone: false
|
||||
sheen: false
|
||||
slash: active
|
||||
slashColor: tone
|
||||
slashWidth: 4
|
||||
lean: 0.06
|
||||
chop: Theme.cut
|
||||
padding: Theme.padS
|
||||
}
|
||||
@@ -1,24 +1,40 @@
|
||||
import QtQuick
|
||||
import "root:/config"
|
||||
|
||||
// Chopped, leaning button. On hover it lunges toward the pointer and flips to
|
||||
// crimson-on-white; on press it snaps flat.
|
||||
Item {
|
||||
// Chopped, leaning button with one activation path for pointer and keyboard.
|
||||
FocusScope {
|
||||
id: root
|
||||
|
||||
property string text: ""
|
||||
property string icon: ""
|
||||
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: root.enabled && hover.hovered
|
||||
readonly property bool pressed: tap.pressed
|
||||
readonly property bool focusedOrSelected: root.activeFocus || root.selected
|
||||
readonly property bool highlighted: root.hovered || root.focusedOrSelected
|
||||
|
||||
// Pointer activation must not turn a transient action into the black/white
|
||||
// keyboard-focus treatment. Tab still reaches it, and programmatic focus
|
||||
// (power-menu roving selection / pinned popouts) still works.
|
||||
focusPolicy: root.enabled ? Qt.TabFocus : Qt.NoFocus
|
||||
|
||||
function activate(): void {
|
||||
if (root.enabled)
|
||||
root.clicked();
|
||||
}
|
||||
|
||||
function activateFromKey(event): void {
|
||||
if (!event.isAutoRepeat)
|
||||
root.activate();
|
||||
}
|
||||
|
||||
implicitWidth: wide ? 260 : (row.implicitWidth + panel.contentPad * 2)
|
||||
implicitHeight: 44
|
||||
@@ -28,13 +44,24 @@ Item {
|
||||
anchors.fill: parent
|
||||
lean: root.lean
|
||||
padding: Theme.padS
|
||||
fill: root.hovered ? (root.destructive ? root.hoverFill : Theme.text) : Theme.surface
|
||||
fillOpacity: root.hovered ? 1.0 : 0.9
|
||||
border: root.hovered ? "transparent" : Theme.alpha(root.accent, 0.55)
|
||||
slash: !root.hovered
|
||||
slashColor: root.destructive ? Theme.accent : root.accent
|
||||
halftone: root.hovered
|
||||
halftoneColor: root.destructive ? Theme.text : Theme.base
|
||||
fill: {
|
||||
if (!root.enabled) return Theme.treatmentDisabledFill;
|
||||
if (root.destructive) return Theme.treatmentDestructiveFill;
|
||||
if (root.highlighted) return Theme.treatmentHoverFill;
|
||||
return Theme.treatmentRestFill;
|
||||
}
|
||||
fillOpacity: root.enabled ? 1.0 : 0.72
|
||||
border: {
|
||||
if (!root.enabled) return Theme.treatmentDisabledMark;
|
||||
if (root.destructive) return Theme.treatmentFocusMark;
|
||||
if (root.highlighted) return Theme.treatmentHoverMark;
|
||||
return Theme.alpha(root.accent, 0.55);
|
||||
}
|
||||
borderWidth: Theme.stroke
|
||||
slash: !root.highlighted
|
||||
slashColor: root.destructive ? Theme.treatmentDestructiveMark : root.accent
|
||||
halftone: root.enabled && root.highlighted
|
||||
halftoneColor: Theme.ink
|
||||
halftoneOpacity: 0.14
|
||||
|
||||
Behavior on fillOpacity {
|
||||
@@ -52,17 +79,23 @@ Item {
|
||||
visible: root.icon !== ""
|
||||
text: root.icon
|
||||
font.pixelSize: Theme.fsTitle
|
||||
color: root.hovered
|
||||
? (root.destructive ? Theme.text : Theme.base)
|
||||
: root.accent
|
||||
color: {
|
||||
if (!root.enabled) return Theme.treatmentDisabledText;
|
||||
if (root.destructive) return Theme.treatmentDestructiveText;
|
||||
if (root.highlighted) return Theme.treatmentHoverText;
|
||||
return root.accent;
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: root.text
|
||||
color: root.hovered
|
||||
? (root.destructive ? Theme.text : Theme.base)
|
||||
: Theme.text
|
||||
color: {
|
||||
if (!root.enabled) return Theme.treatmentDisabledText;
|
||||
if (root.destructive) return Theme.treatmentDestructiveText;
|
||||
if (root.highlighted) return Theme.treatmentHoverText;
|
||||
return Theme.treatmentRestText;
|
||||
}
|
||||
font.family: Theme.fontDisplay
|
||||
font.pixelSize: Theme.fsBody
|
||||
font.weight: Theme.weightDisplay
|
||||
@@ -79,7 +112,7 @@ Item {
|
||||
}
|
||||
|
||||
transform: Translate {
|
||||
x: root.pressed ? 0 : (root.hovered ? root.lunge : 0)
|
||||
x: root.pressed ? 0 : (root.highlighted ? root.lunge : 0)
|
||||
|
||||
Behavior on x {
|
||||
NumberAnimation {
|
||||
@@ -96,11 +129,17 @@ Item {
|
||||
|
||||
HoverHandler {
|
||||
id: hover
|
||||
enabled: root.enabled
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
}
|
||||
|
||||
TapHandler {
|
||||
id: tap
|
||||
onTapped: root.clicked()
|
||||
enabled: root.enabled
|
||||
onTapped: root.activate()
|
||||
}
|
||||
|
||||
Keys.onReturnPressed: event => root.activateFromKey(event)
|
||||
Keys.onEnterPressed: event => root.activateFromKey(event)
|
||||
Keys.onSpacePressed: event => root.activateFromKey(event)
|
||||
}
|
||||
|
||||
@@ -8,23 +8,38 @@ Item {
|
||||
|
||||
property real value: 0 // 0..1
|
||||
property color accent: Theme.primary
|
||||
property bool enabledControl: true
|
||||
property real stepSize: 0.05
|
||||
|
||||
signal moved(real value)
|
||||
|
||||
implicitHeight: 18
|
||||
implicitWidth: 200
|
||||
focusPolicy: root.enabled ? Qt.StrongFocus : Qt.NoFocus
|
||||
|
||||
readonly property real _lean: Theme.skew * height
|
||||
|
||||
function commit(nextValue: real): void {
|
||||
if (!root.enabled)
|
||||
return;
|
||||
root.moved(Math.max(0, Math.min(1, nextValue)));
|
||||
}
|
||||
|
||||
// Rail
|
||||
Skew {
|
||||
id: rail
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
height: 6
|
||||
color: Theme.alpha(Theme.outline, 0.7)
|
||||
height: root.activeFocus ? 10 : 6
|
||||
color: root.activeFocus
|
||||
? Theme.treatmentFocusFill
|
||||
: Theme.alpha(root.enabled ? Theme.outline : Theme.treatmentDisabledMark, 0.7)
|
||||
borderColor: root.activeFocus ? Theme.treatmentFocusMark : "transparent"
|
||||
borderWidth: root.activeFocus ? Theme.stroke : 0
|
||||
|
||||
Behavior on height {
|
||||
NumberAnimation { duration: Theme.durFast }
|
||||
}
|
||||
}
|
||||
|
||||
// Fill
|
||||
@@ -33,7 +48,7 @@ Item {
|
||||
anchors.left: parent.left
|
||||
width: Math.max(0, Math.min(1, root.value)) * root.width
|
||||
height: 6
|
||||
color: root.enabledControl ? root.accent : Theme.muted
|
||||
color: root.enabled ? root.accent : Theme.treatmentDisabledText
|
||||
|
||||
Behavior on width {
|
||||
enabled: !drag.active
|
||||
@@ -49,8 +64,8 @@ Item {
|
||||
Skew {
|
||||
id: handle
|
||||
width: 6
|
||||
height: hover.hovered || drag.active ? 18 : 14
|
||||
color: root.enabledControl ? Theme.text : Theme.muted
|
||||
height: root.activeFocus || hover.hovered || drag.active ? 18 : 14
|
||||
color: root.enabled ? Theme.text : Theme.treatmentDisabledText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
x: Math.max(0, Math.min(1, root.value)) * root.width - width / 2
|
||||
|
||||
@@ -65,21 +80,46 @@ Item {
|
||||
|
||||
HoverHandler {
|
||||
id: hover
|
||||
enabled: root.enabled
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
}
|
||||
|
||||
TapHandler {
|
||||
onTapped: event => root.moved(Math.max(0, Math.min(1, event.position.x / root.width)))
|
||||
enabled: root.enabled
|
||||
onPressedChanged: if (pressed) root.forceActiveFocus(Qt.MouseFocusReason)
|
||||
onTapped: event => root.commit(event.position.x / root.width)
|
||||
}
|
||||
|
||||
DragHandler {
|
||||
id: drag
|
||||
enabled: root.enabled
|
||||
target: null
|
||||
xAxis.enabled: true
|
||||
yAxis.enabled: false
|
||||
onCentroidChanged: {
|
||||
if (!active) return;
|
||||
root.moved(Math.max(0, Math.min(1, centroid.position.x / root.width)));
|
||||
root.forceActiveFocus(Qt.MouseFocusReason);
|
||||
root.commit(centroid.position.x / root.width);
|
||||
}
|
||||
}
|
||||
|
||||
Keys.onPressed: event => {
|
||||
switch (event.key) {
|
||||
case Qt.Key_Left:
|
||||
root.commit(root.value - root.stepSize);
|
||||
break;
|
||||
case Qt.Key_Right:
|
||||
root.commit(root.value + root.stepSize);
|
||||
break;
|
||||
case Qt.Key_Home:
|
||||
root.commit(0);
|
||||
break;
|
||||
case Qt.Key_End:
|
||||
root.commit(1);
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
event.accepted = true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,114 @@
|
||||
import QtQuick
|
||||
import Quickshell
|
||||
import "root:/config"
|
||||
|
||||
// Calm, informational hover label for permanent chrome. It never takes focus
|
||||
// or participates in popup coordination; a delayed label should not dismiss or
|
||||
// displace the detail panel attached to the same rail control.
|
||||
PopupWindow {
|
||||
id: root
|
||||
|
||||
required property Item anchorItem
|
||||
property bool triggerHovered: false
|
||||
property string title: ""
|
||||
property string status: ""
|
||||
property string hint: ""
|
||||
property int delay: 400
|
||||
property bool suppressed: false
|
||||
|
||||
readonly property int pad: Theme.padS
|
||||
readonly property real textWidth: Math.max(titleText.implicitWidth,
|
||||
statusText.implicitWidth, hintText.implicitWidth)
|
||||
readonly property real contentWidth: Math.max(112, textWidth + pad * 4)
|
||||
readonly property real contentHeight: textColumn.implicitHeight + pad * 2
|
||||
|
||||
anchor.item: anchorItem
|
||||
anchor.edges: Edges.Left
|
||||
anchor.gravity: Edges.Left
|
||||
anchor.adjustment: PopupAdjustment.Flip | PopupAdjustment.SlideY
|
||||
anchor.margins.left: Theme.popoutGap
|
||||
|
||||
implicitWidth: contentWidth
|
||||
implicitHeight: contentHeight
|
||||
color: "transparent"
|
||||
visible: shown && title !== "" && !suppressed
|
||||
|
||||
property bool shown: false
|
||||
|
||||
onTriggerHoveredChanged: {
|
||||
if (triggerHovered && title !== "" && !suppressed) {
|
||||
hideTimer.stop();
|
||||
showTimer.restart();
|
||||
} else {
|
||||
showTimer.stop();
|
||||
hideTimer.restart();
|
||||
}
|
||||
}
|
||||
|
||||
onSuppressedChanged: {
|
||||
if (suppressed) {
|
||||
showTimer.stop();
|
||||
shown = false;
|
||||
} else if (triggerHovered) {
|
||||
showTimer.restart();
|
||||
}
|
||||
}
|
||||
|
||||
Timer {
|
||||
id: showTimer
|
||||
interval: root.delay
|
||||
onTriggered: root.shown = root.triggerHovered && !root.suppressed
|
||||
}
|
||||
|
||||
Timer {
|
||||
id: hideTimer
|
||||
interval: 70
|
||||
onTriggered: root.shown = false
|
||||
}
|
||||
|
||||
ChromeSurface {
|
||||
anchors.fill: parent
|
||||
padding: root.pad
|
||||
lean: 0.06
|
||||
|
||||
Column {
|
||||
id: textColumn
|
||||
anchors.left: parent.left
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: 2
|
||||
|
||||
Text {
|
||||
id: titleText
|
||||
text: root.title.toUpperCase()
|
||||
color: Theme.text
|
||||
font.family: Theme.fontDisplay
|
||||
font.pixelSize: Theme.fsSmall
|
||||
font.weight: Theme.weightDisplay
|
||||
font.italic: true
|
||||
renderType: Text.NativeRendering
|
||||
}
|
||||
|
||||
Text {
|
||||
id: statusText
|
||||
visible: text !== ""
|
||||
text: root.status
|
||||
color: Theme.subtext
|
||||
font.family: Theme.fontMono
|
||||
font.pixelSize: Theme.fsMicro
|
||||
renderType: Text.NativeRendering
|
||||
}
|
||||
|
||||
Text {
|
||||
id: hintText
|
||||
visible: text !== ""
|
||||
text: root.hint.toUpperCase()
|
||||
color: Theme.accent
|
||||
font.family: Theme.fontMono
|
||||
font.pixelSize: Theme.fsMicro
|
||||
font.weight: Font.Bold
|
||||
font.letterSpacing: 0.8
|
||||
renderType: Text.NativeRendering
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,5 @@
|
||||
import QtQuick
|
||||
import Quickshell
|
||||
import Quickshell.Hyprland
|
||||
import "root:/config"
|
||||
|
||||
// Hover-driven panel that hangs off a bar item. Opens on a short dwell, stays
|
||||
@@ -17,6 +16,8 @@ PopupWindow {
|
||||
property int fromEdge: Edges.Bottom
|
||||
property real contentWidth: Theme.popoutWidth
|
||||
property real contentHeight: 200
|
||||
property Item initialFocusItem: null
|
||||
property bool remappingPinned: false
|
||||
|
||||
// Extra surface around the content so the entry overshoot and glow are not
|
||||
// clipped by the window edge.
|
||||
@@ -25,6 +26,8 @@ PopupWindow {
|
||||
default property alias body: contentHolder.data
|
||||
|
||||
readonly property bool wantsOpen: triggerHovered || panelHover.hovered || pinned
|
||||
readonly property bool pending: showTimer.running || remapTimer.running || remappingPinned
|
||||
readonly property bool detailActive: shown || pending
|
||||
|
||||
signal dismissedFully()
|
||||
|
||||
@@ -52,12 +55,14 @@ PopupWindow {
|
||||
implicitHeight: contentHeight + bleed * 2
|
||||
color: "transparent"
|
||||
visible: shown
|
||||
grabFocus: pinned && shown
|
||||
|
||||
property bool shown: false
|
||||
|
||||
onWantsOpenChanged: {
|
||||
if (wantsOpen) {
|
||||
hideTimer.stop();
|
||||
if (!pinned && !remappingPinned)
|
||||
showTimer.restart();
|
||||
} else {
|
||||
showTimer.stop();
|
||||
@@ -71,29 +76,17 @@ PopupWindow {
|
||||
onTriggered: root.open()
|
||||
}
|
||||
|
||||
// A pinned popout ignores hover by design, which left it with exactly one
|
||||
// way out: another click on the same bar item that opened it. Moving the
|
||||
// pointer away did nothing, so a panel opened by a click — the notification
|
||||
// history, most often — simply stayed on screen. Click anywhere else and
|
||||
// the compositor drops the grab, which unpins it and hands it back to the
|
||||
// hover rules.
|
||||
//
|
||||
// The grab can only take hold once the surface is mapped; asked for in the
|
||||
// same tick as `shown`, Hyprland clears it immediately.
|
||||
Timer {
|
||||
id: grabDelay
|
||||
interval: 60
|
||||
running: root.pinned && root.shown
|
||||
onVisibleChanged: {
|
||||
if (!visible && shown)
|
||||
dismissImmediately();
|
||||
}
|
||||
onClosed: {
|
||||
if (remappingPinned) {
|
||||
remappingPinned = false;
|
||||
remapTimer.restart();
|
||||
} else if (shown || pinned) {
|
||||
dismissImmediately();
|
||||
}
|
||||
|
||||
HyprlandFocusGrab {
|
||||
active: root.pinned && root.shown && !grabDelay.running
|
||||
windows: [root]
|
||||
|
||||
// A click on the trigger itself also clears the grab, but that click is
|
||||
// the pill's own toggle — unpinning here as well would cancel it out and
|
||||
// the panel would never close from its own button.
|
||||
onCleared: if (!root.triggerHovered) root.pinned = false
|
||||
}
|
||||
|
||||
Timer {
|
||||
@@ -103,19 +96,91 @@ PopupWindow {
|
||||
}
|
||||
|
||||
function open() {
|
||||
PopupCoordinator.claim(root);
|
||||
exitAnim.stop();
|
||||
shown = true;
|
||||
enterAnim.restart();
|
||||
}
|
||||
|
||||
// Focus policy is fixed at map time. A hover-visible passive surface must
|
||||
// therefore unmap before returning as a click-owned keyboard popup.
|
||||
function openPinned() {
|
||||
showTimer.stop();
|
||||
hideTimer.stop();
|
||||
PopupCoordinator.claim(root);
|
||||
if (shown) {
|
||||
remappingPinned = true;
|
||||
shown = false;
|
||||
enterAnim.stop();
|
||||
exitAnim.stop();
|
||||
pinned = true;
|
||||
} else {
|
||||
pinned = true;
|
||||
open();
|
||||
focusTimer.restart();
|
||||
}
|
||||
}
|
||||
|
||||
function togglePinned() {
|
||||
if (pinned) {
|
||||
pinned = false;
|
||||
dismiss();
|
||||
} else {
|
||||
openPinned();
|
||||
}
|
||||
}
|
||||
|
||||
function dismiss() {
|
||||
if (!shown) return;
|
||||
if (!shown) {
|
||||
if (pinned || pending)
|
||||
dismissImmediately();
|
||||
return;
|
||||
}
|
||||
pinned = false;
|
||||
PopupCoordinator.release(root);
|
||||
enterAnim.stop();
|
||||
exitAnim.restart();
|
||||
}
|
||||
|
||||
function dismissImmediately() {
|
||||
showTimer.stop();
|
||||
hideTimer.stop();
|
||||
remapTimer.stop();
|
||||
focusTimer.stop();
|
||||
enterAnim.stop();
|
||||
exitAnim.stop();
|
||||
remappingPinned = false;
|
||||
pinned = false;
|
||||
shown = false;
|
||||
contentHolder.opacity = 0;
|
||||
contentHolder.scale = 0.94;
|
||||
contentHolder.x = root.bleed;
|
||||
contentHolder.y = root.bleed;
|
||||
PopupCoordinator.release(root);
|
||||
root.dismissedFully();
|
||||
}
|
||||
|
||||
Timer {
|
||||
id: remapTimer
|
||||
interval: 0
|
||||
onTriggered: {
|
||||
root.open();
|
||||
focusTimer.restart();
|
||||
}
|
||||
}
|
||||
|
||||
Timer {
|
||||
id: focusTimer
|
||||
interval: 0
|
||||
onTriggered: {
|
||||
const target = root.initialFocusItem || contentHolder;
|
||||
target.forceActiveFocus(Qt.TabFocusReason);
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: contentHolder
|
||||
focus: root.pinned
|
||||
x: root.bleed
|
||||
y: root.bleed
|
||||
width: root.contentWidth
|
||||
@@ -144,6 +209,13 @@ PopupWindow {
|
||||
id: panelHover
|
||||
enabled: root.shown
|
||||
}
|
||||
|
||||
Keys.onEscapePressed: event => {
|
||||
if (root.pinned) {
|
||||
event.accepted = true;
|
||||
root.dismissImmediately();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ParallelAnimation {
|
||||
@@ -183,6 +255,7 @@ PopupWindow {
|
||||
root.pinned = false;
|
||||
contentHolder.x = root.bleed;
|
||||
contentHolder.y = root.bleed;
|
||||
PopupCoordinator.release(root);
|
||||
root.dismissedFully();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
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) {
|
||||
const previous = active;
|
||||
active = null;
|
||||
previous.dismissImmediately();
|
||||
}
|
||||
active = surface;
|
||||
}
|
||||
|
||||
function release(surface: var) {
|
||||
if (active === surface)
|
||||
active = null;
|
||||
}
|
||||
|
||||
function dismissAll() {
|
||||
if (active)
|
||||
active.dismiss();
|
||||
}
|
||||
}
|
||||
@@ -54,6 +54,46 @@ Singleton {
|
||||
// resolves to crimson. Pointing at a thing lights it up red.
|
||||
readonly property color glow: root.accent
|
||||
|
||||
// ------------------------------------------------ semantic treatments
|
||||
// These tokens describe interaction meaning, not new palette entries. Each
|
||||
// state is composed only from Takemi's black, white, crimson, and neutral
|
||||
// surfaces so callers do not invent one-off state colors.
|
||||
readonly property color treatmentRestFill: root.surface
|
||||
readonly property color treatmentRestMark: root.outline
|
||||
readonly property color treatmentRestText: root.text
|
||||
|
||||
readonly property color treatmentHoverFill: root.surface
|
||||
readonly property color treatmentHoverMark: root.accent
|
||||
readonly property color treatmentHoverText: root.text
|
||||
|
||||
readonly property color treatmentFocusFill: root.text
|
||||
readonly property color treatmentFocusMark: root.ink
|
||||
readonly property color treatmentFocusText: root.ink
|
||||
readonly property color treatmentSelectedFill: root.treatmentFocusFill
|
||||
readonly property color treatmentSelectedMark: root.treatmentFocusMark
|
||||
readonly property color treatmentSelectedText: root.treatmentFocusText
|
||||
|
||||
readonly property color treatmentActiveFill: root.surface
|
||||
readonly property color treatmentActiveMark: root.accent
|
||||
readonly property color treatmentActiveText: root.text
|
||||
|
||||
// Crimson carries destructive/error meaning. Text and keylines stay black:
|
||||
// black-on-crimson is 5.70:1, while small white-on-crimson is only 3.68:1.
|
||||
readonly property color treatmentDestructiveFill: root.accent
|
||||
readonly property color treatmentDestructiveMark: root.ink
|
||||
readonly property color treatmentDestructiveText: root.ink
|
||||
readonly property color treatmentErrorFill: root.treatmentDestructiveFill
|
||||
readonly property color treatmentErrorMark: root.treatmentDestructiveMark
|
||||
readonly property color treatmentErrorText: root.treatmentDestructiveText
|
||||
|
||||
readonly property color treatmentUrgentFill: root.surface
|
||||
readonly property color treatmentUrgentMark: root.accent
|
||||
readonly property color treatmentUrgentText: root.text
|
||||
|
||||
readonly property color treatmentDisabledFill: root.surface
|
||||
readonly property color treatmentDisabledMark: root.outline
|
||||
readonly property color treatmentDisabledText: root.muted
|
||||
|
||||
// Retired hues. Aliases only — do not introduce new uses.
|
||||
//
|
||||
// `warn` used to be accentSoft, which put a washed-out pink-red on screen
|
||||
|
||||
@@ -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,33 @@ PanelWindow {
|
||||
exclusionMode: ExclusionMode.Ignore
|
||||
|
||||
readonly property bool open: Actions.powerMenuOpen
|
||||
property int selectedAction: 0
|
||||
|
||||
function focusSelectedAction(): void {
|
||||
const entry = buttonRepeater.itemAt(root.selectedAction);
|
||||
if (entry && entry.children.length > 0)
|
||||
entry.children[0].forceActiveFocus(Qt.TabFocusReason);
|
||||
}
|
||||
|
||||
function moveSelection(delta: int): void {
|
||||
root.selectedAction = (root.selectedAction + delta + root.actionModel.length)
|
||||
% root.actionModel.length;
|
||||
root.focusSelectedAction();
|
||||
}
|
||||
|
||||
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 +146,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.
|
||||
@@ -155,14 +172,19 @@ PanelWindow {
|
||||
]
|
||||
|
||||
P5Button {
|
||||
id: actionButton
|
||||
anchors.fill: parent
|
||||
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
|
||||
onActiveFocusChanged: if (actionButton.activeFocus) root.selectedAction = entry.index
|
||||
Keys.forwardTo: [keyController]
|
||||
}
|
||||
|
||||
// Staggered entry, one button after another.
|
||||
@@ -211,7 +233,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
|
||||
@@ -234,9 +256,26 @@ PanelWindow {
|
||||
|
||||
// Escape closes. The layer takes exclusive focus while open.
|
||||
Item {
|
||||
id: keyController
|
||||
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.moveSelection(-1);
|
||||
event.accepted = true;
|
||||
} else if (event.key === Qt.Key_Down || event.key === Qt.Key_J) {
|
||||
root.moveSelection(1);
|
||||
event.accepted = true;
|
||||
} else if (keyController.activeFocus
|
||||
&& !event.isAutoRepeat
|
||||
&& (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 {
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
import QtQuick
|
||||
import "root:/config"
|
||||
import "root:/components"
|
||||
import "root:/services"
|
||||
|
||||
// Secondary input band with an explicit mute action.
|
||||
Item {
|
||||
id: root
|
||||
|
||||
implicitHeight: 68
|
||||
|
||||
Row {
|
||||
anchors.left: parent.left
|
||||
anchors.right: muteButton.left
|
||||
anchors.rightMargin: Theme.padM
|
||||
anchors.verticalCenter: muteButton.verticalCenter
|
||||
spacing: Theme.padS
|
||||
|
||||
Icon {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: Audio.micIcon
|
||||
color: Audio.micMuted ? Theme.accent : Theme.text
|
||||
font.pixelSize: Theme.fsLarge
|
||||
}
|
||||
|
||||
Column {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: parent.width - Theme.fsLarge - Theme.padS
|
||||
spacing: 2
|
||||
|
||||
Text {
|
||||
width: parent.width
|
||||
text: Audio.sourceName
|
||||
elide: Text.ElideRight
|
||||
color: Theme.text
|
||||
font.family: Theme.fontDisplay
|
||||
font.pixelSize: Theme.fsSmall
|
||||
font.weight: Font.DemiBold
|
||||
font.italic: true
|
||||
renderType: Text.NativeRendering
|
||||
}
|
||||
|
||||
Text {
|
||||
text: Audio.micMuted ? "MUTED" : Audio.micPercent + "%"
|
||||
color: Audio.micMuted ? Theme.accent : Theme.subtext
|
||||
font.family: Theme.fontMono
|
||||
font.pixelSize: Theme.fsMicro
|
||||
font.weight: Font.Bold
|
||||
renderType: Text.NativeRendering
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
P5Button {
|
||||
id: muteButton
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
text: Audio.micMuted ? "Unmute input" : "Mute input"
|
||||
icon: Audio.micIcon
|
||||
onClicked: Audio.toggleMicMute()
|
||||
}
|
||||
|
||||
P5Slider {
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.bottom
|
||||
value: Audio.micVolume
|
||||
accent: Theme.primary
|
||||
enabled: !Audio.micMuted
|
||||
onMoved: v => Audio.setMicVolume(v)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
import QtQuick
|
||||
import "root:/config"
|
||||
import "root:/components"
|
||||
import "root:/services"
|
||||
|
||||
// Dominant current-output readout for AudioPopout.
|
||||
Item {
|
||||
implicitHeight: 112
|
||||
|
||||
Text {
|
||||
id: outputPercent
|
||||
anchors.left: parent.left
|
||||
anchors.top: parent.top
|
||||
text: Audio.volumePercent + "%"
|
||||
color: Audio.muted ? Theme.muted : Theme.text
|
||||
font.family: Theme.fontDisplay
|
||||
font.pixelSize: Theme.fsHuge
|
||||
font.weight: Theme.weightDisplay
|
||||
font.italic: true
|
||||
renderType: Text.NativeRendering
|
||||
}
|
||||
|
||||
Column {
|
||||
anchors.left: outputPercent.right
|
||||
anchors.leftMargin: Theme.padL
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: outputPercent.verticalCenter
|
||||
spacing: 3
|
||||
|
||||
Text {
|
||||
text: "CURRENT OUTPUT"
|
||||
color: Theme.accent
|
||||
font.family: Theme.fontMono
|
||||
font.pixelSize: Theme.fsMicro
|
||||
font.weight: Font.Bold
|
||||
font.letterSpacing: 2
|
||||
renderType: Text.NativeRendering
|
||||
}
|
||||
|
||||
Text {
|
||||
width: parent.width
|
||||
text: Audio.sinkName
|
||||
elide: Text.ElideRight
|
||||
color: Theme.subtext
|
||||
font.family: Theme.fontDisplay
|
||||
font.pixelSize: Theme.fsSmall
|
||||
font.weight: Font.DemiBold
|
||||
font.italic: true
|
||||
renderType: Text.NativeRendering
|
||||
}
|
||||
|
||||
Text {
|
||||
text: Audio.muted ? "MUTED" : "LIVE"
|
||||
color: Audio.muted ? Theme.accent : Theme.text
|
||||
font.family: Theme.fontMono
|
||||
font.pixelSize: Theme.fsMicro
|
||||
font.weight: Font.Bold
|
||||
renderType: Text.NativeRendering
|
||||
}
|
||||
}
|
||||
|
||||
P5Slider {
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.bottom
|
||||
value: Audio.volume
|
||||
accent: Theme.accent
|
||||
enabled: !Audio.muted
|
||||
onMoved: v => Audio.setVolume(v)
|
||||
}
|
||||
}
|
||||
@@ -5,12 +5,15 @@ import "root:/config"
|
||||
import "root:/components"
|
||||
import "root:/services"
|
||||
|
||||
// Output and input levels, the sink picker, and a per-app mixer.
|
||||
// Audio is the expressive vertical slice for rail popouts: output owns the
|
||||
// composition, input is a clear secondary band, and application streams recede
|
||||
// into a compact mixer below both device controls.
|
||||
Popout {
|
||||
id: root
|
||||
|
||||
contentWidth: 360
|
||||
contentWidth: 400
|
||||
contentHeight: surface.implicitContentHeight + Theme.padM * 2
|
||||
initialFocusItem: outputMuteButton
|
||||
|
||||
PopoutSurface {
|
||||
id: surface
|
||||
@@ -39,29 +42,38 @@ Popout {
|
||||
spacing: Theme.padM
|
||||
|
||||
// ------------------------------------------------------- output
|
||||
LevelRow {
|
||||
AudioOutputHero {
|
||||
width: parent.width
|
||||
}
|
||||
|
||||
Column {
|
||||
width: parent.width
|
||||
spacing: Theme.padS
|
||||
|
||||
P5Button {
|
||||
id: outputMuteButton
|
||||
width: parent.width
|
||||
text: Audio.muted ? "Unmute output" : "Mute output"
|
||||
icon: Audio.icon
|
||||
label: "Output"
|
||||
readout: Audio.muted ? "MUTED" : Audio.volumePercent + "%"
|
||||
value: Audio.volume
|
||||
muted: Audio.muted
|
||||
accent: Theme.primary
|
||||
onMoved: v => Audio.setVolume(v)
|
||||
onToggled: Audio.toggleMute()
|
||||
onClicked: Audio.toggleMute()
|
||||
}
|
||||
|
||||
P5Button {
|
||||
width: parent.width
|
||||
text: "Open audio mixer"
|
||||
icon: ""
|
||||
onClicked: Actions.openAudioSettings()
|
||||
}
|
||||
}
|
||||
|
||||
// -------------------------------------------------------- input
|
||||
LevelRow {
|
||||
SectionRule {
|
||||
width: parent.width
|
||||
text: "Input"
|
||||
}
|
||||
|
||||
AudioInputBand {
|
||||
width: parent.width
|
||||
icon: Audio.micIcon
|
||||
label: "Input"
|
||||
readout: Audio.micMuted ? "MUTED" : Audio.micPercent + "%"
|
||||
value: Audio.micVolume
|
||||
muted: Audio.micMuted
|
||||
accent: Theme.blue
|
||||
onMoved: v => Audio.setMicVolume(v)
|
||||
onToggled: Audio.toggleMicMute()
|
||||
}
|
||||
|
||||
SectionRule {
|
||||
@@ -98,19 +110,14 @@ Popout {
|
||||
icon: ""
|
||||
label: Audio.streamName(modelData)
|
||||
readout: modelData.audio ? Math.round(modelData.audio.volume * 100) + "%" : ""
|
||||
value: modelData.audio?.volume ?? 0
|
||||
muted: modelData.audio?.muted ?? false
|
||||
value: modelData.audio ? modelData.audio.volume : 0
|
||||
muted: modelData.audio ? modelData.audio.muted : false
|
||||
accent: Theme.glow
|
||||
onMoved: v => { if (modelData.audio) modelData.audio.volume = v; }
|
||||
onToggled: { if (modelData.audio) modelData.audio.muted = !modelData.audio.muted; }
|
||||
}
|
||||
}
|
||||
|
||||
P5Button {
|
||||
text: "Mixer"
|
||||
icon: ""
|
||||
onClicked: Actions.openAudioSettings()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -178,7 +185,7 @@ Popout {
|
||||
anchors.right: parent.right
|
||||
value: levelRow.value
|
||||
accent: levelRow.accent
|
||||
enabledControl: !levelRow.muted
|
||||
enabled: !levelRow.muted
|
||||
onMoved: v => levelRow.moved(v)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -155,26 +155,26 @@ Popout {
|
||||
|
||||
TransportButton {
|
||||
glyph: ""
|
||||
enabledControl: Media.canGoPrevious
|
||||
enabled: Media.canGoPrevious
|
||||
onClicked: Media.previous()
|
||||
}
|
||||
|
||||
TransportButton {
|
||||
glyph: Media.playing ? "" : ""
|
||||
primary: true
|
||||
enabledControl: Media.hasPlayer
|
||||
enabled: Media.hasPlayer
|
||||
onClicked: Media.playPause()
|
||||
}
|
||||
|
||||
TransportButton {
|
||||
glyph: ""
|
||||
enabledControl: Media.canGoNext
|
||||
enabled: Media.canGoNext
|
||||
onClicked: Media.next()
|
||||
}
|
||||
|
||||
TransportButton {
|
||||
glyph: ""
|
||||
enabledControl: Media.hasPlayer
|
||||
enabled: Media.hasPlayer
|
||||
onClicked: Media.raise()
|
||||
}
|
||||
}
|
||||
@@ -196,7 +196,7 @@ Popout {
|
||||
id: elapsed
|
||||
anchors.left: parent.left
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: Media.timeString(Media.position)
|
||||
text: Media.positionSupported ? Media.timeString(Media.position) : "--:--"
|
||||
color: Theme.subtext
|
||||
font.family: Theme.fontMono
|
||||
font.pixelSize: Theme.fsMicro
|
||||
@@ -207,7 +207,7 @@ Popout {
|
||||
id: total
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: Media.timeString(Media.length)
|
||||
text: Media.lengthSupported ? Media.timeString(Media.length) : "LIVE"
|
||||
color: Theme.subtext
|
||||
font.family: Theme.fontMono
|
||||
font.pixelSize: Theme.fsMicro
|
||||
@@ -222,7 +222,7 @@ Popout {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
value: Media.progress
|
||||
accent: Theme.accent
|
||||
enabledControl: Media.canSeek
|
||||
enabled: Media.canSeek
|
||||
onMoved: v => Media.seekTo(v)
|
||||
}
|
||||
}
|
||||
@@ -238,7 +238,7 @@ Popout {
|
||||
Repeater {
|
||||
model: Media.players
|
||||
|
||||
Item {
|
||||
FocusScope {
|
||||
id: chip
|
||||
required property var modelData
|
||||
|
||||
@@ -246,21 +246,44 @@ Popout {
|
||||
|
||||
implicitWidth: chipLabel.implicitWidth + Theme.padM
|
||||
implicitHeight: 22
|
||||
focusPolicy: chip.enabled ? Qt.TabFocus : Qt.NoFocus
|
||||
|
||||
function activate(): void {
|
||||
if (chip.enabled)
|
||||
Media.select(chip.modelData);
|
||||
}
|
||||
|
||||
function activateFromKey(event): void {
|
||||
if (!event.isAutoRepeat)
|
||||
chip.activate();
|
||||
}
|
||||
|
||||
Skew {
|
||||
anchors.fill: parent
|
||||
color: chip.current
|
||||
color: !chip.enabled
|
||||
? Theme.treatmentDisabledFill
|
||||
: (chip.activeFocus
|
||||
? Theme.treatmentFocusFill
|
||||
: (chip.current
|
||||
? Theme.alpha(Theme.primary, 0.22)
|
||||
: (chipHover.hovered ? Theme.alpha(Theme.primary, 0.1) : "transparent")
|
||||
borderWidth: 1
|
||||
borderColor: chip.current ? Theme.primary : Theme.alpha(Theme.outline, 0.7)
|
||||
: (chipHover.hovered ? Theme.alpha(Theme.primary, 0.1) : "transparent")))
|
||||
borderWidth: chip.activeFocus ? Theme.stroke : 1
|
||||
borderColor: !chip.enabled
|
||||
? Theme.treatmentDisabledMark
|
||||
: (chip.activeFocus
|
||||
? Theme.treatmentFocusMark
|
||||
: (chip.current ? Theme.primary : Theme.alpha(Theme.outline, 0.7)))
|
||||
}
|
||||
|
||||
Text {
|
||||
id: chipLabel
|
||||
anchors.centerIn: parent
|
||||
text: chip.modelData.identity
|
||||
color: chip.current ? Theme.text : Theme.muted
|
||||
color: !chip.enabled
|
||||
? Theme.treatmentDisabledText
|
||||
: (chip.activeFocus
|
||||
? Theme.treatmentFocusText
|
||||
: (chip.current ? Theme.text : Theme.muted))
|
||||
font.family: Theme.fontMono
|
||||
font.pixelSize: Theme.fsMicro
|
||||
renderType: Text.NativeRendering
|
||||
@@ -268,39 +291,57 @@ Popout {
|
||||
|
||||
HoverHandler {
|
||||
id: chipHover
|
||||
enabled: chip.enabled
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
}
|
||||
|
||||
TapHandler {
|
||||
onTapped: Media.select(chip.modelData)
|
||||
enabled: chip.enabled
|
||||
onTapped: chip.activate()
|
||||
}
|
||||
|
||||
Keys.onReturnPressed: event => chip.activateFromKey(event)
|
||||
Keys.onEnterPressed: event => chip.activateFromKey(event)
|
||||
Keys.onSpacePressed: event => chip.activateFromKey(event)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
component TransportButton: Item {
|
||||
component TransportButton: FocusScope {
|
||||
id: tb
|
||||
|
||||
property string glyph: ""
|
||||
property bool primary: false
|
||||
property bool enabledControl: true
|
||||
|
||||
signal clicked()
|
||||
|
||||
implicitWidth: primary ? 38 : 30
|
||||
implicitHeight: primary ? 38 : 30
|
||||
focusPolicy: tb.enabled ? Qt.TabFocus : Qt.NoFocus
|
||||
|
||||
function activate(): void {
|
||||
if (tb.enabled)
|
||||
tb.clicked();
|
||||
}
|
||||
|
||||
function activateFromKey(event): void {
|
||||
if (!event.isAutoRepeat)
|
||||
tb.activate();
|
||||
}
|
||||
|
||||
Skew {
|
||||
anchors.fill: parent
|
||||
color: {
|
||||
if (!tb.enabledControl) return "transparent";
|
||||
if (!tb.enabled) return "transparent";
|
||||
if (tb.activeFocus) return Theme.treatmentFocusFill;
|
||||
if (tbHover.hovered) return tb.primary ? Theme.accent : Theme.alpha(Theme.primary, 0.22);
|
||||
return tb.primary ? Theme.alpha(Theme.primary, 0.18) : "transparent";
|
||||
}
|
||||
borderWidth: tb.primary ? 2 : 1
|
||||
borderColor: tb.enabledControl
|
||||
? (tbHover.hovered ? Theme.text : Theme.alpha(Theme.primary, 0.6))
|
||||
borderWidth: tb.activeFocus ? Theme.stroke * 2 : (tb.primary ? 2 : 1)
|
||||
borderColor: tb.enabled
|
||||
? (tb.activeFocus
|
||||
? Theme.treatmentFocusMark
|
||||
: (tbHover.hovered ? Theme.text : Theme.alpha(Theme.primary, 0.6)))
|
||||
: Theme.alpha(Theme.outline, 0.4)
|
||||
|
||||
Behavior on color {
|
||||
@@ -313,26 +354,31 @@ Popout {
|
||||
text: tb.glyph
|
||||
font.pixelSize: tb.primary ? Theme.fsTitle : Theme.fsLarge
|
||||
color: {
|
||||
if (!tb.enabledControl) return Theme.alpha(Theme.muted, 0.5);
|
||||
if (!tb.enabled) return Theme.alpha(Theme.muted, 0.5);
|
||||
if (tb.activeFocus) return Theme.treatmentFocusText;
|
||||
if (tbHover.hovered && tb.primary) return Theme.text;
|
||||
return Theme.primary;
|
||||
}
|
||||
}
|
||||
|
||||
scale: tbHover.hovered && tb.enabledControl ? 1.12 : 1.0
|
||||
scale: tbHover.hovered && tb.enabled ? 1.12 : 1.0
|
||||
Behavior on scale {
|
||||
NumberAnimation { duration: Theme.durBase; easing.type: Easing.OutBack }
|
||||
}
|
||||
|
||||
HoverHandler {
|
||||
id: tbHover
|
||||
enabled: tb.enabledControl
|
||||
enabled: tb.enabled
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
}
|
||||
|
||||
TapHandler {
|
||||
enabled: tb.enabledControl
|
||||
onTapped: tb.clicked()
|
||||
enabled: tb.enabled
|
||||
onTapped: tb.activate()
|
||||
}
|
||||
|
||||
Keys.onReturnPressed: event => tb.activateFromKey(event)
|
||||
Keys.onEnterPressed: event => tb.activateFromKey(event)
|
||||
Keys.onSpacePressed: event => tb.activateFromKey(event)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,12 +6,13 @@ import "root:/components"
|
||||
// own, so P5Panel's default content property stays usable by callers.
|
||||
P5Panel {
|
||||
property color tone: Theme.primary
|
||||
property bool textured: false
|
||||
|
||||
fill: Theme.mantle
|
||||
fillOpacity: 0.97
|
||||
border: Theme.alpha(tone, 0.75)
|
||||
borderWidth: Theme.stroke
|
||||
halftone: true
|
||||
halftone: textured
|
||||
halftoneColor: tone
|
||||
halftoneOpacity: 0.06
|
||||
sheen: true
|
||||
|
||||
@@ -53,6 +53,7 @@ PopupWindow {
|
||||
|
||||
function open() {
|
||||
if (!menuHandle) return;
|
||||
PopupCoordinator.claim(root);
|
||||
closeAnim.stop();
|
||||
shown = true;
|
||||
openAnim.restart();
|
||||
@@ -68,6 +69,21 @@ PopupWindow {
|
||||
if (shown) close(); else open();
|
||||
}
|
||||
|
||||
// Shared name used by PopupCoordinator for every transient surface.
|
||||
function dismiss() {
|
||||
close();
|
||||
}
|
||||
|
||||
function dismissImmediately() {
|
||||
openAnim.stop();
|
||||
closeAnim.stop();
|
||||
shown = false;
|
||||
holder.opacity = 0;
|
||||
holder.scale = 0.94;
|
||||
holder.x = root.bleed;
|
||||
PopupCoordinator.release(root);
|
||||
}
|
||||
|
||||
// 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 +161,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
|
||||
|
||||
@@ -34,11 +34,14 @@ Singleton {
|
||||
|
||||
readonly property bool canGoNext: active?.canGoNext ?? false
|
||||
readonly property bool canGoPrevious: active?.canGoPrevious ?? false
|
||||
readonly property bool canSeek: (active?.canSeek ?? false) && (active?.lengthSupported ?? false)
|
||||
readonly property bool positionSupported: active?.positionSupported ?? false
|
||||
readonly property bool lengthSupported: active?.lengthSupported ?? false
|
||||
readonly property bool hasTimeline: positionSupported && lengthSupported && length > 0
|
||||
readonly property bool canSeek: (active?.canSeek ?? false) && hasTimeline
|
||||
|
||||
readonly property real length: active?.lengthSupported ? (active?.length ?? 0) : 0
|
||||
readonly property real position: active?.positionSupported ? (active?.position ?? 0) : 0
|
||||
readonly property real progress: length > 0 ? Math.min(1, position / length) : 0
|
||||
readonly property real length: lengthSupported ? (active?.length ?? 0) : 0
|
||||
readonly property real position: positionSupported ? (active?.position ?? 0) : 0
|
||||
readonly property real progress: hasTimeline ? Math.min(1, position / length) : 0
|
||||
|
||||
readonly property string label: {
|
||||
if (!hasPlayer) return "Nothing playing";
|
||||
@@ -53,8 +56,8 @@ Singleton {
|
||||
|
||||
// MPRIS position is pull-only; tick it so the seek bar moves.
|
||||
Timer {
|
||||
interval: 500
|
||||
running: root.playing && root.canSeek
|
||||
interval: 1000
|
||||
running: root.playing && root.positionSupported
|
||||
repeat: true
|
||||
onTriggered: if (root.active) root.active.positionChanged()
|
||||
}
|
||||
@@ -85,9 +88,11 @@ Singleton {
|
||||
return "";
|
||||
}
|
||||
|
||||
function timeString(micros: real): string {
|
||||
if (!(micros > 0)) return "0:00";
|
||||
const total = Math.floor(micros / 1000000);
|
||||
// Quickshell exposes MPRIS position/length in seconds (with millisecond
|
||||
// precision), not the protocol's raw microseconds.
|
||||
function timeString(seconds: real): string {
|
||||
if (!(seconds > 0)) return "0:00";
|
||||
const total = Math.floor(seconds);
|
||||
const m = Math.floor(total / 60);
|
||||
const s = total % 60;
|
||||
if (m >= 60) {
|
||||
|
||||
Reference in New Issue
Block a user