Improve date time picker

This commit is contained in:
eraden 2020-08-22 21:58:42 +02:00 committed by Adrian Woźniak
parent bc7c65306c
commit c3563db90d
2 changed files with 12 additions and 71 deletions

View File

@ -29,20 +29,6 @@
border-bottom: 1px solid rgba(9, 30, 66, 0.25);
}
@media (max-width: 1100px) {
.dateTimeTooltip {
padding: 15px;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.dateTimeTooltip:before {
display: none;
}
}
.dateTimeTooltip > h2 {
display: flex;
justify-content: space-between;
@ -50,8 +36,11 @@
font-size: 1.1rem;
}
.dateTimeTooltip > h2 > .headerText {
line-height: 34px;
.dateTimeTooltip > .actions {
display: flex;
justify-content: space-between;
height: 2rem;
line-height: 2rem;
}
.dateTimeTooltip > .calendar {
@ -63,6 +52,11 @@
.dateTimeTooltip > .calendar > .week.weekHeader {
border-bottom: 1px solid var(--textDarkest);
cursor: auto;
}
.dateTimeTooltip > .calendar > .week.weekHeader > .day {
cursor: auto;
}
.dateTimeTooltip > .calendar > .week > .day {

View File

@ -9,9 +9,7 @@ use {
use crate::shared::styled_button::StyledButton;
use crate::shared::styled_icon::Icon;
use crate::shared::styled_select::StyledSelect;
use crate::shared::styled_tooltip::StyledTooltip;
use crate::shared::ToChild;
use crate::{shared::ToNode, FieldId, Msg};
#[derive(Debug)]
@ -217,63 +215,12 @@ fn render(values: StyledDateTimeInput) -> Node<Msg> {
.into_node()
};
let month_select = {
use num_traits::FromPrimitive;
let field_id = values.field_id.clone();
let selected_month = Month::from_u32(current.month()).unwrap_or_else(|| Month::January);
StyledSelect::build()
.options(
vec![
Month::January,
Month::February,
Month::March,
Month::April,
Month::May,
Month::June,
Month::July,
Month::August,
Month::September,
Month::October,
Month::November,
Month::December,
]
.into_iter()
.map(|month| (month.name().to_string(), month.number_from_month()).to_child())
.collect(),
)
.selected(vec![(
selected_month.name().to_string(),
selected_month.number_from_month(),
)
.to_child()])
.build(field_id)
.into_node()
};
let year_select = {
let field_id = values.field_id.clone();
let selected_year = current.year();
StyledSelect::build()
.options(
(1980..=Utc::today().year())
.into_iter()
.map(|i| (i as u32).to_child())
.collect(),
)
.selected(vec![(selected_year as u32).to_child()])
.build(field_id)
.into_node()
};
let header_text = current.format("%B %Y").to_string();
let tooltip = StyledTooltip::build()
.visible(values.popup_visible)
.date_time_picker()
.add_child(h2![
left_action,
span![C!["headerText"], month_select, year_select],
right_action
])
.add_child(h2![left_action, span![header_text], right_action])
.add_child(div![
C!["calendar"],
div![