Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

gpui: Add a standard text example (#30747)

Browse source 
This is a dumb first pass at a standard text example. We'll use this to
start digging in to some text/scale rendering issues.

There will be a ton of follow-up features to this, but starting simple.

Release Notes:

- N/A
This commit is contained in:
Nate Butler 2025-05-16 17:35:44 +02:00 • committed by GitHub
parent 9dabf491f0
commit e26620d1cf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
30 changed files with 606 additions and 362 deletions
Download patch file Download diff file Expand all files Collapse all files

93
crates/story/src/story.rs
View file

@ -1,6 +1,5 @@
use gpui::{
AnyElement, App, DefaultColor, DefaultColors, Div, SharedString, Window, div, prelude::*, px,
rems,
AnyElement, App, Div, SharedString, Window, colors::DefaultColors, div, prelude::*, px, rems,
};
use itertools::Itertools;
use smallvec::SmallVec;
@ -8,9 +7,7 @@ use smallvec::SmallVec;
pub struct Story {}
impl Story {
pub fn container() -> gpui::Stateful<Div> {
let colors = DefaultColors::light();
pub fn container(cx: &App) -> gpui::Stateful<Div> {
div()
.id("story_container")
.overflow_y_scroll()
@ -18,84 +15,66 @@ impl Story {
.min_h_full()
.flex()
.flex_col()
.text_color(DefaultColor::Text.hsla(&colors))
.bg(DefaultColor::Background.hsla(&colors))
.text_color(cx.default_colors().text)
.bg(cx.default_colors().background)
}
pub fn title(title: impl Into<SharedString>) -> impl Element {
let colors = DefaultColors::light();
pub fn title(title: impl Into<SharedString>, cx: &App) -> impl Element {
div()
.text_xs()
.text_color(DefaultColor::Text.hsla(&colors))
.text_color(cx.default_colors().text)
.child(title.into())
}
pub fn title_for<T>() -> impl Element {
Self::title(std::any::type_name::<T>())
pub fn title_for<T>(cx: &App) -> impl Element {
Self::title(std::any::type_name::<T>(), cx)
}
pub fn section() -> Div {
let colors = DefaultColors::light();
pub fn section(cx: &App) -> Div {
div()
.p_4()
.m_4()
.border_1()
.border_color(DefaultColor::Separator.hsla(&colors))
.border_color(cx.default_colors().separator)
}
pub fn section_title() -> Div {
let colors = DefaultColors::light();
div().text_lg().text_color(DefaultColor::Text.hsla(&colors))
pub fn section_title(cx: &App) -> Div {
div().text_lg().text_color(cx.default_colors().text)
}
pub fn group() -> Div {
let colors = DefaultColors::light();
div().my_2().bg(DefaultColor::Container.hsla(&colors))
pub fn group(cx: &App) -> Div {
div().my_2().bg(cx.default_colors().container)
}
pub fn code_block(code: impl Into<SharedString>) -> Div {
let colors = DefaultColors::light();
pub fn code_block(code: impl Into<SharedString>, cx: &App) -> Div {
div()
.size_full()
.p_2()
.max_w(rems(36.))
.bg(DefaultColor::Container.hsla(&colors))
.bg(cx.default_colors().container)
.rounded_sm()
.text_sm()
.text_color(DefaultColor::Text.hsla(&colors))
.text_color(cx.default_colors().text)
.overflow_hidden()
.child(code.into())
}
pub fn divider() -> Div {
let colors = DefaultColors::light();
div()
.my_2()
.h(px(1.))
.bg(DefaultColor::Separator.hsla(&colors))
pub fn divider(cx: &App) -> Div {
div().my_2().h(px(1.)).bg(cx.default_colors().separator)
}
pub fn description(description: impl Into<SharedString>) -> impl Element {
let colors = DefaultColors::light();
pub fn description(description: impl Into<SharedString>, cx: &App) -> impl Element {
div()
.text_sm()
.text_color(DefaultColor::Text.hsla(&colors))
.text_color(cx.default_colors().text)
.min_w_96()
.child(description.into())
}
pub fn label(label: impl Into<SharedString>) -> impl Element {
let colors = DefaultColors::light();
pub fn label(label: impl Into<SharedString>, cx: &App) -> impl Element {
div()
.text_xs()
.text_color(DefaultColor::Text.hsla(&colors))
.text_color(cx.default_colors().text)
.child(label.into())
}
@ -135,8 +114,8 @@ impl StoryItem {
}
impl RenderOnce for StoryItem {
fn render(self, _window: &mut Window, _cx: &mut App) -> impl IntoElement {
let colors = DefaultColors::light();
fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
let colors = cx.default_colors();
div()
.my_2()
@ -148,20 +127,20 @@ impl RenderOnce for StoryItem {
.px_2()
.w_1_2()
.min_h_px()
.child(Story::label(self.label))
.child(Story::label(self.label, cx))
.child(
div()
.rounded_sm()
.bg(DefaultColor::Background.hsla(&colors))
.bg(colors.background)
.border_1()
.border_color(DefaultColor::Border.hsla(&colors))
.border_color(colors.border)
.py_1()
.px_2()
.overflow_hidden()
.child(self.item),
)
.when_some(self.description, |this, description| {
this.child(Story::description(description))
this.child(Story::description(description, cx))
}),
)
.child(
@ -171,8 +150,8 @@ impl RenderOnce for StoryItem {
.w_1_2()
.min_h_px()
.when_some(self.usage, |this, usage| {
this.child(Story::label("Example Usage"))
.child(Story::code_block(usage))
this.child(Story::label("Example Usage", cx))
.child(Story::code_block(usage, cx))
}),
)
}
@ -205,21 +184,21 @@ impl StorySection {
}
impl RenderOnce for StorySection {
fn render(self, _window: &mut Window, _cx: &mut App) -> impl IntoElement {
fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
let children: SmallVec<[AnyElement; 2]> = SmallVec::from_iter(Itertools::intersperse_with(
self.children.into_iter(),
|| Story::divider().into_any_element(),
|| Story::divider(cx).into_any_element(),
));
Story::section()
Story::section(cx)
// Section title
.py_2()
// Section description
.when_some(self.description.clone(), |section, description| {
section.child(Story::description(description))
section.child(Story::description(description, cx))
})
.child(div().flex().flex_col().gap_2().children(children))
.child(Story::divider())
.child(Story::divider(cx))
}
}