keymap_ui: Add some design refinements (#34673)

Mostly small stuff over here.

Release Notes:

- N/A
This commit is contained in:
Danilo Leal 2025-07-17 20:22:21 -03:00 committed by Joseph T. Lyons
parent 5deb404135
commit 0acd108e7f

View file

@ -811,7 +811,8 @@ impl KeymapEditor {
"Copy Context", "Copy Context",
Box::new(CopyContext), Box::new(CopyContext),
) )
.entry("Show matching keybindings", None, { .separator()
.entry("Show Matching Keybindings", None, {
move |_, cx| { move |_, cx| {
weak.update(cx, |this, cx| { weak.update(cx, |this, cx| {
this.filter_on_selected_binding_keystrokes(cx); this.filter_on_selected_binding_keystrokes(cx);
@ -1214,10 +1215,11 @@ impl Render for KeymapEditor {
fn render(&mut self, _window: &mut Window, cx: &mut ui::Context<Self>) -> impl ui::IntoElement { fn render(&mut self, _window: &mut Window, cx: &mut ui::Context<Self>) -> impl ui::IntoElement {
let row_count = self.matches.len(); let row_count = self.matches.len();
let theme = cx.theme(); let theme = cx.theme();
let focus_handle = &self.focus_handle;
v_flex() v_flex()
.id("keymap-editor") .id("keymap-editor")
.track_focus(&self.focus_handle) .track_focus(focus_handle)
.key_context(self.key_context()) .key_context(self.key_context())
.on_action(cx.listener(Self::select_next)) .on_action(cx.listener(Self::select_next))
.on_action(cx.listener(Self::select_previous)) .on_action(cx.listener(Self::select_previous))
@ -1232,16 +1234,15 @@ impl Render for KeymapEditor {
.on_action(cx.listener(Self::toggle_conflict_filter)) .on_action(cx.listener(Self::toggle_conflict_filter))
.on_action(cx.listener(Self::toggle_keystroke_search)) .on_action(cx.listener(Self::toggle_keystroke_search))
.on_action(cx.listener(Self::toggle_exact_keystroke_matching)) .on_action(cx.listener(Self::toggle_exact_keystroke_matching))
.on_mouse_move(cx.listener(|this, _, _window, _cx| {
this.show_hover_menus = true;
}))
.size_full() .size_full()
.p_2() .p_2()
.gap_1() .gap_1()
.bg(theme.colors().editor_background) .bg(theme.colors().editor_background)
.on_mouse_move(cx.listener(|this, _, _window, _cx| {
this.show_hover_menus = true;
}))
.child( .child(
v_flex() v_flex()
.p_2()
.gap_2() .gap_2()
.child( .child(
h_flex() h_flex()
@ -1269,13 +1270,18 @@ impl Render for KeymapEditor {
IconName::Keyboard, IconName::Keyboard,
) )
.shape(ui::IconButtonShape::Square) .shape(ui::IconButtonShape::Square)
.tooltip(|window, cx| { .tooltip({
Tooltip::for_action( let focus_handle = focus_handle.clone();
"Search by Keystroke",
&ToggleKeystrokeSearch, move |window, cx| {
window, Tooltip::for_action_in(
cx, "Search by Keystroke",
) &ToggleKeystrokeSearch,
&focus_handle.clone(),
window,
cx,
)
}
}) })
.toggle_state(matches!( .toggle_state(matches!(
self.search_mode, self.search_mode,
@ -1293,14 +1299,16 @@ impl Render for KeymapEditor {
}) })
.tooltip({ .tooltip({
let filter_state = self.filter_state; let filter_state = self.filter_state;
let focus_handle = focus_handle.clone();
move |window, cx| { move |window, cx| {
Tooltip::for_action( Tooltip::for_action_in(
match filter_state { match filter_state {
FilterState::All => "Show Conflicts", FilterState::All => "Show Conflicts",
FilterState::Conflicts => "Hide Conflicts", FilterState::Conflicts => "Hide Conflicts",
}, },
&ToggleConflictFilter, &ToggleConflictFilter,
&focus_handle.clone(),
window, window,
cx, cx,
) )
@ -1334,35 +1342,36 @@ impl Render for KeymapEditor {
this.pr_7() this.pr_7()
} }
}) })
.gap_2()
.child(self.keystroke_editor.clone()) .child(self.keystroke_editor.clone())
.child( .child(
div().p_1().child( IconButton::new(
IconButton::new( "keystrokes-exact-match",
"keystrokes-exact-match", IconName::CaseSensitive,
IconName::Equal, )
) .tooltip({
.tooltip(move |window, cx| { let keystroke_focus_handle =
Tooltip::for_action( self.keystroke_editor.read(cx).focus_handle(cx);
if exact_match {
"Partial match mode" move |window, cx| {
} else { Tooltip::for_action_in(
"Exact match mode" "Toggle Exact Match Mode",
},
&ToggleExactKeystrokeMatching, &ToggleExactKeystrokeMatching,
&keystroke_focus_handle,
window, window,
cx, cx,
) )
}) }
.shape(IconButtonShape::Square) })
.toggle_state(exact_match) .shape(IconButtonShape::Square)
.on_click( .toggle_state(exact_match)
cx.listener(|_, _, window, cx| { .on_click(
window.dispatch_action( cx.listener(|_, _, window, cx| {
ToggleExactKeystrokeMatching.boxed_clone(), window.dispatch_action(
cx, ToggleExactKeystrokeMatching.boxed_clone(),
); cx,
}), );
), }),
), ),
), ),
) )
@ -2774,7 +2783,7 @@ impl Render for KeystrokeInput {
.editor_background .editor_background
.blend(colors.text_accent.opacity(0.1)); .blend(colors.text_accent.opacity(0.1));
let recording_pulse = || { let recording_pulse = |color: Color| {
Icon::new(IconName::Circle) Icon::new(IconName::Circle)
.size(IconSize::Small) .size(IconSize::Small)
.color(Color::Error) .color(Color::Error)
@ -2784,7 +2793,7 @@ impl Render for KeystrokeInput {
.repeat() .repeat()
.with_easing(gpui::pulsating_between(0.4, 0.8)), .with_easing(gpui::pulsating_between(0.4, 0.8)),
{ {
let color = Color::Error.color(cx); let color = color.color(cx);
move |this, delta| this.color(Color::Custom(color.opacity(delta))) move |this, delta| this.color(Color::Custom(color.opacity(delta)))
}, },
) )
@ -2800,7 +2809,7 @@ impl Render for KeystrokeInput {
.editor_background .editor_background
.blend(colors.text_accent.opacity(0.1))) .blend(colors.text_accent.opacity(0.1)))
.rounded_sm() .rounded_sm()
.child(recording_pulse()) .child(recording_pulse(Color::Error))
.child( .child(
Label::new("REC") Label::new("REC")
.size(LabelSize::XSmall) .size(LabelSize::XSmall)
@ -2818,7 +2827,7 @@ impl Render for KeystrokeInput {
.editor_background .editor_background
.blend(colors.text_accent.opacity(0.1))) .blend(colors.text_accent.opacity(0.1)))
.rounded_sm() .rounded_sm()
.child(recording_pulse()) .child(recording_pulse(Color::Accent))
.child( .child(
Label::new("SEARCH") Label::new("SEARCH")
.size(LabelSize::XSmall) .size(LabelSize::XSmall)