ZacharyZhang-NY
4c3ed1bbb9
gpui and gpui_platform now come from Zed's repo by git at 1a28cff, the code gpui-pre 0.3.7 republishes, so the gallery can later build for the browser. gpui takes stacker, as 0.2.2 always did, and gpui_platform takes font-kit, without which macOS draws no text; runtime_shaders moves to gpui_platform. The API moved: focus, blur and Tab steps take cx, Corner is Anchor, shaped lines paint with an alignment, defer_draw takes a content mask, the inspector registers a factory, async updates return their value, and wrapped lines are shared, not cloned. Updates through a window context go through the window, so a closed window still ends them as it did. Where the new gpui behaves differently, Ely keeps its old intent. Holds and reveals under a resting pointer survive typing through gpui's input-modality-independent hover; previews the keyboard also moves keep the default, and the calendar's leave ignores a key press. Enter reaches a button inside the code editor, since gpui now arms a key click on the press. The event logger skips a lone modifier. A video and an image grid keep their shape in a flex column under taffy 0.13, as a picture does. AGENTS.md records the new stack and the rules this port changes; the rest of the old gpui and taffy rules are re-tested in T44c.
123 lines
3.8 KiB
Rust
123 lines
3.8 KiB
Rust
use std::time::Duration;
|
|
|
|
use ely_gpui_component::{
|
|
buttons::{Button, ButtonVariant},
|
|
theme::{ActiveTheme, TextSize},
|
|
typography::{AnimatedNumber, GradientText, ShimmerText, Typewriter},
|
|
};
|
|
use gpui::{App, IntoElement, ParentElement, Styled, Task, Window, div};
|
|
|
|
use crate::ui::{row, section, specimen, specimens};
|
|
|
|
const STEP: Duration = Duration::from_millis(1600);
|
|
const VALUES: [f64; 5] = [1_284.0, 1_917.0, 12_406.0, 9_998.0, 10_031.0];
|
|
|
|
struct Ticker {
|
|
index: usize,
|
|
_task: Task<()>,
|
|
}
|
|
|
|
pub fn animated_number(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
|
|
let ticker = window.use_keyed_state("type-ticker", cx, |window, cx| Ticker {
|
|
index: 0,
|
|
_task: cx.spawn_in(window, async move |ticker, cx| {
|
|
loop {
|
|
cx.background_executor().timer(STEP).await;
|
|
let advanced = cx.update(|_, cx| {
|
|
ticker.update(cx, |ticker: &mut Ticker, cx| {
|
|
ticker.index = (ticker.index + 1) % VALUES.len();
|
|
cx.notify();
|
|
})
|
|
});
|
|
if advanced.and_then(|inner| inner).is_err() {
|
|
return;
|
|
}
|
|
}
|
|
}),
|
|
});
|
|
let value = VALUES[ticker.read(cx).index];
|
|
section(
|
|
"AnimatedNumber",
|
|
"Digits roll by place; or the value counts up.",
|
|
cx,
|
|
)
|
|
.child(
|
|
specimens()
|
|
.gap_12()
|
|
.child(specimen("roll", AnimatedNumber::new("roll", value), cx))
|
|
.child(specimen(
|
|
"count up",
|
|
AnimatedNumber::new("count", value * 3.7)
|
|
.decimals(1)
|
|
.count_up(),
|
|
cx,
|
|
)),
|
|
)
|
|
}
|
|
|
|
pub fn typewriter(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
|
|
let take = window.use_keyed_state("type-take", cx, |_, _| 0usize);
|
|
let lines = [
|
|
"Writing, one grapheme at a time.",
|
|
"中文与 emoji ✨ 也按字形逐个出现。",
|
|
];
|
|
let line = lines[*take.read(cx) % lines.len()];
|
|
section(
|
|
"Typewriter",
|
|
"Reveals by grapheme, so emoji and CJK stay whole.",
|
|
cx,
|
|
)
|
|
.child(
|
|
row()
|
|
.gap_6()
|
|
.child(div().min_w_80().child(Typewriter::new("typewriter", line)))
|
|
.child(
|
|
Button::new("type-again", "Next line")
|
|
.variant(ButtonVariant::Ghost)
|
|
.on_click(move |_, _, cx| {
|
|
take.update(cx, |take, cx| {
|
|
*take += 1;
|
|
cx.notify();
|
|
})
|
|
}),
|
|
),
|
|
)
|
|
}
|
|
|
|
pub fn gradient(cx: &App) -> impl IntoElement + use<> {
|
|
let colors = &cx.theme().colors;
|
|
let (ink, focus) = (colors.fg, colors.focus);
|
|
let display = cx.theme().text_size(TextSize::Display);
|
|
section("GradientText", "A tonal ramp, glyph by glyph. No neon.", cx).child(
|
|
specimens()
|
|
.gap_10()
|
|
.child(specimen(
|
|
"ink to muted",
|
|
div()
|
|
.text_size(display)
|
|
.child(GradientText::new("Quiet type")),
|
|
cx,
|
|
))
|
|
.child(specimen(
|
|
"ink to focus",
|
|
div()
|
|
.text_size(display)
|
|
.child(GradientText::new("Quiet type").colors(ink, focus)),
|
|
cx,
|
|
)),
|
|
)
|
|
}
|
|
|
|
pub fn shimmer(cx: &App) -> impl IntoElement + use<> {
|
|
section(
|
|
"ShimmerText",
|
|
"A slow band of light while something loads.",
|
|
cx,
|
|
)
|
|
.child(
|
|
div()
|
|
.text_size(cx.theme().text_size(TextSize::Lg))
|
|
.child(ShimmerText::new("shimmer", "Thinking through the request…")),
|
|
)
|
|
}
|