From be74dc584ec1b9146cdc4b6c00e4f25b582a7952 Mon Sep 17 00:00:00 2001 From: luoxiao Date: Fri, 28 Jun 2024 10:48:40 +0800 Subject: [PATCH] refactor: Progress --- demo/src/app.rs | 2 +- demo/src/pages/components.rs | 4 +- .../docs/{progress => progress_bar}/mod.md | 32 +++-- demo_markdown/src/lib.rs | 2 +- thaw/src/lib.rs | 4 +- thaw/src/progress/mod.rs | 123 ------------------ thaw/src/progress/progress.css | 39 ------ thaw/src/progress/theme.rs | 20 --- thaw/src/progress_bar/mod.rs | 5 + thaw/src/progress_bar/progress-bar.css | 29 +++++ .../progress-circle.css | 0 thaw/src/progress_bar/progress_bar.rs | 53 ++++++++ .../progress_circle.rs | 49 +++---- thaw/src/theme/mod.rs | 4 - 14 files changed, 133 insertions(+), 233 deletions(-) rename demo_markdown/docs/{progress => progress_bar}/mod.md (53%) delete mode 100644 thaw/src/progress/mod.rs delete mode 100644 thaw/src/progress/progress.css delete mode 100644 thaw/src/progress/theme.rs create mode 100644 thaw/src/progress_bar/mod.rs create mode 100644 thaw/src/progress_bar/progress-bar.css rename thaw/src/{progress => progress_bar}/progress-circle.css (100%) create mode 100644 thaw/src/progress_bar/progress_bar.rs rename thaw/src/{progress => progress_bar}/progress_circle.rs (71%) diff --git a/demo/src/app.rs b/demo/src/app.rs index 41e9816..2ee8efe 100644 --- a/demo/src/app.rs +++ b/demo/src/app.rs @@ -73,7 +73,7 @@ fn TheRouter(is_routing: RwSignal) -> impl IntoView { - + // diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs index 924feff..c356c2b 100644 --- a/demo/src/pages/components.rs +++ b/demo/src/pages/components.rs @@ -244,8 +244,8 @@ pub(crate) fn gen_menu_data() -> Vec { label: "Popover".into(), }, MenuItemOption { - value: "/components/progress".into(), - label: "Progress".into(), + value: "/components/progress-bar".into(), + label: "ProgressBar".into(), }, MenuItemOption { value: "/components/radio".into(), diff --git a/demo_markdown/docs/progress/mod.md b/demo_markdown/docs/progress_bar/mod.md similarity index 53% rename from demo_markdown/docs/progress/mod.md rename to demo_markdown/docs/progress_bar/mod.md index 68a2279..13a64a0 100644 --- a/demo_markdown/docs/progress/mod.md +++ b/demo_markdown/docs/progress_bar/mod.md @@ -1,19 +1,17 @@ -# Progress +# ProgressBar ```rust demo -let percentage = create_rw_signal(0.0f32); +let value = RwSignal::new(0.0); view! { - - - - - - + + + + - - + + } @@ -22,18 +20,18 @@ view! { ### Circle ```rust demo -let percentage = create_rw_signal(0.0f32); +let value = RwSignal::new(0.0); view! { - - - - + + + + - - + + } ``` diff --git a/demo_markdown/src/lib.rs b/demo_markdown/src/lib.rs index 2fbd2ef..7e87c69 100644 --- a/demo_markdown/src/lib.rs +++ b/demo_markdown/src/lib.rs @@ -56,7 +56,7 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt "MessageBarMdPage" => "../docs/message_bar/mod.md", "ModalMdPage" => "../docs/modal/mod.md", "PopoverMdPage" => "../docs/popover/mod.md", - "ProgressMdPage" => "../docs/progress/mod.md", + "ProgressBarMdPage" => "../docs/progress_bar/mod.md", "RadioMdPage" => "../docs/radio/mod.md", "ScrollbarMdPage" => "../docs/scrollbar/mod.md", // "SelectMdPage" => "../docs/select/mod.md", diff --git a/thaw/src/lib.rs b/thaw/src/lib.rs index d47cbc1..e96f019 100644 --- a/thaw/src/lib.rs +++ b/thaw/src/lib.rs @@ -27,7 +27,7 @@ mod message_bar; mod modal; mod nav; mod popover; -mod progress; +mod progress_bar; mod radio; mod scrollbar; mod skeleton; @@ -74,7 +74,7 @@ pub use message_bar::*; pub use modal::*; pub use nav::*; pub use popover::*; -pub use progress::*; +pub use progress_bar::*; pub use radio::*; pub use scrollbar::*; pub use skeleton::*; diff --git a/thaw/src/progress/mod.rs b/thaw/src/progress/mod.rs deleted file mode 100644 index a597dd7..0000000 --- a/thaw/src/progress/mod.rs +++ /dev/null @@ -1,123 +0,0 @@ -mod progress_circle; -mod theme; - -pub use progress_circle::ProgressCircle; -pub use theme::ProgressTheme; - -use crate::{use_theme, Theme}; -use leptos::*; -use thaw_utils::mount_style; - -#[derive(Default, Clone, PartialEq)] -pub enum ProgressIndicatorPlacement { - #[default] - Outside, - Inside, -} - -impl Copy for ProgressIndicatorPlacement {} - -impl ProgressIndicatorPlacement { - pub fn as_str(&self) -> &'static str { - match self { - ProgressIndicatorPlacement::Outside => "outside", - ProgressIndicatorPlacement::Inside => "inside", - } - } -} - -#[derive(Default, Clone)] -pub enum ProgressColor { - #[default] - Primary, - Success, - Warning, - Error, -} - -impl ProgressColor { - fn theme_background_color(&self, theme: &Theme) -> String { - match self { - Self::Primary => theme.common.color_primary.clone(), - Self::Success => theme.common.color_success.clone(), - Self::Warning => theme.common.color_warning.clone(), - Self::Error => theme.common.color_error.clone(), - } - } -} - -#[component] -pub fn Progress( - #[prop(into, optional)] percentage: MaybeSignal, - #[prop(into, optional)] color: MaybeSignal, - #[prop(into, default = MaybeSignal::Static(true))] show_indicator: MaybeSignal, - #[prop(into, optional)] indicator_placement: MaybeSignal, -) -> impl IntoView { - mount_style("progress", include_str!("./progress.css")); - let theme = use_theme(Theme::light); - let css_vars = create_memo(move |_| { - let mut css_vars = String::new(); - theme.with(|theme| { - css_vars.push_str(&format!( - "--thaw-background-color: {};", - theme.progress.background_color - )); - css_vars.push_str(&format!( - "--thaw-inner-background-color: {};", - color.get().theme_background_color(theme) - )); - }); - css_vars - }); - let style = move || { - let percentage = percentage.get(); - let percentage = if percentage < 0.0 { - 0.0 - } else if percentage > 100.0 { - 100.0 - } else { - percentage - }; - format!("width: {}%;", percentage) - }; - - let class = move || { - let mut class = String::from("thaw-progress__progress"); - - class.push_str(&format!( - " thaw-progress__progress--indicator-{}", - indicator_placement.get().as_str() - )); - - class - }; - - view! { -
-
-
- -
- - {move || { format!("{}%", percentage.get()) }} - -
- -
-
- -
- - {move || { format!("{}%", percentage.get()) }} - -
- -
- } -} diff --git a/thaw/src/progress/progress.css b/thaw/src/progress/progress.css deleted file mode 100644 index f14a8f1..0000000 --- a/thaw/src/progress/progress.css +++ /dev/null @@ -1,39 +0,0 @@ -.thaw-progress { - width: 100%; - display: flex; - justify-content: center; - align-items: center; -} - -.thaw-progress__progress { - flex: 1; - position: relative; - height: 8px; - line-height: 8px; - background: var(--thaw-background-color); - border-radius: 4px; -} - -.thaw-progress__progress--indicator-inside { - height: 16px; - line-height: 16px; - font-size: 12px; - border-radius: 8px; -} - -.thaw-progress__progress-inner { - position: absolute; - background: var(--thaw-inner-background-color); - height: 100%; - border-radius: inherit; - transition: width 0.1s; -} - -.thaw-progress__indicator--outside { - padding: 0 8px; -} - -.thaw-progress__indicator--inside { - text-align: right; - margin: 0 12px; -} diff --git a/thaw/src/progress/theme.rs b/thaw/src/progress/theme.rs deleted file mode 100644 index 4c78aa1..0000000 --- a/thaw/src/progress/theme.rs +++ /dev/null @@ -1,20 +0,0 @@ -use crate::theme::ThemeMethod; - -#[derive(Clone)] -pub struct ProgressTheme { - pub background_color: String, -} - -impl ThemeMethod for ProgressTheme { - fn light() -> Self { - Self { - background_color: "#ebebeb".into(), - } - } - - fn dark() -> Self { - Self { - background_color: "#ffffff1f".into(), - } - } -} diff --git a/thaw/src/progress_bar/mod.rs b/thaw/src/progress_bar/mod.rs new file mode 100644 index 0000000..54a90fb --- /dev/null +++ b/thaw/src/progress_bar/mod.rs @@ -0,0 +1,5 @@ +mod progress_bar; +mod progress_circle; + +pub use progress_bar::*; +pub use progress_circle::*; diff --git a/thaw/src/progress_bar/progress-bar.css b/thaw/src/progress_bar/progress-bar.css new file mode 100644 index 0000000..38fe6ad --- /dev/null +++ b/thaw/src/progress_bar/progress-bar.css @@ -0,0 +1,29 @@ +.thaw-progress-bar { + display: block; + width: 100%; + height: 2px; + background-color: var(--colorNeutralBackground6); + overflow: hidden; + border-radius: var(--borderRadiusMedium); +} + +.thaw-progress-bar__bar { + transition-timing-function: ease; + transition-duration: 0.3s; + transition-property: width; + height: 100%; + background-color: var(--colorCompoundBrandBackground); + border-radius: inherit; +} + +.thaw-progress-bar--error .thaw-progress-bar__bar { + background-color: var(--colorPaletteRedBackground3); +} + +.thaw-progress-bar--warning .thaw-progress-bar__bar { + background-color: var(--colorPaletteDarkOrangeBackground3); +} + +.thaw-progress-bar--success .thaw-progress-bar__bar { + background-color: var(--colorPaletteGreenBackground3); +} diff --git a/thaw/src/progress/progress-circle.css b/thaw/src/progress_bar/progress-circle.css similarity index 100% rename from thaw/src/progress/progress-circle.css rename to thaw/src/progress_bar/progress-circle.css diff --git a/thaw/src/progress_bar/progress_bar.rs b/thaw/src/progress_bar/progress_bar.rs new file mode 100644 index 0000000..3a2dcdd --- /dev/null +++ b/thaw/src/progress_bar/progress_bar.rs @@ -0,0 +1,53 @@ +use leptos::*; +use thaw_utils::{class_list, mount_style}; + +#[component] +pub fn ProgressBar( + #[prop(into, optional)] value: MaybeSignal, + #[prop(default = 1.0.into(), optional)] max: MaybeSignal, + #[prop(into, optional)] color: MaybeSignal, +) -> impl IntoView { + mount_style("progress-bar", include_str!("./progress-bar.css")); + + let style = move || { + let max = max.get(); + let value = value.get().max(0.0).min(max); + format!("width: {:.02}%;", value / max * 100.0) + }; + + view! { +
+
+
+
+ } +} + +#[derive(Default, Clone)] +pub enum ProgressBarColor { + #[default] + Brand, + Error, + Warning, + Success, +} + +impl ProgressBarColor { + pub fn as_str(&self) -> &'static str { + match self { + Self::Brand => "brand", + Self::Error => "error", + Self::Warning => "warning", + Self::Success => "success", + } + } +} diff --git a/thaw/src/progress/progress_circle.rs b/thaw/src/progress_bar/progress_circle.rs similarity index 71% rename from thaw/src/progress/progress_circle.rs rename to thaw/src/progress_bar/progress_circle.rs index 58e0c29..2997ca0 100644 --- a/thaw/src/progress/progress_circle.rs +++ b/thaw/src/progress_bar/progress_circle.rs @@ -1,18 +1,15 @@ -use super::ProgressColor; -use crate::{use_theme, Theme}; use leptos::*; use thaw_utils::{class_list, mount_style, OptionalProp}; #[component] pub fn ProgressCircle( #[prop(optional, into)] class: OptionalProp>, - #[prop(into, optional)] percentage: MaybeSignal, - #[prop(into, optional)] color: MaybeSignal, + #[prop(into, optional)] value: MaybeSignal, + #[prop(into, optional)] color: MaybeSignal, #[prop(into, default = "120px".into())] size: MaybeSignal, #[prop(optional)] children: Option, ) -> impl IntoView { mount_style("progress-circle", include_str!("./progress-circle.css")); - let theme = use_theme(Theme::light); let stroke_width = 7; let view_box_width = 100; @@ -27,27 +24,23 @@ pub fn ProgressCircle( let len = std::f64::consts::PI * 2.0 * f64::from(radius); let rail_stroke_dasharray = format!("{len}px {}px", view_box_width * 8); - let rail_stroke_color = - Memo::new(move |_| theme.with(|theme| theme.progress.background_color.clone())); let fill_path = rail_path.clone(); let fill_stroke_dasharray = Memo::new(move |_| { - let percentage = percentage.get(); - let percentage = if percentage < 0.0 { - 0.0 - } else if percentage > 100.0 { - 100.0 - } else { - percentage - }; + let percentage = value.get().max(0.0).min(100.0); + format!( "{}px {}px", - f64::from(percentage / 100.0) * len, + percentage / 100.0 * len, view_box_width * 8 ) }); - let fill_stroke_color = - Memo::new(move |_| theme.with(|theme| color.get().theme_background_color(theme))); + let fill_stroke_color = move || match color.get() { + ProgressCircleColor::Brand => "var(--colorCompoundBrandBackground)", + ProgressCircleColor::Error => "var(--colorPaletteRedBackground3)", + ProgressCircleColor::Warning => "var(--colorPaletteDarkOrangeBackground3)", + ProgressCircleColor::Success => "var(--colorPaletteGreenBackground3)", + }; view! {
@@ -67,19 +59,19 @@ pub fn ProgressCircle( stroke-width=stroke_width stroke-linecap="round" fill="none" - style:stroke=move || rail_stroke_color.get() + style:stroke="var(--colorNeutralBackground6)" style:stroke-dasharray=rail_stroke_dasharray > @@ -90,7 +82,7 @@ pub fn ProgressCircle( } else { view! {
- {move || percentage.get()} "%" + {move || value.get()} "%"
} }} @@ -98,3 +90,12 @@ pub fn ProgressCircle(
} } + +#[derive(Default, Clone)] +pub enum ProgressCircleColor { + #[default] + Brand, + Error, + Warning, + Success, +} diff --git a/thaw/src/theme/mod.rs b/thaw/src/theme/mod.rs index 96b4681..d8108ef 100644 --- a/thaw/src/theme/mod.rs +++ b/thaw/src/theme/mod.rs @@ -2,7 +2,6 @@ mod color; mod common; use self::common::CommonTheme; -use crate::ProgressTheme; pub use color::ColorTheme; use leptos::*; @@ -16,7 +15,6 @@ pub struct Theme { pub name: String, pub common: CommonTheme, pub color: ColorTheme, - pub progress: ProgressTheme, } impl Theme { @@ -25,7 +23,6 @@ impl Theme { name: "light".into(), common: CommonTheme::light(), color: ColorTheme::light(), - progress: ProgressTheme::light(), } } pub fn dark() -> Self { @@ -33,7 +30,6 @@ impl Theme { name: "dark".into(), common: CommonTheme::dark(), color: ColorTheme::dark(), - progress: ProgressTheme::dark(), } } }