adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-02-02 08:34:15 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Feat/binder animation (#131)

Browse source 
* feat: Popover adds animation

* feat: ColorPicker adds animation

* feat: AutoComplete adds animation

* feat: Select adds animation

* feat: DatePicker adds animation

* feat: TimePicker adds animation
This commit is contained in:
luoxiaozero 2024-03-06 13:08:06 +08:00 • committed by GitHub
parent d2383445ff
commit c1a9f84c9e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
15 changed files with 462 additions and 228 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
thaw/src/auto_complete/auto-complete.css
View file

@ -18,3 +18,31 @@
.thaw-auto-complete__menu-item--selected {
background-color: var(--thaw-background-color-hover);
}
.thaw-auto-complete__menu.fade-in-scale-up-transition-leave-active {
transform-origin: inherit;
transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1),
transform 0.2s cubic-bezier(0.4, 0, 1, 1),
background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.thaw-auto-complete__menu.fade-in-scale-up-transition-enter-active {
transform-origin: inherit;
transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1),
transform 0.2s cubic-bezier(0, 0, 0.2, 1),
background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.thaw-auto-complete__menu.fade-in-scale-up-transition-enter-from,
.thaw-auto-complete__menu.fade-in-scale-up-transition-leave-to {
opacity: 0;
transform: scale(0.9);
}
.thaw-auto-complete__menu.fade-in-scale-up-transition-leave-from,
.thaw-auto-complete__menu.fade-in-scale-up-transition-enter-to {
opacity: 1;
transform: scale(1);
}

11
thaw/src/auto_complete/mod.rs
View file

@ -1,7 +1,7 @@
mod theme;
use crate::{
components::{Binder, Follower, FollowerPlacement, FollowerWidth},
components::{Binder, CSSTransition, Follower, FollowerPlacement, FollowerWidth},
use_theme,
utils::{class_list::class_list, mount_style, Model, OptionalProp, StoredMaybeSignal},
ComponentRef, Input, InputPrefix, InputRef, InputSuffix, Theme,
@ -195,10 +195,16 @@ pub fn AutoComplete(
show=is_show_menu
placement=FollowerPlacement::BottomStart
width=FollowerWidth::Target
>
<CSSTransition
node_ref=menu_ref
name="fade-in-scale-up-transition"
show=is_show_menu
let:display
>
<div
class="thaw-auto-complete__menu"
style=move || menu_css_vars.get()
style=move || display.get().map(|d| d.to_string()).unwrap_or_else(|| menu_css_vars.get())
ref=menu_ref
>
@ -259,6 +265,7 @@ pub fn AutoComplete(
}}
</div>
</CSSTransition>
</Follower>
</Binder>
}

24
thaw/src/color_picker/color-picker.css
View file

@ -89,3 +89,27 @@
border: 2px solid white;
cursor: pointer;
}
.thaw-color-picker-popover.fade-in-scale-up-transition-leave-active {
transform-origin: inherit;
transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1),
transform 0.2s cubic-bezier(0.4, 0, 1, 1);
}
.thaw-color-picker-popover.fade-in-scale-up-transition-enter-active {
transform-origin: inherit;
transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1),
transform 0.2s cubic-bezier(0, 0, 0.2, 1);
}
.thaw-color-picker-popover.fade-in-scale-up-transition-enter-from,
.thaw-color-picker-popover.fade-in-scale-up-transition-leave-to {
opacity: 0;
transform: scale(0.9);
}
.thaw-color-picker-popover.fade-in-scale-up-transition-leave-from,
.thaw-color-picker-popover.fade-in-scale-up-transition-enter-to {
opacity: 1;
transform: scale(1);
}

10
thaw/src/color_picker/mod.rs
View file

