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

feat: button active color

Browse source
This commit is contained in:
luoxiao 2023-10-04 22:25:12 +08:00
parent a0927412df
commit 187ab8fe8a
4 changed files with 74 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
gh-pages/src/pages/button/mod.rs
View file

@ -9,18 +9,20 @@ pub fn ButtonPage() -> impl IntoView {
<div style="width: 896px; margin: 0 auto;"> <div style="width: 896px; margin: 0 auto;">
<h1>"Button"</h1> <h1>"Button"</h1>
<Demo> <Demo>
<Button type_=ButtonType::PRIMARY> <Space>
"PRIMARY" <Button type_=ButtonType::PRIMARY>
</Button> "PRIMARY"
<Button type_=ButtonType::SOLID> </Button>
"SOLID" <Button type_=ButtonType::SOLID>
</Button> "SOLID"
<Button type_=ButtonType::TEXT> </Button>
"TEXT" <Button type_=ButtonType::TEXT>
</Button> "TEXT"
<Button type_=ButtonType::LINK> </Button>
"LINK" <Button type_=ButtonType::LINK>
</Button> "LINK"
</Button>
</Space>
<DemoCode slot html=highlight_str!(r#" <DemoCode slot html=highlight_str!(r#"
<Button type_=ButtonType::PRIMARY> <Button type_=ButtonType::PRIMARY>
"PRIMARY" "PRIMARY"
@ -40,18 +42,20 @@ pub fn ButtonPage() -> impl IntoView {
</Demo> </Demo>
<h3>"color"</h3> <h3>"color"</h3>
<Demo> <Demo>
<Button color=ButtonColor::PRIMARY> <Space>
"PRIMARY Color" <Button color=ButtonColor::PRIMARY>
</Button> "PRIMARY Color"
<Button color=ButtonColor::SUCCESS> </Button>
"SUCCESS Color" <Button color=ButtonColor::SUCCESS>
</Button> "SUCCESS Color"
<Button color=ButtonColor::WARNING> </Button>
"WARNING Color" <Button color=ButtonColor::WARNING>
</Button> "WARNING Color"
<Button color=ButtonColor::ERROR> </Button>
"ERROR Color" <Button color=ButtonColor::ERROR>
</Button> "ERROR Color"
</Button>
</Space>
<DemoCode slot html=highlight_str!(r#" <DemoCode slot html=highlight_str!(r#"
<Button color=ButtonColor::PRIMARY> <Button color=ButtonColor::PRIMARY>
"PRIMARY Color" "PRIMARY Color"
@ -71,11 +75,13 @@ pub fn ButtonPage() -> impl IntoView {
</Demo> </Demo>
<h3>"icon"</h3> <h3>"icon"</h3>
<Demo> <Demo>
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined> <Space>
"ERROR Color Icon" <Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
</Button> "ERROR Color Icon"
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true> </Button>
</Button> <Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
</Button>
</Space>
<DemoCode slot html=highlight_str!(r#" <DemoCode slot html=highlight_str!(r#"
<Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined> <Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
"ERROR Color Icon" "ERROR Color Icon"
@ -88,8 +94,10 @@ pub fn ButtonPage() -> impl IntoView {
</Demo> </Demo>
<h3>"style"</h3> <h3>"style"</h3>
<Demo> <Demo>
<Button style="background: blue;">"style blue"</Button> <Space>
<Button style="width: 40px; height: 20px">"size"</Button> <Button style="background: blue;">"style blue"</Button>
<Button style="width: 40px; height: 20px">"size"</Button>
</Space>
<DemoCode slot html=highlight_str!(r#" <DemoCode slot html=highlight_str!(r#"
<Button style="background: blue;">"style blue"</Button> <Button style="background: blue;">"style blue"</Button>
<Button style="width: 40px; height: 20px">"size"</Button> <Button style="width: 40px; height: 20px">"size"</Button>

6
src/button/button.css
View file

@ -19,6 +19,12 @@
background-color: var(--background-color-hover); 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--text,
.melt-button--link { .melt-button--link {
border: none; border: none;

11
src/button/mod.rs
View file

@ -39,6 +39,15 @@ impl ButtonColor {
ButtonColor::ERROR => theme.common.color_error_hover.clone(), 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] #[component]
@ -56,9 +65,11 @@ pub fn Button(
let theme = theme.get(); let theme = theme.get();
let bg_color = color.get().theme_color(&theme); let bg_color = color.get().theme_color(&theme);
let bg_color_hover = color.get().theme_color_hover(&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 { if type_.get() == ButtonType::PRIMARY {
css_vars.push_str(&format!("--background-color: {bg_color};")); 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-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!("--font-color: #fff;"));
css_vars.push_str(&format!("--border-color: {bg_color};")); css_vars.push_str(&format!("--border-color: {bg_color};"));
css_vars.push_str(&format!("--border-color-hover: {bg_color};")); css_vars.push_str(&format!("--border-color-hover: {bg_color};"));

20
src/theme/common.rs
View file

@ -6,12 +6,16 @@ pub struct CommonTheme {
pub color_primary: String, pub color_primary: String,
pub color_primary_hover: String, pub color_primary_hover: String,
pub color_primary_active: String,
pub color_success: String, pub color_success: String,
pub color_success_hover: String, pub color_success_hover: String,
pub color_success_active: String,
pub color_warning: String, pub color_warning: String,
pub color_warning_hover: String, pub color_warning_hover: String,
pub color_warning_active: String,
pub color_error: String, pub color_error: String,
pub color_error_hover: String, pub color_error_hover: String,
pub color_error_active: String,
pub font_size: String, pub font_size: String,
pub font_size_small: 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(), 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: "".into(),
color_primary_hover: "".into(), color_primary_hover: "".into(),
color_primary_active: "".into(),
color_success: "".into(), color_success: "".into(),
color_success_hover: "".into(), color_success_hover: "".into(),
color_success_active: "".into(),
color_warning: "".into(), color_warning: "".into(),
color_warning_hover: "".into(), color_warning_hover: "".into(),
color_warning_active: "".into(),
color_error: "".into(), color_error: "".into(),
color_error_hover: "".into(), color_error_hover: "".into(),
color_error_active: "".into(),
font_size: "14px".into(), font_size: "14px".into(),
font_size_small: "12px".into(), font_size_small: "12px".into(),
font_size_medium: "16px".into(), font_size_medium: "16px".into(),
@ -66,12 +74,16 @@ impl ThemeMethod for CommonTheme {
Self { Self {
color_primary: "#f5222d".into(), color_primary: "#f5222d".into(),
color_primary_hover: "#ff4d4f".into(), color_primary_hover: "#ff4d4f".into(),
color_primary_active: "#cf1322".into(),
color_success: "#18a058".into(), color_success: "#18a058".into(),
color_success_hover: "#36ad6a".into(), color_success_hover: "#36ad6a".into(),
color_success_active: "#0c7a43".into(),
color_warning: "#f0a020".into(), color_warning: "#f0a020".into(),
color_warning_hover: "#fcb040".into(), color_warning_hover: "#fcb040".into(),
color_warning_active: "#c97c10".into(),
color_error: "#d03050".into(), color_error: "#d03050".into(),
color_error_hover: "#de576d".into(), color_error_hover: "#de576d".into(),
color_error_active: "#ab1f3f".into(),
..CommonTheme::common() ..CommonTheme::common()
} }
} }
@ -79,12 +91,16 @@ impl ThemeMethod for CommonTheme {
Self { Self {
color_primary: "#d32029".into(), color_primary: "#d32029".into(),
color_primary_hover: "#e04648".into(), color_primary_hover: "#e04648".into(),
color_success: "#18a058".into(), color_primary_active: "#ad111e".into(),
color_success_hover: "".into(), color_success: "#63e2b7".into(),
color_success_hover: "#7fe7c4".into(),
color_success_active: "#5acea7".into(),
color_warning: "#f0a020".into(), color_warning: "#f0a020".into(),
color_warning_hover: "#fcb040".into(), color_warning_hover: "#fcb040".into(),
color_warning_active: "#e6c260".into(),
color_error: "#d03050".into(), color_error: "#d03050".into(),
color_error_hover: "#de576d".into(), color_error_hover: "#de576d".into(),
color_error_active: "#e57272".into(),
..CommonTheme::common() ..CommonTheme::common()
} }
} }