[style] more spacious, more alignmnet, more readable

egui/src/demos/toggle_switch.rs

@@ -19,7 +19,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:
+    // but in this example we have a fixed size widget of the default size for a button:
     let desired_size = ui.style().spacing.interact_size;
 
     // 2. Allocating space:

egui/src/style.rs

@@ -198,15 +198,15 @@ impl Default for Style {
 impl Default for Spacing {
     fn default() -> Self {
         Self {
-            item_spacing: vec2(8.0, 6.0),
+            item_spacing: vec2(8.0, 5.0),
             window_padding: vec2(6.0, 6.0),
-            button_padding: vec2(2.0, 0.0),
+            button_padding: vec2(4.0, 1.0),
-            button_expand: vec2(1.0, 1.0),
+            button_expand: vec2(0.0, 0.0), // TODO: remove
             indent: 21.0,
-            interact_size: vec2(28.0, 14.0), // TODO: larger interact_size.y
+            interact_size: vec2(40.0, 20.0), // TODO: larger interact_size.y
             slider_width: 140.0,
-            icon_width: 14.0,
+            icon_width: 20.0,      // TODO: replace with interact_size.y ?
-            menu_bar_height: 16.0,
+            menu_bar_height: 20.0, // TODO: replace with interact_size.y ?
         }
     }
 }
@@ -330,12 +330,12 @@ impl Spacing {
         ui_slider_vec2(ui, window_padding, 0.0..=10.0, "window_padding");
         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_slider_vec2(ui, interact_size, 0.0..=60.0, "interact_size")
-        ui_slider_vec2(ui, interact_size, 0.0..=40.0, "interact_size")
             .tooltip_text("Minimum size of an interactive widget");
+        ui.add(Slider::f32(indent, 0.0..=100.0).text("indent"));
         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(icon_width, 0.0..=60.0).text("icon_width"));
-        ui.add(Slider::f32(menu_bar_height, 0.0..=40.0).text("menu_bar_height"));
+        ui.add(Slider::f32(menu_bar_height, 0.0..=60.0).text("menu_bar_height"));
     }
 }
 
@@ -436,10 +436,16 @@ impl Stroke {
     pub fn ui(&mut self, ui: &mut crate::Ui, text: &str) {
         let Self { width, color } = self;
         ui.horizontal(|ui| {
-            ui.label(format!("{}: ", text));
             ui.add(DragValue::f32(width).speed(0.1).range(0.0..=5.0))
                 .tooltip_text("Width");
             ui.color_edit_button_srgba(color);
+            ui.label(text);
+
+            // stroke preview:
+            let stroke_rect = ui.allocate_space(ui.style().spacing.interact_size);
+            let left = stroke_rect.left_center();
+            let right = stroke_rect.right_center();
+            ui.painter().line_segment([left, right], (*width, *color));
         });
     }
 }
@@ -452,16 +458,35 @@ fn ui_slider_vec2(
     text: &str,
 ) -> Response {
     let (_, rect) = ui.horizontal(|ui| {
-        ui.label(format!("{}: ", text));
+        /*
+        let fsw = full slider_width
+        let ssw = small slider_width
+        let space = item_spacing.x
+        let value = interact_size.x;
+
+        fsw + space + value = ssw + space + value + space + ssw + space + value
+        fsw + space + value = 2 * ssw + 3 * space + 2 * value
+        fsw + space - value = 2 * ssw + 3 * space
+        fsw - 2 * space - value = 2 * ssw
+        ssw = fsw / 2 - space - value / 2
+        */
+        // let spacing = &ui.style().spacing;
+        // let space = spacing.item_spacing.x;
+        // let value_w = spacing.interact_size.x;
+        // let full_slider_width = spacing.slider_width;
+        // let small_slider_width = full_slider_width / 2.0 - space - value_w / 2.0;
+        // ui.style_mut().spacing.slider_width = small_slider_width;
+
         ui.add(Slider::f32(&mut value.x, range.clone()).text("w"));
         ui.add(Slider::f32(&mut value.y, range.clone()).text("h"));
+        ui.label(text);
     });
     ui.interact_hover(rect)
 }
 
 fn ui_color(ui: &mut Ui, srgba: &mut Srgba, text: &str) {
     ui.horizontal(|ui| {
-        ui.label(format!("{}: ", text));
         ui.color_edit_button_srgba(srgba);
+        ui.label(text);
     });
 }

egui/src/widgets/drag_value.rs

