Add styled field for unified labels and tips

This commit is contained in:
Adrian Woźniak 2020-04-04 19:56:40 +02:00
parent cafa0e6793
commit a0f1b90d9d
3 changed files with 82 additions and 12 deletions

View File

@ -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();

View File

@ -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;

View File

@ -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,
]
}