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

refactor: Loadingbar

Browse source
This commit is contained in:
luoxiao 2024-06-26 22:28:08 +08:00
parent 75a926e6b2
commit 137bb5263c
3 changed files with 19 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
thaw/src/loading_bar/loading-bar.css
View file

@ -1,4 +1,4 @@
.thaw-loading-bar-container {
div.thaw-loading-bar-container {
position: fixed;
top: 0;
left: 0;

32
thaw/src/loading_bar/mod.rs
View file

@ -2,9 +2,9 @@ mod loading_bar_provider;
pub use loading_bar_provider::{use_loading_bar, LoadingBarProvider};
use crate::{use_theme, Theme};
use leptos::*;
use thaw_utils::{mount_style, ComponentRef};
use crate::ConfigInjection;
#[derive(Clone)]
pub(crate) struct LoadingBarRef {
@ -28,29 +28,15 @@ impl LoadingBarRef {
#[component]
pub(crate) fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>) -> impl IntoView {
mount_style("loading-bar", include_str!("./loading-bar.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-background-color: {};",
theme.common.color_success
));
css_vars.push_str(&format!(
"--thaw-background-color-error: {};",
theme.common.color_error
));
});
css_vars
});
let loading_bar_ref = create_node_ref::<html::Div>();
let loading = create_rw_signal(false);
let config_provider = ConfigInjection::use_();
let loading_bar_ref = NodeRef::<html::Div>::new();
let loading = RwSignal::new(false);
let start = Callback::new(move |_| {
loading.set(true);
if let Some(loading_bar_ref) = loading_bar_ref.get_untracked() {
let loading_bar_ref = loading_bar_ref
.style("background-color", "var(--thaw-background-color)")
.style("background-color", "var(--colorStatusSuccessForeground1)")
.style("transition", "none")
.style("max-width", "0");
_ = loading_bar_ref.offset_width();
@ -69,7 +55,7 @@ pub(crate) fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>
let finish = Callback::new(move |_| {
if let Some(loading_bar_ref) = loading_bar_ref.get_untracked() {
_ = loading_bar_ref
.style("background-color", "var(--thaw-background-color)")
.style("background-color", "var(--colorStatusSuccessForeground1)")
.style("transition", "max-width 0.5s linear")
.style("max-width", "100%");
is_on_transitionend.set_value(true);
@ -86,7 +72,7 @@ pub(crate) fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>
_ = loading_bar_ref.offset_width();
}
_ = loading_bar_ref
.style("background-color", "var(--thaw-background-color-error)")
.style("background-color", "var(--colorStatusDangerForeground1)")
.style("transition", "max-width 0.5s linear")
.style("max-width", "100%");
is_on_transitionend.set_value(true);
@ -100,13 +86,13 @@ pub(crate) fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>
});
view! {
<div
class="thaw-loading-bar-container"
class="thaw-config-provider thaw-loading-bar-container"
data-thaw-id=config_provider.id().clone()
style=move || (!loading.get()).then_some("display: none;")
>
<div
class="thaw-loading-bar"
ref=loading_bar_ref
style=move || css_vars.get()
on:transitionend=on_transitionend
></div>
</div>

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

@ -87,6 +87,9 @@ pub struct ColorTheme {
pub color_palette_dark_orange_foreground_3: String,
pub color_palette_dark_orange_border_1: String,
pub color_status_success_foreground_1: String,
pub color_status_danger_foreground_1: String,
pub color_subtle_background: String,
pub color_subtle_background_hover: String,
pub color_subtle_background_pressed: String,
@ -188,6 +191,9 @@ impl ColorTheme {
color_palette_dark_orange_foreground_3: "#da3b01".into(),
color_palette_dark_orange_border_1: "#f4bfab".into(),
color_status_success_foreground_1: "#0e700e".into(),
color_status_danger_foreground_1: "#b10e1c".into(),
color_subtle_background: "transparent".into(),
color_subtle_background_hover: "#f5f5f5".into(),
color_subtle_background_pressed: "#e0e0e0".into(),
@ -289,6 +295,9 @@ impl ColorTheme {
color_palette_dark_orange_foreground_3: "#e9835e".into(),
color_palette_dark_orange_border_1: "#da3b01".into(),
color_status_success_foreground_1: "#54b054".into(),
color_status_danger_foreground_1: "#dc626d".into(),
color_subtle_background: "transparent".into(),
color_subtle_background_hover: "#383838".into(),
color_subtle_background_pressed: "#2e2e2e".into(),