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::{
button::{Button, ButtonGroup},
checkbox::Checkbox,
date_picker::DatePicker,
divider::Divider,
form::{form_field, v_form},
@ -196,6 +197,21 @@ impl Render for FormStory {
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();
})),
),
),
)
}

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

@ -70,6 +70,8 @@ impl RenderOnce for Checkbox {
(cx.theme().primary, cx.theme().primary_foreground)
};
// wrap a flex to patch for let Checkbox display inline
div().flex().child(
h_flex()
.id(self.id)
.gap_2()
@ -126,6 +128,7 @@ impl RenderOnce for Checkbox {
on_click(&checked, cx);
})
},
),
)
}
}

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

@ -56,6 +56,8 @@ impl RenderOnce for Radio {
cx.theme().primary
};
// wrap a flex to patch for let Radio display inline
div().flex().child(
h_flex()
.id(self.id)
.gap_x_2()
@ -104,6 +106,7 @@ impl RenderOnce for Radio {
on_click(&!self.checked, cx);
})
},
),
)
}
}

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

@ -122,7 +122,10 @@ impl Element for Switch {
};
let inset = px(2.);
let mut element = h_flex()
let mut element = div()
.flex()
.child(
h_flex()
.id(self.id.clone())
.items_center()
.gap_2()
@ -142,11 +145,8 @@ impl Element for Switch {
.when(!self.disabled, |this| this.cursor_pointer())
.child(
// Switch Toggle
div()
.rounded_full()
.bg(toggle_bg)
.size(bar_width)
.map(|this| {
div().rounded_full().bg(toggle_bg).size(bar_width).map(
|this| {
let prev_checked = state.prev_checked.clone();
if !self.disabled
&& prev_checked
@ -167,7 +167,8 @@ impl Element for Switch {
),
Animation::new(dur),
move |this, delta| {
let max_x = bg_width - bar_width - inset * 2;
let max_x =
bg_width - bar_width - inset * 2;
let x = if checked {
max_x * delta
} else {
@ -182,7 +183,8 @@ impl Element for Switch {
let x = if checked { max_x } else { px(0.) };
this.left(x).into_any_element()
}
}),
},
),
),
)
.when_some(self.label.clone(), |this, label| {
@ -204,6 +206,7 @@ impl Element for Switch {
on_click(&!checked, cx);
})
},
),
)
.into_any_element();