gpui-kit GitHub

Scenes

search-field

Builds FindReplace HighlightedText SearchField Select TextArea TextInput

search-field in the dark theme
studio-dark
search-field in the light theme
studio-light

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 search_field(window: &mut Window, cx: &mut App) -> AnyElement {
    ensure_search(window, cx);
    let field = cx.global::<SceneSearch>().field.clone();
    let theme = cx.theme().clone();

    // The three counts a field must keep apart. No pointer position produces
    // them at once, so each is stated.
    stack(&theme)
        .w(px(620.0))
        .child(field)
        .child(caption(
            &theme,
            "counting is not none, and too many is not a total",
        ))
        .child(
            row(&theme)
                .child(hit_count_sample(&theme, "counting", HitCount::Counting))
                .child(hit_count_sample(&theme, "none", HitCount::None))
                .child(hit_count_sample(
                    &theme,
                    "too many",
                    HitCount::TooMany { counted: 500 },
                )),
        )
        .child(caption(&theme, "the current hit is not the other hits"))
        .child(
            div().child(
                HighlightedText::new(
                    "The transport reports what it did; the transport never decides.",
                )
                .id("scene.search.line")
                .hits([4..13, 39..48])
                .current(1),
            ),
        )
        .into_any_element()
}