mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-10-23 14:59:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Update TextField (#10415)

Browse source 
This PR makes some simple updates to the TextField api and update it's
styling.

Release Notes:

- N/A
This commit is contained in:
Nate Butler 2024-04-11 10:03:36 -04:00 committed by GitHub
parent ea165e134d
commit 837b7111b3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 47 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

110
crates/ui_text_field/src/ui_text_field.rs
View file

@ -13,6 +13,7 @@ use ui::*;
#[derive(Debug, Clone, Copy, PartialEq)]
pub enum FieldLabelLayout {
Hidden,
Inline,
Stacked,
}
@ -30,10 +31,8 @@ pub struct TextField {
/// An optional label for the text field.
///
/// Its position is determined by the [`FieldLabelLayout`].
label: Option<SharedString>,
label: SharedString,
/// The placeholder text for the text field.
///
/// All text fields must have placeholder text that is displayed when the field is empty.
placeholder: SharedString,
/// Exposes the underlying [`View<Editor>`] to allow for customizing the editor beyond the provided API.
///
@ -44,7 +43,7 @@ pub struct TextField {
/// For example, a magnifying glass icon in a search field.
start_icon: Option<IconName>,
/// The layout of the label relative to the text field.
label_layout: FieldLabelLayout,
with_label: FieldLabelLayout,
}
impl FocusableView for TextField {
@ -54,7 +53,11 @@ impl FocusableView for TextField {
}
impl TextField {
pub fn new(placeholder: impl Into<SharedString>, cx: &mut WindowContext) -> Self {
pub fn new(
cx: &mut WindowContext,
label: impl Into<SharedString>,
placeholder: impl Into<SharedString>,
) -> Self {
let placeholder_text = placeholder.into();
let editor = cx.new_view(|cx| {
@ -64,31 +67,21 @@ impl TextField {
});
Self {
label: None,
label: label.into(),
placeholder: placeholder_text,
editor,
start_icon: None,
label_layout: FieldLabelLayout::Stacked,
with_label: FieldLabelLayout::Hidden,
}
}
pub fn label(mut self, label: impl Into<SharedString>) -> Self {
self.label = Some(label.into());
self
}
pub fn placeholder(mut self, placeholder: impl Into<SharedString>) -> Self {
self.placeholder = placeholder.into();
self
}
pub fn start_icon(mut self, icon: IconName) -> Self {
self.start_icon = Some(icon);
self
}
pub fn label_layout(mut self, layout: FieldLabelLayout) -> Self {
self.label_layout = layout;
pub fn with_label(mut self, layout: FieldLabelLayout) -> Self {
self.with_label = layout;
self
}
}
@ -133,52 +126,43 @@ impl Render for TextField {
..Default::default()
};
let stacked_label: Option<Label> = if self.label_layout == FieldLabelLayout::Stacked {
self.label
.clone()
.map(|label| Label::new(label).size(LabelSize::Small))
} else {
None
};
let inline_label: Option<Label> = if self.label_layout == FieldLabelLayout::Inline {
self.label
.clone()
.map(|label| Label::new(label).size(LabelSize::Small))
} else {
None
};
div()
.when_some(stacked_label, |this, label| this.child(label))
.id(self.placeholder.clone())
.group("text-field")
.w_full()
.when(self.with_label == FieldLabelLayout::Stacked, |this| {
this.child(Label::new(self.label.clone()).size(LabelSize::Default))
})
.child(
v_flex()
.w_full()
.px_2()
.py_1()
.bg(style.background_color)
.text_color(style.text_color)
.rounded_lg()
.border()
.border_color(style.border_color)
.w_48()
.child(
h_flex()
.gap_2()
.when_some(inline_label, |this, label| this.child(label))
.child(
h_flex()
.gap_1()
.when_some(self.start_icon, |this, icon| {
this.child(
Icon::new(icon)
.size(IconSize::Small)
.color(Color::Muted),
)
})
.child(EditorElement::new(&self.editor, editor_style)),
),
),
v_flex().w_full().child(
h_flex()
.w_full()
.flex_grow()
.gap_2()
.when(self.with_label == FieldLabelLayout::Inline, |this| {
this.child(Label::new(self.label.clone()).size(LabelSize::Default))
})
.child(
h_flex()
.px_2()
.py_1()
.bg(style.background_color)
.text_color(style.text_color)
.rounded_lg()
.border()
.border_color(style.border_color)
.min_w_48()
.w_full()
.flex_grow()
.gap_1()
.when_some(self.start_icon, |this, icon| {
this.child(
Icon::new(icon).size(IconSize::Small).color(Color::Muted),
)
})
.child(EditorElement::new(&self.editor, editor_style)),
),
),
)
}
}