adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-23 06:19:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added width property to Modal dialog

Browse source
This commit is contained in:
Glenn Pierce 2024-02-20 10:32:29 +00:00 • committed by luoxiaozero
parent d2f1c8aaf0
commit 412742f2ca
2 changed files with 7 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
thaw/src/modal/mod.rs
View file

@ -15,11 +15,13 @@ pub fn Modal(
#[prop(into)] show: Model<bool>, #[prop(into)] show: Model<bool>,
#[prop(default = true.into(), into)] mask_closeable: MaybeSignal<bool>, #[prop(default = true.into(), into)] mask_closeable: MaybeSignal<bool>,
#[prop(default = 2000.into(), into)] z_index: MaybeSignal<i16>, #[prop(default = 2000.into(), into)] z_index: MaybeSignal<i16>,
#[prop(default = MaybeSignal::Static("75%".to_string()), into)] width: MaybeSignal<String>,
#[prop(optional, into)] title: MaybeSignal<String>, #[prop(optional, into)] title: MaybeSignal<String>,
children: Children, children: Children,
#[prop(optional)] modal_footer: Option<ModalFooter>, #[prop(optional)] modal_footer: Option<ModalFooter>,
) -> impl IntoView { ) -> impl IntoView {
mount_style("modal", include_str!("./modal.css")); mount_style("modal", include_str!("./modal.css"));
let on_mask_click = move |_| { let on_mask_click = move |_| {
if mask_closeable.get_untracked() { if mask_closeable.get_untracked() {
show.set(false); show.set(false);
@ -44,10 +46,13 @@ pub fn Modal(
let Some(modal_el) = modal_ref.get_untracked() else { let Some(modal_el) = modal_ref.get_untracked() else {
return; return;
}; };
let x = -(modal_el.offset_left() - position.0); let x = -(modal_el.offset_left() - position.0);
let y = -(modal_el.offset_top() - position.1 - scroll_top); let y = -(modal_el.offset_top() - position.1 - scroll_top);
let _ = modal_el.attr("style", format!("transform-origin: {}px {}px", x, y)); let mut style = format!("--thaw-width: {};", width.get_untracked());
style.push_str(&format!("transform-origin: {}px {}px;", x, y));
let _ = modal_el.attr("style", style);
}; };
view! { view! {

2
thaw/src/modal/modal.css
View file

@ -50,7 +50,7 @@
.thaw-modal-body { .thaw-modal-body {
position: relative; position: relative;
margin: auto; margin: auto;
width: 600px; width: var(--thaw-width);
} }
.thaw-model-title { .thaw-model-title {