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;