diff --git a/egui/src/containers/collapsing_header.rs b/egui/src/containers/collapsing_header.rs index 69a3512b..eea615c8 100644 --- a/egui/src/containers/collapsing_header.rs +++ b/egui/src/containers/collapsing_header.rs @@ -191,9 +191,7 @@ impl CollapsingHeader { desired_width, galley.size.y + 2.0 * ui.style().spacing.button_padding.y, ); - desired_size.y = desired_size - .y - .at_least(ui.style().spacing.clickable_diameter); + desired_size = desired_size.at_least(ui.style().spacing.interact_size); let rect = ui.allocate_space(desired_size); let rect = rect.expand2(ui.style().spacing.button_expand); diff --git a/egui/src/demos/color_test.rs b/egui/src/demos/color_test.rs index 7c7ee2c2..abf90f39 100644 --- a/egui/src/demos/color_test.rs +++ b/egui/src/demos/color_test.rs @@ -60,7 +60,7 @@ impl ColorTest { let vertex_color = Rgba::new(0.5, 0.75, 0.75, 1.0); ui.horizontal_centered(|ui| { - let color_size = vec2(2.0, 1.0) * ui.style().spacing.clickable_diameter; + let color_size = ui.style().spacing.interact_size; ui.label("texture"); show_color(ui, tex_color, color_size); ui.label(" * "); @@ -133,7 +133,7 @@ impl ColorTest { let is_opaque = left.is_opaque() && right.is_opaque(); ui.horizontal_centered(|ui| { - let color_size = vec2(2.0, 1.0) * ui.style().spacing.clickable_diameter; + let color_size = ui.style().spacing.interact_size; if !is_opaque { ui.label("Background:"); show_color(ui, bg_fill, color_size); diff --git a/egui/src/demos/toggle_switch.rs b/egui/src/demos/toggle_switch.rs index cd1a4a05..f2f7e484 100644 --- a/egui/src/demos/toggle_switch.rs +++ b/egui/src/demos/toggle_switch.rs @@ -20,7 +20,7 @@ pub fn toggle(ui: &mut Ui, on: &mut bool) -> Response { // 1. Deciding widget size: // You can query the `ui` how much space is available, // but in this example we have a fixed size component: - let desired_size = vec2(2.0, 1.0) * ui.style().spacing.clickable_diameter; + let desired_size = ui.style().spacing.interact_size; // 2. Allocating space: // This is where we get a region (`Rect`) of the screen assigned. diff --git a/egui/src/style.rs b/egui/src/style.rs index 050f741d..621e07fd 100644 --- a/egui/src/style.rs +++ b/egui/src/style.rs @@ -45,17 +45,18 @@ pub struct Spacing { /// Expand buttons by this much *after* allocating them. /// This is then mostly a visual change (but also makes them easier to hit with the mouse). /// This allows for compact layout where buttons actually eat into item_spacing a bit - pub button_expand: Vec2, + pub button_expand: Vec2, // TODO: remove /// Indent collapsing regions etc by this much. pub indent: f32, - /// Anything clickable is (at least) this wide. - /// TODO: rename `button_height` or something? - pub clickable_diameter: f32, + /// Minimum size of e.g. a button. + /// `interact_size.y` is the default height of button, slider, etc. + /// Anything clickable should be (at least) this size. + pub interact_size: Vec2, // TODO: rename min_interact_size ? - /// Total width of a slider - pub slider_width: f32, + /// Total width of a slider. + pub slider_width: f32, // TODO: rename big_interact_size ? /// Checkboxes, radio button and collapsing headers have an icon at the start. /// The text starts after this many pixels. @@ -202,7 +203,7 @@ impl Default for Spacing { button_padding: vec2(2.0, 0.0), button_expand: vec2(1.0, 1.0), indent: 21.0, - clickable_diameter: 14.0, // TODO: automatically higher on touch screens + interact_size: vec2(28.0, 14.0), // TODO: larger interact_size.y slider_width: 140.0, icon_width: 14.0, menu_bar_height: 16.0, @@ -319,7 +320,7 @@ impl Spacing { button_padding, button_expand, indent, - clickable_diameter, + interact_size, slider_width, icon_width, menu_bar_height, @@ -330,7 +331,8 @@ impl Spacing { ui_slider_vec2(ui, button_padding, 0.0..=10.0, "button_padding"); ui_slider_vec2(ui, button_expand, 0.0..=10.0, "button_expand"); ui.add(Slider::f32(indent, 0.0..=100.0).text("indent")); - ui.add(Slider::f32(clickable_diameter, 0.0..=40.0).text("clickable_diameter")); + ui_slider_vec2(ui, interact_size, 0.0..=40.0, "interact_size") + .tooltip_text("Minimum size of an interactive widget"); ui.add(Slider::f32(slider_width, 0.0..=1000.0).text("slider_width")); ui.add(Slider::f32(icon_width, 0.0..=40.0).text("icon_width")); ui.add(Slider::f32(menu_bar_height, 0.0..=40.0).text("menu_bar_height")); @@ -443,12 +445,18 @@ impl Stroke { } // TODO: improve and standardize ui_slider_vec2 -fn ui_slider_vec2(ui: &mut Ui, value: &mut Vec2, range: std::ops::RangeInclusive, text: &str) { - ui.horizontal_centered(|ui| { +fn ui_slider_vec2( + ui: &mut Ui, + value: &mut Vec2, + range: std::ops::RangeInclusive, + text: &str, +) -> Response { + let (_, rect) = ui.horizontal_centered(|ui| { ui.label(format!("{}: ", text)); ui.add(Slider::f32(&mut value.x, range.clone()).text("w")); ui.add(Slider::f32(&mut value.y, range.clone()).text("h")); }); + ui.interact_hover(rect) } fn ui_color(ui: &mut Ui, srgba: &mut Srgba, text: &str) { diff --git a/egui/src/ui.rs b/egui/src/ui.rs index 24d22486..acc00b4f 100644 --- a/egui/src/ui.rs +++ b/egui/src/ui.rs @@ -658,13 +658,19 @@ impl Ui { /// Start a ui with horizontal layout pub fn horizontal(&mut self, add_contents: impl FnOnce(&mut Ui) -> R) -> (R, Rect) { - let initial_size = vec2(self.available().width(), 0.0); + let initial_size = vec2( + self.available().width(), + self.style().spacing.interact_size.y, + ); self.inner_layout(Layout::horizontal(Align::Min), initial_size, add_contents) } /// Start a ui with horizontal layout where elements are centered on the Y axis. pub fn horizontal_centered(&mut self, add_contents: impl FnOnce(&mut Ui) -> R) -> (R, Rect) { - let initial_size = vec2(self.available().width(), 0.0); + let initial_size = vec2( + self.available().width(), + self.style().spacing.interact_size.y, + ); self.inner_layout( Layout::horizontal(Align::Center), initial_size, diff --git a/egui/src/widgets/color_picker.rs b/egui/src/widgets/color_picker.rs index d95ec78e..62a0b1c4 100644 --- a/egui/src/widgets/color_picker.rs +++ b/egui/src/widgets/color_picker.rs @@ -55,7 +55,7 @@ fn show_srgba(ui: &mut Ui, srgba: Srgba, desired_size: Vec2) -> Response { } fn color_button(ui: &mut Ui, color: Srgba) -> Response { - let desired_size = Vec2::splat(ui.style().spacing.clickable_diameter); + let desired_size = ui.style().spacing.interact_size; let rect = ui.allocate_space(desired_size); let rect = rect.expand2(ui.style().spacing.button_expand); let id = ui.make_position_id(); @@ -76,7 +76,7 @@ fn color_slider_1d(ui: &mut Ui, value: &mut f32, color_at: impl Fn(f32) -> Srgba let desired_size = vec2( ui.style().spacing.slider_width, - ui.style().spacing.clickable_diameter * 2.0, + ui.style().spacing.interact_size.y * 2.0, ); let rect = ui.allocate_space(desired_size); @@ -192,7 +192,7 @@ fn color_picker_hsvag_2d(ui: &mut Ui, hsva: &mut HsvaGamma) { ui.vertical_centered(|ui| { let current_color_size = vec2( ui.style().spacing.slider_width, - ui.style().spacing.clickable_diameter * 2.0, + ui.style().spacing.interact_size.y * 2.0, ); show_color(ui, *hsva, current_color_size).tooltip_text("Current color"); diff --git a/egui/src/widgets/mod.rs b/egui/src/widgets/mod.rs index eb5a069d..2871c370 100644 --- a/egui/src/widgets/mod.rs +++ b/egui/src/widgets/mod.rs @@ -292,9 +292,7 @@ impl Widget for Button { let font = &ui.fonts()[text_style]; let galley = font.layout_multiline(text, ui.available().width()); let mut desired_size = galley.size + 2.0 * ui.style().spacing.button_padding; - desired_size.y = desired_size - .y - .at_least(ui.style().spacing.clickable_diameter); + desired_size = desired_size.at_least(ui.style().spacing.interact_size); let rect = ui.allocate_space(desired_size); let rect = rect.expand2(ui.style().spacing.button_expand); @@ -357,9 +355,7 @@ impl<'a> Widget for Checkbox<'a> { let button_padding = ui.style().spacing.button_padding; let mut desired_size = button_padding + vec2(icon_width, 0.0) + galley.size + button_padding; - desired_size.y = desired_size - .y - .at_least(ui.style().spacing.clickable_diameter); + desired_size = desired_size.at_least(ui.style().spacing.interact_size); let rect = ui.allocate_space(desired_size); let response = ui.interact(rect, id, Sense::click()); @@ -441,9 +437,7 @@ impl Widget for RadioButton { let button_padding = ui.style().spacing.button_padding; let mut desired_size = button_padding + vec2(icon_width, 0.0) + galley.size + button_padding; - desired_size.y = desired_size - .y - .at_least(ui.style().spacing.clickable_diameter); + desired_size = desired_size.at_least(ui.style().spacing.interact_size); let rect = ui.allocate_space(desired_size); let response = ui.interact(rect, id, Sense::click()); diff --git a/egui/src/widgets/slider.rs b/egui/src/widgets/slider.rs index 08c9588a..1c3e9ecb 100644 --- a/egui/src/widgets/slider.rs +++ b/egui/src/widgets/slider.rs @@ -272,7 +272,7 @@ impl<'a> Widget for Slider<'a> { let font = &ui.fonts()[text_style]; let height = font .line_spacing() - .at_least(ui.style().spacing.clickable_diameter); + .at_least(ui.style().spacing.interact_size.y); if let Some(text) = &self.text { self.id = self.id.or_else(|| Some(ui.make_unique_child_id(text)));