@@ -24,7 +24,7 @@ pub struct DragValue<'a> {
 }
 
 impl<'a> DragValue<'a> {
-    fn from_get_set(value_function: impl 'a + FnMut(Option<f64>) -> f64) -> Self {
+    pub(crate) fn from_get_set(value_function: impl 'a + FnMut(Option<f64>) -> f64) -> Self {
         Self {
             value_function: Box::new(value_function),
             speed: 1.0,
@@ -74,8 +74,8 @@ impl<'a> DragValue<'a> {
     }
 
     /// Clamp the value to this range
-    pub fn range(mut self, range: RangeInclusive<f64>) -> Self {
+    pub fn range(mut self, range: RangeInclusive<f32>) -> Self {
-        self.range = range;
+        self.range = *range.start() as f64..=*range.end() as f64;
         self
     }
 
@@ -110,6 +110,7 @@ impl<'a> Widget for DragValue<'a> {
         let is_kb_editing = ui.memory().has_kb_focus(kb_edit_id);
 
         if is_kb_editing {
+            let button_width = ui.style().spacing.interact_size.x;
             let mut value_text = ui
                 .memory()
                 .temp_edit_string
@@ -119,7 +120,7 @@ impl<'a> Widget for DragValue<'a> {
                 TextEdit::new(&mut value_text)
                     .id(kb_edit_id)
                     .multiline(false)
-                    .desired_width(0.0)
+                    .desired_width(button_width)
                     .text_style(TextStyle::Monospace),
             );
             if let Ok(parsed_value) = value_text.parse() {

egui/src/widgets/mod.rs

@@ -350,11 +350,16 @@ impl<'a> Widget for Checkbox<'a> {
         let font = &ui.fonts()[text_style];
         let galley = font.layout_single_line(text);
 
-        let icon_width = ui.style().spacing.icon_width;
+        let spacing = &ui.style().spacing;
-        let button_padding = ui.style().spacing.button_padding;
+        let icon_width = spacing.icon_width;
-        let mut desired_size =
+        let horizontal_spacing = 0.0; //spacing.item_spacing.x
-            button_padding + vec2(icon_width, 0.0) + galley.size + button_padding;
+        let button_padding = spacing.button_padding;
-        desired_size = desired_size.at_least(ui.style().spacing.interact_size);
+        let mut desired_size = button_padding
+            + vec2(icon_width, 0.0)
+            + vec2(horizontal_spacing, 0.0)
+            + galley.size
+            + button_padding;
+        desired_size = desired_size.at_least(spacing.interact_size);
         let rect = ui.allocate_space(desired_size);
 
         let response = ui.interact(rect, id, Sense::click());

egui/src/widgets/slider.rs

@@ -191,21 +191,37 @@ impl<'a> Slider<'a> {
         }
     }
 
-    /// Just the text label
+    fn label_ui(&mut self, ui: &mut Ui) {
-    fn text_ui(&mut self, ui: &mut Ui, x_range: RangeInclusive<f32>) {
         if let Some(label_text) = self.text.as_deref() {
             let text_color = self
                 .text_color
                 .unwrap_or_else(|| ui.style().visuals.text_color());
 
-            ui.style_mut().spacing.item_spacing.x = 0.0;
             ui.add(
-                Label::new(format!("{}: ", label_text))
+                Label::new(label_text)
                     .multiline(false)
                     .text_color(text_color),
             );
         }
+    }
 
+    // fn value_ui(&mut self, ui: &mut Ui, x_range: RangeInclusive<f32>) {
+    //     TODO: make it a drag value somehow
+    //     fn range_width(range: &RangeInclusive<f32>) -> f32 {
+    //         range.end() - range.start()
+    //     }
+    //     let range = self.range.clone();
+    //     let get_set_f64 = |value: Option<f64>| (self.get_set_value)(value.map(|x| x as f32)) as f64;
+    //     let speed = range_width(&range) / range_width(&x_range);
+    //     // TODO: precision
+    //     ui.add(
+    //         DragValue::from_get_set(get_set_f64)
+    //             .range(range)
+    //             .speed(speed),
+    //     );
+    // }
+
+    fn value_ui(&mut self, ui: &mut Ui, x_range: RangeInclusive<f32>) {
         let kb_edit_id = self.id.expect("We should have an id by now").with("edit");
         let is_kb_editing = ui.memory().has_kb_focus(kb_edit_id);
 
@@ -213,6 +229,7 @@ impl<'a> Slider<'a> {
         let value_text = self.format_value(aim_radius, x_range);
 
         if is_kb_editing {
+            let button_width = ui.style().spacing.interact_size.x;
             let mut value_text = ui
                 .memory()
                 .temp_edit_string
@@ -222,7 +239,7 @@ impl<'a> Slider<'a> {
                 TextEdit::new(&mut value_text)
                     .id(kb_edit_id)
                     .multiline(false)
-                    .desired_width(0.0)
+                    .desired_width(button_width)
                     .text_color_opt(self.text_color)
                     .text_style(TextStyle::Monospace),
             );
@@ -281,7 +298,8 @@ impl<'a> Widget for Slider<'a> {
                 let slider_response = self.allocate_slide_space(ui, height);
                 self.slider_ui(ui, &slider_response);
                 let x_range = x_range(&slider_response.rect);
-                self.text_ui(ui, x_range);
+                self.value_ui(ui, x_range);
+                self.label_ui(ui);
                 slider_response
             })
             .0