From 3a097b166b152e8bf6fd373702a587afa185830c Mon Sep 17 00:00:00 2001 From: luoxiao Date: Wed, 5 Jun 2024 22:56:55 +0800 Subject: [PATCH] refactor: skeleton --- demo/src/pages/components.rs | 8 ++--- demo_markdown/docs/skeleton/mod.md | 5 +-- thaw/src/skeleton/mod.rs | 52 +++-------------------------- thaw/src/skeleton/skeleton-item.css | 31 +++++++++++++++++ thaw/src/skeleton/skeleton.css | 24 ------------- thaw/src/skeleton/skeleton.rs | 14 ++++++++ thaw/src/skeleton/skeleton_item.rs | 12 +++++++ thaw/src/skeleton/theme.rs | 23 ------------- thaw/src/theme/color.rs | 9 +++++ thaw/src/theme/mod.rs | 5 +-- 10 files changed, 78 insertions(+), 105 deletions(-) create mode 100644 thaw/src/skeleton/skeleton-item.css delete mode 100644 thaw/src/skeleton/skeleton.css create mode 100644 thaw/src/skeleton/skeleton.rs create mode 100644 thaw/src/skeleton/skeleton_item.rs delete mode 100644 thaw/src/skeleton/theme.rs diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs index 491ec12..6c19b1c 100644 --- a/demo/src/pages/components.rs +++ b/demo/src/pages/components.rs @@ -171,6 +171,10 @@ pub(crate) fn gen_menu_data() -> Vec { value: "/components/icon".into(), label: "Icon".into(), }, + MenuItemOption { + value: "/components/skeleton".into(), + label: "Skeleton".into(), + }, MenuItemOption { value: "/components/spin-button".into(), label: "Spin Button".into(), @@ -283,10 +287,6 @@ pub(crate) fn gen_menu_data() -> Vec { value: "/components/progress".into(), label: "Progress".into(), }, - MenuItemOption { - value: "/components/skeleton".into(), - label: "Skeleton".into(), - }, MenuItemOption { value: "/components/layout".into(), label: "Layout".into(), diff --git a/demo_markdown/docs/skeleton/mod.md b/demo_markdown/docs/skeleton/mod.md index 8b10ecd..0330918 100644 --- a/demo_markdown/docs/skeleton/mod.md +++ b/demo_markdown/docs/skeleton/mod.md @@ -2,8 +2,9 @@ ```rust demo view! { - - + + + } ``` diff --git a/thaw/src/skeleton/mod.rs b/thaw/src/skeleton/mod.rs index 8e5daf5..eaddb95 100644 --- a/thaw/src/skeleton/mod.rs +++ b/thaw/src/skeleton/mod.rs @@ -1,49 +1,5 @@ -mod theme; +mod skeleton; +mod skeleton_item; -pub use theme::SkeletionTheme; - -use crate::{theme::use_theme, Theme}; -use leptos::*; -use thaw_utils::mount_style; - -#[component] -pub fn Skeleton( - #[prop(default = MaybeSignal::Static(1), into)] repeat: MaybeSignal, - #[prop(optional, into)] text: MaybeSignal, - #[prop(optional, into)] width: Option>, - #[prop(optional, into)] height: Option>, -) -> impl IntoView { - mount_style("skeleton", include_str!("./skeleton.css")); - let theme = use_theme(Theme::light); - let css_vars = create_memo(move |_| { - let mut css_vars = String::new(); - if text.get() { - css_vars.push_str("display: inline-block;"); - } - - if let Some(width) = width.as_ref() { - css_vars.push_str(&format!("width: {};", width.get())); - } - if let Some(height) = height.as_ref() { - css_vars.push_str(&format!("height: {};", height.get())); - } - - theme.with(|theme| { - css_vars.push_str(&format!( - "--thaw-background-color-start: {};", - theme.skeletion.background_color_start - )); - css_vars.push_str(&format!( - "--thaw-background-color-end: {};", - theme.skeletion.background_color_end - )); - }); - - css_vars - }); - (0..repeat.get()) - .map(|_| { - view! {
} - }) - .collect_view() -} +pub use skeleton::*; +pub use skeleton_item::*; diff --git a/thaw/src/skeleton/skeleton-item.css b/thaw/src/skeleton/skeleton-item.css new file mode 100644 index 0000000..89bb0d0 --- /dev/null +++ b/thaw/src/skeleton/skeleton-item.css @@ -0,0 +1,31 @@ +.thaw-skeleton-item { + background-image: linear-gradient( + to right, + var(--colorNeutralStencil1) 0%, + var(--colorNeutralStencil2) 50%, + var(--colorNeutralStencil1) 100% + ); + animation-name: thaw-skeleton-item; + animation-timing-function: linear; + animation-duration: 3s; + animation-iteration-count: infinite; + background-attachment: fixed; + background-position-y: 50%; + background-position-x: 50%; + background-size: 300% 100%; + position: relative; + width: 100%; + height: 16px; + border-radius: 4px; + overflow: hidden; +} + +@keyframes thaw-skeleton-item { + 0% { + background-position-x: 300%; + } + + 100% { + background-position-x: 0%; + } +} diff --git a/thaw/src/skeleton/skeleton.css b/thaw/src/skeleton/skeleton.css deleted file mode 100644 index 243b3ef..0000000 --- a/thaw/src/skeleton/skeleton.css +++ /dev/null @@ -1,24 +0,0 @@ -.thaw-skeleton { - width: 100%; - height: 1em; - background-color: var(--thaw-background-color-start); - - background: linear-gradient( - 90deg, - var(--thaw-background-color-start) 25%, - var(--thaw-background-color-end) 37%, - var(--thaw-background-color-start) 63% - ); - animation: thawSkeletonLoading 1.4s ease infinite; - background-size: 400% 100%; -} - -@keyframes thawSkeletonLoading { - from { - background-position: 100% 50%; - } - - to { - background-position: 0 50%; - } -} diff --git a/thaw/src/skeleton/skeleton.rs b/thaw/src/skeleton/skeleton.rs new file mode 100644 index 0000000..4bdec06 --- /dev/null +++ b/thaw/src/skeleton/skeleton.rs @@ -0,0 +1,14 @@ +use leptos::*; + +#[component] +pub fn Skeleton(children: Children) -> impl IntoView { + view! { +
+ {children()} +
+ } +} diff --git a/thaw/src/skeleton/skeleton_item.rs b/thaw/src/skeleton/skeleton_item.rs new file mode 100644 index 0000000..720fa79 --- /dev/null +++ b/thaw/src/skeleton/skeleton_item.rs @@ -0,0 +1,12 @@ +use leptos::*; +use thaw_utils::mount_style; + +#[component] +pub fn SkeletonItem() -> impl IntoView { + mount_style("skeleton-item", include_str!("./skeleton-item.css")); + + view! { +
+
+ } +} diff --git a/thaw/src/skeleton/theme.rs b/thaw/src/skeleton/theme.rs deleted file mode 100644 index 6b9f337..0000000 --- a/thaw/src/skeleton/theme.rs +++ /dev/null @@ -1,23 +0,0 @@ -use crate::theme::ThemeMethod; - -#[derive(Clone)] -pub struct SkeletionTheme { - pub background_color_start: String, - pub background_color_end: String, -} - -impl ThemeMethod for SkeletionTheme { - fn light() -> Self { - Self { - background_color_start: "#f2f2f2".into(), - background_color_end: "#e6e6e6".into(), - } - } - - fn dark() -> Self { - Self { - background_color_start: "rgba(255, 255, 255, 0.12)".into(), - background_color_end: "rgba(255, 255, 255, 0.18)".into(), - } - } -} diff --git a/thaw/src/theme/color.rs b/thaw/src/theme/color.rs index 95ef5bd..bfd86b3 100644 --- a/thaw/src/theme/color.rs +++ b/thaw/src/theme/color.rs @@ -39,6 +39,9 @@ pub struct ColorTheme { pub color_neutral_stroke_accessible_hover: String, pub color_neutral_stroke_accessible_pressed: String, + pub color_neutral_stencil_1: String, + pub color_neutral_stencil_2: String, + pub color_compound_brand_foreground_1: String, pub color_compound_brand_foreground_1_hover: String, pub color_compound_brand_foreground_1_pressed: String, @@ -133,6 +136,9 @@ impl ColorTheme { color_neutral_stroke_accessible_hover: "#575757".into(), color_neutral_stroke_accessible_pressed: "#4d4d4d".into(), + color_neutral_stencil_1: "#e6e6e6".into(), + color_neutral_stencil_2: "#fafafa".into(), + color_compound_brand_foreground_1: "#0f6cbd".into(), color_compound_brand_foreground_1_hover: "#115ea3".into(), color_compound_brand_foreground_1_pressed: "#0f548c".into(), @@ -228,6 +234,9 @@ impl ColorTheme { color_neutral_stroke_accessible_hover: "#bdbdbd".into(), color_neutral_stroke_accessible_pressed: "#b3b3b3".into(), + color_neutral_stencil_1: "#575757".into(), + color_neutral_stencil_2: "#333333".into(), + color_compound_brand_foreground_1: "#479ef5".into(), color_compound_brand_foreground_1_hover: "#62abf5".into(), color_compound_brand_foreground_1_pressed: "#2886de".into(), diff --git a/thaw/src/theme/mod.rs b/thaw/src/theme/mod.rs index e053a62..986a5ee 100644 --- a/thaw/src/theme/mod.rs +++ b/thaw/src/theme/mod.rs @@ -6,7 +6,7 @@ use crate::{ mobile::{NavBarTheme, TabbarTheme}, AlertTheme, AnchorTheme, AutoCompleteTheme, BackTopTheme, CalendarTheme, ColorPickerTheme, DatePickerTheme, InputTheme, MessageTheme, PopoverTheme, ProgressTheme, ScrollbarTheme, - SelectTheme, SkeletionTheme, TableTheme, TimePickerTheme, UploadTheme, + SelectTheme, TableTheme, TimePickerTheme, UploadTheme, }; pub use color::ColorTheme; use leptos::*; @@ -24,7 +24,6 @@ pub struct Theme { pub input: InputTheme, pub table: TableTheme, pub alert: AlertTheme, - pub skeletion: SkeletionTheme, pub message: MessageTheme, pub select: SelectTheme, pub upload: UploadTheme, @@ -51,7 +50,6 @@ impl Theme { input: InputTheme::light(), table: TableTheme::light(), alert: AlertTheme::light(), - skeletion: SkeletionTheme::light(), message: MessageTheme::light(), select: SelectTheme::light(), upload: UploadTheme::light(), @@ -77,7 +75,6 @@ impl Theme { input: InputTheme::dark(), table: TableTheme::dark(), alert: AlertTheme::dark(), - skeletion: SkeletionTheme::dark(), message: MessageTheme::dark(), select: SelectTheme::dark(), upload: UploadTheme::dark(),