Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add some UI adjustments to the keymap editor (#34152)

Browse source 
Mostly simple things like spacing and colors.

Release Notes:

- N/A
This commit is contained in:
Danilo Leal 2025-07-09 17:11:24 -03:00 • committed by GitHub
parent e30e4381de
commit 9ab5e78b79
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 36 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

80
crates/settings_ui/src/keybindings.rs
View file

@ -1047,6 +1047,17 @@ impl KeybindingEditorModal {
impl Render for KeybindingEditorModal { impl Render for KeybindingEditorModal {
fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement { fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
let theme = cx.theme().colors(); let theme = cx.theme().colors();
let input_base = || {
div()
.w_full()
.py_2()
.px_3()
.min_h_8()
.rounded_md()
.bg(theme.editor_background)
.border_1()
.border_color(theme.border_variant)
};
return v_flex() return v_flex()
.w(rems(34.)) .w(rems(34.))
@ -1054,12 +1065,11 @@ impl Render for KeybindingEditorModal {
.child( .child(
v_flex() v_flex()
.p_3() .p_3()
.gap_2() .child(Label::new("Edit Keystroke"))
.child( .child(
v_flex().child(Label::new("Edit Keystroke")).child( Label::new("Input the desired keystroke for the selected action.")
Label::new("Input the desired keystroke for the selected action.") .color(Color::Muted)
.color(Color::Muted), .mb_2(),
),
) )
.child(self.keybind_editor.clone()), .child(self.keybind_editor.clone()),
) )
@ -1067,49 +1077,27 @@ impl Render for KeybindingEditorModal {
this.child( this.child(
v_flex() v_flex()
.p_3() .p_3()
.gap_3() .pt_0()
.child(Label::new("Edit Input"))
.child( .child(
v_flex().child(Label::new("Edit Input")).child( Label::new("Input the desired input to the binding.")
Label::new("Input the desired input to the binding.") .color(Color::Muted)
.color(Color::Muted), .mb_2(),
),
) )
.child( .child(input_base().child(editor)),
div()
.w_full()
.border_color(cx.theme().colors().border_variant)
.border_1()
.py_2()
.px_3()
.min_h_8()
.rounded_md()
.bg(theme.editor_background)
.child(editor),
),
) )
}) })
.child( .child(
v_flex() v_flex()
.p_3() .p_3()
.gap_3() .pt_0()
.child(Label::new("Edit Context"))
.child( .child(
v_flex().child(Label::new("Edit Context")).child( Label::new("Input the desired context for the binding.")
Label::new("Input the desired context for the binding.") .color(Color::Muted)
.color(Color::Muted), .mb_2(),
),
) )
.child( .child(input_base().child(self.context_editor.clone())),
div()
.w_full()
.border_color(cx.theme().colors().border_variant)
.border_1()
.py_2()
.px_3()
.min_h_8()
.rounded_md()
.bg(theme.editor_background)
.child(self.context_editor.clone()),
),
) )
.child( .child(
h_flex() h_flex()
@ -1118,7 +1106,7 @@ impl Render for KeybindingEditorModal {
.gap_1() .gap_1()
.justify_end() .justify_end()
.border_t_1() .border_t_1()
.border_color(cx.theme().colors().border_variant) .border_color(theme.border_variant)
.child( .child(
Button::new("cancel", "Cancel") Button::new("cancel", "Cancel")
.on_click(cx.listener(|_, _, _, cx| cx.emit(DismissEvent))), .on_click(cx.listener(|_, _, _, cx| cx.emit(DismissEvent))),
@ -1422,8 +1410,9 @@ impl Focusable for KeystrokeInput {
} }
impl Render for KeystrokeInput { impl Render for KeystrokeInput {
fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement { fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
let colors = cx.theme().colors(); let colors = cx.theme().colors();
let is_focused = self.focus_handle.is_focused(window);
return h_flex() return h_flex()
.id("keybinding_input") .id("keybinding_input")
@ -1440,12 +1429,13 @@ impl Render for KeystrokeInput {
.gap_2() .gap_2()
.min_h_8() .min_h_8()
.w_full() .w_full()
.flex_1()
.justify_between() .justify_between()
.rounded_md()
.overflow_hidden()
.bg(colors.editor_background) .bg(colors.editor_background)
.border_1() .border_1()
.rounded_md() .border_color(colors.border_variant)
.flex_1()
.overflow_hidden()
.child( .child(
h_flex() h_flex()
.w_full() .w_full()
@ -1470,6 +1460,7 @@ impl Render for KeystrokeInput {
.child( .child(
IconButton::new("backspace-btn", IconName::Delete) IconButton::new("backspace-btn", IconName::Delete)
.tooltip(Tooltip::text("Delete Keystroke")) .tooltip(Tooltip::text("Delete Keystroke"))
.when(!is_focused, |this| this.icon_color(Color::Muted))
.on_click(cx.listener(|this, _event, _window, cx| { .on_click(cx.listener(|this, _event, _window, cx| {
this.keystrokes.pop(); this.keystrokes.pop();
cx.notify(); cx.notify();
@ -1478,6 +1469,7 @@ impl Render for KeystrokeInput {
.child( .child(
IconButton::new("clear-btn", IconName::Eraser) IconButton::new("clear-btn", IconName::Eraser)
.tooltip(Tooltip::text("Clear Keystrokes")) .tooltip(Tooltip::text("Clear Keystrokes"))
.when(!is_focused, |this| this.icon_color(Color::Muted))
.on_click(cx.listener(|this, _event, _window, cx| { .on_click(cx.listener(|this, _event, _window, cx| {
this.keystrokes.clear(); this.keystrokes.clear();
cx.notify(); cx.notify();