@ -5,7 +5,7 @@ pub use color::*;
pub use theme::ColorPickerTheme;
use crate::{
components::{Binder, Follower, FollowerPlacement},
components::{Binder, CSSTransition, Follower, FollowerPlacement},
use_theme,
utils::{class_list::class_list, mount_style, Model, OptionalProp},
Theme,
@ -152,15 +152,21 @@ pub fn ColorPicker(
</div>
</div>
<Follower slot show=is_show_popover placement=FollowerPlacement::BottomStart>
<CSSTransition
node_ref=popover_ref name="fade-in-scale-up-transition"
show=is_show_popover
let:display
>
<div
class="thaw-color-picker-popover"
ref=popover_ref
style=move || popover_css_vars.get()
style=move || display.get().map(|d| d.to_string()).unwrap_or_else(|| popover_css_vars.get())
>
<ColorPanel hue=hue.read_only() sv/>
<HueSlider hue/>
</div>
</CSSTransition>
</Follower>
</Binder>
}

17
thaw/src/components/binder/get_placement_style.rs
View file

@ -36,6 +36,23 @@ impl FollowerPlacement {
Self::BottomEnd => "bottom-end",
}
}
pub fn transform_origin(&self) -> &'static str {
match self {
Self::Top => "bottom center",
Self::Bottom => "top center",
Self::Left => "center right",
Self::Right => "center left",
Self::TopStart => "bottom left",
Self::TopEnd => "bottom right",
Self::LeftStart => "top right",
Self::LeftEnd => "bottom right",
Self::RightStart => "top left",
Self::RightEnd => "bottom left",
Self::BottomStart => "top left",
Self::BottomEnd => "top right",
}
}
}
pub struct FollowerPlacementOffset {

23
thaw/src/components/binder/mod.rs
View file

@ -34,7 +34,6 @@ pub enum FollowerWidth {
impl Copy for FollowerWidth {}
/// # Tracking popup
///
/// ```rust
@ -58,7 +57,8 @@ impl Copy for FollowerWidth {}
#[component]
pub fn Binder<El: ElementDescriptor + Clone + 'static>(
/// Used to track DOM locations
#[prop(into)] target_ref: NodeRef<El>,
#[prop(into)]
target_ref: NodeRef<El>,
/// Content for pop-up display
follower: Follower,
children: Children,
@ -197,6 +197,10 @@ fn FollowerContainer<El: ElementDescriptor + Clone + 'static>(
}) = get_follower_placement_offset(placement, target_rect, content_rect)
{
placement_str.set(placement.as_str());
style.push_str(&format!(
"transform-origin: {};",
placement.transform_origin()
));
style.push_str(&format!(
"transform: translateX({left}px) translateY({top}px) {transform};"
));
@ -207,15 +211,14 @@ fn FollowerContainer<El: ElementDescriptor + Clone + 'static>(
content_style.set(style);
});
let is_show = create_memo(move |_| {
Effect::new(move |_| {
if target_ref.get().is_none() {
return false;
return;
}
if content_ref.get().is_none() {
return false;
return;
}
let is_show = show.get();
if is_show {
if show.get() {
request_animation_frame(move || {
sync_position.call(());
});
@ -225,14 +228,10 @@ fn FollowerContainer<El: ElementDescriptor + Clone + 'static>(
remove_scroll_listener.call(());
remove_resize_listener.call(());
}
is_show
});
let children = with_hydration_off(|| {
html::div()
.classes("thaw-binder-follower-container")
.style("display", move || (!is_show.get()).then_some("none"))
.child(
html::div().classes("thaw-binder-follower-container").child(
html::div()
.classes("thaw-binder-follower-content")
.attr("data-thaw-placement", move || placement_str.get())

24
thaw/src/date_picker/date-picker.css
View file

@ -172,3 +172,27 @@
text-align: center;
border-radius: 3px;
}
.thaw-date-picker-panel.fade-in-scale-up-transition-leave-active {
transform-origin: inherit;
transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1),
transform 0.2s cubic-bezier(0.4, 0, 1, 1);
}
.thaw-date-picker-panel.fade-in-scale-up-transition-enter-active {
transform-origin: inherit;
transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1),
transform 0.2s cubic-bezier(0, 0, 0.2, 1);
}
.thaw-date-picker-panel.fade-in-scale-up-transition-enter-from,
.thaw-date-picker-panel.fade-in-scale-up-transition-leave-to {
opacity: 0;
transform: scale(0.9);
}
.thaw-date-picker-panel.fade-in-scale-up-transition-leave-from,
.thaw-date-picker-panel.fade-in-scale-up-transition-enter-to {
opacity: 1;
transform: scale(1);
}

1
thaw/src/date_picker/mod.rs
View file

@ -87,6 +87,7 @@ pub fn DatePicker(
close_panel
selected_date=panel_selected_date
comp_ref=panel_ref
is_show_panel
/>
</Follower>
</Binder>

15
thaw/src/date_picker/panel/mod.rs
View file

@ -3,6 +3,7 @@ mod month_panel;
mod year_panel;
use crate::{
components::CSSTransition,
use_theme,
utils::{now_date, ComponentRef},
Theme,
@ -18,6 +19,7 @@ pub fn Panel(
selected_date: RwSignal<Option<NaiveDate>>,
date_picker_ref: NodeRef<html::Div>,
close_panel: Callback<Option<NaiveDate>>,
#[prop(into)] is_show_panel: MaybeSignal<bool>,
#[prop(optional)] comp_ref: ComponentRef<PanelRef>,
) -> impl IntoView {
let theme = use_theme(Theme::light);
@ -91,7 +93,17 @@ pub fn Panel(
});
view! {
<div class="thaw-date-picker-panel" style=move || css_vars.get() ref=panel_ref>
<CSSTransition
node_ref=panel_ref
name="fade-in-scale-up-transition"
show=is_show_panel
let:display
>
<div
class="thaw-date-picker-panel"
style=move || display.get().map(|d| d.to_string()).unwrap_or_else(|| css_vars.get())
ref=panel_ref
>
{move || {
match panel_variant.get() {
@ -110,6 +122,7 @@ pub fn Panel(
}}
</div>
</CSSTransition>
}
}

18
thaw/src/popover/mod.rs
View file

@ -1,14 +1,15 @@
mod theme;
pub use theme::PopoverTheme;
use crate::{
components::{Binder, Follower, FollowerPlacement},
components::{Binder, CSSTransition, Follower, FollowerPlacement},
use_theme,
utils::{add_event_listener, class_list::class_list, mount_style, OptionalProp},
Theme,
};
use leptos::{leptos_dom::helpers::TimeoutHandle, *};
use std::time::Duration;
pub use theme::PopoverTheme;
#[slot]
pub struct PopoverTrigger {
@ -112,6 +113,7 @@ pub fn Popover(
children: trigger_children,
} = popover_trigger;
let follower_enabled = RwSignal::new(false);
view! {
<Binder target_ref>
<div
@ -122,10 +124,17 @@ pub fn Popover(
>
{trigger_children()}
</div>
<Follower slot show=is_show_popover placement>
<Follower slot show=follower_enabled placement>
<CSSTransition
node_ref=popover_ref name="popover-transition"
show=is_show_popover
on_enter=move |_| follower_enabled.set(true)
on_after_leave=move |_| follower_enabled.set(false)
let:display
>
<div
class="thaw-popover"
style=move || css_vars.get()
style=move || display.get().map(|d| d.to_string()).unwrap_or_else(|| css_vars.get())
ref=popover_ref
on:mouseenter=on_mouse_enter
on:mouseleave=on_mouse_leave
@ -135,6 +144,7 @@ pub fn Popover(
<div class="thaw-popover__angle"></div>
</div>
</div>
</CSSTransition>
</Follower>
</Binder>
}

29
thaw/src/popover/popover.css
View file

@ -3,6 +3,7 @@
padding: 8px 14px;
background-color: var(--thaw-background-color);
border-radius: 3px;
transform-origin: inherit;
}
.thaw-popover-trigger {
@ -138,3 +139,31 @@
top: initial;
bottom: 7px;
}
.thaw-popover.popover-transition-enter-from,
.thaw-popover.popover-transition-leave-to {
opacity: 0;
transform: scale(0.85);
}
.thaw-popover.popover-transition-enter-to,
.thaw-popover.popover-transition-leave-from {
transform: scale(1);
opacity: 1;
}
.thaw-popover.popover-transition-enter-active {
transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.15s cubic-bezier(0, 0, 0.2, 1),
transform 0.15s cubic-bezier(0, 0, 0.2, 1);
}
.thaw-popover.popover-transition-leave-active {
transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.15s cubic-bezier(0.4, 0, 1, 1),
transform 0.15s cubic-bezier(0.4, 0, 1, 1);
}

15
thaw/src/select/mod.rs
View file

@ -1,7 +1,7 @@
mod theme;
use crate::{
components::{Binder, Follower, FollowerPlacement, FollowerWidth},
components::{Binder, CSSTransition, Follower, FollowerPlacement, FollowerWidth},
theme::use_theme,
utils::{class_list::class_list, mount_style, Model, OptionalProp},
Theme,
@ -126,7 +126,17 @@ where
placement=FollowerPlacement::BottomStart
width=FollowerWidth::Target
>
<div class="thaw-select-menu" style=move || menu_css_vars.get() ref=menu_ref>
<CSSTransition
node_ref=menu_ref
name="fade-in-scale-up-transition"
show=is_show_menu
let:display
>
<div
class="thaw-select-menu"
style=move || display.get().map(|d| d.to_string()).unwrap_or_else(|| menu_css_vars.get())
ref=menu_ref
>
<For
each=move || options.get()
key=move |item| item.value.clone()
@ -154,6 +164,7 @@ where
/>
</div>
</CSSTransition>
</Follower>
</Binder>
}

28
thaw/src/select/select.css
View file

@ -42,3 +42,31 @@
.thaw-select-menu__item-selected {
color: var(--thaw-font-color-selected);
}
.thaw-select-menu.fade-in-scale-up-transition-leave-active {
transform-origin: inherit;
transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1),
transform 0.2s cubic-bezier(0.4, 0, 1, 1),
background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.thaw-select-menu.fade-in-scale-up-transition-enter-active {
transform-origin: inherit;
transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1),
transform 0.2s cubic-bezier(0, 0, 0.2, 1),
background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.thaw-select-menu.fade-in-scale-up-transition-enter-from,
.thaw-select-menu.fade-in-scale-up-transition-leave-to {
opacity: 0;
transform: scale(0.9);
}
.thaw-select-menu.fade-in-scale-up-transition-leave-from,
.thaw-select-menu.fade-in-scale-up-transition-enter-to {
opacity: 1;
transform: scale(1);
}

17
thaw/src/time_picker/mod.rs
View file

@ -3,7 +3,7 @@ mod theme;
pub use theme::TimePickerTheme;
use crate::{
components::{Binder, Follower, FollowerPlacement},
components::{Binder, CSSTransition, Follower, FollowerPlacement},
use_theme,
utils::{mount_style, ComponentRef, Model, OptionalProp},
Button, ButtonSize, ButtonVariant, Icon, Input, InputSuffix, SignalWatch, Theme,
@ -86,6 +86,7 @@ pub fn TimePicker(
selected_time=panel_selected_time
close_panel
time_picker_ref
is_show_panel
comp_ref=panel_ref
/>
</Follower>
@ -98,6 +99,7 @@ fn Panel(
selected_time: RwSignal<Option<NaiveTime>>,
time_picker_ref: NodeRef<html::Div>,
close_panel: Callback<Option<NaiveTime>>,
#[prop(into)] is_show_panel: MaybeSignal<bool>,
comp_ref: ComponentRef<PanelRef>,
) -> impl IntoView {
let theme = use_theme(Theme::light);
@ -173,7 +175,17 @@ fn Panel(
});
view! {
<div class="thaw-time-picker-panel" style=move || css_vars.get() ref=panel_ref>
<CSSTransition
node_ref=panel_ref
name="fade-in-scale-up-transition"
show=is_show_panel
let:display
>
<div
class="thaw-time-picker-panel"
style=move || display.get().map(|d| d.to_string()).unwrap_or_else(|| css_vars.get())
ref=panel_ref
>
<div class="thaw-time-picker-panel__time">
<div class="thaw-time-picker-panel__time-hour" ref=hour_ref>
@ -263,6 +275,7 @@ fn Panel(
</Button>
</div>
</div>
</CSSTransition>
}
}

24
thaw/src/time_picker/time-picker.css
View file

@ -51,3 +51,27 @@
align-items: center;
border-top: 1px solid var(--thaw-item-border-color);
}
.thaw-time-picker-panel.fade-in-scale-up-transition-leave-active {
transform-origin: inherit;
transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1),
transform 0.2s cubic-bezier(0.4, 0, 1, 1);
}
.thaw-time-picker-panel.fade-in-scale-up-transition-enter-active {
transform-origin: inherit;
transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1),
transform 0.2s cubic-bezier(0, 0, 0.2, 1);
}
.thaw-time-picker-panel.fade-in-scale-up-transition-enter-from,
.thaw-time-picker-panel.fade-in-scale-up-transition-leave-to {
opacity: 0;
transform: scale(0.9);
}
.thaw-time-picker-panel.fade-in-scale-up-transition-leave-from,
.thaw-time-picker-panel.fade-in-scale-up-transition-enter-to {
opacity: 1;
transform: scale(1);
}