dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

story: Fix story and merge checkbox, radio to switch story.

Browse source
This commit is contained in:
Jason Lee 2025-01-21 10:43:10 +08:00
parent 20feab5f40
commit 493acdefab
3 changed files with 291 additions and 266 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

125
crates/story/src/scrollable_story.rs
View file

@ -2,9 +2,8 @@ use std::cell::Cell;
use std::rc::Rc; use std::rc::Rc;
use gpui::{ use gpui::{
div, px, size, Entity, InteractiveElement, ParentElement, Pixels, Render, ScrollHandle, div, px, size, Entity, InteractiveElement, IntoElement, ParentElement, Pixels, Render,
SharedString, Size, StatefulInteractiveElement as _, Styled, View, ViewContext, VisualContext, ScrollHandle, SharedString, Size, Styled, View, ViewContext, VisualContext, WindowContext,
WindowContext,
}; };
use ui::button::Button; use ui::button::Button;
use ui::divider::Divider; use ui::divider::Divider;
@ -89,6 +88,61 @@ impl ScrollableStory {
self.message = SharedString::from(msg.to_string()); self.message = SharedString::from(msg.to_string());
cx.notify(); cx.notify();
} }
fn render_buttons(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
h_flex()
.gap_2()
.justify_between()
.child(
h_flex()
.gap_2()
.child(Button::new("test-0").label("Size 0").on_click(cx.listener(
|view, _, cx| {
view.change_test_cases(0, cx);
},
)))
.child(Button::new("test-1").label("Size 1").on_click(cx.listener(
|view, _, cx| {
view.change_test_cases(1, cx);
},
)))
.child(Button::new("test-2").label("Size 2").on_click(cx.listener(
|view, _, cx| {
view.change_test_cases(2, cx);
},
)))
.child(Button::new("test-3").label("Size 3").on_click(cx.listener(
|view, _, cx| {
view.change_test_cases(3, cx);
},
)))
.child(Divider::vertical().px_2())
.child(
Button::new("test-axis-both")
.label("Both Scrollbar")
.on_click(
cx.listener(|view, _, cx| {
view.change_axis(ScrollbarAxis::Both, cx)
}),
),
)
.child(
Button::new("test-axis-vertical")
.label("Vertical")
.on_click(cx.listener(|view, _, cx| {
view.change_axis(ScrollbarAxis::Vertical, cx)
})),
)
.child(
Button::new("test-axis-horizontal")
.label("Horizontal")
.on_click(cx.listener(|view, _, cx| {
view.change_axis(ScrollbarAxis::Horizontal, cx)
})),
),
)
.child(Label::new(self.message.clone()))
}
} }
impl super::Story for ScrollableStory { impl super::Story for ScrollableStory {
@ -97,7 +151,8 @@ impl super::Story for ScrollableStory {
} }
fn description() -> &'static str { fn description() -> &'static str {
"Add vertical or horizontal, or both scrollbars to a container, and use `virtual_list` to render a large number of items." "Add vertical or horizontal, or both scrollbars to a container, \
and use `virtual_list` to render a large number of items."
} }
fn new_view(cx: &mut WindowContext) -> View<impl gpui::FocusableView> { fn new_view(cx: &mut WindowContext) -> View<impl gpui::FocusableView> {
@ -118,58 +173,7 @@ impl Render for ScrollableStory {
v_flex() v_flex()
.size_full() .size_full()
.gap_4() .gap_4()
.child( .child(self.render_buttons(cx))
h_flex()
.gap_2()
.justify_between()
.child(
h_flex()
.gap_2()
.child(Button::new("test-0").label("Size 0").on_click(cx.listener(
|view, _, cx| {
view.change_test_cases(0, cx);
},
)))
.child(Button::new("test-1").label("Size 1").on_click(cx.listener(
|view, _, cx| {
view.change_test_cases(1, cx);
},
)))
.child(Button::new("test-2").label("Size 2").on_click(cx.listener(
|view, _, cx| {
view.change_test_cases(2, cx);
},
)))
.child(Button::new("test-3").label("Size 3").on_click(cx.listener(
|view, _, cx| {
view.change_test_cases(3, cx);
},
)))
.child(Divider::vertical().px_2())
.child(
Button::new("test-axis-both")
.label("Both Scrollbar")
.on_click(cx.listener(|view, _, cx| {
view.change_axis(ScrollbarAxis::Both, cx)
})),
)
.child(
Button::new("test-axis-vertical")
.label("Vertical")
.on_click(cx.listener(|view, _, cx| {
view.change_axis(ScrollbarAxis::Vertical, cx)
})),
)
.child(
Button::new("test-axis-horizontal")
.label("Horizontal")
.on_click(cx.listener(|view, _, cx| {
view.change_axis(ScrollbarAxis::Horizontal, cx)
})),
),
)
.child(Label::new(self.message.clone())),
)
.child( .child(
div().w_full().child( div().w_full().child(
div().relative().w_full().h(px(350.)).child( div().relative().w_full().h(px(350.)).child(
@ -257,17 +261,16 @@ impl Render for ScrollableStory {
.border_1() .border_1()
.border_color(cx.theme().border) .border_color(cx.theme().border)
.w_full() .w_full()
.flex_1()
.overflow_hidden() .overflow_hidden()
.max_h(px(400.))
.child( .child(
v_flex() v_flex()
.id("test-1")
.scrollable(cx.view().entity_id(), ScrollbarAxis::Vertical)
.focusable()
.p_3() .p_3()
.w(self.test_width) .w(self.test_width)
.id("test-1")
.scrollable(cx.view().entity_id(), ScrollbarAxis::Vertical)
.gap_1() .gap_1()
.child("Hello world") .child("Scrollable Example")
.children(self.items.iter().take(500).map(|item| { .children(self.items.iter().take(500).map(|item| {
div() div()
.h(ITEM_HEIGHT) .h(ITEM_HEIGHT)

196
crates/story/src/switch_story.rs
View file

@ -1,18 +1,25 @@
use gpui::{ use gpui::{
Div, IntoElement, ParentElement, Render, SharedString, Styled, View, ViewContext, div, px, Div, IntoElement, ParentElement, Render, SharedString, Styled, View, ViewContext,
VisualContext as _, WindowContext, VisualContext as _, WindowContext,
}; };
use ui::{ use ui::{
h_flex, label::Label, switch::Switch, theme::ActiveTheme, v_flex, Disableable as _, Side, checkbox::Checkbox, h_flex, label::Label, radio::Radio, switch::Switch, theme::ActiveTheme,
Sizable, StyledExt, v_flex, Disableable as _, Side, Sizable, StyledExt,
}; };
use crate::section;
pub struct SwitchStory { pub struct SwitchStory {
focus_handle: gpui::FocusHandle, focus_handle: gpui::FocusHandle,
switch1: bool, switch1: bool,
switch2: bool, switch2: bool,
switch3: bool, switch3: bool,
check1: bool,
check2: bool,
check3: bool,
radio_check1: bool,
radio_check2: bool,
} }
impl super::Story for SwitchStory { impl super::Story for SwitchStory {
@ -21,7 +28,7 @@ impl super::Story for SwitchStory {
} }
fn description() -> &'static str { fn description() -> &'static str {
"A control that allows the user to toggle between two states." "Switch, Radio, Checkbox components testing and examples"
} }
fn new_view(cx: &mut WindowContext) -> View<impl gpui::FocusableView> { fn new_view(cx: &mut WindowContext) -> View<impl gpui::FocusableView> {
@ -40,6 +47,11 @@ impl SwitchStory {
switch1: true, switch1: true,
switch2: false, switch2: false,
switch3: true, switch3: true,
check1: false,
check2: false,
check3: true,
radio_check1: false,
radio_check2: true,
} }
} }
} }
@ -71,19 +83,21 @@ impl Render for SwitchStory {
.border_color(theme.border) .border_color(theme.border)
} }
v_flex().gap_6() v_flex().gap_6().child(
.child(
v_flex() v_flex()
.items_start() .items_start()
.justify_center() .justify_center()
.gap_4() .gap_4()
.child( .child(
card(cx) card(cx)
.child( .child(
title("Marketing emails").child( title("Marketing emails").child(
Label::new("Receive emails about new products, features, and more.").text_color(theme.muted_foreground) Label::new(
"Receive emails about new products, features, and more.",
)
.text_color(theme.muted_foreground),
),
) )
)
.child( .child(
Switch::new("switch1") Switch::new("switch1")
.checked(self.switch1) .checked(self.switch1)
@ -97,11 +111,15 @@ impl Render for SwitchStory {
) )
.child( .child(
card(cx) card(cx)
.child( .child(
title("Security emails").child( title("Security emails").child(
Label::new("Receive emails about your account security. When turn off, you never receive email again.").text_color(theme.muted_foreground) Label::new(
"Receive emails about your account security. \
When turn off, you never receive email again.",
)
.text_color(theme.muted_foreground),
),
) )
)
.child( .child(
Switch::new("switch2") Switch::new("switch2")
.checked(self.switch2) .checked(self.switch2)
@ -112,34 +130,136 @@ impl Render for SwitchStory {
), ),
) )
.child( .child(
card(cx).v_flex() card(cx)
.items_start().child(title("Disabled Switches")).child( .v_flex()
h_flex().items_center() .items_start()
.gap_6() .child(title("Disabled Switches"))
.child(Switch::new("switch3").disabled(true).on_click(|v, _| {
println!("Switch value changed: {:?}", v);
}))
.child( .child(
Switch::new("switch3_1").label("Airplane Mode") h_flex()
.checked(true) .items_center()
.disabled(true) .gap_6()
.on_click(|ev, _| { .child(Switch::new("switch3").disabled(true).on_click(|v, _| {
println!("Switch value changed: {:?}", ev); println!("Switch value changed: {:?}", v);
}), }))
)) .child(
Switch::new("switch3_1")
.label("Airplane Mode")
.checked(true)
.disabled(true)
.on_click(|ev, _| {
println!("Switch value changed: {:?}", ev);
}),
),
),
) )
.child( .child(
card(cx).v_flex() card(cx)
.items_start().child(title("Small Switches")).child( .v_flex()
h_flex().items_center() .items_start()
.gap_6() .child(title("Small Switches"))
.child(Switch::new("switch3").checked(self.switch3).label("Small Size").small().on_click(cx.listener(move |view, checked, cx| { .child(
view.switch3 = *checked; h_flex().items_center().gap_6().child(
cx.notify(); Switch::new("switch3")
})), .checked(self.switch3)
) .label("Small Size")
.small()
.on_click(cx.listener(move |view, checked, cx| {
view.switch3 = *checked;
cx.notify();
})),
),
),
)
.child(
section("Checkbox", cx).child(
h_flex()
.w_full()
.items_start()
.gap_6()
.child(Checkbox::new("check1").checked(self.check1).on_click(
cx.listener(|v, _, _| {
v.check1 = !v.check1;
}),
))
.child(
Checkbox::new("check2")
.checked(self.check2)
.label("Subscribe to newsletter")
.on_click(cx.listener(|v, _, _| {
v.check2 = !v.check2;
})),
)
.child(
Checkbox::new("check3")
.checked(self.check3)
.label("Remember me")
.on_click(cx.listener(|v, _, _| {
v.check3 = !v.check3;
})),
)
.child(div().w(px(300.)).child(
Checkbox::new("longlong-checkbox").label(
"The long long label text, \
it should ellipsis when the text is too long.",
),
)),
),
)
.child(
section("Disabled Checkbox", cx).child(
h_flex()
.w_full()
.items_center()
.gap_6()
.child(
Checkbox::new("check3")
.label("Disabled Checked")
.checked(true)
.disabled(true),
)
.child(
Checkbox::new("check3_1")
.label("Disabled Unchecked")
.checked(false)
.disabled(true),
),
),
)
.child(
section("Radio", cx).child(
h_flex()
.w_full()
.gap_4()
.items_start()
.child(Radio::new("radio1").checked(self.radio_check1).on_click(
cx.listener(|this, v, _cx| {
this.radio_check1 = *v;
}),
))
.child(
Radio::new("radio2")
.label("Radio")
.checked(self.radio_check2)
.on_click(cx.listener(|this, v, _cx| {
this.radio_check2 = *v;
})),
)
.child(
Radio::new("radio3")
.label("Disabled Radio")
.checked(true)
.disabled(true),
)
.child(
div().w(px(200.)).child(
Radio::new("radio3")
.label("A long long long text radio label")
.checked(true)
.disabled(true),
),
),
),
), ),
)
) )
} }
} }

236
crates/story/src/text_story.rs
View file

@ -5,25 +5,18 @@ use gpui::{
use ui::{ use ui::{
button::{Button, ButtonVariant, ButtonVariants as _}, button::{Button, ButtonVariant, ButtonVariants as _},
checkbox::Checkbox,
clipboard::Clipboard, clipboard::Clipboard,
h_flex, h_flex,
label::Label, label::Label,
link::Link, link::Link,
radio::Radio,
tag::Tag, tag::Tag,
v_flex, Disableable as _, IconName, Sizable, StyledExt, v_flex, IconName, Sizable, StyledExt,
}; };
use crate::section; use crate::section;
pub struct TextStory { pub struct TextStory {
focus_handle: gpui::FocusHandle, focus_handle: gpui::FocusHandle,
check1: bool,
check2: bool,
check3: bool,
radio_check1: bool,
radio_check2: bool,
masked: bool, masked: bool,
} }
@ -45,11 +38,6 @@ impl TextStory {
pub(crate) fn new(cx: &mut WindowContext) -> Self { pub(crate) fn new(cx: &mut WindowContext) -> Self {
Self { Self {
focus_handle: cx.focus_handle(), focus_handle: cx.focus_handle(),
check1: false,
check2: false,
check3: true,
radio_check1: false,
radio_check2: true,
masked: false, masked: false,
} }
} }
@ -84,30 +72,66 @@ impl Render for TextStory {
.child(Label::new("Text align right").text_right()), .child(Label::new("Text align right").text_right()),
) )
.child(Label::new("Color Label").text_color(ui::red_500())) .child(Label::new("Color Label").text_color(ui::red_500()))
.child( .child(Label::new("Font Size Label").text_size(px(20.)).font_semibold().line_height(rems(1.8)))
Label::new("Font Size Label")
.text_size(px(20.))
.font_semibold()
.line_height(rems(1.8)),
)
.child( .child(
div().w(px(200.)).child( div().w(px(200.)).child(
Label::new("Label should support text wrap in default, if the text is too long, it should wrap to the next line.") Label::new("Label should support text wrap in default, if the text is too long, it should wrap to the next line.")
.line_height(rems(1.8)), .line_height(rems(1.8)),
), ),
) ),
) )
.child( .child(
section("Link", cx).child( h_flex()
h_flex().items_start().gap_3() .gap_3()
.child(Link::new("link1").href("https://github.com").child("GitHub")) .child(
.child(Link::new("link2").href("https://github.com").text_color(ui::red_500()).text_decoration_color(ui::red_500()).child("Red Link")) section("Link", cx).child(
.child(Link::new("link3").child(h_flex().gap_1().child(IconName::GitHub).child("GitHub")).on_click(cx.listener(|_, _, cx| { h_flex()
cx.open_url("https://google.com") .items_start()
}))) .gap_3()
.child(div().w(px(250.)).child(Link::new("link4").child("https://github.com/longbridge/gpui-component").href("https://github.com/longbridge/gpui-component"))) .child(Link::new("link1").href("https://github.com").child("GitHub"))
) .child(
Link::new("link2")
.href("https://github.com")
.text_color(ui::red_500())
.text_decoration_color(ui::red_500())
.child("Red Link"),
)
.child(
Link::new("link3")
.child(h_flex().gap_1().child(IconName::GitHub).child("GitHub"))
.on_click(cx.listener(|_, _, cx| cx.open_url("https://google.com"))),
)
.child(
div().w(px(250.)).child(
Link::new("link4")
.child("https://github.com/longbridge/gpui-component")
.href("https://github.com/longbridge/gpui-component"),
),
),
),
)
.child(
section("Clipboard", cx).child(
h_flex()
.w_full()
.gap_4()
.child(
Clipboard::new("clipboard1")
.content(|_| Label::new("Click icon to copy"))
.value_fn({
let view = cx.view().clone();
move |cx| SharedString::from(format!("masked :{}", view.read(cx).masked))
})
.on_copied(|value, _| println!("Copied value: {}", value)),
)
.child(
Clipboard::new("clipboard2")
.content(|_| Link::new("link1").href("https://github.com").child("GitHub"))
.value("https://github.com")
.on_copied(|value, _| println!("Copied value: {}", value)),
),
),
),
) )
.child( .child(
section("Maksed Label", cx).child( section("Maksed Label", cx).child(
@ -115,160 +139,38 @@ impl Render for TextStory {
.w_full() .w_full()
.gap_4() .gap_4()
.child( .child(
h_flex() h_flex().child(Label::new("9,182,1 USD").text_2xl().masked(self.masked)).child(
.child(Label::new("9,182,1 USD").text_2xl().masked(self.masked)) Button::new("btn-mask")
.child( .with_variant(ButtonVariant::Ghost)
Button::new("btn-mask") .icon(if self.masked { IconName::EyeOff } else { IconName::Eye })
.with_variant(ButtonVariant::Ghost) .on_click(cx.listener(|this, _, _| {
.icon(if self.masked { this.masked = !this.masked;
IconName::EyeOff })),
} else { ),
IconName::Eye
})
.on_click(cx.listener(|this, _, _| {
this.masked = !this.masked;
})),
),
) )
.child(Label::new("500 USD").text_xl().masked(self.masked)), .child(Label::new("500 USD").text_xl().masked(self.masked)),
), ),
) )
.child(
section("Checkbox", cx).child(
h_flex()
.w_full()
.items_start()
.gap_6()
.child(
Checkbox::new("check1")
.checked(self.check1)
.on_click(cx.listener(|v, _, _| {
v.check1 = !v.check1;
})),
)
.child(
Checkbox::new("check2")
.checked(self.check2)
.label("Subscribe to newsletter")
.on_click(cx.listener(|v, _, _| {
v.check2 = !v.check2;
})),
)
.child(
Checkbox::new("check3")
.checked(self.check3)
.label("Remember me")
.on_click(cx.listener(|v, _, _| {
v.check3 = !v.check3;
})),
)
.child(
div().w(px(300.)).child(
Checkbox::new("longlong-checkbox")
.label("The long long label text, it should ellipsis when the text is too long.")
),
)
),
)
.child(
section("Disabled Checkbox", cx).child(
h_flex()
.w_full()
.items_center()
.gap_6()
.child(
Checkbox::new("check3")
.label("Disabled Checked")
.checked(true)
.disabled(true),
)
.child(
Checkbox::new("check3_1")
.label("Disabled Unchecked")
.checked(false)
.disabled(true),
)
),
)
.child(
section("Radio", cx).child(
h_flex()
.w_full()
.gap_4()
.items_start()
.child(
Radio::new("radio1")
.checked(self.radio_check1)
.on_click(cx.listener(|this, v, _cx| {
this.radio_check1 = *v;
})),
)
.child(
Radio::new("radio2")
.label("Radio")
.checked(self.radio_check2)
.on_click(cx.listener(|this, v, _cx| {
this.radio_check2 = *v;
})),
)
.child(
Radio::new("radio3")
.label("Disabled Radio")
.checked(true)
.disabled(true),
)
.child(
div().w(px(200.)).child(
Radio::new("radio3")
.label("A long long long text radio label")
.checked(true)
.disabled(true),
),
)
),
)
.child(
section("Clipboard", cx).child(
h_flex()
.w_full()
.gap_4()
.child(
Clipboard::new("clipboard1")
.content(|_| Label::new("Click icon to copy"))
.value_fn({
let view = cx.view().clone();
move |cx| {
SharedString::from(format!("Check1 :{}", view.read(cx).check1))
}
})
.on_copied(|value, _| println!("Copied value: {}", value)),
)
.child(
Clipboard::new("clipboard2")
.content(|_| Link::new("link1").href("https://github.com").child("GitHub"))
.value("https://github.com")
.on_copied(|value, _| println!("Copied value: {}", value)),
)
),
)
.child( .child(
section("Tag", cx) section("Tag", cx)
.child( .child(
h_flex().gap_2() h_flex()
.gap_2()
.child(Tag::primary().small().child("Tag")) .child(Tag::primary().small().child("Tag"))
.child(Tag::secondary().small().child("Secondary")) .child(Tag::secondary().small().child("Secondary"))
.child(Tag::outline().small().child("Outline")) .child(Tag::outline().small().child("Outline"))
.child(Tag::danger().small().child("danger")) .child(Tag::danger().small().child("danger"))
.child(Tag::custom(ui::yellow_500(), ui::yellow_800(), ui::yellow_500()).small().child("Custom")) .child(Tag::custom(ui::yellow_500(), ui::yellow_800(), ui::yellow_500()).small().child("Custom")),
) )
.child( .child(
h_flex().gap_2() h_flex()
.gap_2()
.child(Tag::primary().child("Tag")) .child(Tag::primary().child("Tag"))
.child(Tag::secondary().child("Secondary")) .child(Tag::secondary().child("Secondary"))
.child(Tag::outline().child("Outline")) .child(Tag::outline().child("Outline"))
.child(Tag::danger().child("danger")) .child(Tag::danger().child("danger"))
.child(Tag::custom(ui::yellow_500(), ui::yellow_800(), ui::yellow_500()).child("Custom")) .child(Tag::custom(ui::yellow_500(), ui::yellow_800(), ui::yellow_500()).child("Custom")),
) ),
) )
} }
} }