Backdrop for new plate modal
This commit is contained in:
parent
e0ff131cd7
commit
5c3fa24f20
|
@ -6,6 +6,12 @@
|
||||||
font: inherit;
|
font: inherit;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
h1, h2, h3 {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: 0.4em;
|
||||||
|
margin-top: 0.4em;
|
||||||
|
}
|
||||||
|
|
||||||
div.main_container {
|
div.main_container {
|
||||||
height: 95vh;
|
height: 95vh;
|
||||||
|
@ -42,3 +48,10 @@ div.plate_container {
|
||||||
grid-column: right / right;
|
grid-column: right / right;
|
||||||
grid-row: upper / 3;
|
grid-row: upper / 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dialog {
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
.dialog::backdrop {
|
||||||
|
background: rgba(0,125,255,0.3);
|
||||||
|
}
|
||||||
|
|
|
@ -2,7 +2,7 @@ use yew::prelude::*;
|
||||||
use yewdux::prelude::*;
|
use yewdux::prelude::*;
|
||||||
|
|
||||||
use wasm_bindgen::JsCast;
|
use wasm_bindgen::JsCast;
|
||||||
use web_sys::{EventTarget, HtmlFormElement, FormData};
|
use web_sys::{EventTarget, HtmlFormElement, FormData, HtmlDialogElement};
|
||||||
|
|
||||||
use crate::data::{plate_instances::PlateInstance, transfer::Transfer};
|
use crate::data::{plate_instances::PlateInstance, transfer::Transfer};
|
||||||
use crate::data::plate::*;
|
use crate::data::plate::*;
|
||||||
|
@ -33,7 +33,8 @@ pub fn NewPlateDialog(props: &NewPlateDialogProps) -> Html {
|
||||||
"96" => PlateFormat::W96,
|
"96" => PlateFormat::W96,
|
||||||
_ => PlateFormat::W6,
|
_ => PlateFormat::W6,
|
||||||
};
|
};
|
||||||
let plate_type = match form_data.get("new_plate_type").as_string().unwrap().as_str() {
|
if let Some(pt_string) = form_data.get("new_plate_type").as_string() {
|
||||||
|
let plate_type = match pt_string.as_str() {
|
||||||
"src" => PlateType::Source,
|
"src" => PlateType::Source,
|
||||||
"dest" => PlateType::Destination,
|
"dest" => PlateType::Destination,
|
||||||
_ => PlateType::Source,
|
_ => PlateType::Source,
|
||||||
|
@ -47,11 +48,24 @@ pub fn NewPlateDialog(props: &NewPlateDialogProps) -> Html {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// This whole section is optional, only if you want the backdrop
|
||||||
|
let dialog_ref = use_node_ref();
|
||||||
|
{
|
||||||
|
let dialog_ref = dialog_ref.clone();
|
||||||
|
|
||||||
|
use_effect_with_deps(|dialog_ref| {
|
||||||
|
dialog_ref.cast::<HtmlDialogElement>().unwrap().show_modal().ok();
|
||||||
|
},
|
||||||
|
dialog_ref);
|
||||||
|
}
|
||||||
|
|
||||||
html! {
|
html! {
|
||||||
<dialog open=true>
|
<dialog ref={dialog_ref} class="dialog new_plate_dialog">
|
||||||
|
<h2>{"Create a plate:"}</h2>
|
||||||
<form onsubmit={new_plate_callback}>
|
<form onsubmit={new_plate_callback}>
|
||||||
<input type="text" name="new_plate_name" placeholder="Name"/>
|
<input type="text" name="new_plate_name" placeholder="Name"/>
|
||||||
<select name="plate_format">
|
<select name="plate_format">
|
||||||
|
|
Loading…
Reference in New Issue