T44d Web · Stories stand alone: nested ones surface, hidden ones drop their demos, early themes land, pastes arrive
This commit is contained in:
1 parent
edab58e91a
commit
2463bb0ac9
22 files changed
+352
-172
No files matched your search
@@ -10,7 +10,7 @@ use gpui::{
|
||||
};
|
||||
|
||||
use crate::probe::probe;
|
||||
use crate::ui::{blocked, section, specimen, specimens};
|
||||
use crate::ui::{UNREAD, blocked, section, specimen, specimens};
|
||||
|
||||
const NAV: [&str; 5] = ["Home", "Docs", "Pricing", "Blog", "About"];
|
||||
|
||||
@@ -65,7 +65,7 @@ pub fn skip_link(window: &mut Window, cx: &mut App) -> impl IntoElement + use<>
|
||||
),
|
||||
)
|
||||
.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.",
|
||||
format!("LiveRegion / Announcer, AccessibleIcon, AriaLabel, ScreenReaderOnly: not yet shown: {UNREAD}."),
|
||||
cx,
|
||||
))
|
||||
}
|
||||
|
||||
@@ -193,7 +193,7 @@ pub fn shapes(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
|
||||
.child(*name),
|
||||
)
|
||||
});
|
||||
section(
|
||||
let moves = section(
|
||||
"Resizable · Rotatable · Selectable / SelectionArea · RubberBandSelection · Sortable",
|
||||
"A box resized from its edges or its grip; a picture turned by its knob, as gpui turns svgs alone; tiles taken by a band drawn on empty space; rows sorted by drag through motion::Reorder.",
|
||||
cx,
|
||||
@@ -254,73 +254,72 @@ pub fn shapes(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
|
||||
})),
|
||||
cx,
|
||||
)),
|
||||
);
|
||||
let presses = section(
|
||||
"LongPress · DoubleClick · Gesture · PanZoom",
|
||||
"A long press is primitives::Pressable; a double press is gpui's click_count. The wheel pans and, with Command, zooms layout::Viewport; two fingers swipe lists::SwipeableListItem.",
|
||||
cx,
|
||||
)
|
||||
.child(
|
||||
section(
|
||||
"LongPress · DoubleClick · Gesture · PanZoom",
|
||||
"A long press is primitives::Pressable; a double press is gpui's click_count. The wheel pans and, with Command, zooms layout::Viewport; two fingers swipe lists::SwipeableListItem.",
|
||||
cx,
|
||||
)
|
||||
.child(
|
||||
specimens()
|
||||
.child(specimen(
|
||||
"LongPress → primitives::Pressable",
|
||||
Pressable::new("interaction-press", move |down, _, cx| {
|
||||
let theme = cx.theme();
|
||||
div()
|
||||
.px_4()
|
||||
.py_3()
|
||||
.rounded_lg()
|
||||
.border_1()
|
||||
.border_color(theme.colors.border)
|
||||
.bg(if down { theme.colors.active } else { theme.colors.surface })
|
||||
.text_size(theme.text_size(TextSize::Sm))
|
||||
.child(format!("Pressed {presses} · held {held}"))
|
||||
.into_any_element()
|
||||
})
|
||||
.on_press(move |_, cx| change(&press, cx, |shapes| shapes.presses += 1))
|
||||
.on_long_press(move |_, cx| change(&long, cx, |shapes| shapes.held += 1)),
|
||||
cx,
|
||||
))
|
||||
.child(specimen(
|
||||
"DoubleClick",
|
||||
specimens()
|
||||
.child(specimen(
|
||||
"LongPress → primitives::Pressable",
|
||||
Pressable::new("interaction-press", move |down, _, cx| {
|
||||
let theme = cx.theme();
|
||||
div()
|
||||
.id("interaction-double")
|
||||
.px_4()
|
||||
.py_3()
|
||||
.rounded_lg()
|
||||
.border_1()
|
||||
.border_color(theme.colors.border)
|
||||
.tab_index(0)
|
||||
.focus_ring(cx)
|
||||
.bg(if down { theme.colors.active } else { theme.colors.surface })
|
||||
.text_size(theme.text_size(TextSize::Sm))
|
||||
.on_click(move |event, _, cx| {
|
||||
if event.click_count() == 2 {
|
||||
change(&double, cx, |shapes| shapes.doubles += 1)
|
||||
}
|
||||
})
|
||||
.child(format!("Opened {}", plural(doubles as u64, "time", "times"))),
|
||||
cx,
|
||||
))
|
||||
.child(specimen(
|
||||
"PanZoom → layout::Viewport",
|
||||
div().w(px(240.)).h(px(140.)).rounded_lg().border_1().border_color(theme.colors.border).overflow_hidden().child(
|
||||
Viewport::new("interaction-viewport", |view: Transform, _, cx| {
|
||||
let theme = cx.theme();
|
||||
let corner = view.apply(point(px(80.), px(30.)));
|
||||
div()
|
||||
.absolute()
|
||||
.left(corner.x)
|
||||
.top(corner.y)
|
||||
.size(px(80.) * view.scale)
|
||||
.rounded_lg()
|
||||
.bg(theme.colors.sunken)
|
||||
.into_any_element()
|
||||
}),
|
||||
),
|
||||
cx,
|
||||
)),
|
||||
)
|
||||
.child(blocked("Pinch: gpui hands a trackpad pinch to on_pinch, and the viewport does not zoom on it yet.", cx)),
|
||||
.child(format!("Pressed {presses} · held {held}"))
|
||||
.into_any_element()
|
||||
})
|
||||
.on_press(move |_, cx| change(&press, cx, |shapes| shapes.presses += 1))
|
||||
.on_long_press(move |_, cx| change(&long, cx, |shapes| shapes.held += 1)),
|
||||
cx,
|
||||
))
|
||||
.child(specimen(
|
||||
"DoubleClick",
|
||||
div()
|
||||
.id("interaction-double")
|
||||
.px_4()
|
||||
.py_3()
|
||||
.rounded_lg()
|
||||
.border_1()
|
||||
.border_color(theme.colors.border)
|
||||
.tab_index(0)
|
||||
.focus_ring(cx)
|
||||
.text_size(theme.text_size(TextSize::Sm))
|
||||
.on_click(move |event, _, cx| {
|
||||
if event.click_count() == 2 {
|
||||
change(&double, cx, |shapes| shapes.doubles += 1)
|
||||
}
|
||||
})
|
||||
.child(format!("Opened {}", plural(doubles as u64, "time", "times"))),
|
||||
cx,
|
||||
))
|
||||
.child(specimen(
|
||||
"PanZoom → layout::Viewport",
|
||||
div().w(px(240.)).h(px(140.)).rounded_lg().border_1().border_color(theme.colors.border).overflow_hidden().child(
|
||||
Viewport::new("interaction-viewport", |view: Transform, _, cx| {
|
||||
let theme = cx.theme();
|
||||
let corner = view.apply(point(px(80.), px(30.)));
|
||||
div()
|
||||
.absolute()
|
||||
.left(corner.x)
|
||||
.top(corner.y)
|
||||
.size(px(80.) * view.scale)
|
||||
.rounded_lg()
|
||||
.bg(theme.colors.sunken)
|
||||
.into_any_element()
|
||||
}),
|
||||
),
|
||||
cx,
|
||||
)),
|
||||
)
|
||||
.child(blocked("Pinch: gpui hands a trackpad pinch to on_pinch, and the viewport does not zoom on it yet.", cx));
|
||||
div().child(moves).child(presses)
|
||||
}
|
||||
@@ -27,7 +27,7 @@ pub fn menu_bar(cx: &mut App) -> impl IntoElement + use<> {
|
||||
cx,
|
||||
)
|
||||
.children(web_note(
|
||||
"A browser page has no menu bar, and gpui on the web keeps no cx.set_menus: this bar draws the gallery's own list of the same menus.",
|
||||
"A browser page has no menu bar, and gpui on the web keeps no cx.set_menus: this bar draws the gallery's own list of the same menus. About Ely would open a second window and Quit would end the app, neither of which a page can, so both only log.",
|
||||
cx,
|
||||
))
|
||||
.child(specimen(
|
||||
|
||||
@@ -15,7 +15,7 @@ use gpui::{
|
||||
|
||||
use crate::{
|
||||
probe::probe,
|
||||
ui::{blocked, code, picture, row, section, specimen, specimens},
|
||||
ui::{UNREAD, blocked, code, picture, row, section, specimen, specimens},
|
||||
};
|
||||
|
||||
const ATRIUM: &str = asset!("atrium.jpg");
|
||||
@@ -193,10 +193,8 @@ pub fn backdrop(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
|
||||
}
|
||||
|
||||
pub fn visually_hidden(cx: &App) -> impl IntoElement + use<> {
|
||||
section("VisuallyHidden", "Text for screen readers only.", cx).child(blocked(
|
||||
"Not yet shown: gpui builds an AccessKit tree from elements with an id and a role, and no screen reader here reads it.",
|
||||
cx,
|
||||
))
|
||||
section("VisuallyHidden", "Text for screen readers only.", cx)
|
||||
.child(blocked(format!("Not yet shown: {UNREAD}."), cx))
|
||||
}
|
||||
|
||||
fn chip(id: &'static str, label: &'static str, cx: &App) -> impl IntoElement + use<> {
|
||||
|
||||
@@ -8,7 +8,7 @@ use gpui::{App, IntoElement, ParentElement, SharedString, Styled, Window, div, p
|
||||
|
||||
use crate::{
|
||||
probe::probe,
|
||||
ui::{keep, section, set},
|
||||
ui::{keep, section, set, web_note},
|
||||
};
|
||||
|
||||
type Cells = HashMap<(usize, usize), SharedString>;
|
||||
@@ -35,6 +35,10 @@ pub fn data_grid(window: &mut Window, cx: &mut App) -> impl IntoElement + use<>
|
||||
"Cells to edit like a spreadsheet's. Arrows walk, Shift stretches a range, typing or a double press edits, Delete clears, and Cmd-C and Cmd-V copy and paste.",
|
||||
cx,
|
||||
)
|
||||
.children(web_note(
|
||||
"A browser reads its clipboard only as it pastes into a text field, so Cmd-V pastes no cells here.",
|
||||
cx,
|
||||
))
|
||||
.child(probe(
|
||||
"grid",
|
||||
div().child(
|
||||
|
||||
@@ -50,7 +50,7 @@ fn live(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
|
||||
{
|
||||
let _ = window;
|
||||
section.child(crate::ui::blocked(
|
||||
"A browser starts no processes and has no pseudo-terminal, so no shell runs here, and alacritty's grid, which draws the build's output, does not build for the web. The blocks, colored output, logs and processes below draw without one.",
|
||||
"A browser starts no processes and has no pseudo-terminal, so no shell runs here, and alacritty's grid, which draws the build's output, does not build for the web. The page's other stories, command blocks, colored output, logs and processes, draw without one.",
|
||||
cx,
|
||||
))
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user