ZacharyZhang-NYandClaude Opus 5.5
d7272e88bd
Every page and scripted state was shot with gpui 0.2.2 and with the port, light and dark, full width and at 280px, judged pair by pair by agents with skeptics, and every page's log diffed. What differed is fixed, each with a test that fails without it where the test platform can show it: - The gallery's harness takes posted mouse moves (gpui_macos listens to a tracking area), posts each drag move twice (it no longer replays a held drag), and waits three frames before each shot. - Rolling digits: a block column, so taffy 0.13 lends the cell no baseline, and a line of whole device pixels, since gpui snaps each length on its own. DescriptionList's row aligns ends. - Margins that taffy 0.13 collapses through a plain block: the drawer's pull and snap, the stagger and transition rise, the dialog and palette rises, the fullscreen dialog's slide. - An Input keeps room to type in a squeezed row; the field rows drop w_full, whose reason was taffy 0.9's. AGENTS.md's rules that named gpui 0.2.2 or taffy 0.9 were re-tested against both sources and rewritten, and new ones say what the port changed. TASKS.md's tags follow: what the new gpui makes possible is prove. Captions, doc comments and README say what holds now. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
102 lines
3.5 KiB
Rust
102 lines
3.5 KiB
Rust
use ely_gpui_component::{
|
|
buttons::{Button, ButtonVariant},
|
|
forms::Switch,
|
|
i18n::SkipLink,
|
|
theme::{ActiveTheme, HUE_NAMES, Radius, Theme},
|
|
};
|
|
use gpui::{
|
|
App, ElementId, InteractiveElement, IntoElement, ParentElement, SharedString, Styled, Window,
|
|
div, px,
|
|
};
|
|
|
|
use crate::probe::probe;
|
|
use crate::ui::{blocked, section, specimen, specimens};
|
|
|
|
const NAV: [&str; 5] = ["Home", "Docs", "Pricing", "Blog", "About"];
|
|
|
|
pub fn skip_link(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
|
|
let main = window
|
|
.use_keyed_state("skip-main", cx, |_, cx| cx.focus_handle())
|
|
.read(cx)
|
|
.clone();
|
|
let theme = cx.theme();
|
|
let nav = NAV.map(|name| {
|
|
let id = ElementId::Name(SharedString::from(format!("skip-nav-{name}")));
|
|
Button::new(id, name).variant(ButtonVariant::Ghost)
|
|
});
|
|
section(
|
|
"SkipLink · KeyboardNavigationHelper",
|
|
"A link that shows only while focused and moves focus past the nav to the main part: Tab into the card, then Enter. Arrows among a group's items live in interaction::RovingFocus.",
|
|
cx,
|
|
)
|
|
.child(
|
|
probe(
|
|
"skip-demo",
|
|
div()
|
|
.max_w(px(480.0))
|
|
.flex()
|
|
.flex_col()
|
|
.rounded(theme.radius(Radius::Lg))
|
|
.border_1()
|
|
.border_color(theme.colors.border)
|
|
.child(SkipLink::new("skip", "Skip to content", &main))
|
|
.child(
|
|
div()
|
|
.flex()
|
|
.flex_wrap()
|
|
.gap_1()
|
|
.p_2()
|
|
.border_b_1()
|
|
.border_color(theme.colors.border)
|
|
.children(nav),
|
|
)
|
|
.child(
|
|
div()
|
|
.track_focus(&main)
|
|
.flex()
|
|
.flex_col()
|
|
.items_start()
|
|
.gap_3()
|
|
.p_4()
|
|
.text_color(theme.colors.fg_muted)
|
|
.child("The main part starts here.")
|
|
.child(Button::new("skip-read", "Read the guide")),
|
|
),
|
|
),
|
|
)
|
|
.child(blocked(
|
|
"LiveRegion / Announcer, AccessibleIcon, AriaLabel, ScreenReaderOnly: not yet shown: gpui builds an AccessKit tree from elements with an id and a role, and no screen reader here reads it.",
|
|
cx,
|
|
))
|
|
}
|
|
|
|
pub fn color_blind(cx: &App) -> impl IntoElement + use<> {
|
|
let theme = cx.theme();
|
|
let on = theme.color_blind_safe();
|
|
let swatches = HUE_NAMES
|
|
.iter()
|
|
.zip(theme.colors.chart)
|
|
.map(|(name, color)| {
|
|
specimen(
|
|
*name,
|
|
div()
|
|
.size(px(40.0))
|
|
.rounded(theme.radius(Radius::Md))
|
|
.bg(color),
|
|
cx,
|
|
)
|
|
});
|
|
section(
|
|
"ColorBlindSafe Palette",
|
|
"Ely's chart hues share one lightness, so protanopia, deuteranopia and tritanopia run some together. The safe hues differ in lightness too: every pair stays apart for each, and each is 3:1 on its page.",
|
|
cx,
|
|
)
|
|
.child(probe(
|
|
"color-blind",
|
|
Switch::new("color-blind", on)
|
|
.label("Color-blind safe charts")
|
|
.on_change(|on, _, cx| Theme::set_color_blind_safe(on, cx)),
|
|
))
|
|
.child(specimens().gap_3().children(swatches))
|
|
}
|