fix: OverlayDrawer modal_type

thaw-ui · Sep 18, 2024 · 7f2070e · 7f2070e
1 parent 3473875
commit 7f2070e
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 7 deletions.
diff --git a/thaw/src/drawer/docs/mod.md b/thaw/src/drawer/docs/mod.md
@@ -46,7 +46,7 @@ let open = RwSignal::new(false);
 
 view! {
     <Button on_click=move |_| open.update(|open| *open = !*open)>"Toggle"</Button>
-    <Drawer open modal_type=DrawerModalType::NonModal>
+    <OverlayDrawer open modal_type=DrawerModalType::NonModal>
         <DrawerHeader>
           <DrawerHeaderTitle>
             <DrawerHeaderTitleAction slot>
@@ -63,7 +63,7 @@ view! {
         <DrawerBody>
           <p>"Drawer content"</p>
         </DrawerBody>
-    </Drawer>
+    </OverlayDrawer>
 }
 ```
 
@@ -179,7 +179,7 @@ view! {
 | close_on_esc | `bool` | `false` | Whether to close drawer on Esc is pressed. |
 | position | `MaybeSignal<DrawerPosition>` | `DrawerPlacement::Left` | Position of the drawer. |
 | size | `MaybeSignal<DrawerSize>` | `DrawerSize::Small` | Size of the drawer. |
-| model_type | `DrawerModalType` | `DrawerModalType::Modal` | Dialog variations. |
+| modal_type | `DrawerModalType` | `DrawerModalType::Modal` | Dialog variations. |
 | children | `Children` |  |  |
 
 ### InlineDrawer Props

diff --git a/thaw/src/drawer/mod.rs b/thaw/src/drawer/mod.rs
@@ -57,9 +57,11 @@ impl DrawerSize {
 
 #[derive(Debug, Default, PartialEq)]
 pub enum DrawerModalType {
-    /// When this type of dialog is open, the rest of the page is dimmed out and cannot be interacted with. 
+    /// When this type of dialog is open,
+    /// the rest of the page is dimmed out and cannot be interacted with. 
     #[default]
     Modal,
-    /// When a non-modal dialog is open, the rest of the page is not dimmed out and users can interact with the rest of the page.
+    /// When a non-modal dialog is open,
+    /// the rest of the page is not dimmed out and users can interact with the rest of the page.
     NonModal,
 }
diff --git a/thaw/src/drawer/overlay_drawer.rs b/thaw/src/drawer/overlay_drawer.rs
@@ -24,7 +24,7 @@ pub fn OverlayDrawer(
     size: MaybeSignal<DrawerSize>,
     /// Dialog variations.
     #[prop(optional, into)]
-    model_type: DrawerModalType,
+    modal_type: DrawerModalType,
     children: Children,
 ) -> impl IntoView {
     mount_style("drawer", include_str!("./drawer.css"));
@@ -63,7 +63,7 @@ pub fn OverlayDrawer(
                     class=class_list!["thaw-config-provider thaw-overlay-drawer-container", class]
                     data-thaw-id=config_provider.id()
                 >
-                    {if model_type == DrawerModalType::Modal {
+                    {if modal_type == DrawerModalType::Modal {
                         Either::Left(
                             view! {
                                 <CSSTransition

diff --git a/thaw/src/theme/color.rs b/thaw/src/theme/color.rs
@@ -119,6 +119,7 @@ pub struct ColorTheme {
     pub shadow4: String,
     pub shadow8: String,
     pub shadow16: String,
+    pub shadow64: String,
 }
 
 impl ColorTheme {
@@ -242,6 +243,7 @@ impl ColorTheme {
             shadow4: "0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14)".into(),
             shadow8: "0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14)".into(),
             shadow16: "0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14)".into(),
+            shadow64: "0 0 8px rgba(0,0,0,0.12), 0 32px 64px rgba(0,0,0,0.14)".into(),
         }
     }
 
@@ -365,6 +367,7 @@ impl ColorTheme {
             shadow4: "0 0 2px rgba(0,0,0,0.24), 0 2px 4px rgba(0,0,0,0.28)".into(),
             shadow8: "0 0 2px rgba(0,0,0,0.24), 0 4px 8px rgba(0,0,0,0.28)".into(),
             shadow16: "0 0 2px rgba(0,0,0,0.24), 0 8px 16px rgba(0,0,0,0.28)".into(),
+            shadow64: "0 0 8px rgba(0,0,0,0.24), 0 32px 64px rgba(0,0,0,0.28)".into(),
         }
     }
 }
diff --git a/thaw/src/theme/common.rs b/thaw/src/theme/common.rs
@@ -59,6 +59,7 @@ pub struct CommonTheme {
     pub duration_ultra_fast: String,
     pub duration_faster: String,
     pub duration_normal: String,
+    pub duration_gentle: String,
     pub duration_slow: String,
     pub curve_accelerate_mid: String,
     pub curve_decelerate_max: String,
@@ -126,6 +127,7 @@ impl CommonTheme {
             duration_ultra_fast: "50ms".into(),
             duration_faster: "100ms".into(),
             duration_normal: "200ms".into(),
+            duration_gentle: "250ms".into(),
             duration_slow: "300ms".into(),
             curve_accelerate_mid: "cubic-bezier(1,0,1,1)".into(),
             curve_decelerate_max: "cubic-bezier(0.1,0.9,0.2,1)".into(),