Merge pull request #24 from Respo/drawer

add drawer styles; refine README structure

Author: NoEgAm

Cargo.lock

@@ -8,11 +8,82 @@
 >
 > Respo was initially designed to work in a dynamic language with persistent data and HMR(hot code replacement), which is dramatically different from Rust. So this is more like an experiment.
 
-Docs https://docs.rs/respo
+- Docs https://docs.rs/respo
+- Live Demo https://r.tiye.me/Respo/respo.rs/
 
 ### Usage
 
-A preview example, to delare a store:
+Here is some preview of DOM syntax:
+
+```rust
+Ok(
+  div()
+    .class(ui_global())
+    .add_style(RespoStyle::default().padding(12.0).to_owned())
+    .add_children([
+      comp_counter(&states.pick("counter"), store.counted)?,
+      comp_panel(&states.pick("panel"))?,
+      comp_todolist(memo_caches, &states.pick("todolist"), &store.tasks)?,
+    ])
+    .to_owned(),
+)
+```
+
+CSS-in-Rust:
+
+```rust
+static_styles!(
+  style_remove_button,
+  (
+    "$0".to_owned(),
+    RespoStyle::default()
+      .width(CssSize::Px(16.0))
+      .height(CssSize::Px(16.0))
+      .margin(4.)
+      .cursor("pointer".to_owned())
+      .margin4(0.0, 0.0, 0.0, 16.0)
+      .color(CssColor::Hsl(0, 90, 90)),
+  ),
+  ("$0:hover".to_owned(), RespoStyle::default().color(CssColor::Hsl(0, 90, 80))),
+);
+```
+
+Builtin styles, [demonstrated](http://ui.respo-mvc.org/):
+
+| function           | usages                          |
+| ------------------ | ------------------------------- |
+| `ui_global`        | global styles                   |
+| `ui_fullscreen`    | fullscreen styles               |
+| `ui_button`        | button styles                   |
+| `ui_input`         | input styles                    |
+| `ui_textarea`      | textarea styles                 |
+| `ui_link`          | link styles                     |
+| `ui_flex`          | `flex:1` styles                 |
+| `ui_expand`        | `flex:1` styles with scrolls    |
+| `ui_center`        | flexbox center styles           |
+| `ui_row`           | flexbox row styles              |
+| `ui_column`        | flexbox column styles           |
+| `ui_row_center`    | flexbox row center styles       |
+| `ui_column_center` | flexbox column center styles    |
+| `ui_row_around`    | flexbox row around styles       |
+| `ui_column_around` | flexbox column around styles    |
+| `ui_row_evenly`    | flexbox row evenly styles       |
+| `ui_column_evenly` | flexbox column evenly styles    |
+| `ui_row_parted`    | flexbox row between styles      |
+| `ui_column_parted` | flexbox column between styles   |
+| `ui_row_middle`    | flexbox row between styles      |
+| `ui_column_middle` | flexbox column between styles   |
+| `ui_font_code`     | code font family                |
+| `ui_font_normal`   | normal font family(Hind)        |
+| `ui_font_fancy`    | fancy font family(Josefin Sans) |
+
+There are several dialog components in the demo. Syntax is not nice enough, so I'm not advertising it. But they work relatively good.
+
+For more components, read code in `src/app/`, they are just variants like `RespoNode::Component(..)`. It may be sugared in the future, not determined yet.
+
+### Store abstraction
+
+Declaring a store:
 
 ```rust
 #[derive(Debug, Clone, Deserialize, Serialize)]
@@ -48,7 +119,7 @@ impl RespoStore for Store {
 }
 ```
 
-To declare an app:
+Declaring an app:
 
 ```rust
 struct App {
@@ -94,7 +165,7 @@ impl RespoApp for App {
 }
 ```
 
-mount app:
+Mounting app:
 
 ```rust
 let app = App {
@@ -110,27 +181,6 @@ let app = App {
   app.render_loop().expect("app render");
 ```
 
-CSS-in-Rust:
-
-```rust
-static_styles!(
-  style_remove_button,
-  (
-    "$0".to_owned(),
-    RespoStyle::default()
-      .width(CssSize::Px(16.0))
-      .height(CssSize::Px(16.0))
-      .margin(4.)
-      .cursor("pointer".to_owned())
-      .margin4(0.0, 0.0, 0.0, 16.0)
-      .color(CssColor::Hsl(0, 90, 90)),
-  ),
-  ("$0:hover".to_owned(), RespoStyle::default().color(CssColor::Hsl(0, 90, 80))),
-);
-```
-
-For components, read code in `src/app/`, they are just variants like `RespoNode::Component(..)`. It may be sugared in the future, not decided yet.
-
 ### License
 
 Apache License 2.0 .

README.md

@@ -1,13 +1,15 @@
 use std::fmt::Debug;
 
+use respo::RespoEvent;
 use respo::{space, ui::ui_row_parted, RespoStyle};
 use serde::{Deserialize, Serialize};
 
 use respo::{button, div, span, ui::ui_button, util, DispatchFn, RespoNode, StatesTree};
 
 use respo::dialog::{
-  AlertOptions, AlertPlugin, AlertPluginInterface, ConfirmOptions, ConfirmPlugin, ConfirmPluginInterface, ModalOptions, ModalPlugin,
-  ModalPluginInterface, ModalRenderer, PromptOptions, PromptPlugin, PromptPluginInterface, PromptValidator,
+  AlertOptions, AlertPlugin, AlertPluginInterface, ConfirmOptions, ConfirmPlugin, ConfirmPluginInterface, DrawerOptions, DrawerPlugin,
+  DrawerPluginInterface, DrawerRenderer, ModalOptions, ModalPlugin, ModalPluginInterface, ModalRenderer, PromptOptions, PromptPlugin,
+  PromptPluginInterface, PromptValidator,
 };
 
 use super::store::*;
@@ -147,6 +149,48 @@ pub fn comp_plugins_demo(states: &StatesTree) -> Result<RespoNode<ActionOp>, Str
     }
   };
 
