refactor: Scrollbar

This commit is contained in:
luoxiao 2024-06-27 00:15:45 +08:00
parent e52741cf20
commit 25b5485395
5 changed files with 16 additions and 53 deletions

View file

@ -1,8 +1,3 @@
mod theme;
pub use theme::ScrollbarTheme;
use crate::{use_theme, Theme};
use leptos::{leptos_dom::helpers::WindowListenerHandle, *}; use leptos::{leptos_dom::helpers::WindowListenerHandle, *};
use thaw_utils::{class_list, mount_style, ComponentRef, OptionalProp}; use thaw_utils::{class_list, mount_style, ComponentRef, OptionalProp};
@ -17,23 +12,6 @@ pub fn Scrollbar(
children: Children, children: Children,
) -> impl IntoView { ) -> impl IntoView {
mount_style("scrollbar", include_str!("./scrollbar.css")); mount_style("scrollbar", include_str!("./scrollbar.css"));
let theme = use_theme(Theme::light);
let css_vars = Memo::new(move |_| {
let mut css_vars = String::new();
theme.with(|theme| {
css_vars.push_str(&format!(
"--thaw-scrollbar-background-color: {};",
theme.scrollbar.background_color
));
css_vars.push_str(&format!(
"--thaw-scrollbar-background-color-hover: {};",
theme.scrollbar.background_color_hover
));
css_vars.push_str(&format!("--thaw-scrollbar-size: {}px;", size));
});
css_vars
});
let container_ref = NodeRef::<html::Div>::new(); let container_ref = NodeRef::<html::Div>::new();
let content_ref = NodeRef::<html::Div>::new(); let content_ref = NodeRef::<html::Div>::new();
let x_track_ref = NodeRef::<html::Div>::new(); let x_track_ref = NodeRef::<html::Div>::new();
@ -281,7 +259,7 @@ pub fn Scrollbar(
<div <div
class=class_list!["thaw-scrollbar", class.map(| c | move || c.get())] class=class_list!["thaw-scrollbar", class.map(| c | move || c.get())]
style=move || { style=move || {
format!("{}{}", css_vars.get(), style.as_ref().map(|s| s.get()).unwrap_or_default()) format!("--thaw-scrollbar-size: {}px;{}", size, style.as_ref().map(|s| s.get()).unwrap_or_default())
} }
on:mouseenter=on_mouseenter on:mouseenter=on_mouseenter

View file

@ -58,10 +58,18 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: var(--thaw-scrollbar-size); border-radius: var(--thaw-scrollbar-size);
background-color: var(--thaw-scrollbar-background-color); background-color: color-mix(
in srgb,
var(--colorNeutralBackgroundInverted) 32%,
transparent
);
transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
} }
.thaw-scrollabr__thumb:hover { .thaw-scrollabr__thumb:hover {
background-color: var(--thaw-scrollbar-background-color-hover); background-color: color-mix(
} in srgb,
var(--colorNeutralBackgroundInverted) 42%,
transparent
);
}

View file

@ -1,23 +0,0 @@
use crate::theme::ThemeMethod;
#[derive(Clone)]
pub struct ScrollbarTheme {
pub background_color: String,
pub background_color_hover: String,
}
impl ThemeMethod for ScrollbarTheme {
fn light() -> Self {
Self {
background_color: "#00000040".into(),
background_color_hover: "#00000066".into(),
}
}
fn dark() -> Self {
Self {
background_color: "#ffffff33".into(),
background_color_hover: "#ffffff4d".into(),
}
}
}

View file

@ -3,6 +3,7 @@ use thaw_macro::WriteCSSVars;
#[derive(Clone, WriteCSSVars)] #[derive(Clone, WriteCSSVars)]
pub struct ColorTheme { pub struct ColorTheme {
pub color_neutral_background_static: String, pub color_neutral_background_static: String,
pub color_neutral_background_inverted: String,
pub color_neutral_background_disabled: String, pub color_neutral_background_disabled: String,
pub color_neutral_background_1: String, pub color_neutral_background_1: String,
pub color_neutral_background_1_hover: String, pub color_neutral_background_1_hover: String,
@ -106,6 +107,7 @@ impl ColorTheme {
pub fn light() -> Self { pub fn light() -> Self {
Self { Self {
color_neutral_background_static: "#333333".into(), color_neutral_background_static: "#333333".into(),
color_neutral_background_inverted: "#292929".into(),
color_neutral_background_disabled: "#f0f0f0".into(), color_neutral_background_disabled: "#f0f0f0".into(),
color_neutral_background_1: "#ffffff".into(), color_neutral_background_1: "#ffffff".into(),
color_neutral_background_1_hover: "#f5f5f5".into(), color_neutral_background_1_hover: "#f5f5f5".into(),
@ -210,6 +212,7 @@ impl ColorTheme {
pub fn dark() -> Self { pub fn dark() -> Self {
Self { Self {
color_neutral_background_static: "#3d3d3d".into(), color_neutral_background_static: "#3d3d3d".into(),
color_neutral_background_inverted: "#ffffff".into(),
color_neutral_background_disabled: "#141414".into(), color_neutral_background_disabled: "#141414".into(),
color_neutral_background_1: "#292929".into(), color_neutral_background_1: "#292929".into(),
color_neutral_background_1_hover: "#3d3d3d".into(), color_neutral_background_1_hover: "#3d3d3d".into(),

View file

@ -2,7 +2,7 @@ mod color;
mod common; mod common;
use self::common::CommonTheme; use self::common::CommonTheme;
use crate::{AlertTheme, AnchorTheme, MessageTheme, ProgressTheme, ScrollbarTheme, SelectTheme}; use crate::{AlertTheme, AnchorTheme, MessageTheme, ProgressTheme, SelectTheme};
pub use color::ColorTheme; pub use color::ColorTheme;
use leptos::*; use leptos::*;
@ -20,7 +20,6 @@ pub struct Theme {
pub message: MessageTheme, pub message: MessageTheme,
pub select: SelectTheme, pub select: SelectTheme,
pub progress: ProgressTheme, pub progress: ProgressTheme,
pub scrollbar: ScrollbarTheme,
pub anchor: AnchorTheme, pub anchor: AnchorTheme,
} }
@ -34,7 +33,6 @@ impl Theme {
message: MessageTheme::light(), message: MessageTheme::light(),
select: SelectTheme::light(), select: SelectTheme::light(),
progress: ProgressTheme::light(), progress: ProgressTheme::light(),
scrollbar: ScrollbarTheme::light(),
anchor: AnchorTheme::light(), anchor: AnchorTheme::light(),
} }
} }
@ -47,7 +45,6 @@ impl Theme {
message: MessageTheme::dark(), message: MessageTheme::dark(),
select: SelectTheme::dark(), select: SelectTheme::dark(),
progress: ProgressTheme::dark(), progress: ProgressTheme::dark(),
scrollbar: ScrollbarTheme::dark(),
anchor: AnchorTheme::dark(), anchor: AnchorTheme::dark(),
} }
} }