Backdrop for new plate modal

This commit is contained in:
Emilia Allison 2023-05-22 20:48:47 -04:00
parent e0ff131cd7
commit 5c3fa24f20
Signed by: emilia
GPG Key ID: 7A3F8997BFE894E0
2 changed files with 41 additions and 14 deletions

View File

@ -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);
}

View File

@ -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">