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

chore: Fix Switch, Radio, Checkbox to use inline layout. (#569)

Browse source
This commit is contained in:
Jason Lee 2025-01-23 18:05:32 +08:00 committed by GitHub
parent 07b12b726c
commit e03a0d4f4e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 203 additions and 178 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
crates/story/src/form_story.rs
View file

@ -4,6 +4,7 @@ use gpui::{
}; };
use ui::{ use ui::{
button::{Button, ButtonGroup}, button::{Button, ButtonGroup},
checkbox::Checkbox,
date_picker::DatePicker, date_picker::DatePicker,
divider::Divider, divider::Divider,
form::{form_field, v_form}, form::{form_field, v_form},
@ -196,6 +197,21 @@ impl Render for FormStory {
cx.notify(); cx.notify();
})), })),
), ),
)
.child(
form_field().child(
Checkbox::new("use-vertical-layout")
.label("Vertical layout")
.checked(self.layout.is_vertical())
.on_click(cx.listener(|this, checked: &bool, cx| {
this.layout = if *checked {
Axis::Vertical
} else {
Axis::Horizontal
};
cx.notify();
})),
),
), ),
) )
} }

117
crates/ui/src/checkbox.rs
View file

@ -70,62 +70,65 @@ impl RenderOnce for Checkbox {
(cx.theme().primary, cx.theme().primary_foreground) (cx.theme().primary, cx.theme().primary_foreground)
}; };
h_flex() // wrap a flex to patch for let Checkbox display inline
.id(self.id) div().flex().child(
.gap_2() h_flex()
.items_center() .id(self.id)
.line_height(relative(1.)) .gap_2()
.child( .items_center()
v_flex() .line_height(relative(1.))
.relative() .child(
.border_1() v_flex()
.border_color(color) .relative()
.rounded_sm() .border_1()
.size_4() .border_color(color)
.flex_shrink_0() .rounded_sm()
.map(|this| match self.checked { .size_4()
false => this.bg(cx.theme().transparent), .flex_shrink_0()
_ => this.bg(color), .map(|this| match self.checked {
}) false => this.bg(cx.theme().transparent),
.child( _ => this.bg(color),
svg() })
.absolute() .child(
.top_px() svg()
.left_px() .absolute()
.size_3() .top_px()
.text_color(icon_color) .left_px()
.map(|this| match self.checked { .size_3()
true => this.path(IconName::Check.path()), .text_color(icon_color)
_ => this, .map(|this| match self.checked {
}), true => this.path(IconName::Check.path()),
), _ => this,
) }),
.map(|this| { ),
if let Some(label) = self.label { )
this.text_color(cx.theme().foreground).child( .map(|this| {
div() if let Some(label) = self.label {
.w_full() this.text_color(cx.theme().foreground).child(
.overflow_x_hidden() div()
.text_ellipsis() .w_full()
.line_height(relative(1.)) .overflow_x_hidden()
.child(label), .text_ellipsis()
) .line_height(relative(1.))
} else { .child(label),
this )
} } else {
}) this
.when(self.disabled, |this| { }
this.cursor_not_allowed() })
.text_color(cx.theme().muted_foreground) .when(self.disabled, |this| {
}) this.cursor_not_allowed()
.when_some( .text_color(cx.theme().muted_foreground)
self.on_click.filter(|_| !self.disabled), })
|this, on_click| { .when_some(
this.on_click(move |_, cx| { self.on_click.filter(|_| !self.disabled),
let checked = !self.checked; |this, on_click| {
on_click(&checked, cx); this.on_click(move |_, cx| {
}) let checked = !self.checked;
}, on_click(&checked, cx);
) })
},
),
)
} }
} }

97
crates/ui/src/radio.rs
View file

@ -56,54 +56,57 @@ impl RenderOnce for Radio {
cx.theme().primary cx.theme().primary
}; };
h_flex() // wrap a flex to patch for let Radio display inline
.id(self.id) div().flex().child(
.gap_x_2() h_flex()
.text_color(cx.theme().foreground) .id(self.id)
.items_center() .gap_x_2()
.line_height(relative(1.)) .text_color(cx.theme().foreground)
.child( .items_center()
div() .line_height(relative(1.))
.relative() .child(
.size_4()
.flex_shrink_0()
.rounded_full()
.border_1()
.border_color(color)
.when(self.checked, |this| this.bg(color))
.child(
svg()
.absolute()
.top_px()
.left_px()
.size_3()
.text_color(color)
.when(self.checked, |this| {
this.text_color(cx.theme().primary_foreground)
})
.map(|this| match self.checked {
true => this.path(IconName::Check.path()),
false => this,
}),
),
)
.when_some(self.label, |this, label| {
this.child(
div() div()
.size_full() .relative()
.overflow_x_hidden() .size_4()
.text_ellipsis() .flex_shrink_0()
.line_height(relative(1.)) .rounded_full()
.child(label), .border_1()
.border_color(color)
.when(self.checked, |this| this.bg(color))
.child(
svg()
.absolute()
.top_px()
.left_px()
.size_3()
.text_color(color)
.when(self.checked, |this| {
this.text_color(cx.theme().primary_foreground)
})
.map(|this| match self.checked {
true => this.path(IconName::Check.path()),
false => this,
}),
),
) )
}) .when_some(self.label, |this, label| {
.when_some( this.child(
self.on_click.filter(|_| !self.disabled), div()
|this, on_click| { .size_full()
this.on_click(move |_event, cx| { .overflow_x_hidden()
on_click(&!self.checked, cx); .text_ellipsis()
}) .line_height(relative(1.))
}, .child(label),
) )
})
.when_some(
self.on_click.filter(|_| !self.disabled),
|this, on_click| {
this.on_click(move |_event, cx| {
on_click(&!self.checked, cx);
})
},
),
)
} }
} }

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

