savanni/monorepo
1
0
Fork 0
Code Issues 102 Pull Requests Actions 1 Projects 6 Releases Wiki Activity

Create a ModalElement to handle modal dialog boxes
Some checks failed
Monorepo build / build-flake (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Savanni D'Gerinel
2026-01-06 11:56:24 -05:00
parent 35e1753713
commit 38bc5a866a
5 changed files with 136 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
Cargo.lock generated
View File

@@ -439,6 +439,12 @@ dependencies = [
"system-deps",
]
[[package]]
name = "cast"
version = "0.3.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "37b2a672a2cb129a2e41c10b1224bb368f9f37a2b16b612598138befd7b37eb5"
[[package]]
name = "cc"
version = "1.2.45"
@@ -2210,9 +2216,9 @@ checksum = "4a5f13b858c8d314ee3e8f639011f7ccefe71f97f96e50151fb991f267928e2c"
[[package]]
name = "js-sys"
version = "0.3.82"
version = "0.3.83"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "b011eec8cc36da2aab2d5cff675ec18454fad408585853910a202391cf9f8e65"
checksum = "464a3709c7f55f1f721e5389aa6ea4e3bc6aba669353300af094b29ffbdde1d8"
dependencies = [
"once_cell",
"wasm-bindgen",
@@ -2286,6 +2292,12 @@ version = "0.2.177"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "2874a2af47a2325c2001a6e6fad9b16a53b802102b528163885171cf92b15976"
[[package]]
name = "libm"
version = "0.2.15"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "f9fbbcab51052fe104eb5e5d351cf728d30a5be1fe14d9be8a3b097481fb97de"
[[package]]
name = "libsqlite3-sys"
version = "0.35.0"
@@ -2464,6 +2476,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "071dfc062690e90b734c0b2273ce72ad0ffa95f0c74596bc250dcfd960262841"
dependencies = [
"autocfg",
"libm",
]
[[package]]
@@ -2488,6 +2501,12 @@ version = "1.70.2"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "384b8ab6d37215f3c5301a95a4accb5d64aa607f1fcb26a11b5303878451b4fe"
[[package]]
name = "oorandom"
version = "11.1.5"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "d6790f58c7ff633d8771f42965289203411a5e5c68388703c06e14f24770b41e"
[[package]]
name = "openssl"
version = "0.10.75"
@@ -4148,9 +4167,9 @@ dependencies = [
[[package]]
name = "wasm-bindgen"
version = "0.2.105"
version = "0.2.106"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "da95793dfc411fbbd93f5be7715b0578ec61fe87cb1a42b12eb625caa5c5ea60"
checksum = "0d759f433fa64a2d763d1340820e46e111a7a5ab75f993d1852d70b03dbb80fd"
dependencies = [
"cfg-if",
"once_cell",
@@ -4161,9 +4180,9 @@ dependencies = [
[[package]]
name = "wasm-bindgen-futures"
version = "0.4.55"
version = "0.4.56"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "551f88106c6d5e7ccc7cd9a16f312dd3b5d36ea8b4954304657d5dfba115d4a0"
checksum = "836d9622d604feee9e5de25ac10e3ea5f2d65b41eac0d9ce72eb5deae707ce7c"
dependencies = [
"cfg-if",
"js-sys",
@@ -4174,9 +4193,9 @@ dependencies = [
[[package]]
name = "wasm-bindgen-macro"
version = "0.2.105"
version = "0.2.106"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "04264334509e04a7bf8690f2384ef5265f05143a4bff3889ab7a3269adab59c2"
checksum = "48cb0d2638f8baedbc542ed444afc0644a29166f1595371af4fecf8ce1e7eeb3"
dependencies = [
"quote",
"wasm-bindgen-macro-support",
@@ -4184,9 +4203,9 @@ dependencies = [
[[package]]
name = "wasm-bindgen-macro-support"
version = "0.2.105"
version = "0.2.106"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "420bc339d9f322e562942d52e115d57e950d12d88983a14c79b86859ee6c7ebc"
checksum = "cefb59d5cd5f92d9dcf80e4683949f15ca4b511f4ac0a6e14d4e1ac60c6ecd40"
dependencies = [
"bumpalo",
"proc-macro2",
@@ -4197,21 +4216,29 @@ dependencies = [
[[package]]
name = "wasm-bindgen-shared"
version = "0.2.105"
version = "0.2.106"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "76f218a38c84bcb33c25ec7059b07847d465ce0e0a76b995e134a45adcb6af76"
checksum = "cbc538057e648b67f72a982e708d485b2efa771e1ac05fec311f9f63e5800db4"
dependencies = [
"unicode-ident",
]
[[package]]
name = "wasm-bindgen-test"
version = "0.3.55"
version = "0.3.56"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "bfc379bfb624eb59050b509c13e77b4eb53150c350db69628141abce842f2373"
checksum = "25e90e66d265d3a1efc0e72a54809ab90b9c0c515915c67cdf658689d2c22c6c"
dependencies = [
"async-trait",
"cast",
"js-sys",
"libm",
"minicov",
"nu-ansi-term",
"num-traits",
"oorandom",
"serde",
"serde_json",
"wasm-bindgen",
"wasm-bindgen-futures",
"wasm-bindgen-test-macro",
@@ -4219,9 +4246,9 @@ dependencies = [
[[package]]
name = "wasm-bindgen-test-macro"
version = "0.3.55"
version = "0.3.56"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "085b2df989e1e6f9620c1311df6c996e83fe16f57792b272ce1e024ac16a90f1"
checksum = "7150335716dce6028bead2b848e72f47b45e7b9422f64cccdc23bedca89affc1"
dependencies = [
"proc-macro2",
"quote",
@@ -4243,9 +4270,9 @@ dependencies = [
[[package]]
name = "web-sys"
version = "0.3.82"
version = "0.3.83"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "3a1f95c0d03a47f4ae1f7a64643a6bb97465d9b740f0fa8f90ea33915c99a9a1"
checksum = "9b32828d774c412041098d182a8b38b16ea816958e07cf40eec2bc080ae137ac"
dependencies = [
"js-sys",
"wasm-bindgen",

2
visions/ui/Cargo.toml
View File

@@ -20,7 +20,7 @@ visions-types = { path = "../types" }
wasm-bindgen = { workspace = true }
wasm-bindgen-futures = { workspace = true }
wasm-sockets = "1.0.0"
web-sys = { workspace = true, features = ["DataTransfer", "DragEvent", "Location", "Window"] }
web-sys = { workspace = true, features = ["DataTransfer", "DragEvent", "Location", "Window", "HtmlDialogElement"] }
yew = { workspace = true }
yew-router = { workspace = true }

3
visions/ui/src/components/mod.rs
View File

@@ -42,6 +42,9 @@ pub use label::*;
mod list;
pub use list::*;
mod modal;
pub use modal::*;
mod panel;
pub use panel::*;

55
visions/ui/src/components/modal.rs Normal file
View File

@@ -0,0 +1,55 @@
use stylist::{css, Style};
use web_sys::HtmlDialogElement;
use yew::prelude::*;
use crate::{
clone,
components::Button,
design::{self, border_primary, float_shallow},
};
#[derive(Properties, PartialEq)]
pub struct ModalElementProps {
#[prop_or(Classes::new())]
pub class: Classes,
pub title: String,
pub children: Html,
#[prop_or(false)]
pub open: bool,
pub on_cancel: Callback<()>,
}
#[function_component]
pub fn ModalElement(
ModalElementProps {
class,
title,
children,
open,
on_cancel,
}: &ModalElementProps,
) -> Html {
let modal_ref = use_node_ref();
use_effect_with((modal_ref.clone(), *open), |(modal, open)| {
let modal = modal.cast::<HtmlDialogElement>().unwrap();
if *open {
let _ = modal.show_modal();
} else {
let _ = modal.close();
}
});
html! {
<dialog ref={modal_ref} class={float_shallow()}>
<div>
{title.clone()}
<Button on_click={on_cancel}>{"X"}</Button>
</div>
{children.clone()}
</dialog>
}
}

32
visions/ui/src/views/design.rs
View File

@@ -29,6 +29,9 @@ pub enum Page {
#[at("/design/game-management")]
GameManagement,
#[at("/design/modal")]
Modal,
#[at("/design/panel")]
Panel,
@@ -54,6 +57,7 @@ impl ListItem for Page {
Page::EditGame => "edit-game",
Page::FieldsLabels => "fields-labels",
Page::GameManagement => "game-management",
Page::Modal => "modal",
Page::Panel => "panel",
Page::SemanticTokens => "semantic-tokens",
Page::Swatches => "swatches",
@@ -112,6 +116,12 @@ impl ListItem for Page {
move |_| on_navigate(Page::GameManagement)
})}>{"Game Management"}</div> }
}
Page::Modal => {
html! { <div onclick={Callback::from({
let on_navigate = on_navigate.clone();
move |_| on_navigate(Page::Modal)
})}>{"Modal Dialogs"}</div> }
}
Page::Panel => {
html! { <div onclick={Callback::from({
let on_navigate = on_navigate.clone();
@@ -223,6 +233,7 @@ fn switch(route: Page) -> Html {
Page::Default => html! { <SwatchPage /> },
Page::EditGame => html! { <EditGamePage /> },
Page::FieldsLabels => html! { <FieldsLabelsPage /> },
Page::Modal => html! { <ModalPage /> },
Page::Panel => html! { <PanelPage /> },
Page::SemanticTokens => html! { <SemanticTokens /> },
Page::Swatches => html! { <SwatchPage /> },
@@ -251,6 +262,7 @@ fn switch(route: Page) -> Html {
Page::Panel,
Page::Card,
Page::Tabs,
Page::Modal,
Page::UserManagement,
Page::GameManagement,
Page::EditGame
@@ -400,6 +412,26 @@ pub fn FieldsLabelsPage() -> Html {
}
}
#[function_component]
pub fn ModalPage() -> Html {
let is_modal_open = use_state(|| false);
html! {
<div>
<ModalElement
title="Demonstration Modal"
open={*is_modal_open}
on_cancel={clone!(is_modal_open, move |_| is_modal_open.set(false))}
>
<PanelElement>
<p> {"content of the modal"} </p>
<Button on_click={clone!(is_modal_open, move |_| is_modal_open.set(false))}>{"Close the Modal"}</Button>
</PanelElement>
</ModalElement>
<Button on_click={clone!(is_modal_open, move |_| is_modal_open.set(true))}>{"Open the Modal"}</Button>
</div>
}
}
#[function_component]
pub fn SemanticTokens() -> Html {
html! {