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_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();
|
||||||
|
@ -172,12 +172,14 @@ 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)
|
||||||
|
}))
|
||||||
|
.build()
|
||||||
.into_node();
|
.into_node();
|
||||||
|
|
||||||
let project_page = &model.project_page;
|
let project_page = &model.project_page;
|
||||||
|
@ -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,
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user