Add styled field for unified labels and tips
This commit is contained in:
parent
cafa0e6793
commit
a0f1b90d9d
@ -7,6 +7,7 @@ use crate::shared::styled_button::StyledButton;
|
||||
use crate::shared::styled_field::StyledField;
|
||||
use crate::shared::styled_form::StyledForm;
|
||||
use crate::shared::styled_icon::{Icon, StyledIcon};
|
||||
use crate::shared::styled_input::StyledInput;
|
||||
use crate::shared::styled_modal::{StyledModal, Variant as ModalVariant};
|
||||
use crate::shared::styled_select::StyledSelect;
|
||||
use crate::shared::ToNode;
|
||||
@ -34,6 +35,18 @@ pub fn view(_model: &Model, modal: &AddIssueModal) -> Node<Msg> {
|
||||
.build()
|
||||
.into_node();
|
||||
|
||||
let short_summary = StyledInput::build()
|
||||
.id("issue-short-summary")
|
||||
.valid(true)
|
||||
.build()
|
||||
.into_node();
|
||||
let short_summary_field = StyledField::build()
|
||||
.label("Short Summary")
|
||||
.tip("Concisely summarize the issue in one or two sentences.")
|
||||
.input(short_summary)
|
||||
.build()
|
||||
.into_node();
|
||||
|
||||
let submit = StyledButton::build()
|
||||
.primary()
|
||||
.text("Create Issue")
|
||||
@ -52,6 +65,7 @@ pub fn view(_model: &Model, modal: &AddIssueModal) -> Node<Msg> {
|
||||
.heading("Create issue")
|
||||
.add_field(issue_type_field)
|
||||
.add_field(crate::shared::divider())
|
||||
.add_field(short_summary_field)
|
||||
.add_field(actions)
|
||||
.build()
|
||||
.into_node();
|
||||
|
@ -172,12 +172,14 @@ fn header() -> Node<Msg> {
|
||||
}
|
||||
|
||||
fn project_board_filters(model: &Model) -> Node<Msg> {
|
||||
let search_input = StyledInput {
|
||||
icon: Some(Icon::Search),
|
||||
id: Some("searchInput".to_string()),
|
||||
valid: true,
|
||||
on_change: input_ev(Ev::Change, |value| Msg::ProjectTextFilterChanged(value)),
|
||||
}
|
||||
let search_input = StyledInput::build()
|
||||
.icon(Icon::Search)
|
||||
.id("searchInput")
|
||||
.valid(true)
|
||||
.on_change(input_ev(Ev::Change, |value| {
|
||||
Msg::ProjectTextFilterChanged(value)
|
||||
}))
|
||||
.build()
|
||||
.into_node();
|
||||
|
||||
let project_page = &model.project_page;
|
||||
|
@ -4,11 +4,60 @@ use crate::shared::styled_icon::{Icon, StyledIcon};
|
||||
use crate::shared::ToNode;
|
||||
use crate::Msg;
|
||||
|
||||
#[derive(Debug)]
|
||||
pub struct StyledInput {
|
||||
pub id: Option<String>,
|
||||
pub icon: Option<Icon>,
|
||||
pub valid: bool,
|
||||
pub on_change: EventHandler<Msg>,
|
||||
id: Option<String>,
|
||||
icon: Option<Icon>,
|
||||
valid: bool,
|
||||
on_change: Option<EventHandler<Msg>>,
|
||||
}
|
||||
|
||||
impl StyledInput {
|
||||
pub fn build() -> StyledInputBuilder {
|
||||
StyledInputBuilder::default()
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(Default, Debug)]
|
||||
pub struct StyledInputBuilder {
|
||||
id: Option<String>,
|
||||
icon: Option<Icon>,
|
||||
valid: Option<bool>,
|
||||
on_change: Option<EventHandler<Msg>>,
|
||||
}
|
||||
|
||||
impl StyledInputBuilder {
|
||||
pub fn id<S>(mut self, id: S) -> Self
|
||||
where
|
||||
S: Into<String>,
|
||||
{
|
||||
self.id = Some(id.into());
|
||||
self
|
||||
}
|
||||
|
||||
pub fn icon(mut self, icon: Icon) -> Self {
|
||||
self.icon = Some(icon);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn valid(mut self, valid: bool) -> Self {
|
||||
self.valid = Some(valid);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn on_change(mut self, on_change: EventHandler<Msg>) -> Self {
|
||||
self.on_change = Some(on_change);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn build(self) -> StyledInput {
|
||||
StyledInput {
|
||||
id: self.id,
|
||||
icon: self.icon,
|
||||
valid: self.valid.unwrap_or_default(),
|
||||
on_change: self.on_change,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl ToNode for StyledInput {
|
||||
@ -40,10 +89,15 @@ pub fn render(values: StyledInput) -> Node<Msg> {
|
||||
_ => empty![],
|
||||
};
|
||||
|
||||
let input_node = match on_change {
|
||||
Some(on_change) => seed::input![attrs![At::Class => input_class_list.join(" ")], on_change],
|
||||
_ => seed::input![attrs![At::Class => input_class_list.join(" ")]],
|
||||
};
|
||||
|
||||
div![
|
||||
id![id.unwrap_or_default()],
|
||||
attrs!(At::Class => wrapper_class_list.join(" ")),
|
||||
icon,
|
||||
input![attrs![At::Class => input_class_list.join(" ")], on_change]
|
||||
input_node,
|
||||
]
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user