From a2339583d2db73ff849ff3593fe6cd2c949ad230 Mon Sep 17 00:00:00 2001 From: Dan <39170265+chillenberger@users.noreply.github.com> Date: Fri, 6 Oct 2023 09:53:38 -0600 Subject: [PATCH] add utility to modal, add ability to have nto default style --- pgml-dashboard/src/components/modal/mod.rs | 20 ++++++++++++++++++- .../src/components/modal/modal.scss | 16 ++++++++++++++- .../src/components/modal/template.html | 8 +++----- 3 files changed, 37 insertions(+), 7 deletions(-) diff --git a/pgml-dashboard/src/components/modal/mod.rs b/pgml-dashboard/src/components/modal/mod.rs index 3d62535bb..c7dfc32f7 100644 --- a/pgml-dashboard/src/components/modal/mod.rs +++ b/pgml-dashboard/src/components/modal/mod.rs @@ -9,6 +9,7 @@ pub struct Modal { pub size_class: String, pub header: Option, pub body: Component, + pub default_style: bool, } component!(Modal); @@ -16,7 +17,10 @@ component!(Modal); impl Modal { /// Create a new x-large modal with the given body. pub fn new(body: Component) -> Self { - let modal = Modal::default(); + let modal = Modal { + default_style: true, + ..Modal::default() + }; let id = format!("modal-{}", crate::utils::random_string(10)); modal.id(&id).body(body).xlarge() @@ -45,6 +49,20 @@ impl Modal { self.header = Some(header); self } + + // Quick implimitation to toggle the modal + pub fn toggle(id: &str) -> String { + format!(r#"data-bs-toggle="modal" data-bs-target="{}{}""#, "#", id) + } + + pub fn dismiss() -> String { + r#"data-bs-dismiss="modal""#.into() + } + + pub fn no_default_style(mut self) -> Modal { + self.default_style = false; + self + } } #[cfg(test)] diff --git a/pgml-dashboard/src/components/modal/modal.scss b/pgml-dashboard/src/components/modal/modal.scss index c16ad5064..8a9082cb4 100644 --- a/pgml-dashboard/src/components/modal/modal.scss +++ b/pgml-dashboard/src/components/modal/modal.scss @@ -1,7 +1,8 @@ -.modal { +div[data-controller="modal"].modal { --bs-modal-margin: 1.65rem; --bs-modal-header-padding: 0; --bs-modal-width: 75vw; + --bs-modal-padding: 40px; @include media-breakpoint-up(lg) { --bs-modal-width: 40rem; @@ -29,4 +30,17 @@ width: 100%; display: flex; } + + .modal-body { + margin-top: 3rem; + background-color: #{$gray-600}; + border: 2px solid #{$gray-100}; + border-radius: $border-radius; + justify-content: center; + align-items: center; + flex-direction: column; + display: flex; + width: 100%; + height: 100%; + } } diff --git a/pgml-dashboard/src/components/modal/template.html b/pgml-dashboard/src/components/modal/template.html index 9d40e6e39..f54a0ebf3 100644 --- a/pgml-dashboard/src/components/modal/template.html +++ b/pgml-dashboard/src/components/modal/template.html @@ -1,4 +1,4 @@ -