keymap_editor: Adjust some items of the UI (#42876)

Danilo Leal created 1 month ago

- Only showing the "Create" menu item in the right-click context menu
for actions that _do not_ contain a binding already assigned to them
- Only show the "Clear Input" icon button in the keystroke modal when
the input is focused/in recording mode
- Add a subtle hover style to the table rows just to make it easier to
navigate

Release Notes:

- N/A

Change summary

crates/keymap_editor/src/keymap_editor.rs                 |  4 
crates/keymap_editor/src/ui_components/keystroke_input.rs | 30 +++++---
crates/ui/src/components/data_table.rs                    |  5 
3 files changed, 23 insertions(+), 16 deletions(-)

Detailed changes

crates/keymap_editor/src/keymap_editor.rs

@@ -958,12 +958,14 @@ impl KeymapEditor {
 
             let context_menu = ContextMenu::build(window, cx, |menu, _window, _cx| {
                 menu.context(self.focus_handle.clone())
+                    .when(selected_binding_is_unbound, |this| {
+                        this.action("Create", Box::new(CreateBinding))
+                    })
                     .action_disabled_when(
                         selected_binding_is_unbound,
                         "Edit",
                         Box::new(EditBinding),
                     )
-                    .action("Create", Box::new(CreateBinding))
                     .action_disabled_when(
                         selected_binding_is_unbound,
                         "Delete",

crates/keymap_editor/src/ui_components/keystroke_input.rs

@@ -636,18 +636,24 @@ impl Render for KeystrokeInput {
                             )
                         }
                     })
-                    .child(
-                        IconButton::new("clear-btn", IconName::Backspace)
-                            .shape(IconButtonShape::Square)
-                            .tooltip(Tooltip::for_action_title(
-                                "Clear Keystrokes",
-                                &ClearKeystrokes,
-                            ))
-                            .when(!is_focused, |this| this.icon_color(Color::Muted))
-                            .on_click(cx.listener(|this, _event, window, cx| {
-                                this.clear_keystrokes(&ClearKeystrokes, window, cx);
-                            })),
-                    ),
+                    .when(is_recording, |this| {
+                        this.child(
+                            IconButton::new("clear-btn", IconName::Backspace)
+                                .shape(IconButtonShape::Square)
+                                .tooltip(move |_, cx| {
+                                    Tooltip::with_meta(
+                                        "Clear Keystrokes",
+                                        Some(&ClearKeystrokes),
+                                        "Hit it three times to execute",
+                                        cx,
+                                    )
+                                })
+                                .when(!is_focused, |this| this.icon_color(Color::Muted))
+                                .on_click(cx.listener(|this, _event, window, cx| {
+                                    this.clear_keystrokes(&ClearKeystrokes, window, cx);
+                                })),
+                        )
+                    }),
             )
     }
 }

crates/ui/src/components/data_table.rs

@@ -641,11 +641,10 @@ pub fn render_table_row<const COLS: usize>(
         .map_or([None; COLS], |widths| widths.map(Some));
 
     let mut row = h_flex()
-        .h_full()
         .id(("table_row", row_index))
-        .w_full()
-        .justify_between()
+        .size_full()
         .when_some(bg, |row, bg| row.bg(bg))
+        .hover(|s| s.bg(cx.theme().colors().element_hover.opacity(0.6)))
         .when(!is_striped, |row| {
             row.border_b_1()
                 .border_color(transparent_black())