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 disabled

Browse source
This commit is contained in:
luoxiao 2024-05-06 22:21:17 +08:00
parent 4017606b18
commit fc4574f29a
11 changed files with 222 additions and 406 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -199,7 +199,6 @@ pub fn SiteHeader() -> impl IntoView {
<Button
appearance=ButtonAppearance::Subtle
icon=icondata::AiGithubOutlined
round=true
style="font-size: 22px; padding: 0px 6px;"
on_click=move |_| {
_ = window().open_with_url("http://github.com/thaw-ui/thaw");

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

@ -54,84 +54,12 @@ view! {
</Button>
</Space>
<Space>
<Button color=ButtonColor::Error icon=icondata::AiCloseOutlined>
<Button icon=icondata::AiCloseOutlined>
"Error Color Icon"
</Button>
<Button color=ButtonColor::Error icon=icondata::AiCloseOutlined>
"Error Color Icon"
</Button>
<Button
color=ButtonColor::Error
icon=icondata::AiCloseOutlined
round=true
/>
<Button
color=ButtonColor::Error
icon=icondata::AiCloseOutlined
circle=true
/>
</Space>
</Space>
}
```
### 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
let loading = create_rw_signal(false);
let on_click = move |_| {
loading.set(true);
set_timeout(
move || {
loading.set(false);
},
std::time::Duration::new(2, 0),
);
};
view! {
<Space>
<Button loading on_click icon=icondata::AiCloseOutlined>
"Click Me"
</Button>
<Button loading on_click>
"Click Me"
<Button icon=icondata::AiCloseOutlined>
</Button>
</Space>
}
```
### Disabled
```rust demo
view! {
<Space>
<Button appearance=ButtonAppearance::Primary disabled=true>
"Primary"
</Button>
<Button disabled=true>
"Outlined"
</Button>
<Button appearance=ButtonAppearance::Subtle disabled=true>
"Subtle"
</Button>
<Button appearance=ButtonAppearance::Transparent disabled=true>
"Transparent"
</Button>
</Space>
}
```
@ -140,11 +68,68 @@ view! {
```rust demo
view! {
<Space vertical=true>
<Space>
<Button size=ButtonSize::Tiny>"Primary"</Button>
<Button size=ButtonSize::Small>"Primary"</Button>
<Button size=ButtonSize::Medium>"Primary"</Button>
<Button size=ButtonSize::Large>"Primary"</Button>
<Button size=ButtonSize::Small>"Small"</Button>
<Button size=ButtonSize::Small icon=icondata::AiCloseOutlined>
"Small with calendar icon"
</Button>
<Button size=ButtonSize::Small icon=icondata::AiCloseOutlined>
</Button>
</Space>
<Space>
<Button>"Medium"</Button>
<Button icon=icondata::AiCloseOutlined>
"Medium with calendar icon"
</Button>
<Button icon=icondata::AiCloseOutlined>
</Button>
</Space>
<Space>
<Button size=ButtonSize::Large>"Large"</Button>
<Button size=ButtonSize::Large icon=icondata::AiCloseOutlined>
"Large with calendar icon"
</Button>
<Button size=ButtonSize::Large icon=icondata::AiCloseOutlined>
</Button>
</Space>
</Space>
}
```
### Disabled
```rust demo
view! {
<Space vertical=true>
<Space>
<Button disabled=true>
"Secondary"
</Button>
<Button appearance=ButtonAppearance::Primary disabled=true>
"Primary"
</Button>
<Button appearance=ButtonAppearance::Subtle disabled=true>
"Subtle"
</Button>
<Button appearance=ButtonAppearance::Transparent disabled=true>
"Transparent"
</Button>
</Space>
<Space>
<Button disabled_focusable=true>
"Secondary"
</Button>
<Button appearance=ButtonAppearance::Primary disabled_focusable=true>
"Primary"
</Button>
<Button appearance=ButtonAppearance::Subtle disabled_focusable=true>
"Subtle"
</Button>
<Button appearance=ButtonAppearance::Transparent disabled_focusable=true>
"Transparent"
</Button>
</Space>
</Space>
}
```

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

@ -97,99 +97,87 @@
border-radius: var(--borderRadiusNone);
}
.thaw-button--small {
min-width: 64px;
padding: 3px var(--spacingHorizontalS);
font-size: var(--fontSizeBase200);
line-height: var(--lineHeightBase200);
font-weight: var(--fontWeightRegular);
}
.thaw-button--large {
min-width: 96px;
padding: 8px var(--spacingHorizontalL);
font-size: var(--fontSizeBase400);
line-height: var(--lineHeightBase400);
font-weight: var(--fontWeightSemibold);
}
.thaw-button--only-icon {
max-width: 32px;
min-width: 32px;
padding: 5px;
}
.thaw-button:not(.thaw-button--only-icon) .thaw-button__icon {
margin-right: var(--spacingHorizontalSNudge);
}
.thaw-button__icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
width: 20px;
height: 20px;
}
.thaw-button--small.thaw-button--only-icon {
max-width: 24px;
min-width: 24px;
padding: 1px;
}
.thaw-button--large.thaw-button--only-icon {
max-width: 40px;
min-width: 40px;
padding: 7px;
}
.thaw-button--large.thaw-button--only-icon .thaw-button__icon {
width: 24px;
height: 24px;
}
.thaw-button--disabled:hover:active,
.thaw-button--disabled:hover,
.thaw-button--disabled {
color: var(--colorNeutralForegroundDisabled);
background-color: var(--colorNeutralBackgroundDisabled);
border-color: var(--colorNeutralStrokeDisabled);
cursor: not-allowed;
}
.thaw-button--primary.thaw-button--disabled:hover:active,
.thaw-button--primary.thaw-button--disabled:hover,
.thaw-button--primary.thaw-button--disabled {
border-color: transparent;
}
.thaw-button--subtle.thaw-button--disabled:hover:active,
.thaw-button--subtle.thaw-button--disabled:hover,
.thaw-button--subtle.thaw-button--disabled,
.thaw-button--transparent.thaw-button--disabled:hover:active,
.thaw-button--transparent.thaw-button--disabled:hover,
.thaw-button--transparent.thaw-button--disabled {
background-color: transparent;
border-color: transparent;
}
.thaw-button--block {
display: flex;
width: 100%;
}
.thaw-button--disabled:not(.thaw-button--text, .thaw-button--link) {
border-color: var(--thaw-border-color-disabled);
background-color: var(--thaw-background-color-disabled);
}
.thaw-button.thaw-button--disabled {
color: var(--thaw-font-color-disabled);
cursor: not-allowed;
}
/* .thaw-button:active:not(.thaw-button--disabled) {
transition: all 0.3s;
border-color: var(--thaw-border-color-hover);
background-color: var(--thaw-background-color-active);
} */
.thaw-button--outlined {
background-color: transparent;
color: inherit;
transition: all 0.3s;
}
.thaw-button--outlined:hover:not(.thaw-button--disabled) {
cursor: pointer;
color: var(--thaw-font-color-hover);
border-color: var(--thaw-border-color-hover);
}
.thaw-button--text,
.thaw-button--link {
border: none;
}
.thaw-button--link {
background-color: transparent;
color: inherit;
height: auto;
padding: inherit;
}
.thaw-button--text:hover:not(.thaw-button--disabled),
.thaw-button--link:hover:not(.thaw-button--disabled) {
color: var(--thaw-font-color-hover);
}
.thaw-button--round {
border-radius: var(--thaw-height);
}
.thaw-button--circle:not(.thaw-button--link) {
width: var(--thaw-height);
padding: 0;
border-radius: var(--thaw-height);
}
@keyframes thawLoadingCircle {
100% {
transform: rotate(360deg);
}
}
.thaw-button .thaw-wave {
pointer-events: none;
animation-iteration-count: 1;
animation-duration: 0.6s;
animation-timing-function: cubic-bezier(0, 0, 0.2, 1),
cubic-bezier(0, 0, 0.2, 1);
}
.thaw-button .thaw-wave.thaw-wave--active {
opacity: 0;
z-index: 1;
animation-name: thawButtonWaveSpread, thawButtonWaveOpacity;
}
@keyframes thawButtonWaveSpread {
from {
box-shadow: 0 0 0.5px 0 var(--thaw-ripple-color);
}
to {
box-shadow: 0 0 0.5px 6px var(--thaw-ripple-color);
}
}
@keyframes thawButtonWaveOpacity {
from {
opacity: 0.6;
}
to {
opacity: 0;
}
}

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

@ -1,13 +1,11 @@
mod button_group;
mod theme;
pub use button_group::ButtonGroup;
pub use theme::ButtonTheme;
use crate::{icon::Icon, theme::*};
use crate::icon::Icon;
use leptos::*;
use thaw_components::{OptionComp, Wave, WaveRef};
use thaw_utils::{class_list, mount_style, ComponentRef, OptionalMaybeSignal, OptionalProp};
use thaw_components::OptionComp;
use thaw_utils::{class_list, mount_style, OptionalMaybeSignal, OptionalProp};
#[derive(Default, PartialEq, Clone, Copy)]
pub enum ButtonAppearance {
@ -34,7 +32,7 @@ pub enum ButtonShape {
#[default]
Rounded,
Circular,
Square
Square,
}
impl ButtonShape {
@ -56,37 +54,8 @@ pub enum ButtonColor {
Error,
}
impl ButtonColor {
fn theme_color(&self, theme: &Theme) -> String {
match self {
ButtonColor::Primary => theme.common.color_primary.clone(),
ButtonColor::Success => theme.common.color_success.clone(),
ButtonColor::Warning => theme.common.color_warning.clone(),
ButtonColor::Error => theme.common.color_error.clone(),
}
}
fn theme_color_hover(&self, theme: &Theme) -> String {
match self {
ButtonColor::Primary => theme.common.color_primary_hover.clone(),
ButtonColor::Success => theme.common.color_success_hover.clone(),
ButtonColor::Warning => theme.common.color_warning_hover.clone(),
ButtonColor::Error => theme.common.color_error_hover.clone(),
}
}
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(),
}
}
}
#[derive(Default, Clone)]
#[derive(Default, PartialEq, Clone)]
pub enum ButtonSize {
Tiny,
Small,
#[default]
Medium,
@ -94,21 +63,11 @@ pub enum ButtonSize {
}
impl ButtonSize {
fn theme_height(&self, theme: &Theme) -> String {
fn as_str(&self) -> &str {
match self {
ButtonSize::Tiny => theme.common.height_tiny.clone(),
ButtonSize::Small => theme.common.height_small.clone(),
ButtonSize::Medium => theme.common.height_medium.clone(),
ButtonSize::Large => theme.common.height_large.clone(),
}
}
fn theme_padding(&self, theme: &Theme) -> String {
match self {
ButtonSize::Tiny => theme.button.padding_tiny.clone(),
ButtonSize::Small => theme.button.padding_small.clone(),
ButtonSize::Medium => theme.button.padding_medium.clone(),
ButtonSize::Large => theme.button.padding_large.clone(),
ButtonSize::Small => "small",
ButtonSize::Medium => "medium",
ButtonSize::Large => "large",
}
}
}
@ -122,151 +81,58 @@ pub fn Button(
#[prop(optional, into)] color: MaybeSignal<ButtonColor>,
#[prop(optional, into)] size: MaybeSignal<ButtonSize>,
#[prop(optional, into)] block: MaybeSignal<bool>,
#[prop(optional, into)] round: MaybeSignal<bool>,
#[prop(optional, into)] circle: MaybeSignal<bool>,
#[prop(optional, into)] icon: OptionalMaybeSignal<icondata_core::Icon>,
#[prop(optional, into)] loading: MaybeSignal<bool>,
#[prop(optional, into)] disabled: MaybeSignal<bool>,
#[prop(optional, into)] disabled_focusable: MaybeSignal<bool>,
#[prop(optional, into)] on_click: Option<Callback<ev::MouseEvent>>,
#[prop(optional)] children: Option<Children>,
) -> impl IntoView {
let theme = use_theme(Theme::light);
let css_vars = create_memo(move |_| {
let mut css_vars = String::new();
theme.with(|theme| {
let bg_color = color.get().theme_color(theme);
css_vars.push_str(&format!(
"--thaw-font-color-disabled: {};",
theme.button.color_text_disabled
));
css_vars.push_str(&format!(
"--thaw-height: {};",
size.get().theme_height(theme)
));
css_vars.push_str(&format!(
"--thaw-padding: {};",
size.get().theme_padding(theme)
));
match appearance.get() {
ButtonAppearance::Secondary => {}
ButtonAppearance::Primary => {
let bg_color_hover = color.get().theme_color_hover(theme);
let bg_color_active = color.get().theme_color_active(theme);
css_vars.push_str(&format!("--thaw-background-color: {bg_color};"));
css_vars.push_str(&format!("--thaw-background-color-hover: {bg_color_hover};"));
css_vars.push_str(&format!(
"--thaw-background-color-active: {bg_color_active};"
));
css_vars.push_str("--thaw-font-color: #fff;");
css_vars.push_str(&format!("--thaw-border-color: {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-background-color-disabled: {};",
theme.button.color_background_disabled
));
css_vars.push_str(&format!(
"--thaw-border-color-disabled: {};",
theme.button.color_border_disabled
));
}
ButtonAppearance::Subtle => {
css_vars.push_str(&format!("--thaw-font-color-hover: {bg_color};"));
css_vars.push_str(&format!(
"--thaw-background-color-hover: {};",
theme.button.color_text_hover
));
css_vars.push_str(&format!(
"--thaw-background-color-active: {};",
theme.button.color_text_active
));
css_vars.push_str("--thaw-ripple-color: #0000;");
}
ButtonAppearance::Transparent => {
css_vars.push_str(&format!("--thaw-font-color-hover: {bg_color};"));
css_vars.push_str("--thaw-ripple-color: #0000;");
}
}
});
css_vars
});
mount_style("button", include_str!("./button.css"));
let icon_style = if children.is_some() {
"margin-right: var(--spacingHorizontalSNudge)"
} else {
""
};
let none_children = children.is_none();
let only_icon = Memo::new(move |_| icon.with(|i| i.is_some()) && none_children);
let btn_disabled = Memo::new(move |_| disabled.get() || disabled_focusable.get());
let disabled = create_memo(move |_| {
if loading.get() {
return true;
}
disabled.get()
});
let wave_ref = ComponentRef::<WaveRef>::default();
let on_click = move |event| {
if disabled.get() {
let on_click = move |e| {
if btn_disabled.get_untracked() {
return;
}
if let Some(wave_ref) = wave_ref.get_untracked() {
wave_ref.play();
}
let Some(callback) = on_click.as_ref() else {
return;
};
callback.call(event);
callback.call(e);
};
view! {
<button
class=class_list![
"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()),
"thaw-button",
("thaw-button--disabled", btn_disabled),
("thaw-button--block", move || block.get()),
("thaw-button--only-icon", only_icon),
move || format!("thaw-button--{}", size.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())
]
style=move || {
format!("{}{}", css_vars.get(), style.as_ref().map(|s| s.get()).unwrap_or_default())
}
disabled=move || disabled.get()
style=move || style.as_ref().map(|s| s.get())
disabled=move || disabled.get().then_some("")
aria-disabled=move || disabled_focusable.get().then_some("true")
on:click=on_click
>
<Wave comp_ref=wave_ref/>
{move || {
if loading.get() {
view! {
<Icon
icon=icondata_ai::AiLoadingOutlined
style=format!(
"animation: thawLoadingCircle 1s infinite linear;{icon_style}",
)
/>
}
.into_view()
} else {
(move || {
{
move || {
let icon = icon.get();
view! {
<OptionComp value=icon let:icon>
<Icon icon=icon style=icon_style/>
<Icon icon=icon class="thaw-button__icon"/>
</OptionComp>
}
})
.into_view()
}
}}
}
<OptionComp value=children let:children>
{children()}
</OptionComp>

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

@ -1,50 +0,0 @@
use crate::theme::ThemeMethod;
#[derive(Clone)]
pub struct ButtonTheme {
pub padding_tiny: String,
pub padding_small: String,
pub padding_medium: String,
pub padding_large: String,
pub border_color_outlined: String,
pub color_text_hover: String,
pub color_text_active: String,
pub color_text_disabled: String,
pub color_background_disabled: String,
pub color_border_disabled: String,
}
impl ThemeMethod for ButtonTheme {
fn light() -> Self {
Self {
padding_tiny: "0 6px".into(),
padding_small: "0 10px".into(),
padding_medium: "0 14px".into(),
padding_large: "0 18px".into(),
border_color_outlined: "#e0e0e6".into(),
color_text_hover: "#f1f3f5".into(),
color_text_active: "#eceef0".into(),
color_text_disabled: "#00000040".into(),
color_background_disabled: "#0000000a".into(),
color_border_disabled: "#d9d9d9".into(),
}
}
fn dark() -> Self {
Self {
padding_tiny: "0 6px".into(),
padding_small: "0 10px".into(),
padding_medium: "0 14px".into(),
padding_large: "0 18px".into(),
border_color_outlined: "#ffffff3d".into(),
color_text_hover: "#ffffff1a".into(),
color_text_active: "#ffffff26".into(),
color_text_disabled: "#4c5155".into(),
color_background_disabled: "#2b2f31".into(),
color_border_disabled: "#2b2f31".into(),
}
}
}

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

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

13
thaw/src/theme/color.rs
View file

@ -2,9 +2,12 @@ use thaw_macro::WriteCSSVars;
#[derive(Clone, WriteCSSVars)]
pub struct ColorTheme {
pub color_neutral_background_disabled: String,
pub color_neutral_background_1: String,
pub color_neutral_background_1_hover: String,
pub color_neutral_background_1_pressed: String,
pub color_neutral_foreground_disabled: String,
pub color_neutral_foreground_1: String,
pub color_neutral_foreground_1_hover: String,
pub color_neutral_foreground_1_pressed: String,
@ -14,6 +17,8 @@ pub struct ColorTheme {
pub color_neutral_foreground_2_brand_hover: String,
pub color_neutral_foreground_2_brand_pressed: String,
pub color_neutral_foreground_on_brand: String,
pub color_neutral_stroke_disabled: String,
pub color_neutral_stroke_1: String,
pub color_neutral_stroke_1_hover: String,
pub color_neutral_stroke_1_pressed: String,
@ -31,9 +36,11 @@ pub struct ColorTheme {
impl ColorTheme {
pub fn light() -> Self {
Self {
color_neutral_background_disabled: "#f0f0f0".into(),
color_neutral_background_1: "#fff".into(),
color_neutral_background_1_hover: "#f5f5f5".into(),
color_neutral_background_1_pressed: "#e0e0e0".into(),
color_neutral_foreground_disabled: "#bdbdbd".into(),
color_neutral_foreground_1: "#242424".into(),
color_neutral_foreground_1_hover: "#242424".into(),
color_neutral_foreground_1_pressed: "#242424".into(),
@ -43,6 +50,8 @@ impl ColorTheme {
color_neutral_foreground_2_brand_hover: "#0f6cbd".into(),
color_neutral_foreground_2_brand_pressed: "#115ea3".into(),
color_neutral_foreground_on_brand: "#fff".into(),
color_neutral_stroke_disabled: "#e0e0e0".into(),
color_neutral_stroke_1: "#d1d1d1".into(),
color_neutral_stroke_1_hover: "#c7c7c7".into(),
color_neutral_stroke_1_pressed: "#b3b3b3".into(),
@ -60,9 +69,11 @@ impl ColorTheme {
pub fn dark() -> Self {
Self {
color_neutral_background_disabled: "#141414".into(),
color_neutral_background_1: "#292929".into(),
color_neutral_background_1_hover: "#3d3d3d".into(),
color_neutral_background_1_pressed: "#1f1f1f".into(),
color_neutral_foreground_disabled: "#5c5c5c".into(),
color_neutral_foreground_1: "#fff".into(),
color_neutral_foreground_1_hover: "#fff".into(),
color_neutral_foreground_1_pressed: "#fff".into(),
@ -72,6 +83,8 @@ impl ColorTheme {
color_neutral_foreground_2_brand_hover: "#479ef5".into(),
color_neutral_foreground_2_brand_pressed: "#2886de".into(),
color_neutral_foreground_on_brand: "#fff".into(),
color_neutral_stroke_disabled: "#424242".into(),
color_neutral_stroke_1: "#666666".into(),
color_neutral_stroke_1_hover: "#757575".into(),
color_neutral_stroke_1_pressed: "#6b6b6b".into(),

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

@ -20,9 +20,13 @@ pub struct CommonTheme {
pub color_error_hover: String,
pub color_error_active: String,
pub font_size_base_200: String,
pub font_size_base_300: String,
pub font_size_base_400: String,
pub line_height_base300: String,
pub line_height_base_200: String,
pub line_height_base_300: String,
pub line_height_base_400: String,
pub font_weight_regular: String,
pub font_weight_semibold: String,
@ -35,7 +39,9 @@ pub struct CommonTheme {
pub border_radius_circular: String,
pub spacing_horizontal_s_nudge: String,
pub spacing_horizontal_s: String,
pub spacing_horizontal_m: String,
pub spacing_horizontal_l: String,
pub duration_faster: String,
pub curve_easy_ease: String,
@ -69,9 +75,13 @@ impl CommonTheme {
color_error_hover: "".into(),
color_error_active: "".into(),
font_size_base_200: "12px".into(),
font_size_base_300: "14px".into(),
font_size_base_400: "16px".into(),
line_height_base300: "20px".into(),
line_height_base_200: "16px".into(),
line_height_base_300: "20px".into(),
line_height_base_400: "22px".into(),
font_weight_regular: "400".into(),
font_weight_semibold: "600".into(),
@ -84,7 +94,9 @@ impl CommonTheme {
border_radius_circular: "10000px".into(),
spacing_horizontal_s_nudge: "6px".into(),
spacing_horizontal_s: "8px".into(),
spacing_horizontal_m: "12px".into(),
spacing_horizontal_l: "16px".into(),
duration_faster: "100ms".into(),
curve_easy_ease: "cubic-bezier(0.33,0,0.67,1)".into(),

15
thaw/src/theme/mod.rs
View file

@ -1,16 +1,16 @@
mod common;
mod color;
mod common;
use self::common::CommonTheme;
pub use color::ColorTheme;
use crate::{
mobile::{NavBarTheme, TabbarTheme},
AlertTheme, AnchorTheme, AutoCompleteTheme, AvatarTheme, BackTopTheme, BreadcrumbTheme,
ButtonTheme, CalendarTheme, CollapseTheme, ColorPickerTheme, DatePickerTheme, InputTheme,
MenuTheme, MessageTheme, PopoverTheme, ProgressTheme, ScrollbarTheme, SelectTheme,
SkeletionTheme, SliderTheme, SpinnerTheme, SwitchTheme, TableTheme, TagTheme, TimePickerTheme,
TypographyTheme, UploadTheme,
CalendarTheme, CollapseTheme, ColorPickerTheme, DatePickerTheme, InputTheme, MenuTheme,
MessageTheme, PopoverTheme, ProgressTheme, ScrollbarTheme, SelectTheme, SkeletionTheme,
SliderTheme, SpinnerTheme, SwitchTheme, TableTheme, TagTheme, TimePickerTheme, TypographyTheme,
UploadTheme,
};
pub use color::ColorTheme;
use leptos::*;
pub trait ThemeMethod {
@ -23,7 +23,6 @@ pub struct Theme {
pub name: String,
pub common: CommonTheme,
pub color: ColorTheme,
pub button: ButtonTheme,
pub input: InputTheme,
pub menu: MenuTheme,
pub table: TableTheme,
@ -60,7 +59,6 @@ impl Theme {
name: "light".into(),
common: CommonTheme::light(),
color: ColorTheme::light(),
button: ButtonTheme::light(),
input: InputTheme::light(),
menu: MenuTheme::light(),
table: TableTheme::light(),
@ -96,7 +94,6 @@ impl Theme {
name: "dark".into(),
common: CommonTheme::dark(),
color: ColorTheme::dark(),
button: ButtonTheme::dark(),
input: InputTheme::dark(),
menu: MenuTheme::dark(),
table: TableTheme::dark(),

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

@ -286,10 +286,10 @@ fn Panel(
</div>
</div>
<div class="thaw-time-picker-panel__footer">
<Button size=ButtonSize::Tiny on_click=now>
<Button size=ButtonSize::Small on_click=now>
"Now"
</Button>
<Button size=ButtonSize::Tiny on_click=ok>
<Button size=ButtonSize::Small on_click=ok>
"OK"
</Button>
</div>

8
thaw_utils/src/class_list.rs
View file

@ -1,6 +1,6 @@
#[cfg(not(feature = "ssr"))]
use leptos::create_render_effect;
use leptos::{Attribute, IntoAttribute, Oco, RwSignal, SignalUpdate, SignalWith};
use leptos::{Attribute, IntoAttribute, Memo, Oco, RwSignal, SignalGet, SignalUpdate, SignalWith};
use std::{collections::HashSet, rc::Rc};
pub struct ClassList(RwSignal<HashSet<Oco<'static, str>>>);
@ -163,6 +163,12 @@ where
}
}
impl IntoClass for (&'static str, Memo<bool>) {
fn into_class(self) -> Class {
Class::Fn(self.0.into(), Box::new(move || self.1.get()))
}
}
impl<T> IntoClass for (String, T)
where
T: Fn() -> bool + 'static,