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

feat: button shape

Browse source
This commit is contained in:
luoxiao 2024-05-06 17:28:47 +08:00
parent b6b7df0a05
commit 4017606b18
14 changed files with 139 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
demo/src/components/site_header.rs
View file

@ -152,7 +152,7 @@ pub fn SiteHeader() -> impl IntoView {
<Popover placement=PopoverPlacement::BottomEnd class="demo-header__menu-popover-mobile">
<PopoverTrigger slot class="demo-header__menu-mobile">
<Button
variant=ButtonAppearance::Subtle
appearance=ButtonAppearance::Subtle
icon=icondata::AiUnorderedListOutlined
style="font-size: 22px; padding: 0px 6px;"
/>
@ -173,7 +173,7 @@ pub fn SiteHeader() -> impl IntoView {
</Popover>
<Space class="demo-header__right-btn" align=SpaceAlign::Center>
<Button
variant=ButtonAppearance::Subtle
appearance=ButtonAppearance::Subtle
on_click=move |_| {
let navigate = use_navigate();
navigate("/guide/installation", Default::default());
@ -183,7 +183,7 @@ pub fn SiteHeader() -> impl IntoView {
"Guide"
</Button>
<Button
variant=ButtonAppearance::Subtle
appearance=ButtonAppearance::Subtle
on_click=move |_| {
let navigate = use_navigate();
navigate("/components/button", Default::default());
@ -192,12 +192,12 @@ pub fn SiteHeader() -> impl IntoView {
"Components"
</Button>
<Button variant=ButtonAppearance::Subtle on_click=Callback::new(move |_| change_theme.call(()))>
<Button appearance=ButtonAppearance::Subtle on_click=Callback::new(move |_| change_theme.call(()))>
{move || theme_name.get()}
</Button>
<SwitchVersion />
<Button
variant=ButtonAppearance::Subtle
appearance=ButtonAppearance::Subtle
icon=icondata::AiGithubOutlined
round=true
style="font-size: 22px; padding: 0px 6px;"

2
demo/src/pages/home.rs
View file

@ -23,7 +23,7 @@ pub fn Home() -> impl IntoView {
navigate("/components/button", Default::default());
}>"Read the docs"</Button>
<Button
variant=ButtonAppearance::Subtle
appearance=ButtonAppearance::Subtle
on_click=move |_| {
_ = window().open_with_url("http://github.com/thaw-ui/thaw");
}

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

@ -4,22 +4,21 @@
view! {
<Space>
<Button>"Secondary"</Button>
<Button variant=ButtonAppearance::Primary>"Primary"</Button>
<Button variant=ButtonAppearance::Subtle>"Subtle"</Button>
<Button variant=ButtonAppearance::Transparent>"Transparent"</Button>
<Button appearance=ButtonAppearance::Primary>"Primary"</Button>
<Button appearance=ButtonAppearance::Subtle>"Subtle"</Button>
<Button appearance=ButtonAppearance::Transparent>"Transparent"</Button>
</Space>
}
```
### Color
### Shape
```rust demo
view! {
<Space>
<Button color=ButtonColor::Primary>"Primary Color"</Button>
<Button color=ButtonColor::Success>"Success Color"</Button>
<Button color=ButtonColor::Warning>"Warning Color"</Button>
<Button color=ButtonColor::Error>"Error Color"</Button>
<Button>"Rounded"</Button>
<Button shape=ButtonShape::Circular>"Circular"</Button>
<Button shape=ButtonShape::Square>"Square"</Button>
</Space>
}
```
@ -76,6 +75,20 @@ view! {
}
```
### Color
```rust demo
view! {
<Space>
<Button color=ButtonColor::Primary>"Primary Color"</Button>
<Button color=ButtonColor::Success>"Success Color"</Button>
<Button color=ButtonColor::Warning>"Warning Color"</Button>
<Button color=ButtonColor::Error>"Error Color"</Button>
</Space>
}
```
### Loading
```rust demo
@ -107,16 +120,16 @@ view! {
```rust demo
view! {
<Space>
<Button variant=ButtonAppearance::Primary disabled=true>
<Button appearance=ButtonAppearance::Primary disabled=true>
"Primary"
</Button>
<Button disabled=true>
"Outlined"
</Button>
<Button variant=ButtonAppearance::Subtle disabled=true>
<Button appearance=ButtonAppearance::Subtle disabled=true>
"Subtle"
</Button>
<Button variant=ButtonAppearance::Transparent disabled=true>
<Button appearance=ButtonAppearance::Transparent disabled=true>
"Transparent"
</Button>
</Space>
@ -171,7 +184,7 @@ view! {
| --- | --- | --- | --- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Additional classes for the button element. |
| style | `Option<MaybeSignal<String>>` | `Default::default()` | Button's style. |
| variant | `MaybeSignal<ButtonAppearance>` | `ButtonAppearance::Primary` | Button's variant. |
| appearance | `MaybeSignal<ButtonAppearance>` | `ButtonAppearance::Primary` | Button's variant. |
| color | `MaybeSignal<ButtonColor>` | `ButtonColor::Primary` | Button's color. |
| block | `MaybeSignal<bool>` | `false` | Whether the button is displayed as block. |
| round | `MaybeSignal<bool>` | `false` | Whether the button shows rounded corners. |

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

@ -90,6 +90,13 @@
border-color: transparent;
}
.thaw-button--circular {
border-radius: var(--borderRadiusCircular);
}
.thaw-button--square {
border-radius: var(--borderRadiusNone);
}
.thaw-button--block {
display: flex;
width: 100%;

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

@ -29,6 +29,24 @@ impl ButtonAppearance {
}
}
#[derive(Default, PartialEq, Clone, Copy)]
pub enum ButtonShape {
#[default]
Rounded,
Circular,
Square
}
impl ButtonShape {
fn as_str(&self) -> &str {
match self {
ButtonShape::Rounded => "rounded",
ButtonShape::Circular => "circular",
ButtonShape::Square => "square",
}
}
}
#[derive(Default, Clone)]
pub enum ButtonColor {
#[default]
@ -76,15 +94,6 @@ pub enum ButtonSize {
}
impl ButtonSize {
fn theme_font_size(&self, theme: &Theme) -> String {
match self {
ButtonSize::Tiny => theme.common.font_size_tiny.clone(),
ButtonSize::Small => theme.common.font_size_small.clone(),
ButtonSize::Medium => theme.common.font_size_medium.clone(),
ButtonSize::Large => theme.common.font_size_large.clone(),
}
}
fn theme_height(&self, theme: &Theme) -> String {
match self {
ButtonSize::Tiny => theme.common.height_tiny.clone(),
@ -108,7 +117,8 @@ impl ButtonSize {
pub fn Button(
#[prop(optional, into)] style: Option<MaybeSignal<String>>,
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
#[prop(optional, into)] variant: MaybeSignal<ButtonAppearance>,
#[prop(optional, into)] appearance: MaybeSignal<ButtonAppearance>,
#[prop(optional, into)] shape: MaybeSignal<ButtonShape>,
#[prop(optional, into)] color: MaybeSignal<ButtonColor>,
#[prop(optional, into)] size: MaybeSignal<ButtonSize>,
#[prop(optional, into)] block: MaybeSignal<bool>,
@ -129,10 +139,6 @@ pub fn Button(
"--thaw-font-color-disabled: {};",
theme.button.color_text_disabled
));
css_vars.push_str(&format!(
"--thaw-font-size: {};",
size.get().theme_font_size(theme)
));
css_vars.push_str(&format!(
"--thaw-height: {};",
size.get().theme_height(theme)
@ -142,7 +148,7 @@ pub fn Button(
size.get().theme_padding(theme)
));
match variant.get() {
match appearance.get() {
ButtonAppearance::Secondary => {}
ButtonAppearance::Primary => {
let bg_color_hover = color.get().theme_color_hover(theme);
@ -190,7 +196,7 @@ pub fn Button(
mount_style("button", include_str!("./button.css"));
let icon_style = if children.is_some() {
"margin-right: 6px"
"margin-right: var(--spacingHorizontalSNudge)"
} else {
""
};
@ -224,7 +230,8 @@ pub fn Button(
"thaw-button", ("thaw-button--round", move || round.get()),
("thaw-button--circle", move || circle.get()), ("thaw-button--disabled", move ||
disabled.get()), ("thaw-button--block", move || block.get()),
move || format!("thaw-button--{}", variant.get().as_str()),
move || format!("thaw-button--{}", appearance.get().as_str()),
move || format!("thaw-button--{}", shape.get().as_str()),
class.map(| c | move || c.get())
]

5
thaw/src/card/mod.rs
View file

@ -34,9 +34,10 @@ pub fn Card(
let css_vars = create_memo(move |_| {
let mut css_vars = String::new();
theme.with(|theme| {
// TODO
css_vars.push_str(&format!(
"--thaw-background-color: {};",
theme.common.background_color
"--thaw-background-color: ;",
// theme.common.background_color
));
css_vars.push_str(&format!(
"--thaw-border-color: {};",

90
thaw/src/config_provider/mod.rs
View file

@ -13,52 +13,52 @@ pub fn ConfigProvider(
let css_vars = Memo::new(move |_| {
let mut css_vars = String::new();
theme.with(|theme| {
css_vars.push_str(&format!(
"--fontFamilyBase: {};",
theme.common.font_family_base
));
css_vars.push_str(&format!(
"--fontSizeBase300: {};",
theme.common.font_size_base_300
));
css_vars.push_str(&format!(
"--lineHeightBase300: {};",
theme.common.line_height_base300,
));
css_vars.push_str(&format!(
"--fontWeightRegular: {};",
theme.common.font_weight_regular
));
css_vars.push_str(&format!(
"--fontWeightSemibold: {};",
theme.common.font_weight_semibold
));
css_vars.push_str(&format!(
"--fontWeightBold: {};",
theme.common.font_weight_bold
));
css_vars.push_str(&format!(
"--strokeWidthThin: {};",
theme.common.stroke_width_thin,
));
css_vars.push_str(&format!(
"--borderRadiusMedium: {};",
theme.common.border_radius_medium
));
css_vars.push_str(&format!(
"--spacingHorizontalM: {};",
theme.common.spacing_horizontal_m
));
css_vars.push_str(&format!(
"--durationFaster: {};",
theme.common.duration_faster
));
css_vars.push_str(&format!(
"--curveEasyEase: {};",
theme.common.curve_easy_ease
));
// css_vars.push_str(&format!(
// "--fontFamilyBase: {};",
// theme.common.font_family_base
// ));
// css_vars.push_str(&format!(
// "--fontSizeBase300: {};",
// theme.common.font_size_base_300
// ));
// css_vars.push_str(&format!(
// "--lineHeightBase300: {};",
// theme.common.line_height_base300,
// ));
// css_vars.push_str(&format!(
// "--fontWeightRegular: {};",
// theme.common.font_weight_regular
// ));
// css_vars.push_str(&format!(
// "--fontWeightSemibold: {};",
// theme.common.font_weight_semibold
// ));
// css_vars.push_str(&format!(
// "--fontWeightBold: {};",
// theme.common.font_weight_bold
// ));
// css_vars.push_str(&format!(
// "--strokeWidthThin: {};",
// theme.common.stroke_width_thin,
// ));
// css_vars.push_str(&format!(
// "--borderRadiusMedium: {};",
// theme.common.border_radius_medium
// ));
// css_vars.push_str(&format!(
// "--spacingHorizontalM: {};",
// theme.common.spacing_horizontal_m
// ));
// css_vars.push_str(&format!(
// "--durationFaster: {};",
// theme.common.duration_faster
// ));
// css_vars.push_str(&format!(
// "--curveEasyEase: {};",
// theme.common.curve_easy_ease
// ));
theme.common.write_css_vars(&mut css_vars);
theme.color.write_css_vars(&mut css_vars);
});
css_vars

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

@ -88,27 +88,27 @@ pub fn DatePanel(
<div class="thaw-date-picker-date-panel__calendar">
<div class="thaw-date-picker-date-panel__header">
<Button
variant=ButtonAppearance::Transparent
appearance=ButtonAppearance::Transparent
size=ButtonSize::Small
icon=icondata_ai::AiArrowLeftOutlined
on_click=previous_year
/>
<Button
variant=ButtonAppearance::Transparent
appearance=ButtonAppearance::Transparent
size=ButtonSize::Small
icon=icondata_ai::AiLeftOutlined
on_click=previous_month
/>
<div class="thaw-date-picker-date-panel__header-month-year">
<Button
variant=ButtonAppearance::Subtle
appearance=ButtonAppearance::Subtle
size=ButtonSize::Small
on_click=move |_| panel_variant.set(PanelVariant::Month)
>
{move || Month::try_from(show_date.get().month() as u8).unwrap().name()}
</Button>
<Button
variant=ButtonAppearance::Subtle
appearance=ButtonAppearance::Subtle
size=ButtonSize::Small
on_click=move |_| panel_variant.set(PanelVariant::Year)
>
@ -116,13 +116,13 @@ pub fn DatePanel(
</Button>
</div>
<Button
variant=ButtonAppearance::Transparent
appearance=ButtonAppearance::Transparent
size=ButtonSize::Small
icon=icondata_ai::AiRightOutlined
on_click=next_month
/>
<Button
variant=ButtonAppearance::Transparent
appearance=ButtonAppearance::Transparent
size=ButtonSize::Small
icon=icondata_ai::AiArrowRightOutlined
on_click=next_year

6
thaw/src/date_picker/panel/month_panel.rs
View file

@ -23,14 +23,14 @@ pub fn MonthPanel(
<div class="thaw-date-picker-month-panel">
<div class="thaw-date-picker-month-panel__header">
<Button
variant=ButtonAppearance::Transparent
appearance=ButtonAppearance::Transparent
size=ButtonSize::Small
icon=icondata_ai::AiArrowLeftOutlined
on_click=previous_year
/>
<div class="thaw-date-picker-date-panel__header-year">
<Button
variant=ButtonAppearance::Subtle
appearance=ButtonAppearance::Subtle
size=ButtonSize::Small
on_click=move |_| panel_variant.set(PanelVariant::Year)
>
@ -38,7 +38,7 @@ pub fn MonthPanel(
</Button>
</div>
<Button
variant=ButtonAppearance::Transparent
appearance=ButtonAppearance::Transparent
size=ButtonSize::Small
icon=icondata_ai::AiArrowRightOutlined
on_click=next_year

4
thaw/src/date_picker/panel/year_panel.rs
View file

@ -30,7 +30,7 @@ pub fn YearPanel(
<div>
<div class="thaw-date-picker-year-panel__header">
<Button
variant=ButtonAppearance::Transparent
appearance=ButtonAppearance::Transparent
size=ButtonSize::Small
icon=icondata_ai::AiArrowLeftOutlined
on_click=previous_year_range
@ -43,7 +43,7 @@ pub fn YearPanel(
</div>
<Button
variant=ButtonAppearance::Transparent
appearance=ButtonAppearance::Transparent
size=ButtonSize::Small
icon=icondata_ai::AiArrowRightOutlined
on_click=next_year_range

8
thaw/src/global_style/mod.rs
View file

@ -7,10 +7,10 @@ pub fn GlobalStyle() -> impl IntoView {
create_effect(move |_| {
theme.with(|theme| {
if let Some(body) = document().body() {
_ = body
.style()
.set_property("background-color", &theme.common.background_color);
_ = body.style().set_property("color", &theme.common.font_color);
// _ = body
// .style()
// .set_property("background-color", &theme.common.background_color);
// _ = body.style().set_property("color", &theme.common.font_color);
// _ = body
// .style()
// .set_property("font-size", &theme.common.font_size);

4
thaw/src/input_number/mod.rs
View file

@ -90,10 +90,10 @@ where
on_blur=set_within_range
>
<InputSuffix slot>
<Button disabled=minus_disabled variant=ButtonAppearance::Transparent on_click=sub>
<Button disabled=minus_disabled appearance=ButtonAppearance::Transparent on_click=sub>
<Icon icon=icondata_ai::AiMinusOutlined style="font-size: 18px"/>
</Button>
<Button disabled=plus_disabled variant=ButtonAppearance::Transparent on_click=add>
<Button disabled=plus_disabled appearance=ButtonAppearance::Transparent on_click=add>
<Icon icon=icondata_ai::AiPlusOutlined style="font-size: 18px"/>
</Button>
</InputSuffix>

4
thaw/src/popover/mod.rs
View file

@ -38,7 +38,9 @@ pub fn Popover(
let font_color = if tooltip {
"#fff"
} else {
&theme.common.font_color
// TODO
// &theme.common.font_color
""
};
css_vars.push_str(&format!("--thaw-font-color: {};", font_color));
});

17
thaw/src/theme/common.rs
View file

@ -1,10 +1,9 @@
use super::ThemeMethod;
use thaw_macro::WriteCSSVars;
#[derive(Clone)]
#[derive(Clone, WriteCSSVars)]
pub struct CommonTheme {
pub font_family_base: String,
pub font_color: String,
pub background_color: String,
pub border_color: String,
pub color_scheme: String,
@ -31,8 +30,11 @@ pub struct CommonTheme {
pub stroke_width_thin: String,
pub border_radius_none: String,
pub border_radius_medium: String,
pub border_radius_circular: String,
pub spacing_horizontal_s_nudge: String,
pub spacing_horizontal_m: String,
pub duration_faster: String,
@ -52,8 +54,6 @@ impl CommonTheme {
fn common() -> Self {
Self {
font_family_base: "'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif".into(),
font_color: "".into(),
background_color: "".into(),
border_color: "".into(),
color_scheme: "".into(),
color_primary: "".into(),
@ -79,8 +79,11 @@ impl CommonTheme {
stroke_width_thin: "1px".into(),
border_radius_none: "0".into(),
border_radius_medium: "4px".into(),
border_radius_circular: "10000px".into(),
spacing_horizontal_s_nudge: "6px".into(),
spacing_horizontal_m: "12px".into(),
duration_faster: "100ms".into(),
@ -101,8 +104,6 @@ impl CommonTheme {
impl ThemeMethod for CommonTheme {
fn light() -> Self {
Self {
font_color: "#11181c".into(),
background_color: "#fff".into(),
color_scheme: "light".into(),
color_primary: "#0078ff".into(),
color_primary_hover: "#2994ff".into(),
@ -123,8 +124,6 @@ impl ThemeMethod for CommonTheme {
}
fn dark() -> Self {
Self {
font_color: "#ecedee".into(),
background_color: "#1a1d1e".into(),
color_scheme: "dark".into(),
color_primary: "#0078ff".into(),
color_primary_hover: "#2994ff".into(),