From 7e04778a44978f59eb90733438adc7284c697af0 Mon Sep 17 00:00:00 2001 From: luoxiao Date: Sat, 22 Jun 2024 22:14:31 +0800 Subject: [PATCH] refactor: ColorPicker --- thaw/src/auto_complete/auto-complete.css | 2 +- thaw/src/color_picker/color-picker.css | 20 +++++----- thaw/src/color_picker/mod.rs | 49 ++++++++---------------- thaw/src/color_picker/theme.rs | 20 ---------- thaw/src/theme/common.rs | 2 + thaw/src/theme/mod.rs | 5 +-- 6 files changed, 30 insertions(+), 68 deletions(-) delete mode 100644 thaw/src/color_picker/theme.rs diff --git a/thaw/src/auto_complete/auto-complete.css b/thaw/src/auto_complete/auto-complete.css index da394f7..3580831 100644 --- a/thaw/src/auto_complete/auto-complete.css +++ b/thaw/src/auto_complete/auto-complete.css @@ -83,4 +83,4 @@ div.thaw-auto-complete__listbox { .thaw-auto-complete-option:active { color: var(--colorNeutralForeground1Pressed); background-color: var(--colorNeutralBackground1Pressed); -} \ No newline at end of file +} diff --git a/thaw/src/color_picker/color-picker.css b/thaw/src/color_picker/color-picker.css index 31e4528..2c2911d 100644 --- a/thaw/src/color_picker/color-picker.css +++ b/thaw/src/color_picker/color-picker.css @@ -1,10 +1,10 @@ .thaw-color-picker-trigger { display: inline-block; - padding: 4px; + padding: var(--spacingVerticalXS) var(--spacingHorizontalXS); width: 100%; - height: 34px; - border: 1px solid #e0e0e6; - border-radius: 3px; + height: 32px; + border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); + border-radius: var(--borderRadiusMedium); box-sizing: border-box; cursor: pointer; } @@ -14,17 +14,15 @@ justify-content: center; align-items: center; height: 100%; - font-size: 14px; } -.thaw-color-picker-popover { +div.thaw-color-picker-popover { width: 240px; - padding: 12px; - background-color: var(--thaw-background-color); - border-radius: 3px; + padding: var(--spacingVerticalM) var(--spacingHorizontalM); + background-color: var(--colorNeutralBackground1); + border-radius: var(--borderRadiusMedium); box-sizing: border-box; - box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), - 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); + box-shadow: var(--shadow16); } .thaw-color-picker-popover__panel { diff --git a/thaw/src/color_picker/mod.rs b/thaw/src/color_picker/mod.rs index c7d4b5f..9ddbca3 100644 --- a/thaw/src/color_picker/mod.rs +++ b/thaw/src/color_picker/mod.rs @@ -1,10 +1,8 @@ mod color; -mod theme; pub use color::*; -pub use theme::ColorPickerTheme; -use crate::{use_theme, Theme}; +use crate::ConfigInjection; use leptos::leptos_dom::helpers::WindowListenerHandle; use leptos::*; use palette::{Hsv, IntoColor, Srgb}; @@ -17,20 +15,11 @@ pub fn ColorPicker( #[prop(optional, into)] class: OptionalProp>, ) -> impl IntoView { mount_style("color-picker", include_str!("./color-picker.css")); - let theme = use_theme(Theme::light); - let popover_css_vars = create_memo(move |_| { - theme.with(|theme| { - format!( - "--thaw-background-color: {};", - theme.color_picker.popover_background_color - ) - }) - }); - - let hue = create_rw_signal(0f32); - let sv = create_rw_signal((0f32, 0f32)); - let label = create_rw_signal(String::new()); - let style = create_memo(move |_| { + let config_provider = ConfigInjection::use_(); + let hue = RwSignal::new(0f32); + let sv = RwSignal::new((0f32, 0f32)); + let label = RwSignal::new(String::new()); + let style = Memo::new(move |_| { let mut style = String::new(); value.with(|color| { @@ -77,7 +66,7 @@ pub fn ColorPicker( style }); - create_effect(move |prev| { + Effect::new(move |prev| { let (s, v) = sv.get(); let hue_value = hue.get(); if prev.is_none() { @@ -106,9 +95,9 @@ pub fn ColorPicker( } }); - let is_show_popover = create_rw_signal(false); - let trigger_ref = create_node_ref::(); - let popover_ref = create_node_ref::(); + let is_show_popover = RwSignal::new(false); + let trigger_ref = NodeRef::::new(); + let popover_ref = NodeRef::::new(); let show_popover = move |_| { is_show_popover.set(true); }; @@ -157,14 +146,10 @@ pub fn ColorPicker( let:display >
@@ -178,8 +163,8 @@ pub fn ColorPicker( #[component] fn ColorPanel(hue: ReadSignal, sv: RwSignal<(f32, f32)>) -> impl IntoView { - let panel_ref = create_node_ref::(); - let mouse = store_value(Vec::::new()); + let panel_ref = NodeRef::::new(); + let mouse = StoredValue::new(Vec::::new()); let on_mouse_down = move |ev| { let cb = move |ev: ev::MouseEvent| { @@ -251,8 +236,8 @@ fn ColorPanel(hue: ReadSignal, sv: RwSignal<(f32, f32)>) -> impl IntoView { #[component] fn HueSlider(hue: RwSignal) -> impl IntoView { - let rail_ref = create_node_ref::(); - let mouse = store_value(Vec::::new()); + let rail_ref = NodeRef::::new(); + let mouse = StoredValue::new(Vec::::new()); let on_mouse_down = move |ev| { let cb = move |ev: ev::MouseEvent| { diff --git a/thaw/src/color_picker/theme.rs b/thaw/src/color_picker/theme.rs deleted file mode 100644 index 5fa8ea7..0000000 --- a/thaw/src/color_picker/theme.rs +++ /dev/null @@ -1,20 +0,0 @@ -use crate::theme::ThemeMethod; - -#[derive(Clone)] -pub struct ColorPickerTheme { - pub popover_background_color: String, -} - -impl ThemeMethod for ColorPickerTheme { - fn light() -> Self { - Self { - popover_background_color: "#fff".into(), - } - } - - fn dark() -> Self { - Self { - popover_background_color: "#48484e".into(), - } - } -} diff --git a/thaw/src/theme/common.rs b/thaw/src/theme/common.rs index a184beb..7a5cae1 100644 --- a/thaw/src/theme/common.rs +++ b/thaw/src/theme/common.rs @@ -58,6 +58,7 @@ pub struct CommonTheme { pub spacing_horizontal_m: String, pub spacing_horizontal_l: String, pub spacing_vertical_none: String, + pub spacing_vertical_x_s: String, pub spacing_vertical_s_nudge: String, pub spacing_vertical_s: String, pub spacing_vertical_m_nudge: String, @@ -140,6 +141,7 @@ impl CommonTheme { spacing_horizontal_m: "12px".into(), spacing_horizontal_l: "16px".into(), spacing_vertical_none: "0".into(), + spacing_vertical_x_s: "4px".into(), spacing_vertical_s_nudge: "6px".into(), spacing_vertical_s: "8px".into(), spacing_vertical_m_nudge: "10px".into(), diff --git a/thaw/src/theme/mod.rs b/thaw/src/theme/mod.rs index 7b2fe4a..cb21dd8 100644 --- a/thaw/src/theme/mod.rs +++ b/thaw/src/theme/mod.rs @@ -4,7 +4,7 @@ mod common; use self::common::CommonTheme; use crate::{ mobile::{NavBarTheme, TabbarTheme}, - AlertTheme, AnchorTheme, BackTopTheme, CalendarTheme, ColorPickerTheme, DatePickerTheme, + AlertTheme, AnchorTheme, BackTopTheme, CalendarTheme, DatePickerTheme, InputTheme, MessageTheme, ProgressTheme, ScrollbarTheme, SelectTheme, TimePickerTheme, UploadTheme, }; @@ -28,7 +28,6 @@ pub struct Theme { pub upload: UploadTheme, pub nav_bar: NavBarTheme, pub tabbar: TabbarTheme, - pub color_picker: ColorPickerTheme, pub progress: ProgressTheme, pub calendar: CalendarTheme, pub time_picker: TimePickerTheme, @@ -51,7 +50,6 @@ impl Theme { upload: UploadTheme::light(), nav_bar: NavBarTheme::light(), tabbar: TabbarTheme::light(), - color_picker: ColorPickerTheme::light(), progress: ProgressTheme::light(), calendar: CalendarTheme::light(), time_picker: TimePickerTheme::light(), @@ -73,7 +71,6 @@ impl Theme { upload: UploadTheme::dark(), nav_bar: NavBarTheme::dark(), tabbar: TabbarTheme::dark(), - color_picker: ColorPickerTheme::dark(), progress: ProgressTheme::dark(), calendar: CalendarTheme::dark(), time_picker: TimePickerTheme::dark(),