Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make ButtonSide scale with corner_radius

Browse source
This commit is contained in:
Piotr Osiewicz 2023-08-11 13:10:56 +02:00
parent 096e293c17
commit a9a2d281c3
3 changed files with 9 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

12
crates/search/src/search_bar.rs
View file

@ -65,6 +65,7 @@ pub(super) fn render_nav_button<V: View>(
MouseEventHandler::<NavButton, _>::new(direction as usize, cx, |state, cx| { MouseEventHandler::<NavButton, _>::new(direction as usize, cx, |state, cx| {
let theme = theme::current(cx); let theme = theme::current(cx);
let mut style = theme.search.nav_button.style_for(state).clone(); let mut style = theme.search.nav_button.style_for(state).clone();
let button_side_width = style.container.corner_radius;
style.container.corner_radius = 0.; style.container.corner_radius = 0.;
let label = Label::new(icon, style.label.clone()) let label = Label::new(icon, style.label.clone())
.contained() .contained()
@ -82,7 +83,7 @@ pub(super) fn render_nav_button<V: View>(
.with_border(style.container.border.width, style.container.border.color) .with_border(style.container.border.width, style.container.border.color)
.contained() .contained()
.constrained() .constrained()
.with_max_width(theme.search.mode_filling_width), .with_max_width(button_side_width),
) )
.with_child(label) .with_child(label)
.constrained() .constrained()
@ -100,7 +101,7 @@ pub(super) fn render_nav_button<V: View>(
.with_border(style.container.border.width, style.container.border.color) .with_border(style.container.border.width, style.container.border.color)
.contained() .contained()
.constrained() .constrained()
.with_max_width(theme.search.mode_filling_width), .with_max_width(button_side_width),
) )
.constrained() .constrained()
.with_height(theme.workspace.toolbar.height), .with_height(theme.workspace.toolbar.height),
@ -134,7 +135,8 @@ pub(crate) fn render_search_mode_button<V: View>(
.in_state(is_active) .in_state(is_active)
.style_for(state) .style_for(state)
.clone(); .clone();
let side_width = style.container.corner_radius;
style.container.corner_radius = 0.;
let label = Label::new(mode.label(), style.text.clone()) let label = Label::new(mode.label(), style.text.clone())
.contained() .contained()
.with_style(style.container); .with_style(style.container);
@ -156,7 +158,7 @@ pub(crate) fn render_search_mode_button<V: View>(
.with_border(style.container.border.width, style.container.border.color) .with_border(style.container.border.width, style.container.border.color)
.contained() .contained()
.constrained() .constrained()
.with_max_width(theme.search.mode_filling_width), .with_max_width(side_width),
) )
.with_child(label) .with_child(label)
.into_any() .into_any()
@ -174,7 +176,7 @@ pub(crate) fn render_search_mode_button<V: View>(
.with_border(style.container.border.width, style.container.border.color) .with_border(style.container.border.width, style.container.border.color)
.contained() .contained()
.constrained() .constrained()
.with_max_width(theme.search.mode_filling_width), .with_max_width(side_width),
) )
.into_any() .into_any()
} }

1
crates/theme/src/theme.rs
View file

@ -388,7 +388,6 @@ pub struct Search {
pub dismiss_button: Interactive<IconButton>, pub dismiss_button: Interactive<IconButton>,
pub editor_icon: IconStyle, pub editor_icon: IconStyle,
pub mode_button: Toggleable<Interactive<ContainedText>>, pub mode_button: Toggleable<Interactive<ContainedText>>,
pub mode_filling_width: f32,
pub nav_button: Interactive<ContainedLabel>, pub nav_button: Interactive<ContainedLabel>,
} }

5
styles/src/style_tree/search.ts
View file

@ -201,7 +201,7 @@ export default function search(): any {
right: 10, right: 10,
top: 6, top: 6,
}, },
corner_radius: 2, corner_radius: 6,
}, },
state: { state: {
hovered: { hovered: {
@ -230,12 +230,11 @@ export default function search(): any {
}, },
}, },
}), }),
mode_filling_width: 4.0,
nav_button: interactive({ nav_button: interactive({
base: { base: {
text: text(theme.highest, "mono", "on"), text: text(theme.highest, "mono", "on"),
background: background(theme.highest, "on"), background: background(theme.highest, "on"),
corner_radius: 2, corner_radius: 6,
border: { border: {
...border(theme.highest, "on"), ...border(theme.highest, "on"),
left: false, left: false,