From cb8067d89bf8448d7df12b280b9d3d38a866f941 Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Thu, 27 Jun 2024 22:53:00 +0800 Subject: [PATCH] Fix Checkbox story. --- crates/ui-story/src/button_story.rs | 51 +++++++++--------- crates/ui-story/src/checkbox_story.rs | 76 ++++++++++++--------------- crates/ui-story/src/dropdown_story.rs | 9 +++- crates/ui-story/src/lib.rs | 6 ++- crates/ui/src/dropdown.rs | 2 +- crates/ui/src/icon.rs | 10 ++-- crates/ui/src/lib.rs | 3 +- crates/ui/src/switch.rs | 8 ++- crates/workspace/src/lib.rs | 43 +++++++++------ 9 files changed, 113 insertions(+), 95 deletions(-) diff --git a/crates/ui-story/src/button_story.rs b/crates/ui-story/src/button_story.rs index 7be2828a..173a7115 100644 --- a/crates/ui-story/src/button_story.rs +++ b/crates/ui-story/src/button_story.rs @@ -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) diff --git a/crates/ui-story/src/checkbox_story.rs b/crates/ui-story/src/checkbox_story.rs index f3a93075..202455a5 100644 --- a/crates/ui-story/src/checkbox_story.rs +++ b/crates/ui-story/src/checkbox_story.rs @@ -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) -> 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") diff --git a/crates/ui-story/src/dropdown_story.rs b/crates/ui-story/src/dropdown_story.rs index dec0274f..c206a1c0 100644 --- a/crates/ui-story/src/dropdown_story.rs +++ b/crates/ui-story/src/dropdown_story.rs @@ -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."), ), diff --git a/crates/ui-story/src/lib.rs b/crates/ui-story/src/lib.rs index 2f30f3b2..b01e1aa4 100644 --- a/crates/ui-story/src/lib.rs +++ b/crates/ui-story/src/lib.rs @@ -99,6 +99,7 @@ pub struct Stories { button_story: View, input_story: View, + checkbox_story: View, switch_story: View, picker_story: View, dropdown_story: View, @@ -108,7 +109,8 @@ impl Stories { fn new(cx: &mut ViewContext) -> 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()), diff --git a/crates/ui/src/dropdown.rs b/crates/ui/src/dropdown.rs index 1293b939..c090b3e6 100644 --- a/crates/ui/src/dropdown.rs +++ b/crates/ui/src/dropdown.rs @@ -183,7 +183,7 @@ where cx.notify(); })) .child( - v_flex() + h_flex() .items_center() .justify_between() .child(title) diff --git a/crates/ui/src/icon.rs b/crates/ui/src/icon.rs index 057031d2..77e7d395 100644 --- a/crates/ui/src/icon.rs +++ b/crates/ui/src/icon.rs @@ -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) } } diff --git a/crates/ui/src/lib.rs b/crates/ui/src/lib.rs index eebe6bf4..75eac377 100644 --- a/crates/ui/src/lib.rs +++ b/crates/ui/src/lib.rs @@ -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::*; diff --git a/crates/ui/src/switch.rs b/crates/ui/src/switch.rs index d2348761..cd687cba 100644 --- a/crates/ui/src/switch.rs +++ b/crates/ui/src/switch.rs @@ -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); + }) + }, ) } } diff --git a/crates/workspace/src/lib.rs b/crates/workspace/src/lib.rs index 9ee11494..f26114fa 100644 --- a/crates/workspace/src/lib.rs +++ b/crates/workspace/src/lib.rs @@ -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()))