Add some distance between parent menu and submenu (#4230)

Before: <img width="502" alt="Screenshot 2024-03-26 at 08 37 16" src="https://github.com/emilk/egui/assets/1148717/ca072cae-807a-4830-a59a-11ff822d0a7b"> After: <img width="532" alt="Screenshot 2024-03-26 at 08 36 12" src="https://github.com/emilk/egui/assets/1148717/f42d79f4-ff05-457f-9fab-67574839f025">
emilk · Mar 26, 2024 · cf8c37c · cf8c37c
1 parent ab6c3f9
commit cf8c37c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 12 deletions.
diff --git a/crates/egui/src/menu.rs b/crates/egui/src/menu.rs
@@ -151,20 +151,22 @@ pub(crate) fn menu_ui<'c, R>(
         .constrain_to(ctx.screen_rect())
         .interactable(true);
 
-    area.show(ctx, |ui| {
+    let area_response = area.show(ctx, |ui| {
         set_menu_style(ui.style_mut());
 
-        let frame = Frame::menu(ui.style()).show(ui, |ui| {
-            ui.set_max_width(ui.spacing().menu_width);
-            ui.set_menu_state(Some(menu_state_arc.clone()));
-            ui.with_layout(Layout::top_down_justified(Align::LEFT), add_contents)
-                .inner
-        });
+        Frame::menu(ui.style())
+            .show(ui, |ui| {
+                ui.set_max_width(ui.spacing().menu_width);
+                ui.set_menu_state(Some(menu_state_arc.clone()));
+                ui.with_layout(Layout::top_down_justified(Align::LEFT), add_contents)
+                    .inner
+            })
+            .inner
+    });
 
-        menu_state_arc.write().rect = frame.response.rect;
+    menu_state_arc.write().rect = area_response.response.rect;
 
-        frame.inner
-    })
+    area_response
 }
 
 /// Build a top level menu with a button.
@@ -549,7 +551,8 @@ pub(crate) struct MenuState {
     /// The opened sub-menu and its [`Id`]
     sub_menu: Option<(Id, Arc<RwLock<MenuState>>)>,
 
-    /// Bounding box of this menu (without the sub-menu)
+    /// Bounding box of this menu (without the sub-menu),
+    /// including the frame and everything.
     pub rect: Rect,
 
     /// Used to check if any menu in the tree wants to close
@@ -620,7 +623,8 @@ impl MenuState {
             // ensure to repaint once even when pointer is not moving
             ui.ctx().request_repaint();
         } else if !open && button.hovered() {
-            let pos = button.rect.right_top();
+            let mut pos = button.rect.right_top();
+            pos.x = self.rect.right() + ui.spacing().menu_spacing;
             self.open_submenu(sub_id, pos);
         } else if open
             && ui.interact_bg(Sense::hover()).contains_pointer()

diff --git a/crates/egui/src/style.rs b/crates/egui/src/style.rs
@@ -311,6 +311,9 @@ pub struct Spacing {
     /// The default width of a menu.
     pub menu_width: f32,
 
+    /// Horizontal distance between a menu and a submenu.
+    pub menu_spacing: f32,
+
     /// End indented regions with a horizontal line
     pub indent_ends_with_horizontal_line: bool,
 
@@ -1239,6 +1242,7 @@ impl Default for Spacing {
             icon_spacing: 4.0,
             tooltip_width: 600.0,
             menu_width: 150.0,
+            menu_spacing: 3.0,
             combo_height: 200.0,
             scroll: Default::default(),
             indent_ends_with_horizontal_line: false,
@@ -1592,6 +1596,7 @@ impl Spacing {
             icon_spacing,
             tooltip_width,
             menu_width,
+            menu_spacing,
             indent_ends_with_horizontal_line,
             combo_height,
             scroll,
@@ -1659,6 +1664,11 @@ impl Spacing {
             ui.label("Default width of a menu");
         });
 
+        ui.horizontal(|ui| {
+            ui.add(DragValue::new(menu_spacing).clamp_range(0.0..=10.0));
+            ui.label("Horizontal spacing between menus");
+        });
+
         ui.checkbox(
             indent_ends_with_horizontal_line,
             "End indented regions with a horizontal separator",