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: ButtonVariant Solid is changed to Outlined

Browse source
This commit is contained in:
luoxiao 2024-01-29 16:18:01 +08:00 • committed by luoxiaozero
parent cd3a27c1b8
commit b44ba4f143
7 changed files with 25 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
demo_markdown/docs/button/mod.md
View file

@ -4,7 +4,7 @@
view! { view! {
<Space> <Space>
<Button variant=ButtonVariant::Primary>"Primary"</Button> <Button variant=ButtonVariant::Primary>"Primary"</Button>
<Button variant=ButtonVariant::Solid>"Solid"</Button> <Button variant=ButtonVariant::Outlined>"Outlined"</Button>
<Button variant=ButtonVariant::Text>"Text"</Button> <Button variant=ButtonVariant::Text>"Text"</Button>
<Button variant=ButtonVariant::Link>"Link"</Button> <Button variant=ButtonVariant::Link>"Link"</Button>
</Space> </Space>
@ -80,8 +80,8 @@ view! {
<Button variant=ButtonVariant::Primary disabled=true> <Button variant=ButtonVariant::Primary disabled=true>
"Primary" "Primary"
</Button> </Button>
<Button variant=ButtonVariant::Solid disabled=true> <Button variant=ButtonVariant::Outlined disabled=true>
"Solid" "Outlined"
</Button> </Button>
<Button variant=ButtonVariant::Text disabled=true> <Button variant=ButtonVariant::Text disabled=true>
"Text" "Text"
@ -112,14 +112,14 @@ view! {
view! { view! {
<Space> <Space>
<ButtonGroup> <ButtonGroup>
<Button variant=ButtonVariant::Solid>"Solid"</Button> <Button variant=ButtonVariant::Outlined>"Outlined"</Button>
<Button variant=ButtonVariant::Solid>"Solid"</Button> <Button variant=ButtonVariant::Outlined>"Outlined"</Button>
<Button variant=ButtonVariant::Solid>"Solid"</Button> <Button variant=ButtonVariant::Outlined>"Outlined"</Button>
</ButtonGroup> </ButtonGroup>
<ButtonGroup vertical=true> <ButtonGroup vertical=true>
<Button variant=ButtonVariant::Solid>"Solid"</Button> <Button variant=ButtonVariant::Outlined>"Outlined"</Button>
<Button variant=ButtonVariant::Solid>"Solid"</Button> <Button variant=ButtonVariant::Outlined>"Outlined"</Button>
<Button variant=ButtonVariant::Solid>"Solid"</Button> <Button variant=ButtonVariant::Outlined>"Outlined"</Button>
</ButtonGroup> </ButtonGroup>
</Space> </Space>
} }

6
thaw/src/button/button.css
View file

@ -13,7 +13,7 @@
user-select: none; user-select: none;
} }
.thaw-button:hover:not(.thaw-button--disabled, .thaw-button--solid) { .thaw-button:hover:not(.thaw-button--disabled, .thaw-button--outlined) {
border-color: var(--thaw-border-color-hover); border-color: var(--thaw-border-color-hover);
background-color: var(--thaw-background-color-hover); background-color: var(--thaw-background-color-hover);
cursor: pointer; cursor: pointer;
@ -37,13 +37,13 @@
background-color: var(--thaw-background-color-active); background-color: var(--thaw-background-color-active);
} }
.thaw-button--solid { .thaw-button--outlined {
background-color: transparent; background-color: transparent;
color: inherit; color: inherit;
transition: all 0.3s; transition: all 0.3s;
} }
.thaw-button--solid:hover:not(.thaw-button--disabled) { .thaw-button--outlined:hover:not(.thaw-button--disabled) {
cursor: pointer; cursor: pointer;
color: var(--thaw-font-color-hover); color: var(--thaw-font-color-hover);
border-color: var(--thaw-border-color-hover); border-color: var(--thaw-border-color-hover);

10
thaw/src/button/mod.rs
View file

@ -15,7 +15,7 @@ pub use theme::ButtonTheme;
pub enum ButtonVariant { pub enum ButtonVariant {
#[default] #[default]
Primary, Primary,
Solid, Outlined,
Text, Text,
Link, Link,
} }
@ -155,11 +155,11 @@ pub fn Button(
theme.button.color_border_disabled theme.button.color_border_disabled
)); ));
} }
ButtonVariant::Solid => { ButtonVariant::Outlined => {
css_vars.push_str(&format!("--thaw-font-color-hover: {bg_color};")); css_vars.push_str(&format!("--thaw-font-color-hover: {bg_color};"));
css_vars.push_str(&format!( css_vars.push_str(&format!(
"--thaw-border-color: {};", "--thaw-border-color: {};",
theme.button.border_color_solid theme.button.border_color_outlined
)); ));
css_vars.push_str(&format!("--thaw-border-color-hover: {bg_color};")); css_vars.push_str(&format!("--thaw-border-color-hover: {bg_color};"));
css_vars.push_str(&format!("--thaw-ripple-color: {bg_color};")); css_vars.push_str(&format!("--thaw-ripple-color: {bg_color};"));
@ -223,8 +223,8 @@ pub fn Button(
view! { view! {
<button <button
class=class_list![ class=class_list![
"thaw-button", ("thaw-button--solid", move || variant.get() == "thaw-button", ("thaw-button--outlined", move || variant.get() ==
ButtonVariant::Solid), ("thaw-button--text", move || variant.get() == ButtonVariant::Outlined), ("thaw-button--text", move || variant.get() ==
ButtonVariant::Text), ("thaw-button--link", move || variant.get() == ButtonVariant::Text), ("thaw-button--link", move || variant.get() ==
ButtonVariant::Link), ("thaw-button--round", move || round.get()), ButtonVariant::Link), ("thaw-button--round", move || round.get()),
("thaw-button--circle", move || circle.get()), ("thaw-button--disabled", move || ("thaw-button--circle", move || circle.get()), ("thaw-button--disabled", move ||

6
thaw/src/button/theme.rs
View file

@ -7,7 +7,7 @@ pub struct ButtonTheme {
pub padding_medium: String, pub padding_medium: String,
pub padding_large: String, pub padding_large: String,
pub border_color_solid: String, pub border_color_outlined: String,
pub color_text_hover: String, pub color_text_hover: String,
pub color_text_active: String, pub color_text_active: String,
pub color_text_disabled: String, pub color_text_disabled: String,
@ -23,7 +23,7 @@ impl ThemeMethod for ButtonTheme {
padding_medium: "0 14px".into(), padding_medium: "0 14px".into(),
padding_large: "0 18px".into(), padding_large: "0 18px".into(),
border_color_solid: "#e0e0e6".into(), border_color_outlined: "#e0e0e6".into(),
color_text_hover: "#f1f3f5".into(), color_text_hover: "#f1f3f5".into(),
color_text_active: "#eceef0".into(), color_text_active: "#eceef0".into(),
color_text_disabled: "#00000040".into(), color_text_disabled: "#00000040".into(),
@ -39,7 +39,7 @@ impl ThemeMethod for ButtonTheme {
padding_medium: "0 14px".into(), padding_medium: "0 14px".into(),
padding_large: "0 18px".into(), padding_large: "0 18px".into(),
border_color_solid: "#ffffff3d".into(), border_color_outlined: "#ffffff3d".into(),
color_text_hover: "#ffffff1a".into(), color_text_hover: "#ffffff1a".into(),
color_text_active: "#ffffff26".into(), color_text_active: "#ffffff26".into(),
color_text_disabled: "#4c5155".into(), color_text_disabled: "#4c5155".into(),

6
thaw/src/calendar/mod.rs
View file

@ -135,15 +135,15 @@ pub fn Calendar(
<span> <span>
<ButtonGroup> <ButtonGroup>
<Button <Button
variant=ButtonVariant::Solid variant=ButtonVariant::Outlined
icon=icondata::AiLeftOutlined icon=icondata::AiLeftOutlined
on_click=previous_month on_click=previous_month
/> />
<Button variant=ButtonVariant::Solid on_click=today> <Button variant=ButtonVariant::Outlined on_click=today>
"Today" "Today"
</Button> </Button>
<Button <Button
variant=ButtonVariant::Solid variant=ButtonVariant::Outlined
icon=icondata::AiRightOutlined icon=icondata::AiRightOutlined
on_click=next_month on_click=next_month
/> />

2
thaw/src/date_picker/panel/date_panel.rs
View file

@ -159,7 +159,7 @@ pub fn DatePanel(
</div> </div>
</div> </div>
<div class="thaw-date-picker-date-panel__footer"> <div class="thaw-date-picker-date-panel__footer">
<Button variant=ButtonVariant::Solid size=ButtonSize::Tiny on_click=now> <Button variant=ButtonVariant::Outlined size=ButtonSize::Tiny on_click=now>
"Now" "Now"
</Button> </Button>
</div> </div>

2
thaw/src/time_picker/mod.rs
View file

@ -257,7 +257,7 @@ fn Panel(
</div> </div>
</div> </div>
<div class="thaw-time-picker-panel__footer"> <div class="thaw-time-picker-panel__footer">
<Button variant=ButtonVariant::Solid size=ButtonSize::Tiny on_click=now> <Button variant=ButtonVariant::Outlined size=ButtonSize::Tiny on_click=now>
"Now" "Now"
</Button> </Button>
<Button size=ButtonSize::Tiny on_click=ok> <Button size=ButtonSize::Tiny on_click=ok>