+  // declare drawer
+
+  let drawer_plugin = DrawerPlugin::new(
+    states.pick("drawer"),
+    DrawerOptions {
+      title: Some(String::from("Modal demo")),
+      render: DrawerRenderer::new(|close_drawer: _| {
+        let handler = move |_e: _, dispatch: DispatchFn<ActionOp>| {
+          respo::util::log!("on modal handle");
+          close_drawer(dispatch)
+        };
+        Ok(
+          div()
+            .style(RespoStyle::default().padding(8.0).to_owned())
+            .children([
+              div()
+                .children([span().inner_text("content in custom drawer").to_owned()])
+                .to_owned(),
+              div()
+                .class(ui_row_parted())
+                .children([span(), button().class(ui_button()).inner_text("close").on_click(handler).to_owned()])
+                .to_owned(),
+            ])
+            .to_owned(),
+        )
+      }),
+      ..DrawerOptions::default()
+    },
+  )?
+  .share_with_ref();
+
+  let on_drawer = {
+    let drawer_plugin = drawer_plugin.clone();
+    move |e: RespoEvent, dispatch: DispatchFn<_>| -> Result<(), String> {
+      util::log!("click {:?}", e);
+
+      drawer_plugin.show(dispatch)?;
+
+      Ok(())
+    }
+  };
+
   Ok(
     div()
       .children([
@@ -168,12 +212,19 @@ pub fn comp_plugins_demo(states: &StatesTree) -> Result<RespoNode<ActionOp>, Str
               .inner_text("Try Custom Modal")
               .on_click(on_modal)
               .to_owned(),
+            space(Some(8), None),
+            button()
+              .class(ui_button())
+              .inner_text("Try Custom Drawer")
+              .on_click(on_drawer)
+              .to_owned(),
           ])
           .to_owned(),
         alert_plugin.render()?,
         confirm_plugin.render()?,
         prompt_plugin.render()?,
         modal_plugin.render()?,
+        drawer_plugin.render()?,
       ])
       .to_owned(),
   )

demo_respo/src/plugins.rs

@@ -1,6 +1,6 @@
 [package]
 name = "respo"
-version = "0.0.14"
+version = "0.0.15"
 edition = "2021"
 description = "a tiny virtual DOM library migrated from ClojureScript"
 license = "Apache-2.0"

respo/Cargo.toml

@@ -2,6 +2,7 @@
 
 mod alert;
 mod confirm;
+mod drawer;
 mod modal;
 mod prompt;
 
@@ -17,6 +18,7 @@ pub(crate) const BUTTON_NAME: &str = "dialog-button";
 
 pub use alert::{AlertOptions, AlertPlugin, AlertPluginInterface};
 pub use confirm::{ConfirmOptions, ConfirmPlugin, ConfirmPluginInterface};
+pub use drawer::{DrawerOptions, DrawerPlugin, DrawerPluginInterface, DrawerRenderer};
 pub use modal::{ModalOptions, ModalPlugin, ModalPluginInterface, ModalRenderer};
 pub use prompt::{PromptOptions, PromptPlugin, PromptPluginInterface, PromptValidator};
 
@@ -71,7 +73,7 @@ pub(crate) fn effect_fade(args: Vec<RespoEffectArg>, effect_type: RespoEffectTyp
               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();
+              card_style.set_property("transform", "translate(100%,0px)").unwrap();
             });
             window
               .set_timeout_with_callback_and_timeout_and_arguments_0(immediate_call.as_ref().unchecked_ref(), 10)
@@ -98,12 +100,12 @@ pub(crate) fn effect_fade(args: Vec<RespoEffectArg>, effect_type: RespoEffectTyp
         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)").unwrap();
+        card_style.set_property("transform", "translate(100%, 0px)").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();
+          card_style.set_property("transform", "translate(0px,0px)").unwrap();
         });
         let window = web_sys::window().unwrap();
         window
@@ -126,7 +128,6 @@ static_styles!(
       .background_color(CssColor::Hsla(0.0, 30.0, 10.0, 0.6))
       .position(CssPosition::Fixed)
       .z_index(999)
-      .padding(16.0)
   )
 );
 
@@ -136,14 +137,17 @@ static_styles!(
     "$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))
+      .max_width(CssSize::Vw(50.0))
+      .width(CssSize::Px(400.))
+      .height(CssSize::Vh(100.0))
       .overflow(CssOverflow::Auto)
-      .border_radius(3.0)
       .color(CssColor::Hsl(0, 0, 0))
-      .insert("margin", "auto".to_owned())
-      .padding(16.0)
+      .top(CssSize::Px(0.))
+      .right(CssSize::Px(0.))
+      .bottom(CssSize::Px(0.))
+      .position(CssPosition::Absolute)
+      .box_shadow(-2., 0., 12., 0., CssColor::Hsla(0., 0., 0., 0.2))
+      .transform_property("transform, opacity".to_owned())
   )
 );