From b167a9ca3a51e51b27f044167e609238ee4d0682 Mon Sep 17 00:00:00 2001 From: luoxiao Date: Thu, 2 Nov 2023 22:01:48 +0800 Subject: [PATCH] feat: css vars --- src/alert/alert.css | 6 +++--- src/alert/mod.rs | 6 +++--- src/auto_complete/mod.rs | 6 +++++- src/avatar/mod.rs | 5 ++--- src/badge/badge.css | 4 ++-- src/badge/mod.rs | 4 ++-- src/button/button.css | 18 +++++++++--------- src/button/mod.rs | 30 ++++++++++++++++-------------- src/checkbox/checkbox.css | 4 ++-- src/checkbox/mod.rs | 9 ++++++--- src/color_picker/mod.rs | 6 +++++- src/input/mod.rs | 19 ++++++++----------- src/menu/menu-group.css | 2 +- src/menu/menu-item.css | 8 ++++---- src/menu/menu_group.rs | 2 +- src/menu/menu_item.rs | 19 ++++++++++--------- src/message/message_provider.rs | 1 + src/mobile/tabbar/mod.rs | 6 +++++- src/mobile/tabbar/tabbar-item.css | 2 +- src/mobile/tabbar/tabbar_item.rs | 7 ++++--- src/progress/mod.rs | 10 ++++------ src/radio/mod.rs | 2 +- src/radio/radio.css | 4 ++-- src/select/mod.rs | 6 +----- src/skeleton/mod.rs | 4 ++-- src/skeleton/skeleton.css | 8 ++++---- src/table/mod.rs | 14 ++++++++++---- src/table/table.css | 14 +++++++------- src/tabs/mod.rs | 12 +++++++----- src/tabs/tabs.css | 2 +- src/tag/mod.rs | 6 +++--- src/tag/tag.css | 6 +++--- src/upload/upload-dragger.css | 2 ++ src/upload/upload.css | 4 ++++ src/wave/mod.rs | 10 ++++++++-- 35 files changed, 149 insertions(+), 119 deletions(-) diff --git a/src/alert/alert.css b/src/alert/alert.css index 5dbcfc9..cc1f2ba 100644 --- a/src/alert/alert.css +++ b/src/alert/alert.css @@ -1,8 +1,8 @@ .melt-alert { position: relative; padding: 14px 20px 14px 42px; - background-color: var(--background-color); - border: 1px solid var(--border-color); + background-color: var(--melt-background-color); + border: 1px solid var(--melt-border-color); border-radius: 3px; line-height: 1.6; } @@ -12,7 +12,7 @@ top: 12px; left: 10px; font-size: 24px; - color: var(--icon-color); + color: var(--melt-icon-color); } .melt-alert__header { diff --git a/src/alert/mod.rs b/src/alert/mod.rs index 7b5e6f1..4e22917 100644 --- a/src/alert/mod.rs +++ b/src/alert/mod.rs @@ -54,15 +54,15 @@ pub fn Alert( theme.with(|theme| { let variant = variant.get(); css_vars.push_str(&format!( - "--icon-color: {};", + "--melt-icon-color: {};", variant.theme_icon_color(theme) )); css_vars.push_str(&format!( - "--background-color: {};", + "--melt-background-color: {};", variant.theme_background_color(theme) )); css_vars.push_str(&format!( - "--border-color: {};", + "--melt-border-color: {};", variant.theme_border_color(theme) )); }); diff --git a/src/auto_complete/mod.rs b/src/auto_complete/mod.rs index b908176..456ffcf 100644 --- a/src/auto_complete/mod.rs +++ b/src/auto_complete/mod.rs @@ -79,7 +79,11 @@ pub fn AutoComplete(
{move || { let src = src.get(); - (!src.is_empty()).then(|| view! { - - }) + (!src.is_empty()).then(|| view! { }) }} + } } diff --git a/src/badge/badge.css b/src/badge/badge.css index cd8bca5..dcfe682 100644 --- a/src/badge/badge.css +++ b/src/badge/badge.css @@ -4,8 +4,8 @@ } .melt-badge__sup { position: absolute; - color: var(--font-color); - background-color: var(--background-color); + color: var(--melt-font-color); + background-color: var(--melt-background-color); } .melt-badge__sup--value { top: -9px; diff --git a/src/badge/mod.rs b/src/badge/mod.rs index 6b74bac..4ff27e0 100644 --- a/src/badge/mod.rs +++ b/src/badge/mod.rs @@ -31,10 +31,10 @@ pub fn Badge( mount_style("badge", include_str!("./badge.css")); let css_vars = create_memo(move |_| { let mut css_vars = String::new(); - css_vars.push_str("--font-color: #fff;"); + css_vars.push_str("--melt-font-color: #fff;"); theme.with(|theme| { css_vars.push_str(&format!( - "--background-color: {};", + "--melt-background-color: {};", color.get().theme_color(theme) )); }); diff --git a/src/button/button.css b/src/button/button.css index fa8003b..17f9d63 100644 --- a/src/button/button.css +++ b/src/button/button.css @@ -1,9 +1,9 @@ .melt-button { height: 34px; padding: 0 16px; - background-color: var(--background-color); - color: var(--font-color); - border: 1px solid var(--border-color); + background-color: var(--melt-background-color); + color: var(--melt-font-color); + border: 1px solid var(--melt-border-color); border-radius: 5px; position: relative; display: inline-flex; @@ -13,8 +13,8 @@ } .melt-button:hover { - border-color: var(--border-color-hover); - background-color: var(--background-color-hover); + border-color: var(--melt-border-color-hover); + background-color: var(--melt-background-color-hover); cursor: pointer; transition: all 0.3s; @@ -22,8 +22,8 @@ .melt-button:active:not(.melt-button--disabled) { transition: all 0.3s; - border-color: var(--border-color-hover); - background-color: var(--background-color-active); + border-color: var(--melt-border-color-hover); + background-color: var(--melt-background-color-active); } .melt-button--text, @@ -32,7 +32,7 @@ } .melt-button--text:hover { - color: var(--font-color-hover); + color: var(--melt-font-color-hover); } .melt-button--link { @@ -41,7 +41,7 @@ } .melt-button--link:hover { - color: var(--font-color-hover); + color: var(--melt-font-color-hover); } .melt-button--round { diff --git a/src/button/mod.rs b/src/button/mod.rs index 15fbf2f..25ff1f1 100644 --- a/src/button/mod.rs +++ b/src/button/mod.rs @@ -76,28 +76,30 @@ pub fn Button( if variant.get() == ButtonVariant::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!("--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("--font-color: #fff;"); - css_vars.push_str(&format!("--border-color: {bg_color};")); - css_vars.push_str(&format!("--border-color-hover: {bg_color};")); - css_vars.push_str(&format!("--melt-ripple-color: {bg_color};")); - } else if variant.get() == ButtonVariant::Text { - css_vars.push_str(&format!("--font-color-hover: {bg_color};")); + css_vars.push_str(&format!("--melt-background-color: {bg_color};")); + css_vars.push_str(&format!("--melt-background-color-hover: {bg_color_hover};")); css_vars.push_str(&format!( - "--background-color-hover: {};", + "--melt-background-color-active: {bg_color_active};" + )); + css_vars.push_str("--melt-font-color: #fff;"); + css_vars.push_str(&format!("--melt-border-color: {bg_color};")); + css_vars.push_str(&format!("--melt-border-color-hover: {bg_color};")); + css_vars.push_str(&format!("--melt-melt-ripple-color: {bg_color};")); + } else if variant.get() == ButtonVariant::Text { + css_vars.push_str(&format!("--melt-font-color-hover: {bg_color};")); + css_vars.push_str(&format!( + "--melt-background-color-hover: {};", theme.button.color_text_hover )); css_vars.push_str(&format!( - "--background-color-active: {};", + "--melt-background-color-active: {};", theme.button.color_text_active )); css_vars.push_str(&format!("--melt-ripple-color: #0000;")); } else { - css_vars.push_str(&format!("--font-color-hover: {bg_color};")); - css_vars.push_str("--border-color: #555a;"); - css_vars.push_str("--border-color-hover: #555;"); + css_vars.push_str(&format!("--melt-font-color-hover: {bg_color};")); + css_vars.push_str("--melt-border-color: #555a;"); + css_vars.push_str("--melt-border-color-hover: #555;"); css_vars.push_str(&format!("--melt-ripple-color: #0000;")); } }); diff --git a/src/checkbox/checkbox.css b/src/checkbox/checkbox.css index 9671d1e..e4bb1dd 100644 --- a/src/checkbox/checkbox.css +++ b/src/checkbox/checkbox.css @@ -20,10 +20,10 @@ } .melt-checkbox:hover .melt-checkbox__dot, .melt-checkbox--checked .melt-checkbox__dot { - border-color: var(--background-color-checked); + border-color: var(--melt-background-color-checked); } .melt-checkbox--checked .melt-checkbox__dot { - background-color: var(--background-color-checked); + background-color: var(--melt-background-color-checked); } .melt-checkbox__label { diff --git a/src/checkbox/mod.rs b/src/checkbox/mod.rs index bec4f43..360aa83 100644 --- a/src/checkbox/mod.rs +++ b/src/checkbox/mod.rs @@ -23,9 +23,12 @@ pub fn Checkbox( let css_vars = create_memo(move |_| { let mut css_vars = String::new(); - let theme = theme.get(); - let bg_color = theme.common.color_primary; - css_vars.push_str(&format!("--background-color-checked: {bg_color};")); + theme.with(|theme| { + css_vars.push_str(&format!( + "--melt-background-color-checked: {};", + theme.common.color_primary + )); + }); css_vars }); diff --git a/src/color_picker/mod.rs b/src/color_picker/mod.rs index da95849..695ed0e 100644 --- a/src/color_picker/mod.rs +++ b/src/color_picker/mod.rs @@ -108,7 +108,11 @@ pub fn ColorPicker(#[prop(optional, into)] value: MaybeRwSignal) -> impl I class="melt-color-picker-popover" ref=popover_ref style=move || { - if is_show_popover.get() { popover_css_vars.get() } else { "display: none".to_string() } + if is_show_popover.get() { + popover_css_vars.get() + } else { + "display: none".to_string() + } } > diff --git a/src/input/mod.rs b/src/input/mod.rs index 201aaa8..2cb6cd7 100644 --- a/src/input/mod.rs +++ b/src/input/mod.rs @@ -94,23 +94,20 @@ pub fn Input( value_trigger.track(); value.get() } + on:input=on_input on:focus=on_internal_focus on:blur=on_internal_blur class="melt-input__input-el" placeholder=move || placeholder.get() /> - { - if let Some(suffix) = input_suffix { - view! { -
- {(suffix.children)()} -
- }.into() - } else { - None - } - } + + {if let Some(suffix) = input_suffix { + view! {
{(suffix.children)()}
}.into() + } else { + None + }} +
} } diff --git a/src/menu/menu-group.css b/src/menu/menu-group.css index 23c1dc8..a2105db 100644 --- a/src/menu/menu-group.css +++ b/src/menu/menu-group.css @@ -2,5 +2,5 @@ padding: 0.85rem 1.15em 0.1rem; font-size: 0.86rem; font-weight: 500; - color: var(--font-color); + color: var(--melt-font-color); } diff --git a/src/menu/menu-item.css b/src/menu/menu-item.css index f1b4b2c..533370e 100644 --- a/src/menu/menu-item.css +++ b/src/menu/menu-item.css @@ -1,7 +1,7 @@ .melt-menu-item__content { margin: 0.3rem 0.4rem; padding: 0.5rem 0.75rem; - color: var(--font-color); + color: var(--melt-font-color); cursor: pointer; border-radius: 0.25rem; font-size: 0.875rem; @@ -12,10 +12,10 @@ } .melt-menu-item__content:hover:not(.melt-menu-item__content--selected) { - background-color: var(--bg-color-hover); + background-color: var(--melt-background-color-hover); } .melt-menu-item__content--selected { - color: var(--font-color-active); - background-color: var(--bg-color); + color: var(--melt-font-color-active); + background-color: var(--melt-background-color); } diff --git a/src/menu/menu_group.rs b/src/menu/menu_group.rs index 813052a..f5fb39c 100644 --- a/src/menu/menu_group.rs +++ b/src/menu/menu_group.rs @@ -8,7 +8,7 @@ pub fn MenuGroup(#[prop(into)] label: String, children: Children) -> impl IntoVi let css_vars = create_memo(move |_| { let mut css_vars = String::new(); theme.with(|theme| { - css_vars.push_str(&format!("--font-color: {};", theme.menu.group_color)); + css_vars.push_str(&format!("--melt-font-color: {};", theme.menu.group_color)); }); css_vars }); diff --git a/src/menu/menu_item.rs b/src/menu/menu_item.rs index c033783..fd1e8ea 100644 --- a/src/menu/menu_item.rs +++ b/src/menu/menu_item.rs @@ -17,15 +17,16 @@ pub fn MenuItem( let css_vars = create_memo(move |_| { let mut css_vars = String::new(); - let theme = theme.get(); - let font_color = theme.common.color_primary.clone(); - css_vars.push_str(&format!("--font-color-active: {font_color};")); - css_vars.push_str(&format!("--font-color: {};", theme.menu.color)); - css_vars.push_str(&format!("--bg-color: {font_color}1a;")); - css_vars.push_str(&format!( - "--bg-color-hover: {};", - theme.menu.item_color_hover - )); + theme.with(|theme| { + let font_color = theme.common.color_primary.clone(); + css_vars.push_str(&format!("--melt-font-color-active: {font_color};")); + css_vars.push_str(&format!("--melt-font-color: {};", theme.menu.color)); + css_vars.push_str(&format!("--melt-background-color: {font_color}1a;")); + css_vars.push_str(&format!( + "--melt-background-color-hover: {};", + theme.menu.item_color_hover + )); + }); css_vars }); view! { diff --git a/src/message/message_provider.rs b/src/message/message_provider.rs index 8f26bc7..dc33431 100644 --- a/src/message/message_provider.rs +++ b/src/message/message_provider.rs @@ -34,6 +34,7 @@ pub fn MessageProvider(children: Children) -> impl IntoView { } } /> + } diff --git a/src/mobile/tabbar/mod.rs b/src/mobile/tabbar/mod.rs index a782cb2..73dc09e 100644 --- a/src/mobile/tabbar/mod.rs +++ b/src/mobile/tabbar/mod.rs @@ -43,7 +43,11 @@ pub fn Tabbar( } }); provide_context(tabbar_injection_key); - view! {
{children()}
} + view! { +
+ {children()} +
+ } } #[derive(Clone)] diff --git a/src/mobile/tabbar/tabbar-item.css b/src/mobile/tabbar/tabbar-item.css index 8233f23..64bfcce 100644 --- a/src/mobile/tabbar/tabbar-item.css +++ b/src/mobile/tabbar/tabbar-item.css @@ -8,7 +8,7 @@ } .melt-tabbar-item--selected { - color: var(--font-color-selected) + color: var(--melt-font-color-selected) } .melt-tabbar-item__content { diff --git a/src/mobile/tabbar/tabbar_item.rs b/src/mobile/tabbar/tabbar_item.rs index 43c3e10..a4b0bf9 100644 --- a/src/mobile/tabbar/tabbar_item.rs +++ b/src/mobile/tabbar/tabbar_item.rs @@ -20,9 +20,10 @@ pub fn TabbarItem( let css_vars = create_memo(move |_| { let mut css_vars = String::new(); - let theme = theme.get(); - let font_color = theme.common.color_primary.clone(); - css_vars.push_str(&format!("--font-color-selected: {font_color};")); + theme.with(|theme| { + let font_color = theme.common.color_primary.clone(); + css_vars.push_str(&format!("--melt-font-color-selected: {font_color};")); + }); css_vars }); diff --git a/src/progress/mod.rs b/src/progress/mod.rs index 5b3dcbc..a9f496e 100644 --- a/src/progress/mod.rs +++ b/src/progress/mod.rs @@ -15,9 +15,7 @@ pub fn Progress( view! {
- - {move || left_tip.get()} - + {move || left_tip.get()} @@ -25,9 +23,9 @@ pub fn Progress( - - {move || right_tip.get()} - + {move || right_tip.get()}
} diff --git a/src/radio/mod.rs b/src/radio/mod.rs index 5e402ba..87d30e9 100644 --- a/src/radio/mod.rs +++ b/src/radio/mod.rs @@ -17,7 +17,7 @@ pub fn Radio( let mut css_vars = String::new(); theme.with(|theme| { let bg_color = theme.common.color_primary.clone(); - css_vars.push_str(&format!("--background-color-checked: {bg_color};")); + css_vars.push_str(&format!("--melt-background-color-checked: {bg_color};")); }); css_vars diff --git a/src/radio/radio.css b/src/radio/radio.css index 127bc17..ad429ac 100644 --- a/src/radio/radio.css +++ b/src/radio/radio.css @@ -21,7 +21,7 @@ .melt-radio:hover .melt-radio__dot, .melt-radio--checked .melt-radio__dot { - border-color: var(--background-color-checked); + border-color: var(--melt-background-color-checked); } .melt-radio--checked .melt-radio__dot::before { @@ -31,7 +31,7 @@ bottom: 3px; left: 3px; right: 3px; - background-color: var(--background-color-checked); + background-color: var(--melt-background-color-checked); border-radius: 50%; } diff --git a/src/select/mod.rs b/src/select/mod.rs index d03f089..dca5d4d 100644 --- a/src/select/mod.rs +++ b/src/select/mod.rs @@ -125,11 +125,7 @@ where
{label} diff --git a/src/tabs/tabs.css b/src/tabs/tabs.css index 6e46bc2..d1c2add 100644 --- a/src/tabs/tabs.css +++ b/src/tabs/tabs.css @@ -13,7 +13,7 @@ .melt-tabs-label__line { position: absolute; height: 3px; - background-color: var(--label-active-background-color); + background-color: var(--melt-label-active-background-color); border-radius: 3px; bottom: 0; left: 0; diff --git a/src/tag/mod.rs b/src/tag/mod.rs index 07bbe50..16ca648 100644 --- a/src/tag/mod.rs +++ b/src/tag/mod.rs @@ -52,15 +52,15 @@ pub fn Tag( theme.with(|theme| { let variant = variant.get(); css_vars.push_str(&format!( - "--font-color: {};", + "--melt-font-color: {};", variant.theme_font_color(theme) )); css_vars.push_str(&format!( - "--background-color: {};", + "--melt-background-color: {};", variant.theme_background_color(theme) )); css_vars.push_str(&format!( - "--border-color: {};", + "--melt-border-color: {};", variant.theme_border_color(theme) )); }); diff --git a/src/tag/tag.css b/src/tag/tag.css index 704d4dc..288b4c0 100644 --- a/src/tag/tag.css +++ b/src/tag/tag.css @@ -4,8 +4,8 @@ align-items: center; font-size: 14px; padding: 0 10px; - background-color: var(--background-color); - color: var(--font-color); - border: 1px solid var(--border-color); + background-color: var(--melt-background-color); + color: var(--melt-font-color); + border: 1px solid var(--melt-border-color); border-radius: 3px; } diff --git a/src/upload/upload-dragger.css b/src/upload/upload-dragger.css index 1c622e4..ddd5408 100644 --- a/src/upload/upload-dragger.css +++ b/src/upload/upload-dragger.css @@ -1,4 +1,5 @@ .melt-upload-dragger { + width: 100%; padding: 20px; background-color: var(--melt-background-color); border: 1px dashed var(--melt-border-color); @@ -6,6 +7,7 @@ text-align: center; cursor: pointer; transition: border 0.3s; + box-sizing: border-box; } .melt-upload-dragger:hover, .melt-upload--drag-over .melt-upload-dragger { diff --git a/src/upload/upload.css b/src/upload/upload.css index 81fb12d..940487b 100644 --- a/src/upload/upload.css +++ b/src/upload/upload.css @@ -3,3 +3,7 @@ height: 0; opacity: 0; } + +.melt-upload__trigger { + display: inline-block; +} \ No newline at end of file diff --git a/src/wave/mod.rs b/src/wave/mod.rs index b2f04fd..b0885ec 100644 --- a/src/wave/mod.rs +++ b/src/wave/mod.rs @@ -38,7 +38,13 @@ pub fn Wave(#[prop(optional)] comp_ref: ComponentRef) -> impl IntoView }); comp_ref.load(WaveRef { play }); view! { -
-
+
} }