mirror of
https://github.com/zed-industries/zed.git
synced 2024-11-28 09:54:33 +00:00
Introduce TextField by adding the ui_text_field
crate (#10361)
There hasn't been a componentized way to create inputs or text fields thus far due to the innate circular dependency between the `ui` and `editor` crates. To bypass this issue we are introducing a new `ui_text_field` crate to specifically handle this component. `TextField` provides the ability to add stacked or inline labels, as well as applies a standard visual style to inputs. Example: ![CleanShot - 2024-04-10 at 11 22 13@2x](https://github.com/zed-industries/zed/assets/1714999/9bf5fc40-5024-4d01-9a8b-fb76f67d7e6e) We'll continue to evolve this component in the near future and start using it in the app once we've built out the needed functionality. Release Notes: - N/A --------- Co-authored-by: Marshall Bowers <elliott.codes@gmail.com>
This commit is contained in:
parent
d03f1c4cab
commit
03d853d344
5 changed files with 220 additions and 0 deletions
11
Cargo.lock
generated
11
Cargo.lock
generated
|
@ -10718,6 +10718,17 @@ dependencies = [
|
|||
"windows 0.53.0",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "ui_text_field"
|
||||
version = "0.1.0"
|
||||
dependencies = [
|
||||
"editor",
|
||||
"gpui",
|
||||
"settings",
|
||||
"theme",
|
||||
"ui",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "unicase"
|
||||
version = "2.7.0"
|
||||
|
|
|
@ -90,6 +90,7 @@ members = [
|
|||
"crates/telemetry_events",
|
||||
"crates/time_format",
|
||||
"crates/ui",
|
||||
"crates/ui_text_field",
|
||||
"crates/util",
|
||||
"crates/vcs_menu",
|
||||
"crates/vim",
|
||||
|
@ -214,6 +215,7 @@ theme_selector = { path = "crates/theme_selector" }
|
|||
telemetry_events = { path = "crates/telemetry_events" }
|
||||
time_format = { path = "crates/time_format" }
|
||||
ui = { path = "crates/ui" }
|
||||
ui_text_field = { path = "crates/ui_text_field" }
|
||||
util = { path = "crates/util" }
|
||||
vcs_menu = { path = "crates/vcs_menu" }
|
||||
vim = { path = "crates/vim" }
|
||||
|
|
22
crates/ui_text_field/Cargo.toml
Normal file
22
crates/ui_text_field/Cargo.toml
Normal file
|
@ -0,0 +1,22 @@
|
|||
[package]
|
||||
name = "ui_text_field"
|
||||
version = "0.1.0"
|
||||
edition = "2021"
|
||||
publish = false
|
||||
license = "GPL-3.0-or-later"
|
||||
|
||||
[lints]
|
||||
workspace = true
|
||||
|
||||
[lib]
|
||||
path = "src/ui_text_field.rs"
|
||||
|
||||
[dependencies]
|
||||
editor.workspace = true
|
||||
gpui.workspace = true
|
||||
settings.workspace = true
|
||||
theme.workspace = true
|
||||
ui.workspace = true
|
||||
|
||||
[features]
|
||||
default = []
|
1
crates/ui_text_field/LICENSE-GPL
Symbolic link
1
crates/ui_text_field/LICENSE-GPL
Symbolic link
|
@ -0,0 +1 @@
|
|||
../../LICENSE-GPL
|
184
crates/ui_text_field/src/ui_text_field.rs
Normal file
184
crates/ui_text_field/src/ui_text_field.rs
Normal file
|
@ -0,0 +1,184 @@
|
|||
//! # UI – Text Field
|
||||
//!
|
||||
//! This crate provides a text field component that can be used to create text fields like search inputs, form fields, etc.
|
||||
//!
|
||||
//! It can't be located in the `ui` crate because it depends on `editor`.
|
||||
//!
|
||||
|
||||
use editor::*;
|
||||
use gpui::*;
|
||||
use settings::Settings;
|
||||
use theme::ThemeSettings;
|
||||
use ui::*;
|
||||
|
||||
#[derive(Debug, Clone, Copy, PartialEq)]
|
||||
pub enum FieldLabelLayout {
|
||||
Inline,
|
||||
Stacked,
|
||||
}
|
||||
|
||||
pub struct TextFieldStyle {
|
||||
text_color: Hsla,
|
||||
background_color: Hsla,
|
||||
border_color: Hsla,
|
||||
}
|
||||
|
||||
/// A Text Field view that can be used to create text fields like search inputs, form fields, etc.
|
||||
///
|
||||
/// It wraps a single line [`Editor`] view and allows for common field properties like labels, placeholders, icons, etc.
|
||||
pub struct TextField {
|
||||
/// An optional label for the text field.
|
||||
///
|
||||
/// Its position is determined by the [`FieldLabelLayout`].
|
||||
label: Option<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.
|
||||
///
|
||||
/// This likely will only be public in the short term, ideally the API will be expanded to cover necessary use cases.
|
||||
pub editor: View<Editor>,
|
||||
/// An optional icon that is displayed at the start of the text field.
|
||||
///
|
||||
/// 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,
|
||||
}
|
||||
|
||||
impl FocusableView for TextField {
|
||||
fn focus_handle(&self, cx: &AppContext) -> FocusHandle {
|
||||
self.editor.focus_handle(cx)
|
||||
}
|
||||
}
|
||||
|
||||
impl TextField {
|
||||
pub fn new(placeholder: impl Into<SharedString>, cx: &mut WindowContext) -> Self {
|
||||
let placeholder_text = placeholder.into();
|
||||
|
||||
let editor = cx.new_view(|cx| {
|
||||
let mut input = Editor::single_line(cx);
|
||||
input.set_placeholder_text(placeholder_text.clone(), cx);
|
||||
input
|
||||
});
|
||||
|
||||
Self {
|
||||
label: None,
|
||||
placeholder: placeholder_text,
|
||||
editor,
|
||||
start_icon: None,
|
||||
label_layout: FieldLabelLayout::Stacked,
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl Render for TextField {
|
||||
fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
|
||||
let settings = ThemeSettings::get_global(cx);
|
||||
let theme_color = cx.theme().colors();
|
||||
|
||||
let style = TextFieldStyle {
|
||||
text_color: theme_color.text,
|
||||
background_color: theme_color.ghost_element_background,
|
||||
border_color: theme_color.border,
|
||||
};
|
||||
|
||||
// if self.disabled {
|
||||
// style.text_color = theme_color.text_disabled;
|
||||
// style.background_color = theme_color.ghost_element_disabled;
|
||||
// style.border_color = theme_color.border_disabled;
|
||||
// }
|
||||
|
||||
// if self.error_message.is_some() {
|
||||
// style.text_color = cx.theme().status().error;
|
||||
// style.border_color = cx.theme().status().error_border
|
||||
// }
|
||||
|
||||
let text_style = TextStyle {
|
||||
font_family: settings.buffer_font.family.clone(),
|
||||
font_features: settings.buffer_font.features,
|
||||
font_size: rems(0.875).into(),
|
||||
font_weight: FontWeight::NORMAL,
|
||||
font_style: FontStyle::Normal,
|
||||
line_height: relative(1.2),
|
||||
color: style.text_color,
|
||||
..Default::default()
|
||||
};
|
||||
|
||||
let editor_style = EditorStyle {
|
||||
background: theme_color.ghost_element_background,
|
||||
local_player: cx.theme().players().local(),
|
||||
text: text_style,
|
||||
..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))
|
||||
.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)),
|
||||
),
|
||||
),
|
||||
)
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue