fix modal styles by getting back code

Respo · Dec 22, 2022 · 7ff9325 · 7ff9325
1 parent 8892c3e
commit 7ff9325
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 23 deletions.
diff --git 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<RespoEffectArg>, effect_type: RespoEffectType, el: &Node) -> Result<(), String> {
+pub(crate) fn effect_modal_fade(args: Vec<RespoEffectArg>, 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::<HtmlElement>().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<dyn FnMut()> = 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::<HtmlElement>().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<dyn FnMut()> = 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::<HtmlElement>().unwrap().style();
+        let card_style = target.first_child().unwrap().dyn_ref::<HtmlElement>().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<RespoEffectArg>, 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<RespoEffectArg>, 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -9,15 +9,15 @@ 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::{
   button, div, input, respo, space, span, static_styles, textarea, CssColor, CssLineHeight, CssPosition, CssSize, DispatchFn,
   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(),
   )
 }