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

refactor: DatePicker

Browse source
This commit is contained in:
luoxiao 2024-06-25 22:57:44 +08:00
parent 2cbb4daa9a
commit 14437c07a8
6 changed files with 50 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
demo/src/pages/components.rs
View file

@ -163,6 +163,10 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
value: "/components/config-provider".into(), value: "/components/config-provider".into(),
label: "Config Provider".into(), label: "Config Provider".into(),
}, },
MenuItemOption {
value: "/components/date-picker".into(),
label: "Date Picker".into(),
},
MenuItemOption { MenuItemOption {
value: "/components/divider".into(), value: "/components/divider".into(),
label: "Divider".into(), label: "Divider".into(),
@ -215,10 +219,6 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
value: "/components/checkbox".into(), value: "/components/checkbox".into(),
label: "Checkbox".into(), label: "Checkbox".into(),
}, },
MenuItemOption {
value: "/components/date-picker".into(),
label: "Date Picker".into(),
},
MenuItemOption { MenuItemOption {
value: "/components/input".into(), value: "/components/input".into(),
label: "Input".into(), label: "Input".into(),

38
thaw/src/date_picker/date-picker.css
View file

@ -1,10 +1,9 @@
.thaw-date-picker-panel { .thaw-date-picker-panel {
width: 300px; width: 300px;
background-color: var(--thaw-background-color); background-color: var(--colorNeutralBackground1);
border-radius: 3px; border-radius: var(--borderRadiusMedium);
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), box-shadow: var(--shadow16);
0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
} }
.thaw-date-picker-date-panel__calendar { .thaw-date-picker-date-panel__calendar {
@ -18,10 +17,6 @@
justify-content: space-between; justify-content: space-between;
} }
.thaw-date-picker-date-panel__header > button {
color: var(--thaw-font-color-other-month);
}
.thaw-date-picker-date-panel__header-month-year { .thaw-date-picker-date-panel__header-month-year {
flex: 1; flex: 1;
display: flex; display: flex;
@ -37,7 +32,7 @@
} }
.thaw-date-picker-date-panel__weekdays { .thaw-date-picker-date-panel__weekdays {
border-bottom: 1px solid var(--thaw-item-border-color); border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
margin-bottom: 2px; margin-bottom: 2px;
padding: 6px 4px; padding: 6px 4px;
} }
@ -55,7 +50,7 @@
} }
.thaw-date-picker-date-panel__item--other-month { .thaw-date-picker-date-panel__item--other-month {
color: var(--thaw-font-color-other-month); color: var(--colorNeutralForegroundDisabled);
} }
.thaw-date-picker-date-panel__item-day { .thaw-date-picker-date-panel__item-day {
@ -75,17 +70,17 @@
height: 4px; height: 4px;
width: 4px; width: 4px;
border-radius: 2px; border-radius: 2px;
background-color: var(--thaw-background-color-today); background-color: var(--colorBrandBackground);
} }
.thaw-date-picker-date-panel__item:hover .thaw-date-picker-date-panel__item:hover
.thaw-date-picker-date-panel__item-day { .thaw-date-picker-date-panel__item-day {
background-color: var(--thaw-item-background-color-hover); background-color: var(--colorNeutralBackground1Hover);
} }
.thaw-date-picker-date-panel__item--selected .thaw-date-picker-date-panel__item--selected
.thaw-date-picker-date-panel__item-day { .thaw-date-picker-date-panel__item-day {
background-color: var(--thaw-background-color-today) !important; background-color: var(--colorBrandBackground) !important;
color: white; color: white;
} }
@ -95,7 +90,7 @@
flex-direction: row-reverse; flex-direction: row-reverse;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-top: 1px solid var(--thaw-item-border-color); border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
} }
.thaw-date-picker-date-panel__header-year { .thaw-date-picker-date-panel__header-year {
@ -110,7 +105,7 @@
grid-template-columns: 28px 1fr 28px; grid-template-columns: 28px 1fr 28px;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid var(--thaw-item-border-color); border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
padding: 2px 6px; padding: 2px 6px;
} }
@ -118,15 +113,10 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-bottom: 1px solid var(--thaw-item-border-color); border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
padding: 4px 6px; padding: 4px 6px;
} }
.thaw-date-picker-year-panel__header > button,
.thaw-date-picker-month-panel__header > button {
color: var(--thaw-font-color-other-month);
}
.thaw-date-picker-year-panel__years, .thaw-date-picker-year-panel__years,
.thaw-date-picker-month-panel__months { .thaw-date-picker-month-panel__months {
display: grid; display: grid;
@ -137,7 +127,7 @@
.thaw-date-picker-year-panel__item:first-child, .thaw-date-picker-year-panel__item:first-child,
.thaw-date-picker-year-panel__item:last-child { .thaw-date-picker-year-panel__item:last-child {
color: var(--thaw-font-color-other-month); color: var(--colorNeutralForegroundDisabled);
} }
.thaw-date-picker-year-panel__item, .thaw-date-picker-year-panel__item,
@ -153,7 +143,7 @@
.thaw-date-picker-year-panel__item-year, .thaw-date-picker-year-panel__item-year,
.thaw-date-picker-month-panel__item--selected .thaw-date-picker-month-panel__item--selected
.thaw-date-picker-month-panel__item-month { .thaw-date-picker-month-panel__item-month {
background-color: var(--thaw-background-color-today) !important; background-color: var(--colorBrandBackground) !important;
color: white; color: white;
} }
@ -161,7 +151,7 @@
.thaw-date-picker-year-panel__item-year, .thaw-date-picker-year-panel__item-year,
.thaw-date-picker-month-panel__item:hover .thaw-date-picker-month-panel__item:hover
.thaw-date-picker-month-panel__item-month { .thaw-date-picker-month-panel__item-month {
background-color: var(--thaw-item-background-color-hover); background-color: var(--colorNeutralBackground1Hover);
} }
.thaw-date-picker-year-panel__item-year, .thaw-date-picker-year-panel__item-year,

4
thaw/src/date_picker/mod.rs
View file

@ -1,8 +1,4 @@
mod panel; mod panel;
mod theme;
pub use theme::DatePickerTheme;
use crate::{Icon, Input, InputSuffix, SignalWatch}; use crate::{Icon, Input, InputSuffix, SignalWatch};
use chrono::NaiveDate; use chrono::NaiveDate;
use leptos::*; use leptos::*;

61
thaw/src/date_picker/panel/mod.rs
View file

@ -2,7 +2,7 @@ mod date_panel;
mod month_panel; mod month_panel;
mod year_panel; mod year_panel;
use crate::{use_theme, Theme}; use crate::ConfigInjection;
use chrono::NaiveDate; use chrono::NaiveDate;
use date_panel::DatePanel; use date_panel::DatePanel;
use leptos::*; use leptos::*;
@ -19,33 +19,33 @@ pub fn Panel(
#[prop(into)] is_show_panel: MaybeSignal<bool>, #[prop(into)] is_show_panel: MaybeSignal<bool>,
#[prop(optional)] comp_ref: ComponentRef<PanelRef>, #[prop(optional)] comp_ref: ComponentRef<PanelRef>,
) -> impl IntoView { ) -> impl IntoView {
let theme = use_theme(Theme::light); let config_provider = ConfigInjection::use_();
let css_vars = create_memo(move |_| { // let css_vars = create_memo(move |_| {
let mut css_vars = String::new(); // let mut css_vars = String::new();
theme.with(|theme| { // theme.with(|theme| {
css_vars.push_str(&format!( // css_vars.push_str(&format!(
"--thaw-background-color-today: {};", // "--thaw-background-color-today: {};",
theme.common.color_primary // theme.common.color_primary
)); // ));
css_vars.push_str(&format!( // css_vars.push_str(&format!(
"--thaw-font-color-other-month: {};", // "--thaw-font-color-other-month: {};",
theme.date_picker.panel_other_month_font_color, // theme.date_picker.panel_other_month_font_color,
)); // ));
css_vars.push_str(&format!( // css_vars.push_str(&format!(
"--thaw-background-color: {};", // "--thaw-background-color: {};",
theme.date_picker.panel_background_color // theme.date_picker.panel_background_color
)); // ));
css_vars.push_str(&format!( // css_vars.push_str(&format!(
"--thaw-item-background-color-hover: {};", // "--thaw-item-background-color-hover: {};",
theme.date_picker.panel_date_item_background_color_hover // theme.date_picker.panel_date_item_background_color_hover
)); // ));
css_vars.push_str(&format!( // css_vars.push_str(&format!(
"--thaw-item-border-color: {};", // "--thaw-item-border-color: {};",
theme.date_picker.panel_border_color // theme.date_picker.panel_border_color
)); // ));
}); // });
css_vars // css_vars
}); // });
let panel_ref = create_node_ref::<html::Div>(); let panel_ref = create_node_ref::<html::Div>();
#[cfg(any(feature = "csr", feature = "hydrate"))] #[cfg(any(feature = "csr", feature = "hydrate"))]
@ -98,8 +98,9 @@ pub fn Panel(
let:display let:display
> >
<div <div
class="thaw-date-picker-panel" class="thaw-config-provider thaw-date-picker-panel"
style=move || display.get().map(|d| d.to_string()).unwrap_or_else(|| css_vars.get()) data-thaw-id=config_provider.id().clone()
style=move || display.get()
ref=panel_ref ref=panel_ref
> >

29
thaw/src/date_picker/theme.rs
View file

@ -1,29 +0,0 @@
use crate::theme::ThemeMethod;
#[derive(Clone)]
pub struct DatePickerTheme {
pub panel_background_color: String,
pub panel_date_item_background_color_hover: String,
pub panel_border_color: String,
pub panel_other_month_font_color: String,
}
impl ThemeMethod for DatePickerTheme {
fn light() -> Self {
Self {
panel_background_color: "#fff".into(),
panel_date_item_background_color_hover: "#f1f3f5".into(),
panel_border_color: "#e0e0e6".into(),
panel_other_month_font_color: "#c2c2c2".into(),
}
}
fn dark() -> Self {
Self {
panel_background_color: "#48484e".into(),
panel_date_item_background_color_hover: "#ffffff1a".into(),
panel_border_color: "#ffffff3d".into(),
panel_other_month_font_color: "#ffffff61".into(),
}
}
}

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

@ -4,7 +4,7 @@ mod common;
use self::common::CommonTheme; use self::common::CommonTheme;
use crate::{ use crate::{
mobile::{NavBarTheme, TabbarTheme}, mobile::{NavBarTheme, TabbarTheme},
AlertTheme, AnchorTheme, BackTopTheme, CalendarTheme, DatePickerTheme, MessageTheme, AlertTheme, AnchorTheme, BackTopTheme, CalendarTheme, MessageTheme,
ProgressTheme, ScrollbarTheme, SelectTheme, TimePickerTheme, UploadTheme, ProgressTheme, ScrollbarTheme, SelectTheme, TimePickerTheme, UploadTheme,
}; };
pub use color::ColorTheme; pub use color::ColorTheme;
@ -29,7 +29,6 @@ pub struct Theme {
pub progress: ProgressTheme, pub progress: ProgressTheme,
pub calendar: CalendarTheme, pub calendar: CalendarTheme,
pub time_picker: TimePickerTheme, pub time_picker: TimePickerTheme,
pub date_picker: DatePickerTheme,
pub scrollbar: ScrollbarTheme, pub scrollbar: ScrollbarTheme,
pub back_top: BackTopTheme, pub back_top: BackTopTheme,
pub anchor: AnchorTheme, pub anchor: AnchorTheme,
@ -50,7 +49,6 @@ impl Theme {
progress: ProgressTheme::light(), progress: ProgressTheme::light(),
calendar: CalendarTheme::light(), calendar: CalendarTheme::light(),
time_picker: TimePickerTheme::light(), time_picker: TimePickerTheme::light(),
date_picker: DatePickerTheme::light(),
scrollbar: ScrollbarTheme::light(), scrollbar: ScrollbarTheme::light(),
back_top: BackTopTheme::light(), back_top: BackTopTheme::light(),
anchor: AnchorTheme::light(), anchor: AnchorTheme::light(),
@ -70,7 +68,6 @@ impl Theme {
progress: ProgressTheme::dark(), progress: ProgressTheme::dark(),
calendar: CalendarTheme::dark(), calendar: CalendarTheme::dark(),
time_picker: TimePickerTheme::dark(), time_picker: TimePickerTheme::dark(),
date_picker: DatePickerTheme::dark(),
scrollbar: ScrollbarTheme::dark(), scrollbar: ScrollbarTheme::dark(),
back_top: BackTopTheme::dark(), back_top: BackTopTheme::dark(),
anchor: AnchorTheme::dark(), anchor: AnchorTheme::dark(),