Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat/overlay drawer modal #265

Merged
merged 2 commits into from
Sep 18, 2024
Merged

Feat/overlay drawer modal #265

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3473875
feat: OverlayDrawer adds modal_type prop
luoxiaozero Sep 14, 2024
7f2070e
fix: OverlayDrawer modal_type
luoxiaozero Sep 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions thaw/src/drawer/docs/mod.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,34 @@ view! {
}
```

### Overlay No Modal

```rust demo
let open = RwSignal::new(false);

view! {
<Button on_click=move |_| open.update(|open| *open = !*open)>"Toggle"</Button>
<OverlayDrawer open modal_type=DrawerModalType::NonModal>
<DrawerHeader>
<DrawerHeaderTitle>
<DrawerHeaderTitleAction slot>
<Button
appearance=ButtonAppearance::Subtle
on_click=move |_| open.set(false)
>
"x"
</Button>
</DrawerHeaderTitleAction>
"Default Drawer"
</DrawerHeaderTitle>
</DrawerHeader>
<DrawerBody>
<p>"Drawer content"</p>
</DrawerBody>
</OverlayDrawer>
}
```

### Inline

```rust demo
Expand Down Expand Up @@ -151,6 +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. |
| modal_type | `DrawerModalType` | `DrawerModalType::Modal` | Dialog variations. |
| children | `Children` | | |

### InlineDrawer Props
Expand Down
11 changes: 11 additions & 0 deletions thaw/src/drawer/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,3 +54,14 @@ 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.
#[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.
NonModal,
}
43 changes: 27 additions & 16 deletions thaw/src/drawer/overlay_drawer.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
use super::{DrawerPosition, DrawerSize};
use super::{DrawerModalType, DrawerPosition, DrawerSize};
use crate::ConfigInjection;
use leptos::{ev, html, prelude::*};
use leptos::{either::Either, ev, html, prelude::*};
use thaw_components::{CSSTransition, FocusTrap, Teleport};
use thaw_utils::{class_list, mount_style, use_lock_html_scroll, Model};

Expand All @@ -22,6 +22,9 @@ pub fn OverlayDrawer(
/// Size of the drawer.
#[prop(optional, into)]
size: MaybeSignal<DrawerSize>,
/// Dialog variations.
#[prop(optional, into)]
modal_type: DrawerModalType,
children: Children,
) -> impl IntoView {
mount_style("drawer", include_str!("./drawer.css"));
Expand Down Expand Up @@ -60,20 +63,28 @@ pub fn OverlayDrawer(
class=class_list!["thaw-config-provider thaw-overlay-drawer-container", class]
data-thaw-id=config_provider.id()
>
<CSSTransition
node_ref=mask_ref
appear=open.get_untracked()
show=open.signal()
name="fade-in-transition"
let:display
>
<div
class="thaw-overlay-drawer__backdrop"
style=move || display.get().unwrap_or_default()
on:click=on_mask_click
node_ref=mask_ref
></div>
</CSSTransition>
{if modal_type == DrawerModalType::Modal {
Either::Left(
view! {
<CSSTransition
node_ref=mask_ref
appear=open.get_untracked()
show=open.signal()
name="fade-in-transition"
let:display
>
<div
class="thaw-overlay-drawer__backdrop"
style=move || display.get().unwrap_or_default()
on:click=on_mask_click
node_ref=mask_ref
></div>
</CSSTransition>
},
)
} else {
Either::Right(())
}}
<CSSTransition
node_ref=drawer_ref
appear=open_drawer.get_untracked()
Expand Down
3 changes: 3 additions & 0 deletions thaw/src/theme/color.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,7 @@ pub struct ColorTheme {
pub shadow4: String,
pub shadow8: String,
pub shadow16: String,
pub shadow64: String,
}

impl ColorTheme {
Expand Down Expand Up @@ -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(),
}
}

Expand Down Expand Up @@ -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(),
}
}
}
2 changes: 2 additions & 0 deletions thaw/src/theme/common.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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(),
Expand Down
Loading