Scenes

reading-direction

Builds Accordion Badge Breadcrumb Button Icon Tabs Toggle ToggleGroup Tree

The code that drew it

A still frame holds a repeating animation at its first frame and a one-shot at its last, because a still of a moving thing is not reproducible. Run the gallery to review motion.

fn reading_direction(_window: &mut Window, cx: &mut App) -> AnyElement {
    let theme = cx.theme().clone();
    let direction = cx.layout_direction();
    stack(&theme)
        .w(px(560.0))
        .child(
            Breadcrumb::new("scene.rtl.trail")
                .crumbs([
                    Crumb::new("workspace", "Workspace"),
                    Crumb::new("runs", "Runs"),
                    Crumb::new("run-4821", "Indexing"),
                ])
                .on_select(|_, _, _| {}),
        )
        .child(
            Tabs::new("scene.rtl.tabs")
                .tabs([
                    TabItem::new("overview", "Overview").icon(Icon::Widget),
                    TabItem::new("runs", "Runs").badge("12"),
                    TabItem::new("logs", "Logs"),
                ])
                .selected("runs")
                .on_select(|_, _, _| {}),
        )
        .child(
            div()
                .row_reading(direction)
                .gap(px(theme.space(Space::Md)))
                .items_start()
                .child(
                    div().w(px(240.0)).child(
                        Tree::new("scene.rtl.tree")
                            .expanded_ids(&["workspace"])
                            .selected("tokens")
                            .nodes([TreeNode::new("workspace", "workspace")
                                .icon(Icon::Folder)
                                .children([
                                    TreeNode::new("crates", "crates")
                                        .icon(Icon::Folder)
                                        .children([
                                            TreeNode::new("kit", "gpui-kit").icon(Icon::Document)
                                        ]),
                                    TreeNode::new("tokens", "tokens").icon(Icon::Document),
                                ])])
                            .on_toggle(|_, _, _, _| {})
                            .on_select(|_, _, _| {}),
                    ),
                )
                .child(
                    div().flex_1().child(
                        Accordion::new("scene.rtl.sections")
                            .expanded_ids(&["network"])
                            .on_toggle(|_, _, _, _| {})
                            .section(
                                AccordionSection::new("network", "Network")
                                    .description("How this machine reaches a host")
                                    .body(div().child("Requests go out over the system proxy.")),
                            )
                            .section(
                                AccordionSection::new("storage", "Storage")
                                    .description("Where verified results are kept"),
                            ),
                    ),
                ),
        )
        .child(
            div()
                .row_reading(direction)
                .gap(px(theme.space(Space::Md)))
                // Directional glyphs on the top row, fixed ones below the
                // names, so a reviewer can see which turned around.
                .child(IconView::new(Icon::Magnifier).large().muted())
                .child(IconView::new(Icon::AltArrowRight).large().muted())
                .child(IconView::new(Icon::Return).large().muted())
                .child(IconView::new(Icon::Check).large().tone(IconTone::Success))
                .child(IconView::new(Icon::Settings).large().muted())
                .child(IconView::new(Icon::AltArrowDown).large().muted())
                .child(
                    IconView::named("scene.rtl.alone", Icon::Danger, "Run failed")
                        .large()
                        .tone(IconTone::Danger),
                ),
        )
        .child(
            div()
                .row_reading(direction)
                .gap(px(theme.space(Space::Sm)))
                .child(
                    Button::new("scene.rtl.save")
                        .label("Save")
                        .primary()
                        .icon(Icon::Check)
                        .on_click(|_, _| {}),
                )
                .child(
                    Button::new("scene.rtl.cancel")
                        .label("Cancel")
                        .secondary()
                        .on_click(|_, _| {}),
                ),
        )
        .into_any_element()
}