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_field::StyledField;
use crate::shared::styled_form::StyledForm; use crate::shared::styled_form::StyledForm;
use crate::shared::styled_icon::{Icon, StyledIcon}; 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_modal::{StyledModal, Variant as ModalVariant};
use crate::shared::styled_select::StyledSelect; use crate::shared::styled_select::StyledSelect;
use crate::shared::ToNode; use crate::shared::ToNode;
@ -34,6 +35,18 @@ pub fn view(_model: &Model, modal: &AddIssueModal) -> Node<Msg> {
.build() .build()
.into_node(); .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() let submit = StyledButton::build()
.primary() .primary()
.text("Create Issue") .text("Create Issue")
@ -52,6 +65,7 @@ pub fn view(_model: &Model, modal: &AddIssueModal) -> Node<Msg> {
.heading("Create issue") .heading("Create issue")
.add_field(issue_type_field) .add_field(issue_type_field)
.add_field(crate::shared::divider()) .add_field(crate::shared::divider())
.add_field(short_summary_field)
.add_field(actions) .add_field(actions)
.build() .build()
.into_node(); .into_node();

View File

@ -172,13 +172,15 @@ fn header() -> Node<Msg> {
} }
fn project_board_filters(model: &Model) -> Node<Msg> { fn project_board_filters(model: &Model) -> Node<Msg> {
let search_input = StyledInput { let search_input = StyledInput::build()
icon: Some(Icon::Search), .icon(Icon::Search)
id: Some("searchInput".to_string()), .id("searchInput")
valid: true, .valid(true)
on_change: input_ev(Ev::Change, |value| Msg::ProjectTextFilterChanged(value)), .on_change(input_ev(Ev::Change, |value| {
} Msg::ProjectTextFilterChanged(value)
.into_node(); }))
.build()
.into_node();
let project_page = &model.project_page; 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::shared::ToNode;
use crate::Msg; use crate::Msg;
#[derive(Debug)]
pub struct StyledInput { pub struct StyledInput {
pub id: Option<String>, id: Option<String>,
pub icon: Option<Icon>, icon: Option<Icon>,
pub valid: bool, valid: bool,
pub on_change: EventHandler<Msg>, 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 { impl ToNode for StyledInput {
@ -40,10 +89,15 @@ pub fn render(values: StyledInput) -> Node<Msg> {
_ => empty![], _ => 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![ div![
id![id.unwrap_or_default()], id![id.unwrap_or_default()],
attrs!(At::Class => wrapper_class_list.join(" ")), attrs!(At::Class => wrapper_class_list.join(" ")),
icon, icon,
input![attrs![At::Class => input_class_list.join(" ")], on_change] input_node,
] ]
} }