refactor: BackTop

This commit is contained in:
luoxiao 2024-06-26 22:53:44 +08:00
parent 7c431f66b5
commit acf0d85539
4 changed files with 17 additions and 66 deletions

View file

@ -1,4 +1,4 @@
.thaw-back-top {
div.thaw-back-top {
position: fixed;
cursor: pointer;
display: flex;
@ -10,8 +10,8 @@
border-radius: 22px;
height: 44px;
min-width: 44px;
box-shadow: 0 2px 8px 0px rgba(0, 0, 0, 0.12);
background-color: var(--thaw-background-color);
box-shadow: var(--shadow4);
background-color: var(--colorNeutralBackground1);
}
.thaw-back-top.fade-in-scale-up-transition-leave-active {
@ -43,18 +43,15 @@
transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.thaw-back-top:hover {
box-shadow: 0 2px 12px 0px #0000002e;
.thaw-back-top:hover,
.thaw-back-top:active {
box-shadow: var(--shadow16);
}
.thaw-back-top:hover > svg {
color: var(--thaw-icon-color-hover);
}
.thaw-back-top:active {
box-shadow: 0 2px 12px 0px #0000002e;
color: var(--colorBrandBackgroundHover);
}
.thaw-back-top:active svg {
color: var(--thaw-icon-color-active);
color: var(--colorBrandBackgroundPressed);
}

View file

@ -1,12 +1,9 @@
mod theme;
pub use theme::BackTopTheme;
use crate::{use_theme, Icon, Theme};
use crate::{ConfigInjection, Icon};
use leptos::{html::ToHtmlElement, *};
use thaw_components::{CSSTransition, Fallback, OptionComp, Teleport};
use thaw_utils::{
add_event_listener, class_list, get_scroll_parent, mount_style, EventListenerHandle, OptionalProp,
add_event_listener, class_list, get_scroll_parent, mount_style, EventListenerHandle,
OptionalProp,
};
#[component]
@ -18,27 +15,7 @@ pub fn BackTop(
#[prop(optional)] children: Option<Children>,
) -> impl IntoView {
mount_style("back-top", include_str!("./back-top.css"));
let theme = use_theme(Theme::light);
let style = Memo::new(move |_| {
let mut style = String::new();
style.push_str(&format!("right: {}px;", right.get_untracked()));
style.push_str(&format!("bottom: {}px;", bottom.get_untracked()));
theme.with(|theme| {
style.push_str(&format!(
"--thaw-icon-color-hover: {};",
theme.common.color_primary_hover
));
style.push_str(&format!(
"--thaw-icon-color-active: {};",
theme.common.color_primary_active
));
style.push_str(&format!(
"--thaw-background-color: {};",
theme.back_top.background_color
));
});
style
});
let config_provider = ConfigInjection::use_();
let placeholder_ref = NodeRef::<html::Div>::new();
let back_top_ref = NodeRef::<html::Div>::new();
let is_show_back_top = RwSignal::new(false);
@ -105,10 +82,11 @@ pub fn BackTop(
let:display
>
<div
class=class_list!["thaw-back-top", class.map(| c | move || c.get())]
class=class_list!["thaw-config-provider thaw-back-top", class.map(| c | move || c.get())]
data-thaw-id=config_provider.id().clone()
ref=back_top_ref
style=move || {
display.get().map(|d| d.to_string()).unwrap_or_else(|| style.get())
display.get().map_or_else(|| format!("right: {}px; bottom: {}px", right.get(), bottom.get()), |d| d.to_string())
}
on:click=on_click
>

View file

@ -1,21 +0,0 @@
use crate::theme::ThemeMethod;
#[derive(Clone)]
pub struct BackTopTheme {
pub background_color: String,
}
impl ThemeMethod for BackTopTheme {
fn light() -> Self {
Self {
background_color: "#fff".into(),
}
}
fn dark() -> Self {
Self {
background_color: "#48484e".into(),
}
}
}

View file

@ -3,8 +3,8 @@ mod common;
use self::common::CommonTheme;
use crate::{
AlertTheme, AnchorTheme, BackTopTheme, CalendarTheme, MessageTheme, ProgressTheme,
ScrollbarTheme, SelectTheme,
AlertTheme, AnchorTheme, CalendarTheme, MessageTheme, ProgressTheme, ScrollbarTheme,
SelectTheme,
};
pub use color::ColorTheme;
use leptos::*;
@ -25,7 +25,6 @@ pub struct Theme {
pub progress: ProgressTheme,
pub calendar: CalendarTheme,
pub scrollbar: ScrollbarTheme,
pub back_top: BackTopTheme,
pub anchor: AnchorTheme,
}
@ -42,7 +41,6 @@ impl Theme {
progress: ProgressTheme::light(),
calendar: CalendarTheme::light(),
scrollbar: ScrollbarTheme::light(),
back_top: BackTopTheme::light(),
anchor: AnchorTheme::light(),
}
}
@ -57,7 +55,6 @@ impl Theme {
progress: ProgressTheme::dark(),
calendar: CalendarTheme::dark(),
scrollbar: ScrollbarTheme::dark(),
back_top: BackTopTheme::dark(),
anchor: AnchorTheme::dark(),
}
}