Inset `ContextMenu` headers (#9197)

Marshall Bowers created 2 years ago

This PR insets the headers within `ContextMenu`s to give them some more
breathing room.

#### Before

<img width="347" alt="Screenshot 2024-03-11 at 4 13 31 PM"
src="https://github.com/zed-industries/zed/assets/1486634/73a56d68-d40e-4396-b584-f443197b69d6">

#### After

<img width="354" alt="Screenshot 2024-03-11 at 4 12 43 PM"
src="https://github.com/zed-industries/zed/assets/1486634/44c12a07-0784-4c94-b194-245f5cf94b2b">

Release Notes:

- Added padding to headers in context menus.

Change summary

crates/ui/src/components/context_menu.rs         | 144 +++++++++--------
crates/ui/src/components/list/list_sub_header.rs |   5 
2 files changed, 79 insertions(+), 70 deletions(-)

Detailed changes

crates/ui/src/components/context_menu.rs

@@ -272,80 +272,84 @@ impl Render for ContextMenu {
                 })
                 .flex_none()
                 .child(List::new().children(self.items.iter_mut().enumerate().map(
-                    |(ix, item)| match item {
-                        ContextMenuItem::Separator => ListSeparator.into_any_element(),
-                        ContextMenuItem::Header(header) => {
-                            ListSubHeader::new(header.clone()).into_any_element()
-                        }
-                        ContextMenuItem::Entry {
-                            label,
-                            handler,
-                            icon,
-                            action,
-                        } => {
-                            let handler = handler.clone();
-                            let menu = cx.view().downgrade();
+                    |(ix, item)| {
+                        match item {
+                            ContextMenuItem::Separator => ListSeparator.into_any_element(),
+                            ContextMenuItem::Header(header) => ListSubHeader::new(header.clone())
+                                .inset(true)
+                                .into_any_element(),
+                            ContextMenuItem::Entry {
+                                label,
+                                handler,
+                                icon,
+                                action,
+                            } => {
+                                let handler = handler.clone();
+                                let menu = cx.view().downgrade();
 
-                            let label_element = if let Some(icon) = icon {
-                                h_flex()
-                                    .gap_1()
-                                    .child(Label::new(label.clone()))
-                                    .child(Icon::new(*icon))
-                                    .into_any_element()
-                            } else {
-                                Label::new(label.clone()).into_any_element()
-                            };
+                                let label_element = if let Some(icon) = icon {
+                                    h_flex()
+                                        .gap_1()
+                                        .child(Label::new(label.clone()))
+                                        .child(Icon::new(*icon))
+                                        .into_any_element()
+                                } else {
+                                    Label::new(label.clone()).into_any_element()
+                                };
 
-                            ListItem::new(ix)
-                                .inset(true)
-                                .selected(Some(ix) == self.selected_index)
-                                .on_click(move |_, cx| {
-                                    handler(cx);
-                                    menu.update(cx, |menu, cx| {
-                                        menu.clicked = true;
-                                        cx.emit(DismissEvent);
+                                ListItem::new(ix)
+                                    .inset(true)
+                                    .selected(Some(ix) == self.selected_index)
+                                    .on_click(move |_, cx| {
+                                        handler(cx);
+                                        menu.update(cx, |menu, cx| {
+                                            menu.clicked = true;
+                                            cx.emit(DismissEvent);
+                                        })
+                                        .ok();
                                     })
-                                    .ok();
-                                })
-                                .child(
-                                    h_flex()
-                                        .w_full()
-                                        .justify_between()
-                                        .child(label_element)
-                                        .debug_selector(|| format!("MENU_ITEM-{}", label))
-                                        .children(action.as_ref().and_then(|action| {
-                                            self.action_context
-                                                .as_ref()
-                                                .map(|focus| {
-                                                    KeyBinding::for_action_in(&**action, focus, cx)
-                                                })
-                                                .unwrap_or_else(|| {
-                                                    KeyBinding::for_action(&**action, cx)
-                                                })
-                                                .map(|binding| div().ml_1().child(binding))
-                                        })),
-                                )
-                                .into_any_element()
-                        }
-                        ContextMenuItem::CustomEntry {
-                            entry_render,
-                            handler,
-                        } => {
-                            let handler = handler.clone();
-                            let menu = cx.view().downgrade();
-                            ListItem::new(ix)
-                                .inset(true)
-                                .selected(Some(ix) == self.selected_index)
-                                .on_click(move |_, cx| {
-                                    handler(cx);
-                                    menu.update(cx, |menu, cx| {
-                                        menu.clicked = true;
-                                        cx.emit(DismissEvent);
+                                    .child(
+                                        h_flex()
+                                            .w_full()
+                                            .justify_between()
+                                            .child(label_element)
+                                            .debug_selector(|| format!("MENU_ITEM-{}", label))
+                                            .children(action.as_ref().and_then(|action| {
+                                                self.action_context
+                                                    .as_ref()
+                                                    .map(|focus| {
+                                                        KeyBinding::for_action_in(
+                                                            &**action, focus, cx,
+                                                        )
+                                                    })
+                                                    .unwrap_or_else(|| {
+                                                        KeyBinding::for_action(&**action, cx)
+                                                    })
+                                                    .map(|binding| div().ml_1().child(binding))
+                                            })),
+                                    )
+                                    .into_any_element()
+                            }
+                            ContextMenuItem::CustomEntry {
+                                entry_render,
+                                handler,
+                            } => {
+                                let handler = handler.clone();
+                                let menu = cx.view().downgrade();
+                                ListItem::new(ix)
+                                    .inset(true)
+                                    .selected(Some(ix) == self.selected_index)
+                                    .on_click(move |_, cx| {
+                                        handler(cx);
+                                        menu.update(cx, |menu, cx| {
+                                            menu.clicked = true;
+                                            cx.emit(DismissEvent);
+                                        })
+                                        .ok();
                                     })
-                                    .ok();
-                                })
-                                .child(entry_render(cx))
-                                .into_any_element()
+                                    .child(entry_render(cx))
+                                    .into_any_element()
+                            }
                         }
                     },
                 ))),

crates/ui/src/components/list/list_sub_header.rs

@@ -21,6 +21,11 @@ impl ListSubHeader {
         self.start_slot = left_icon;
         self
     }
+
+    pub fn inset(mut self, inset: bool) -> Self {
+        self.inset = inset;
+        self
+    }
 }
 
 impl RenderOnce for ListSubHeader {