From 187ab8fe8a2586b05b380ad9b56e7e4fd4868584 Mon Sep 17 00:00:00 2001 From: luoxiao Date: Wed, 4 Oct 2023 22:25:12 +0800 Subject: [PATCH] feat: button active color --- gh-pages/src/pages/button/mod.rs | 70 ++++++++++++++++++-------------- src/button/button.css | 6 +++ src/button/mod.rs | 11 +++++ src/theme/common.rs | 20 ++++++++- 4 files changed, 74 insertions(+), 33 deletions(-) diff --git a/gh-pages/src/pages/button/mod.rs b/gh-pages/src/pages/button/mod.rs index 3d3c606..aed47be 100644 --- a/gh-pages/src/pages/button/mod.rs +++ b/gh-pages/src/pages/button/mod.rs @@ -9,18 +9,20 @@ pub fn ButtonPage() -> impl IntoView {

"Button"

- - - - + + + + + + "PRIMARY" @@ -40,18 +42,20 @@ pub fn ButtonPage() -> impl IntoView {

"color"

- - - - + + + + + + "PRIMARY Color" @@ -71,11 +75,13 @@ pub fn ButtonPage() -> impl IntoView {

"icon"

- - + + + + "ERROR Color Icon" @@ -88,8 +94,10 @@ pub fn ButtonPage() -> impl IntoView {

"style"

- - + + + + "style blue" diff --git a/src/button/button.css b/src/button/button.css index 16c800b..eeec107 100644 --- a/src/button/button.css +++ b/src/button/button.css @@ -19,6 +19,12 @@ background-color: var(--background-color-hover); } +.melt-button:active { + transition: all 0.3s; + border-color: var(--border-color-hover); + background-color: var(--background-color-active); +} + .melt-button--text, .melt-button--link { border: none; diff --git a/src/button/mod.rs b/src/button/mod.rs index de4dceb..52acc24 100644 --- a/src/button/mod.rs +++ b/src/button/mod.rs @@ -39,6 +39,15 @@ impl ButtonColor { ButtonColor::ERROR => theme.common.color_error_hover.clone(), } } + + pub fn theme_color_active(&self, theme: &Theme) -> String { + match self { + ButtonColor::PRIMARY => theme.common.color_primary_active.clone(), + ButtonColor::SUCCESS => theme.common.color_success_active.clone(), + ButtonColor::WARNING => theme.common.color_warning_active.clone(), + ButtonColor::ERROR => theme.common.color_error_active.clone(), + } + } } #[component] @@ -56,9 +65,11 @@ pub fn Button( let theme = theme.get(); let bg_color = color.get().theme_color(&theme); let bg_color_hover = color.get().theme_color_hover(&theme); + let bg_color_active = color.get().theme_color_active(&theme); if type_.get() == ButtonType::PRIMARY { css_vars.push_str(&format!("--background-color: {bg_color};")); css_vars.push_str(&format!("--background-color-hover: {bg_color_hover};")); + css_vars.push_str(&format!("--background-color-active: {bg_color_active};")); css_vars.push_str(&format!("--font-color: #fff;")); css_vars.push_str(&format!("--border-color: {bg_color};")); css_vars.push_str(&format!("--border-color-hover: {bg_color};")); diff --git a/src/theme/common.rs b/src/theme/common.rs index 37688d7..e989f5d 100644 --- a/src/theme/common.rs +++ b/src/theme/common.rs @@ -6,12 +6,16 @@ pub struct CommonTheme { pub color_primary: String, pub color_primary_hover: String, + pub color_primary_active: String, pub color_success: String, pub color_success_hover: String, + pub color_success_active: String, pub color_warning: String, pub color_warning_hover: String, + pub color_warning_active: String, pub color_error: String, pub color_error_hover: String, + pub color_error_active: String, pub font_size: String, pub font_size_small: String, @@ -37,12 +41,16 @@ impl CommonTheme { font_family: "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'".into(), color_primary: "".into(), color_primary_hover: "".into(), + color_primary_active: "".into(), color_success: "".into(), color_success_hover: "".into(), + color_success_active: "".into(), color_warning: "".into(), color_warning_hover: "".into(), + color_warning_active: "".into(), color_error: "".into(), color_error_hover: "".into(), + color_error_active: "".into(), font_size: "14px".into(), font_size_small: "12px".into(), font_size_medium: "16px".into(), @@ -66,12 +74,16 @@ impl ThemeMethod for CommonTheme { Self { color_primary: "#f5222d".into(), color_primary_hover: "#ff4d4f".into(), + color_primary_active: "#cf1322".into(), color_success: "#18a058".into(), color_success_hover: "#36ad6a".into(), + color_success_active: "#0c7a43".into(), color_warning: "#f0a020".into(), color_warning_hover: "#fcb040".into(), + color_warning_active: "#c97c10".into(), color_error: "#d03050".into(), color_error_hover: "#de576d".into(), + color_error_active: "#ab1f3f".into(), ..CommonTheme::common() } } @@ -79,12 +91,16 @@ impl ThemeMethod for CommonTheme { Self { color_primary: "#d32029".into(), color_primary_hover: "#e04648".into(), - color_success: "#18a058".into(), - color_success_hover: "".into(), + color_primary_active: "#ad111e".into(), + color_success: "#63e2b7".into(), + color_success_hover: "#7fe7c4".into(), + color_success_active: "#5acea7".into(), color_warning: "#f0a020".into(), color_warning_hover: "#fcb040".into(), + color_warning_active: "#e6c260".into(), color_error: "#d03050".into(), color_error_hover: "#de576d".into(), + color_error_active: "#e57272".into(), ..CommonTheme::common() } }