diff --git a/file-service/src/html.rs b/file-service/src/html.rs index 9d293f4..d38fb21 100644 --- a/file-service/src/html.rs +++ b/file-service/src/html.rs @@ -186,6 +186,7 @@ pub struct Button { ty: Option, name: Option, label: String, + attributes: Attributes, } impl Button { @@ -194,6 +195,7 @@ impl Button { ty: None, name: None, label: label.to_owned(), + attributes: Attributes::default(), } } @@ -201,6 +203,19 @@ impl Button { self.ty = Some(ty.to_owned()); self } + + pub fn with_attributes<'a>( + mut self, + values: impl IntoIterator, + ) -> Self { + self.attributes = Attributes( + values + .into_iter() + .map(|(a, b)| (a.to_owned(), b.to_owned())) + .collect::>(), + ); + self + } } impl Html for Button { @@ -214,9 +229,10 @@ impl Html for Button { None => "".to_owned(), }; format!( - "", + "", name = name, - label = self.label + label = self.label, + attrs = self.attributes.to_string() ) } } diff --git a/file-service/src/pages.rs b/file-service/src/pages.rs index 0c6fcf8..18dd832 100644 --- a/file-service/src/pages.rs +++ b/file-service/src/pages.rs @@ -75,9 +75,16 @@ pub fn upload_form() -> Form { .with_container( Container::new(ContainerType::Div) .with_attributes([("class", "card upload-form")]) - .with_html(Input::new("file", "file").with_id("for-selector-input")) - .with_html(Label::new("for-selector-input", "Select a file")) - .with_html(Button::new("Upload file").with_type("submit")), + .with_html(Input::new("file", "file").with_attributes([ + ("id", "for-selector-input"), + ("placeholder", "select file"), + ("class", "upload-form__selector"), + ])) + .with_html( + Button::new("Upload file") + .with_attributes([("class", "upload-form__button")]) + .with_type("submit"), + ), ) } diff --git a/file-service/templates/style.css b/file-service/templates/style.css index 58447f5..e5e009f 100644 --- a/file-service/templates/style.css +++ b/file-service/templates/style.css @@ -53,6 +53,14 @@ body { flex-direction: column; } +.upload-form__selector { + margin: var(--space-small); +} + +.upload-form__button { + margin: var(--space-small); +} + .gallery { display: flex; flex-wrap: wrap;