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

refactor: Upload

Browse source
This commit is contained in:
luoxiao 2024-06-26 22:10:57 +08:00
parent 425bc43270
commit 4bda29d741
5 changed files with 6 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -5,7 +5,7 @@ use self::common::CommonTheme;
use crate::{
mobile::{NavBarTheme, TabbarTheme},
AlertTheme, AnchorTheme, BackTopTheme, CalendarTheme, MessageTheme, ProgressTheme,
ScrollbarTheme, SelectTheme, UploadTheme,
ScrollbarTheme, SelectTheme,
};
pub use color::ColorTheme;
use leptos::*;
@ -23,7 +23,6 @@ pub struct Theme {
pub alert: AlertTheme,
pub message: MessageTheme,
pub select: SelectTheme,
pub upload: UploadTheme,
pub nav_bar: NavBarTheme,
pub tabbar: TabbarTheme,
pub progress: ProgressTheme,
@ -42,7 +41,6 @@ impl Theme {
alert: AlertTheme::light(),
message: MessageTheme::light(),
select: SelectTheme::light(),
upload: UploadTheme::light(),
nav_bar: NavBarTheme::light(),
tabbar: TabbarTheme::light(),
progress: ProgressTheme::light(),
@ -60,7 +58,6 @@ impl Theme {
alert: AlertTheme::dark(),
message: MessageTheme::dark(),
select: SelectTheme::dark(),
upload: UploadTheme::dark(),
nav_bar: NavBarTheme::dark(),
tabbar: TabbarTheme::dark(),
progress: ProgressTheme::dark(),

2
thaw/src/upload/mod.rs
View file

@ -1,7 +1,5 @@
mod theme;
mod upload_dragger;
pub use theme::UploadTheme;
pub use upload_dragger::UploadDragger;
pub use web_sys::FileList;

23
thaw/src/upload/theme.rs
View file

@ -1,23 +0,0 @@
use crate::theme::ThemeMethod;
#[derive(Clone)]
pub struct UploadTheme {
pub dragger_background_color: String,
pub dragger_border_color: String,
}
impl ThemeMethod for UploadTheme {
fn light() -> Self {
Self {
dragger_background_color: "#fafafc".into(),
dragger_border_color: "#e0e0e6".into(),
}
}
fn dark() -> Self {
Self {
dragger_background_color: "#ffffff0f".into(),
dragger_border_color: "#ffffff3d".into(),
}
}
}

6
thaw/src/upload/upload-dragger.css
View file

@ -1,8 +1,8 @@
.thaw-upload-dragger {
width: 100%;
padding: 20px;
background-color: var(--thaw-background-color);
border: 1px dashed var(--thaw-border-color);
background-color: var(--colorNeutralBackground1Hover);
border: var(--strokeWidthThin) dashed var(--colorNeutralStroke1);
border-radius: 3px;
text-align: center;
cursor: pointer;
@ -11,5 +11,5 @@
}
.thaw-upload-dragger:hover,
.thaw-upload--drag-over .thaw-upload-dragger {
border: 1px dashed var(--thaw-border-color-hover);
border: var(--strokeWidthThin) dashed var(--colorBrandForeground1);
}

21
thaw/src/upload/upload_dragger.rs
View file

@ -1,29 +1,12 @@
use crate::{use_theme, Theme};
use leptos::*;
use thaw_utils::mount_style;
#[component]
pub fn UploadDragger(children: Children) -> impl IntoView {
mount_style("upload-dragger", include_str!("./upload-dragger.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.upload.dragger_background_color
));
css_vars.push_str(&format!(
"--thaw-border-color: {};",
theme.upload.dragger_border_color
));
let border_color_hover = theme.common.color_primary.clone();
css_vars.push_str(&format!("--thaw-border-color-hover: {border_color_hover};"));
});
css_vars
});
view! {
<div class="thaw-upload-dragger" style=css_vars>
<div class="thaw-upload-dragger">
{children()}
</div>
}