From 7ff9325fe6543ba812d90eb9c28d02cbf18d3c46 Mon Sep 17 00:00:00 2001 From: tiye Date: Thu, 22 Dec 2022 22:32:15 +0800 Subject: [PATCH] fix modal styles by getting back code --- respo/src/dialog.rs | 90 +++++++++++++++++++++++++++++++++++-- respo/src/dialog/alert.rs | 8 ++-- respo/src/dialog/confirm.rs | 8 ++-- respo/src/dialog/drawer.rs | 8 ++-- respo/src/dialog/modal.rs | 8 ++-- respo/src/dialog/prompt.rs | 8 ++-- 6 files changed, 107 insertions(+), 23 deletions(-) diff --git a/respo/src/dialog.rs b/respo/src/dialog.rs index 2f06727..a364e0c 100644 --- a/respo/src/dialog.rs +++ b/respo/src/dialog.rs @@ -51,7 +51,74 @@ fn focus_element(el: &Node, name: &str) -> Result<(), String> { Ok(()) } -pub(crate) fn effect_fade(args: Vec, effect_type: RespoEffectType, el: &Node) -> Result<(), String> { +pub(crate) fn effect_modal_fade(args: Vec, effect_type: RespoEffectType, el: &Node) -> Result<(), String> { + let show: bool = args[0].cast_into()?; + match effect_type { + RespoEffectType::BeforeUpdate => { + if !show { + // when closing, fade out the cloned element + match el.first_child() { + Some(target) => { + let d = target.clone_node_with_deep(true).unwrap(); + let cloned = Rc::new(d.dyn_ref::().unwrap().to_owned()); // outlive + let cloned2 = cloned.clone(); + let document = el.owner_document().unwrap(); + document.body().unwrap().append_child(&cloned).unwrap(); + // setTimeout + let window = web_sys::window().unwrap(); + let immediate_call: Closure = Closure::once(move || { + let style = cloned.style(); + style.set_property("opacity", "0").unwrap(); + let card = cloned.first_child().unwrap(); + let card_style = card.dyn_ref::().unwrap().style(); + card_style.set_property("transition-duration", "240ms").unwrap(); + card_style.set_property("transform", "scale(0.94) translate(0px,-20px)").unwrap(); + }); + window + .set_timeout_with_callback_and_timeout_and_arguments_0(immediate_call.as_ref().unchecked_ref(), 10) + .unwrap(); + immediate_call.forget(); + let delay_call: Closure = Closure::once(move || { + cloned2.remove(); + }); + window + .set_timeout_with_callback_and_timeout_and_arguments_0(delay_call.as_ref().unchecked_ref(), 250) + .unwrap(); + delay_call.forget(); + } + None => { + respo::util::log!("content not found"); + } + } + } + } + RespoEffectType::Updated => { + if show { + // when opening, fade in the cloned element + let target = el.first_child().unwrap(); + let style = target.dyn_ref::().unwrap().style(); + let card_style = target.first_child().unwrap().dyn_ref::().unwrap().style(); + style.set_property("opacity", "0").unwrap(); + card_style.set_property("transform", "scale(0.94) translate(0px,-12px)").unwrap(); + let call = Closure::once(move || { + style.set_property("transition-duration", "240ms").unwrap(); + card_style.set_property("transition-duration", "240ms").unwrap(); + style.set_property("opacity", "1").unwrap(); + card_style.set_property("transform", "scale(1) translate(0px,0px)").unwrap(); + }); + let window = web_sys::window().unwrap(); + window + .set_timeout_with_callback_and_timeout_and_arguments_0(call.as_ref().unchecked_ref(), 10) + .unwrap(); + call.forget(); + } + } + _ => {} + } + Ok(()) +} + +pub(crate) fn effect_drawer_fade(args: Vec, effect_type: RespoEffectType, el: &Node) -> Result<(), String> { let show: bool = args[0].cast_into()?; match effect_type { @@ -88,7 +155,7 @@ pub(crate) fn effect_fade(args: Vec, effect_type: RespoEffectTyp delay_call.forget(); } None => { - respo::util::log!("conetent not found"); + respo::util::log!("content not found"); } } } @@ -132,7 +199,24 @@ static_styles!( ); static_styles!( - css_card, + css_modal_card, + ( + "$0".to_owned(), + RespoStyle::default() + .background_color(CssColor::Hsl(0, 0, 100)) + .max_width(CssSize::Px(600.0)) + .width(CssSize::Percent(100.)) + .max_height(CssSize::Vh(80.0)) + .overflow(CssOverflow::Auto) + .border_radius(3.0) + .color(CssColor::Hsl(0, 0, 0)) + .insert("margin", "auto".to_owned()) + .padding(16.0) + ) +); + +static_styles!( + css_drawer_card, ( "$0".to_owned(), RespoStyle::default() diff --git a/respo/src/dialog/alert.rs b/respo/src/dialog/alert.rs index 4637f2a..6b851ac 100644 --- a/respo/src/dialog/alert.rs +++ b/respo/src/dialog/alert.rs @@ -5,14 +5,14 @@ use std::rc::Rc; use serde::{Deserialize, Serialize}; -use crate::dialog::{css_backdrop, css_button, css_card}; +use crate::dialog::{css_backdrop, css_button, css_modal_card}; use crate::ui::{ui_button, ui_center, ui_column, ui_fullscreen, ui_global, ui_row_parted}; use crate::{ button, div, space, span, CssLineHeight, CssPosition, DispatchFn, RespoAction, RespoEvent, RespoNode, RespoStyle, StatesTree, }; -use crate::dialog::{effect_fade, effect_focus, BUTTON_NAME}; +use crate::dialog::{effect_focus, effect_modal_fade, BUTTON_NAME}; /// The options for alert modal. #[derive(Debug, Clone, Default)] @@ -55,7 +55,7 @@ where Ok(()) }) .children([div() - .class_list(&[ui_column(), ui_global(), css_card()]) + .class_list(&[ui_column(), ui_global(), css_modal_card()]) .style(RespoStyle::default().line_height(CssLineHeight::Px(32.0)).to_owned()) .style(options.card_style) .on_click(move |e, _dispatch| -> Result<(), String> { @@ -96,7 +96,7 @@ where .to_owned(), ) .effect(&[show], effect_focus) - .effect(&[show], effect_fade) + .effect(&[show], effect_modal_fade) .share_with_ref(), ) } diff --git a/respo/src/dialog/confirm.rs b/respo/src/dialog/confirm.rs index 0217f91..2f711e6 100644 --- a/respo/src/dialog/confirm.rs +++ b/respo/src/dialog/confirm.rs @@ -8,14 +8,14 @@ use serde::{Deserialize, Serialize}; use wasm_bindgen::prelude::Closure; use wasm_bindgen::{JsCast, JsValue}; -use crate::dialog::{css_backdrop, css_button, css_card}; +use crate::dialog::{css_backdrop, css_button, css_modal_card}; use crate::ui::{ui_button, ui_center, ui_column, ui_fullscreen, ui_global, ui_row_parted}; use crate::{ button, div, respo, space, span, CssLineHeight, CssPosition, DispatchFn, RespoAction, RespoEvent, RespoNode, RespoStyle, StatesTree, }; -use crate::dialog::{effect_fade, effect_focus, BUTTON_NAME}; +use crate::dialog::{effect_focus, effect_modal_fade, BUTTON_NAME}; const NEXT_TASK_NAME: &str = "_RESPO_CONFIRM_NEXT_TASK"; @@ -60,7 +60,7 @@ where Ok(()) }) .children([div() - .class_list(&[ui_column(), ui_global(), css_card()]) + .class_list(&[ui_column(), ui_global(), css_modal_card()]) .style(RespoStyle::default().line_height(CssLineHeight::Px(32.0)).to_owned()) .style(options.card_style) .on_click(move |e, _dispatch| -> Result<(), String> { @@ -103,7 +103,7 @@ where .to_owned(), ) .effect(&[show], effect_focus) - .effect(&[show], effect_fade) + .effect(&[show], effect_modal_fade) .share_with_ref(), ) } diff --git a/respo/src/dialog/drawer.rs b/respo/src/dialog/drawer.rs index 0a3281a..1442581 100644 --- a/respo/src/dialog/drawer.rs +++ b/respo/src/dialog/drawer.rs @@ -5,12 +5,12 @@ use std::rc::Rc; use serde::{Deserialize, Serialize}; -use crate::dialog::{css_backdrop, css_card}; +use crate::dialog::{css_backdrop, css_drawer_card}; use crate::ui::{ui_center, ui_column, ui_fullscreen, ui_global}; use crate::{div, space, span, CssLineHeight, CssPosition, DispatchFn, RespoAction, RespoEvent, RespoNode, RespoStyle, StatesTree}; -use crate::dialog::effect_fade; +use crate::dialog::effect_drawer_fade; /// The options for custom drawer. #[derive(Debug, Clone, Default)] @@ -99,7 +99,7 @@ where Ok(()) }) .children([div() - .class_list(&[ui_column(), ui_global(), css_card()]) + .class_list(&[ui_column(), ui_global(), css_drawer_card()]) .style(RespoStyle::default().padding(0.0).line_height(CssLineHeight::Px(32.0)).to_owned()) .style(options.card_style) .on_click(move |e, _dispatch| -> Result<(), String> { @@ -133,7 +133,7 @@ where .to_owned(), ) // .effect(&[show], effect_focus) - .effect(&[show], effect_fade) + .effect(&[show], effect_drawer_fade) .share_with_ref(), ) } diff --git a/respo/src/dialog/modal.rs b/respo/src/dialog/modal.rs index f1a8d71..7eab307 100644 --- a/respo/src/dialog/modal.rs +++ b/respo/src/dialog/modal.rs @@ -5,12 +5,12 @@ use std::rc::Rc; use serde::{Deserialize, Serialize}; -use crate::dialog::{css_backdrop, css_card}; +use crate::dialog::{css_backdrop, css_modal_card}; use crate::ui::{ui_center, ui_column, ui_fullscreen, ui_global}; use crate::{div, space, span, CssLineHeight, CssPosition, DispatchFn, RespoAction, RespoEvent, RespoNode, RespoStyle, StatesTree}; -use crate::dialog::effect_fade; +use crate::dialog::effect_modal_fade; /// The options for custom modal. #[derive(Debug, Clone, Default)] @@ -99,7 +99,7 @@ where Ok(()) }) .children([div() - .class_list(&[ui_column(), ui_global(), css_card()]) + .class_list(&[ui_column(), ui_global(), css_modal_card()]) .style(RespoStyle::default().padding(0.0).line_height(CssLineHeight::Px(32.0)).to_owned()) .style(options.card_style) .on_click(move |e, _dispatch| -> Result<(), String> { @@ -133,7 +133,7 @@ where .to_owned(), ) // .effect(&[show], effect_focus) - .effect(&[show], effect_fade) + .effect(&[show], effect_modal_fade) .share_with_ref(), ) } diff --git a/respo/src/dialog/prompt.rs b/respo/src/dialog/prompt.rs index a3114d0..c884a07 100644 --- a/respo/src/dialog/prompt.rs +++ b/respo/src/dialog/prompt.rs @@ -9,7 +9,7 @@ use serde::{Deserialize, Serialize}; use wasm_bindgen::prelude::Closure; use wasm_bindgen::{JsCast, JsValue}; -use crate::dialog::{css_backdrop, css_button, css_card}; +use crate::dialog::{css_backdrop, css_button, css_modal_card}; use crate::ui::{ui_button, ui_center, ui_column, ui_fullscreen, ui_global, ui_input, ui_row_parted, ui_textarea}; use crate::{ @@ -17,7 +17,7 @@ use crate::{ RespoAction, RespoEvent, RespoNode, RespoStyle, StatesTree, }; -use crate::dialog::{effect_fade, BUTTON_NAME}; +use crate::dialog::{effect_modal_fade, BUTTON_NAME}; const NEXT_TASK_NAME: &str = "_RESPO_PROMPT_NEXT_TASK"; @@ -166,7 +166,7 @@ where Ok(()) }) .children([div() - .class_list(&[ui_column(), ui_global(), css_card()]) + .class_list(&[ui_column(), ui_global(), css_modal_card()]) .style(RespoStyle::default().line_height(CssLineHeight::Px(32.0)).to_owned()) .style(options.card_style) .style(options.input_style) @@ -223,7 +223,7 @@ where .to_owned(), ) // .effect(&[show], effect_focus) - .effect(&[show], effect_fade) + .effect(&[show], effect_modal_fade) .share_with_ref(), ) }