settings ui: Add another batch of UX fixes and improvements (#39742)
Release Notes: - N/A
This commit is contained in:
Danilo Leal
@@ -6,7 +6,7 @@ use std::{
|
||||
};
|
||||
|
||||
use editor::{Editor, EditorStyle};
|
||||
use gpui::{ClickEvent, Entity, FocusHandle, Focusable, FontWeight, Modifiers};
|
||||
use gpui::{ClickEvent, CursorStyle, Entity, FocusHandle, Focusable, FontWeight, Modifiers};
|
||||
|
||||
use settings::{CodeFade, MinimumContrast};
|
||||
use ui::prelude::*;
|
||||
@@ -344,6 +344,27 @@ impl<T: NumberFieldType> RenderOnce for NumberField<T> {
|
||||
}
|
||||
};
|
||||
|
||||
let bg_color = cx.theme().colors().surface_background;
|
||||
let hover_bg_color = cx.theme().colors().element_hover;
|
||||
|
||||
let border_color = cx.theme().colors().border_variant;
|
||||
let focus_border_color = cx.theme().colors().border_focused;
|
||||
|
||||
let base_button = |icon: IconName| {
|
||||
h_flex()
|
||||
.cursor(CursorStyle::PointingHand)
|
||||
.p_1p5()
|
||||
.size_full()
|
||||
.justify_center()
|
||||
.overflow_hidden()
|
||||
.border_1()
|
||||
.border_color(border_color)
|
||||
.bg(bg_color)
|
||||
.hover(|s| s.bg(hover_bg_color))
|
||||
.focus(|s| s.border_color(focus_border_color).bg(hover_bg_color))
|
||||
.child(Icon::new(icon).size(IconSize::Small))
|
||||
};
|
||||
|
||||
h_flex()
|
||||
.id(self.id.clone())
|
||||
.track_focus(&self.focus_handle)
|
||||
@@ -376,28 +397,19 @@ impl<T: NumberFieldType> RenderOnce for NumberField<T> {
|
||||
};
|
||||
|
||||
decrement.child(
|
||||
h_flex()
|
||||
base_button(IconName::Dash)
|
||||
.id("decrement_button")
|
||||
.cursor(gpui::CursorStyle::PointingHand)
|
||||
.p_1p5()
|
||||
.size_full()
|
||||
.justify_center()
|
||||
.overflow_hidden()
|
||||
.rounded_tl_sm()
|
||||
.rounded_bl_sm()
|
||||
.border_1()
|
||||
.border_color(cx.theme().colors().border_variant)
|
||||
.bg(cx.theme().colors().surface_background)
|
||||
.hover(|s| s.bg(cx.theme().colors().element_hover))
|
||||
.child(Icon::new(IconName::Dash).size(IconSize::Small))
|
||||
.when_some(tab_index.as_mut(), |this, tab_index| {
|
||||
*tab_index += 1;
|
||||
this.tab_index(*tab_index - 1).focus(|style| {
|
||||
style
|
||||
.border_color(cx.theme().colors().border_focused)
|
||||
.bg(cx.theme().colors().element_hover)
|
||||
})
|
||||
})
|
||||
.tab_index(
|
||||
tab_index
|
||||
.as_mut()
|
||||
.map(|tab_index| {
|
||||
*tab_index += 1;
|
||||
*tab_index - 1
|
||||
})
|
||||
.unwrap_or(0),
|
||||
)
|
||||
.on_click(decrement_handler),
|
||||
)
|
||||
})
|
||||
@@ -406,34 +418,23 @@ impl<T: NumberFieldType> RenderOnce for NumberField<T> {
|
||||
.min_w_16()
|
||||
.size_full()
|
||||
.border_y_1()
|
||||
.border_color(cx.theme().colors().border_variant)
|
||||
.bg(cx.theme().colors().surface_background)
|
||||
.in_focus(|this| this.border_color(cx.theme().colors().border_focused))
|
||||
.border_color(border_color)
|
||||
.bg(bg_color)
|
||||
.in_focus(|this| this.border_color(focus_border_color))
|
||||
.child(match *self.mode.read(cx) {
|
||||
NumberFieldMode::Read => h_flex()
|
||||
.id("numeric_stepper_label")
|
||||
.px_1()
|
||||
.flex_1()
|
||||
.justify_center()
|
||||
.child(Label::new((self.format)(&self.value)))
|
||||
.when_some(tab_index.as_mut(), |this, tab_index| {
|
||||
*tab_index += 1;
|
||||
this.tab_index(*tab_index - 1).focus(|style| {
|
||||
style
|
||||
.border_color(cx.theme().colors().border_focused)
|
||||
.bg(cx.theme().colors().element_hover)
|
||||
})
|
||||
})
|
||||
.on_click({
|
||||
let _mode = self.mode.clone();
|
||||
move |click, _, _cx| {
|
||||
if click.click_count() == 2 || click.is_keyboard() {
|
||||
// Edit mode is disabled until we implement center text alignment for editor
|
||||
// mode.write(cx, NumberFieldMode::Edit);
|
||||
}
|
||||
}
|
||||
})
|
||||
.into_any_element(),
|
||||
// Edit mode is disabled until we implement center text alignment for editor
|
||||
// mode.write(cx, NumberFieldMode::Edit);
|
||||
//
|
||||
// When we get to making Edit mode work, we shouldn't even focus the decrement/increment buttons.
|
||||
// Focus should go instead straight to the editor, avoiding any double-step focus.
|
||||
// In this world, the buttons become a mouse-only interaction, given users should be able
|
||||
// to do everything they'd do with the buttons straight in the editor anyway.
|
||||
NumberFieldMode::Edit => h_flex()
|
||||
.flex_1()
|
||||
.child(window.use_state(cx, {
|
||||
@@ -501,28 +502,19 @@ impl<T: NumberFieldType> RenderOnce for NumberField<T> {
|
||||
};
|
||||
|
||||
increment.child(
|
||||
h_flex()
|
||||
base_button(IconName::Plus)
|
||||
.id("increment_button")
|
||||
.cursor(gpui::CursorStyle::PointingHand)
|
||||
.p_1p5()
|
||||
.size_full()
|
||||
.justify_center()
|
||||
.overflow_hidden()
|
||||
.rounded_tr_sm()
|
||||
.rounded_br_sm()
|
||||
.border_1()
|
||||
.border_color(cx.theme().colors().border_variant)
|
||||
.bg(cx.theme().colors().surface_background)
|
||||
.hover(|s| s.bg(cx.theme().colors().element_hover))
|
||||
.child(Icon::new(IconName::Plus).size(IconSize::Small))
|
||||
.when_some(tab_index.as_mut(), |this, tab_index| {
|
||||
*tab_index += 1;
|
||||
this.tab_index(*tab_index - 1).focus(|style| {
|
||||
style
|
||||
.border_color(cx.theme().colors().border_focused)
|
||||
.bg(cx.theme().colors().element_hover)
|
||||
})
|
||||
})
|
||||
.tab_index(
|
||||
tab_index
|
||||
.as_mut()
|
||||
.map(|tab_index| {
|
||||
*tab_index += 1;
|
||||
*tab_index - 1
|
||||
})
|
||||
.unwrap_or(0),
|
||||
)
|
||||
.on_click(increment_handler),
|
||||
)
|
||||
}),
|
||||
|
||||
Reference in New Issue
Block a user