@ -122,88 +122,91 @@ impl Element for Switch {
}; };
let inset = px(2.); let inset = px(2.);
let mut element = h_flex() let mut element = div()
.id(self.id.clone()) .flex()
.items_center()
.gap_2()
.when(self.label_side.is_left(), |this| this.flex_row_reverse())
.child( .child(
// Switch Bar h_flex()
div()
.id(self.id.clone()) .id(self.id.clone())
.w(bg_width)
.h(bg_height)
.rounded(bg_height / 2.)
.flex()
.items_center() .items_center()
.border(inset) .gap_2()
.border_color(theme.transparent) .when(self.label_side.is_left(), |this| this.flex_row_reverse())
.bg(bg)
.when(!self.disabled, |this| this.cursor_pointer())
.child( .child(
// Switch Toggle // Switch Bar
div() div()
.rounded_full() .id(self.id.clone())
.bg(toggle_bg) .w(bg_width)
.size(bar_width) .h(bg_height)
.map(|this| { .rounded(bg_height / 2.)
let prev_checked = state.prev_checked.clone(); .flex()
if !self.disabled .items_center()
&& prev_checked .border(inset)
.borrow() .border_color(theme.transparent)
.map_or(false, |prev| prev != checked) .bg(bg)
{ .when(!self.disabled, |this| this.cursor_pointer())
let dur = Duration::from_secs_f64(0.15); .child(
cx.spawn(|cx| async move { // Switch Toggle
cx.background_executor().timer(dur).await; div().rounded_full().bg(toggle_bg).size(bar_width).map(
|this| {
let prev_checked = state.prev_checked.clone();
if !self.disabled
&& prev_checked
.borrow()
.map_or(false, |prev| prev != checked)
{
let dur = Duration::from_secs_f64(0.15);
cx.spawn(|cx| async move {
cx.background_executor().timer(dur).await;
*prev_checked.borrow_mut() = Some(checked); *prev_checked.borrow_mut() = Some(checked);
}) })
.detach(); .detach();
this.with_animation( this.with_animation(
ElementId::NamedInteger( ElementId::NamedInteger(
"move".into(), "move".into(),
checked as usize, checked as usize,
), ),
Animation::new(dur), Animation::new(dur),
move |this, delta| { move |this, delta| {
let max_x =
bg_width - bar_width - inset * 2;
let x = if checked {
max_x * delta
} else {
max_x - max_x * delta
};
this.left(x)
},
)
.into_any_element()
} else {
let max_x = bg_width - bar_width - inset * 2; let max_x = bg_width - bar_width - inset * 2;
let x = if checked { let x = if checked { max_x } else { px(0.) };
max_x * delta this.left(x).into_any_element()
} else { }
max_x - max_x * delta },
}; ),
this.left(x) ),
}, )
) .when_some(self.label.clone(), |this, label| {
.into_any_element() this.child(div().child(label).map(|this| match self.size {
} else { Size::XSmall | Size::Small => this.text_sm(),
let max_x = bg_width - bar_width - inset * 2; _ => this.text_base(),
let x = if checked { max_x } else { px(0.) }; }))
this.left(x).into_any_element()
}
}),
),
)
.when_some(self.label.clone(), |this, label| {
this.child(div().child(label).map(|this| match self.size {
Size::XSmall | Size::Small => this.text_sm(),
_ => this.text_base(),
}))
})
.when_some(
on_click
.as_ref()
.map(|c| c.clone())
.filter(|_| !self.disabled),
|this, on_click| {
let prev_checked = state.prev_checked.clone();
this.on_mouse_down(gpui::MouseButton::Left, move |_, cx| {
cx.stop_propagation();
*prev_checked.borrow_mut() = Some(checked);
on_click(&!checked, cx);
}) })
}, .when_some(
on_click
.as_ref()
.map(|c| c.clone())
.filter(|_| !self.disabled),
|this, on_click| {
let prev_checked = state.prev_checked.clone();
this.on_mouse_down(gpui::MouseButton::Left, move |_, cx| {
cx.stop_propagation();
*prev_checked.borrow_mut() = Some(checked);
on_click(&!checked, cx);
})
},
),
) )
.into_any_element(); .into_any_element();