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

refactor: Scrollbar

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

24
thaw/src/scrollbar/mod.rs
View file

@ -1,8 +1,3 @@
mod theme;
pub use theme::ScrollbarTheme;
use crate::{use_theme, Theme};
use leptos::{leptos_dom::helpers::WindowListenerHandle, *};
use thaw_utils::{class_list, mount_style, ComponentRef, OptionalProp};
@ -17,23 +12,6 @@ pub fn Scrollbar(
children: Children,
) -> impl IntoView {
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 content_ref = NodeRef::<html::Div>::new();
let x_track_ref = NodeRef::<html::Div>::new();
@ -281,7 +259,7 @@ pub fn Scrollbar(
<div
class=class_list!["thaw-scrollbar", class.map(| c | move || c.get())]
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

14
thaw/src/scrollbar/scrollbar.css
View file

@ -58,10 +58,18 @@
width: 100%;
height: 100%;
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);
}
.thaw-scrollabr__thumb:hover {
background-color: var(--thaw-scrollbar-background-color-hover);
}
background-color: color-mix(
in srgb,
var(--colorNeutralBackgroundInverted) 42%,
transparent
);
}

23
thaw/src/scrollbar/theme.rs
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(),
}
}
}

3
thaw/src/theme/color.rs
View file

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

5
thaw/src/theme/mod.rs
View file

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