mirror of
https://github.com/adoyle0/thaw.git
synced 2025-01-22 22:09:22 -05:00
refactor: BackTop
This commit is contained in:
parent
7c431f66b5
commit
acf0d85539
4 changed files with 17 additions and 66 deletions
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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
|
||||
>
|
||||
|
|
|
@ -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(),
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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(),
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue