From bba3f006578cfd4072913c234b3a614e1d2c8855 Mon Sep 17 00:00:00 2001 From: luoxiao Date: Tue, 4 Jun 2024 10:13:37 +0800 Subject: [PATCH] refactor: breadcrumb --- demo/src/pages/components.rs | 8 +-- demo_markdown/docs/breadcrumb/mod.md | 26 +++---- thaw/src/breadcrumb/breadcrumb.css | 95 ++++++++++++++++++-------- thaw/src/breadcrumb/breadcrumb_item.rs | 22 ------ thaw/src/breadcrumb/mod.rs | 87 +++++++++++------------ thaw/src/breadcrumb/theme.rs | 26 ------- thaw/src/theme/mod.rs | 5 +- 7 files changed, 129 insertions(+), 140 deletions(-) delete mode 100644 thaw/src/breadcrumb/breadcrumb_item.rs delete mode 100644 thaw/src/breadcrumb/theme.rs diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs index 2a6a35f..f0a66e2 100644 --- a/demo/src/pages/components.rs +++ b/demo/src/pages/components.rs @@ -143,6 +143,10 @@ pub(crate) fn gen_menu_data() -> Vec { value: "/components/avatar".into(), label: "Avatar".into(), }, + MenuItemOption { + value: "/components/breadcrumb".into(), + label: "Breadcrumb".into(), + }, MenuItemOption { value: "/components/button".into(), label: "Button".into(), @@ -239,10 +243,6 @@ pub(crate) fn gen_menu_data() -> Vec { value: "/components/back-top".into(), label: "Back Top".into(), }, - MenuItemOption { - value: "/components/breadcrumb".into(), - label: "Breadcrumb".into(), - }, MenuItemOption { value: "/components/loading-bar".into(), label: "Loading Bar".into(), diff --git a/demo_markdown/docs/breadcrumb/mod.md b/demo_markdown/docs/breadcrumb/mod.md index b0726ca..e41228f 100644 --- a/demo_markdown/docs/breadcrumb/mod.md +++ b/demo_markdown/docs/breadcrumb/mod.md @@ -3,21 +3,17 @@ ```rust demo view! { - "Leptos" - "UI" - "Thaw" - -} -``` - -### Separator - -```rust demo -view! { - - "Leptos" - "UI" - "Thaw" + + "Leptos" + + + + "UI" + + + + "Thaw" + } ``` diff --git a/thaw/src/breadcrumb/breadcrumb.css b/thaw/src/breadcrumb/breadcrumb.css index 0cff1ff..4264fee 100644 --- a/thaw/src/breadcrumb/breadcrumb.css +++ b/thaw/src/breadcrumb/breadcrumb.css @@ -1,41 +1,82 @@ -.thaw-breadcrumb > ul { - list-style: none; - padding: 0; - margin: 0; +.thaw-breadcrumb__list { + list-style-type: none; + display: flex; + align-items: center; + margin: 0px; + padding: 0px; } .thaw-breadcrumb-item { - display: inline-flex; + display: flex; align-items: center; + color: var(--colorNeutralForeground2); + box-sizing: border-box; + flex-wrap: nowrap; } -.thaw-breadcrumb-item__separator { - margin: 0 8px; - color: var(--thaw-font-color); +.thaw-breadcrumb-button { + align-items: center; + box-sizing: border-box; + display: inline-flex; + justify-content: center; + text-decoration-line: none; + vertical-align: middle; + margin: 0px; + overflow: hidden; + border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); + font-family: var(--fontFamilyBase); + outline-style: none; + border-radius: var(--borderRadiusMedium); + font-size: var(--fontSizeBase300); + line-height: var(--lineHeightBase300); + transition-duration: var(--durationFaster); + transition-property: background, border, color; + transition-timing-function: var(--curveEasyEase); + + flex-wrap: nowrap; + min-width: unset; + height: 32px; + color: var(--colorNeutralForeground2); + background-color: var(--colorSubtleBackground); + border-color: transparent; + font-weight: var(--fontWeightRegular); + padding: var(--spacingHorizontalSNudge); } -.thaw-breadcrumb - .thaw-breadcrumb-item:last-child - .thaw-breadcrumb-item__separator { - display: none; -} - -.thaw-breadcrumb-item__link { - padding: 4px; - border-radius: 3px; - transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), - color 0.3s cubic-bezier(0.4, 0, 0.2, 1); - color: var(--thaw-font-color); +.thaw-breadcrumb-button:hover { + color: var(--colorNeutralForeground2Hover); + background-color: var(--colorSubtleBackgroundHover); cursor: pointer; } -.thaw-breadcrumb - .thaw-breadcrumb-item:not(:last-child) - .thaw-breadcrumb-item__link:hover { - color: var(--thaw-font-color-hover); - background-color: var(--thaw-background-color-hover); +.thaw-breadcrumb-button:hover:active { + color: var(--colorNeutralForeground2Pressed); + background-color: var(--colorSubtleBackgroundPressed); + outline-style: none; } -.thaw-breadcrumb .thaw-breadcrumb-item:last-child .thaw-breadcrumb-item__link { - color: var(--thaw-font-color-hover); +.thaw-breadcrumb-button--current { + font-weight: var(--fontWeightSemibold); +} + +.thaw-breadcrumb-button--current:hover { + color: var(--colorNeutralForeground2); + background-color: var(--colorTransparentBackground); + cursor: auto; +} + +.thaw-breadcrumb-button--current:hover:active { + color: var(--colorNeutralForeground2); + background-color: var(--colorTransparentBackground); + outline-style: none; +} + +.thaw-breadcrumb-divider { + font-size: 16px; + display: flex; +} + +.thaw-breadcrumb-divider > svg { + display: inline; + line-height: 0; } diff --git a/thaw/src/breadcrumb/breadcrumb_item.rs b/thaw/src/breadcrumb/breadcrumb_item.rs deleted file mode 100644 index 826742b..0000000 --- a/thaw/src/breadcrumb/breadcrumb_item.rs +++ /dev/null @@ -1,22 +0,0 @@ -use super::use_breadcrumb_separator; -use leptos::*; -use thaw_utils::{class_list, OptionalProp}; - -#[component] -pub fn BreadcrumbItem( - #[prop(optional, into)] class: OptionalProp>, - children: Children, -) -> impl IntoView { - let breadcrumb_separator = use_breadcrumb_separator(); - - view! { -
  • - {children()} - - {move || breadcrumb_separator.0.get()} - -
    • - } -} diff --git a/thaw/src/breadcrumb/mod.rs b/thaw/src/breadcrumb/mod.rs index 6332243..eaf69ff 100644 --- a/thaw/src/breadcrumb/mod.rs +++ b/thaw/src/breadcrumb/mod.rs @@ -1,55 +1,58 @@ -mod breadcrumb_item; -mod theme; - -pub use theme::BreadcrumbTheme; - -use crate::{use_theme, Theme}; -pub use breadcrumb_item::BreadcrumbItem; use leptos::*; -use thaw_utils::{class_list, mount_style, OptionalProp}; +use thaw_utils::{class_list, mount_style}; #[component] pub fn Breadcrumb( - #[prop(default = MaybeSignal::Static("/".to_string()),into)] separator: MaybeSignal, - #[prop(optional, into)] class: OptionalProp>, + #[prop(optional, into)] class: MaybeProp, children: Children, ) -> impl IntoView { mount_style("breadcrumb", include_str!("./breadcrumb.css")); - let theme = use_theme(Theme::light); - let css_vars = create_memo(move |_| { - let mut css_vars = String::new(); - theme.with(|theme| { - css_vars.push_str(&format!( - "--thaw-font-color: {};", - theme.breadcrumb.item_font_color - )); - css_vars.push_str(&format!( - "--thaw-font-color-hover: {};", - theme.breadcrumb.item_font_color_hover - )); - css_vars.push_str(&format!( - "--thaw-background-color-hover: {};", - theme.breadcrumb.item_background_color_hover - )); - }); - css_vars - }); view! { - - - + } } -#[derive(Clone)] -pub(crate) struct BreadcrumbSeparatorInjection(MaybeSignal); - -pub(crate) fn use_breadcrumb_separator() -> BreadcrumbSeparatorInjection { - expect_context() +#[component] +pub fn BreadcrumbItem( + #[prop(optional, into)] class: MaybeProp, + children: Children, +) -> impl IntoView { + view! { +
  • + {children()} +
    • + } +} + +#[component] +pub fn BreadcrumbButton( + #[prop(optional, into)] class: MaybeProp, + #[prop(optional, into)] current: MaybeSignal, + children: Children, +) -> impl IntoView { + view! { + + } +} + +#[component] +pub fn BreadcrumbDivider(#[prop(optional, into)] class: MaybeProp) -> impl IntoView { + view! { + + } } diff --git a/thaw/src/breadcrumb/theme.rs b/thaw/src/breadcrumb/theme.rs deleted file mode 100644 index 96f196f..0000000 --- a/thaw/src/breadcrumb/theme.rs +++ /dev/null @@ -1,26 +0,0 @@ -use crate::theme::ThemeMethod; - -#[derive(Clone)] -pub struct BreadcrumbTheme { - pub item_font_color: String, - pub item_font_color_hover: String, - pub item_background_color_hover: String, -} - -impl ThemeMethod for BreadcrumbTheme { - fn light() -> Self { - Self { - item_font_color: "#767c82".into(), - item_font_color_hover: "#333639".into(), - item_background_color_hover: "#2e333817".into(), - } - } - - fn dark() -> Self { - Self { - item_font_color: "#ffffff85".into(), - item_font_color_hover: "#ffffffd1".into(), - item_background_color_hover: "#ffffff1f".into(), - } - } -} diff --git a/thaw/src/theme/mod.rs b/thaw/src/theme/mod.rs index af5882f..639c291 100644 --- a/thaw/src/theme/mod.rs +++ b/thaw/src/theme/mod.rs @@ -4,7 +4,7 @@ mod common; use self::common::CommonTheme; use crate::{ mobile::{NavBarTheme, TabbarTheme}, - AlertTheme, AnchorTheme, AutoCompleteTheme, BackTopTheme, BreadcrumbTheme, CalendarTheme, + AlertTheme, AnchorTheme, AutoCompleteTheme, BackTopTheme, CalendarTheme, ColorPickerTheme, DatePickerTheme, InputTheme, MessageTheme, PopoverTheme, ProgressTheme, ScrollbarTheme, SelectTheme, SkeletionTheme, SpinnerTheme, TableTheme, TimePickerTheme, UploadTheme, @@ -34,7 +34,6 @@ pub struct Theme { pub tabbar: TabbarTheme, pub auto_complete: AutoCompleteTheme, pub color_picker: ColorPickerTheme, - pub breadcrumb: BreadcrumbTheme, pub progress: ProgressTheme, pub calendar: CalendarTheme, pub time_picker: TimePickerTheme, @@ -63,7 +62,6 @@ impl Theme { tabbar: TabbarTheme::light(), auto_complete: AutoCompleteTheme::light(), color_picker: ColorPickerTheme::light(), - breadcrumb: BreadcrumbTheme::light(), progress: ProgressTheme::light(), calendar: CalendarTheme::light(), time_picker: TimePickerTheme::light(), @@ -91,7 +89,6 @@ impl Theme { tabbar: TabbarTheme::dark(), auto_complete: AutoCompleteTheme::dark(), color_picker: ColorPickerTheme::dark(), - breadcrumb: BreadcrumbTheme::dark(), progress: ProgressTheme::dark(), calendar: CalendarTheme::dark(), time_picker: TimePickerTheme::dark(),