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

Fix Checkbox story.

Browse source
This commit is contained in:
Jason Lee 2024-06-27 22:53:00 +08:00
parent 1d1803f348
commit cb8067d89b
9 changed files with 113 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
crates/ui-story/src/button_story.rs
View file

@ -1,11 +1,11 @@
use gpui::{
div, ClickEvent, IntoElement, ParentElement as _, Render, Styled as _, ViewContext,
div, px, ClickEvent, IntoElement, ParentElement as _, Render, Styled as _, ViewContext,
WindowContext,
};
use ui::{
button::{Button, ButtonSize, ButtonStyle},
Clickable, Disableable as _,
h_flex, v_flex, Clickable, Disableable as _,
};
use super::story_case;
@ -25,31 +25,33 @@ impl Render for ButtonStory {
"Displays a button or a component that looks like a button.",
)
.child(
div()
.flex()
.flex_col()
v_flex()
.justify_start()
.gap_3()
.gap_6()
.child(
Button::new("button-1", "Primary Button")
.style(ButtonStyle::Primary)
.on_click(Self::on_click),
v_flex()
.w(px(360.))
.gap_6()
.child(
Button::new("button-1", "Primary Button")
.style(ButtonStyle::Primary)
.on_click(Self::on_click),
)
.child(
Button::new("button-2", "Secondary Button")
.style(ButtonStyle::Secondary)
.on_click(Self::on_click),
)
.child(
Button::new("button-4", "Danger Button")
.style(ButtonStyle::Danger)
.on_click(Self::on_click),
),
)
.child(
Button::new("button-2", "Secondary Button")
.style(ButtonStyle::Secondary)
.on_click(Self::on_click),
)
.child(
Button::new("button-4", "Danger Button")
.style(ButtonStyle::Danger)
.on_click(Self::on_click),
)
.child(
div()
.flex()
h_flex()
.items_center()
.gap_3()
.gap_6()
.child(
Button::new("button-disabled1", "Disabled Button")
.style(ButtonStyle::Primary)
@ -70,10 +72,9 @@ impl Render for ButtonStory {
),
)
.child(
div()
.flex()
h_flex()
.items_center()
.gap_3()
.gap_6()
.child(
Button::new("button-6", "Primary Button")
.style(ButtonStyle::Primary)

76
crates/ui-story/src/checkbox_story.rs
View file

@ -7,21 +7,18 @@ use ui::{checkbox::Checkbox, h_flex, v_flex, Disableable as _, Selection};
use super::story_case;
#[derive(IntoElement)]
pub struct CheckboxStory {
check1: Checkbox,
check1_1: Checkbox,
check1: Selection,
check2: Selection,
check3: Selection,
}
impl CheckboxStory {
pub(crate) fn new(cx: &mut WindowContext) -> Self {
pub(crate) fn new(_cx: &mut WindowContext) -> Self {
Self {
check1: Checkbox::new("check1", cx)
.checked(Selection::Unselected)
.on_click(Self::on_click),
check1_1: Checkbox::new("check1_1", cx)
.checked(Selection::Indeterminate)
.on_click(Self::on_click),
check1: Selection::Unselected,
check2: Selection::Indeterminate,
check3: Selection::Selected,
}
}
@ -31,54 +28,47 @@ impl CheckboxStory {
}
}
impl RenderOnce for CheckboxStory {
fn render(self, cx: &mut WindowContext) -> impl IntoElement {
impl Render for CheckboxStory {
fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
story_case(
"Checkbox",
"A control that allows the user to toggle between checked and not checked.",
)
.child(
v_flex().items_start().justify_start().gap_4().child(
v_flex().items_start().justify_start().gap_6().child(
h_flex()
.items_center()
.gap_4()
.child(self.check1)
.child(self.check1_1)
.gap_6()
.child(
Checkbox::new("check1_2", cx)
.checked(Selection::Selected)
.on_click(Self::on_click),
Checkbox::new("check1", cx)
.checked(self.check1)
.on_click(cx.listener(|v, _, _| {
v.check1 = v.check1.inverse();
})),
)
.child(
Checkbox::new("check2", cx)
.checked(self.check2)
.label("Subscribe to newsletter")
.on_click(cx.listener(|v, _, _| {
v.check2 = v.check2.inverse();
})),
)
.child(
Checkbox::new("check3", cx)
.checked(self.check3)
.label("Remember me")
.on_click(cx.listener(|v, _, _| {
v.check3 = v.check3.inverse();
})),
),
),
)
.child(
h_flex()
.items_center()
.gap_4()
.child(
Checkbox::new("check2", cx)
.checked(Selection::Unselected)
.label("With label (Unchecked)")
.on_click(Self::on_click),
)
.child(
Checkbox::new("check2_1", cx)
.label("With Label (Indeterminate)")
.checked(Selection::Indeterminate)
.on_click(Self::on_click),
)
.child(
Checkbox::new("check2_2", cx)
.label("With Label (Checked)")
.checked(Selection::Selected)
.on_click(Self::on_click),
),
)
.child(
h_flex().items_center().gap_4().child(
h_flex()
.items_center()
.gap_4()
.gap_6()
.child(
Checkbox::new("check3", cx)
.label("Disabled Checked")

9
crates/ui-story/src/dropdown_story.rs
View file

@ -8,7 +8,9 @@ use gpui::{
use ui::{
checkbox::Checkbox,
dropdown::{Dropdown, DropdownDelegate, DropdownItem},
h_flex, v_flex, Disableable as _, Selection,
h_flex,
theme::ActiveTheme,
v_flex, Disableable as _, Selection,
};
use super::story_case;
@ -141,6 +143,11 @@ impl Render for DropdownStory {
h_flex()
.w_full()
.items_center()
.p_10()
.rounded_lg()
.bg(cx.theme().card)
.border_1()
.border_color(cx.theme().border)
.gap_4()
.child("This is other text."),
),

6
crates/ui-story/src/lib.rs
View file

@ -99,6 +99,7 @@ pub struct Stories {
button_story: View<ButtonStory>,
input_story: View<InputStory>,
checkbox_story: View<CheckboxStory>,
switch_story: View<SwitchStory>,
picker_story: View<PickerStory>,
dropdown_story: View<DropdownStory>,
@ -108,7 +109,8 @@ impl Stories {
fn new(cx: &mut ViewContext<Self>) -> Self {
Self {
active: StoryType::Button,
button_story: cx.new_view(|cx| ButtonStory {}),
button_story: cx.new_view(|_| ButtonStory {}),
checkbox_story: cx.new_view(|cx| CheckboxStory::new(cx)),
input_story: cx.new_view(|cx| InputStory::new(cx)),
switch_story: cx.new_view(|cx| SwitchStory::new(cx)),
picker_story: cx.new_view(|cx| PickerStory::new(cx)),
@ -164,7 +166,7 @@ impl Render for Stories {
.map(|this| match self.active {
StoryType::Button => this.child(self.button_story.clone()),
StoryType::Input => this.child(self.input_story.clone()),
StoryType::Checkbox => this.child(CheckboxStory::new(cx).into_any_element()),
StoryType::Checkbox => this.child(self.checkbox_story.clone()),
StoryType::Switch => this.child(self.switch_story.clone()),
StoryType::Picker => this.child(self.picker_story.clone()),
StoryType::Dropdown => this.child(self.dropdown_story.clone()),

2
crates/ui/src/dropdown.rs
View file

@ -183,7 +183,7 @@ where
cx.notify();
}))
.child(
v_flex()
h_flex()
.items_center()
.justify_between()
.child(title)

10
crates/ui/src/icon.rs
View file

@ -1,4 +1,4 @@
use gpui::{svg, Element, IntoElement, RenderOnce, SharedString, Styled as _, Svg, WindowContext};
use gpui::{svg, IntoElement, RenderOnce, SharedString, Styled as _, Svg, WindowContext};
#[derive(IntoElement)]
pub enum IconName {
@ -27,7 +27,7 @@ impl IconName {
}
impl RenderOnce for IconName {
fn render(self, cx: &mut WindowContext) -> impl IntoElement {
fn render(self, _cx: &mut WindowContext) -> impl IntoElement {
Icon::new(self)
}
}
@ -41,7 +41,7 @@ pub struct Icon {
impl Icon {
pub fn new(name: IconName) -> Self {
Self {
base: svg(),
base: svg().flex_none().size_full(),
path: name.path(),
}
}
@ -56,7 +56,7 @@ impl Icon {
}
impl RenderOnce for Icon {
fn render(self, cx: &mut WindowContext) -> impl IntoElement {
self.base.flex_none().path(self.path)
fn render(self, _cx: &mut WindowContext) -> impl IntoElement {
self.base.path(self.path)
}
}

3
crates/ui/src/lib.rs
View file

@ -25,7 +25,8 @@ pub mod tab;
pub use clickable::Clickable;
pub use disableable::Disableable;
pub use selectable::*;
pub use event::InterativeElementExt;
pub use selectable::{Selectable, Selection};
pub use icon::*;
pub use stock::*;

8
crates/ui/src/switch.rs
View file

@ -133,14 +133,18 @@ impl RenderOnce for Switch {
),
)
.when_some(self.label, |this, label| {
this.child(Label::new(label).map(|this| match self.size {
this.child(div().child(label).map(|this| match self.size {
ButtonSize::Medium => this.text_base(),
ButtonSize::Small => this.text_sm(),
}))
})
.when_some(
self.on_click.filter(|_| !self.disabled),
|this, on_click| this.on_click(move |ev, cx| on_click(ev, cx)),
|this, on_click| {
this.on_click(move |ev, cx| {
on_click(ev, cx);
})
},
)
}
}

43
crates/workspace/src/lib.rs
View file

@ -127,23 +127,36 @@ impl Render for Workspace {
})
})
// left side
.child(div().flex().items_center().child(Label::new("GPUI App")))
.child(
div().flex().items_center().justify_end().px_2().child(
Switch::new("theme-mode")
.size(ButtonSize::Small)
.checked(cx.theme().mode.is_dark())
.label_side(LabelSide::Left)
.label("Dark Mode")
.on_click(cx.listener(|v, _, cx| {
let mode = match cx.theme().mode {
ui::theme::ThemeMode::Light => ui::theme::ThemeMode::Dark,
ui::theme::ThemeMode::Dark => ui::theme::ThemeMode::Light,
};
div()
.flex()
.items_center()
.on_mouse_move(|_, cx| cx.stop_propagation())
.child("GPUI App"),
)
.child(
div()
.flex()
.items_center()
.justify_end()
.px_2()
.on_mouse_move(|_, cx| cx.stop_propagation())
.child(
Switch::new("theme-mode")
.size(ButtonSize::Small)
.checked(cx.theme().mode.is_dark())
.label_side(LabelSide::Left)
.label("Dark Mode")
.on_click(move |_, cx| {
dbg!("theme-mode clicked");
let mode = match cx.theme().mode.is_dark() {
false => ui::theme::ThemeMode::Dark,
true => ui::theme::ThemeMode::Light,
};
Theme::change(mode, cx);
})),
),
Theme::change(mode, cx);
}),
),
),
)
.child(div().flex().px_4().gap_2().child(self.stories.clone()))