Round paging follows the finger: faces and dashboards on a track, swiped one to one with the next beside it, turned or sent back on release, rubber-banded at the ends; keys and dots slide the same track; the reading dot a smaller companion of the handle
Docs / docs (push) Successful in 24s
Playwright Tests / test-playwright (1, 2) (push) Failing after 4m14s
Playwright Tests / test-playwright (2, 2) (push) Successful in 2m11s
pre-commit / pre-commit (push) Failing after 2m2s
Test Backend / test-backend (push) Failing after 3m23s
Compose Smoke Test / test-compose (push) Successful in 34s
Playwright Tests / merge-reports (push) Successful in 1m33s
Docs / docs (push) Successful in 24s
Playwright Tests / test-playwright (1, 2) (push) Failing after 4m14s
Playwright Tests / test-playwright (2, 2) (push) Successful in 2m11s
pre-commit / pre-commit (push) Failing after 2m2s
Test Backend / test-backend (push) Failing after 3m23s
Compose Smoke Test / test-compose (push) Successful in 34s
Playwright Tests / merge-reports (push) Successful in 1m33s
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 5.5
parent
541dbce584
commit
603635f947
@@ -101,10 +101,12 @@ the track, the value's fill, or the handle.
|
||||
| Dot | Size, tile / ring | On the track | On the fill | On the handle |
|
||||
|---|---|---|---|---|
|
||||
| Stop: a tick, an option | half the track's thickness (4 on the 8 track) / 6 | `--muted-foreground` | `--primary-foreground` at 70 % | hidden under it |
|
||||
| Reading | three quarters of the track's thickness (6) / 10 | `--foreground` | `--primary-foreground` | Fluksio `--foreground`, Material `--primary-foreground`, Glass black at 75 % |
|
||||
| Reading | the track's thickness (8) / 12 | `--foreground` | `--primary-foreground` | Fluksio `--foreground`, Material `--primary-foreground`, Glass black at 75 % |
|
||||
|
||||
The reading is the larger dot in the stronger colour, and it is the one dot
|
||||
that shows on the handle, so a reading at the setpoint is still visible.
|
||||
The reading is a filled circle like the handle, smaller and in the text colour
|
||||
rather than the handle's paint, so it reads as what the room is beside what it
|
||||
is set to. It is larger than a stop and stronger in colour, and it is the one
|
||||
dot that shows on the handle, so a reading at the setpoint is still visible.
|
||||
|
||||
| Part | Value |
|
||||
|---|---|
|
||||
@@ -260,11 +262,11 @@ face, and the editor marks it **Poor fit for round**.
|
||||
| Shift+PageDown / Shift+PageUp | next / previous dashboard of the panel |
|
||||
| Arrow keys | turn the ring, not the page |
|
||||
|
||||
A swipe is a drag of at least 40 canvas pixels, decided by its longer axis; a
|
||||
drag that starts on the ring turns the ring instead. A dashboard reopens on the
|
||||
face it was last left on in this session, otherwise on its first. Landing on
|
||||
another dashboard shows its title and icon in the middle of the face for one
|
||||
second; a round panel has no rail.
|
||||
A swipe carries the page with the finger ([Swiping](#swiping)); a drag that
|
||||
starts on the ring turns the ring instead. A dashboard reopens on the face it
|
||||
was last left on in this session, otherwise on its first. Landing on another
|
||||
dashboard shows its title and icon in the middle of the face for one second; a
|
||||
round panel has no rail.
|
||||
|
||||
### Geometry
|
||||
|
||||
@@ -282,7 +284,7 @@ look's muted text colour.
|
||||
| Ring band | 40 along the edge |
|
||||
| Ring arc | start 120°, sweep 300° (ends at 60°), centre-line radius c − 20, stroke 16 with round caps |
|
||||
| Slider | track over the sweep, value arc from the start to the value (none at the minimum), handle 28 across, its ticks as [dots](#dots-on-the-track); the value as the centre reading |
|
||||
| Slider with a reading | the reading as the centre reading; the gap line holds the title (muted) and the slider's value. The reading as a dot 10 across on the centre line at its fraction of the sweep ([Dots on the track](#dots-on-the-track)) |
|
||||
| Slider with a reading | the reading as the centre reading; the gap line holds the title (muted) and the slider's value. The reading as a dot 12 across on the centre line at its fraction of the sweep ([Dots on the track](#dots-on-the-track)) |
|
||||
| Selector | a value arc from the start to the selected option (none at the first), a dot 6 across per option at i/(n−1) of the sweep (one option: the middle), the selected one under the handle; its label as the centre reading, at most 36 |
|
||||
| Colour | hue h at h/360 of the sweep in 150 strokes of 2°, red at both ends; the handle filled with the colour; a swatch 96 across in the middle, with a hairline border |
|
||||
| Gauge | track and value arc, no handle; the value as the centre reading |
|
||||
@@ -326,10 +328,10 @@ dashboard's look's.
|
||||
|
||||
| What | Moves | From → to | Timing | Input during it |
|
||||
|---|---|---|---|---|
|
||||
| Face paging (round) | the new face and the old | new: x +48 (next) or −48 (previous), opacity 0 → x 0, opacity 1; old: x 0, opacity 1 → x −48 (next) or +48, opacity 0. Both at once | spring | another page retargets: each face heads for its new end from where it is |
|
||||
| Dashboard paging (round panel) | the new dashboard's face and the old | the same on y: the next rises from +48, the previous comes down from −48. One opened by its address only fades | spring | as faces |
|
||||
| Face paging (round) | the faces, side by side on a track | the track slides one face width S, the new face coming in from the side it lies on (the next from the right). A dot that skips faces brings its face in beside the one shown, so a turn is always one width | spring, from where the track is (a swipe's release speed carried on) | a new turn while one runs: the running one lands at once and the next starts |
|
||||
| Dashboard paging (round panel) | the dashboard, and beside it the next one's name | slides S up (the next, from below) or down (the previous, from above), the name pill centred on an otherwise empty face; once it has landed and the dashboard has loaded, the dashboard replaces its name in place. One opened by its address replaces the last at once | spring | further paging waits for the turn to land |
|
||||
| Page dot | the current dot and the last | muted at 0.5 opacity ↔ text colour at 1 | 200 ms, cubic-bezier(0.4, 0, 0.2, 1) | retargets |
|
||||
| Dashboard name | the pill | opacity 0 → 1, held 1000 ms, 1 → 0 | in 200 ms, out 150 ms, cubic-bezier(0.4, 0, 0.2, 1) | — |
|
||||
| Dashboard name | the pill | opacity 0 → 1, held 1000 ms, 1 → 0; on a dashboard a turn brought, where the name came in already, it starts at 1 | in 200 ms, out 150 ms, cubic-bezier(0.4, 0, 0.2, 1) | — |
|
||||
| Ring value set by a notch, a key or the engine | the value arc's end, the handle (slider, selector, colour) | from where it is drawn to the new fraction of the sweep | spring | each notch retargets from where it is, at the speed it has |
|
||||
| Ring value set by a drag | the same | follows the pointer exactly | none | — |
|
||||
| Hue across red | the colour handle | a change of more than half the sweep jumps to the other end | none | — |
|
||||
@@ -341,17 +343,31 @@ dashboard's look's.
|
||||
| Dashboard change (rectangular panel) | every tile | the old dashboard goes at once; each new tile opacity 0 → 1, y +8 → 0 | spring | — |
|
||||
| Rail | the current entry's marker | slides to the new entry | spring | retargets |
|
||||
|
||||
With reduced motion asked for, nothing travels: pages and dashboards only
|
||||
cross-fade (opacity at the spring), and every value is drawn at its new place
|
||||
at once. The dot and the name pill, which only change colour or opacity, keep
|
||||
their timing.
|
||||
With reduced motion asked for, nothing travels on its own: a page under the
|
||||
finger still follows it, but every turn, return and value lands at once. The
|
||||
dot and the name pill, which only change colour or opacity, keep their timing.
|
||||
|
||||
A device may simplify where its hardware is slow, keeping the direction and
|
||||
the end state: a page may slide without the fade, fade without the slide, or
|
||||
cut; a retarget may restart the curve from where it is without carrying the
|
||||
speed; a counting number may switch; and the value arc may be redrawn each
|
||||
frame as an arc to the eased angle, which is what the browser's reveal
|
||||
amounts to.
|
||||
the end state: a turn a key or a dot asked for may cut; a retarget may restart
|
||||
the curve from where it is without carrying the speed; a counting number may
|
||||
switch; and the value arc may be redrawn each frame as an arc to the eased
|
||||
angle, which is what the browser's reveal amounts to.
|
||||
|
||||
### Swiping
|
||||
|
||||
Faces are swiped sideways and a panel's dashboards up and down, with the page
|
||||
under the finger, as a tile view moves.
|
||||
|
||||
| Part | Value |
|
||||
|---|---|
|
||||
| Start | a press anywhere on the face but the ring band, which turns the ring instead |
|
||||
| Axis | none until the drag has gone 8 from where it began along either axis; then the longer of the two, kept until release |
|
||||
| Follow | the page moves with the drag one to one, and the page that way is drawn beside it, edge to edge, S away: the next face, or the next dashboard's name pill on an otherwise empty face |
|
||||
| Past the last | nothing beside it; the page moves 0.3 of the drag, at most 48 |
|
||||
| Release | turns if the drag went at least S/4 (90 on the Knob), or went at least 8 and was moving at least 500 a second towards the next page over its last 80 ms; otherwise goes back |
|
||||
| Turn, go back | the look's spring from where the page is, carrying the release speed; a device may use the look's cubic-bezier over its duration from where it is |
|
||||
| Press during a turn | lands the turn at once; the new drag starts from a page at rest |
|
||||
| A swipe that began on a control | is not a press of it |
|
||||
|
||||
## Showing one
|
||||
|
||||
|
||||
Reference in New Issue
Block a user