Skip to content

Commit

Permalink
date-range-picker prev and next design
Browse files Browse the repository at this point in the history
  • Loading branch information
@boern99
boern99 committed Dec 9, 2024
1 parent ddd6460 commit 9d41dbb
Show file tree
Hide file tree
Showing 2 changed files with 90 additions and 128 deletions.
212 changes: 84 additions & 128 deletions src/components/ha-date-range-picker.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { mdiCalendar } from "@mdi/js";
import {
addDays,
addMonths,
addYears,
endOfDay,
endOfMonth,
endOfWeek,
Expand All @@ -19,21 +18,28 @@ import {
addMilliseconds,
subMilliseconds,
roundToNearestHours,
isFirstDayOfMonth,
isLastDayOfMonth,
subMonths,
differenceInMonths,
isThisYear,
} from "date-fns";
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined";
import { calcDate } from "../common/datetime/calc_date";
import { firstWeekdayIndex } from "../common/datetime/first_weekday";
import { formatDate } from "../common/datetime/format_date";
import { formatDateTime } from "../common/datetime/format_date_time";
import {
formatShortDateTimeWithYear,
formatShortDateTime,
} from "../common/datetime/format_date_time";

import { useAmPm } from "../common/datetime/use_am_pm";
import type { HomeAssistant } from "../types";
import "./date-range-picker";
import "./ha-icon-button";
import "./ha-svg-icon";
import "./ha-textfield";
import "./ha-textarea";
import "./ha-icon-button-next";
import "./ha-icon-button-prev";

Expand Down Expand Up @@ -141,9 +147,6 @@ export class HaDateRangePicker extends LitElement {
[this.hass.localize(
"ui.components.date-range-picker.ranges.this_week"
)]: [weekStart, weekEnd],
[this.hass.localize(
"ui.components.date-range-picker.ranges.last_week"
)]: [addDays(weekStart, -7), addDays(weekEnd, -7)],
...(this.extendedPresets
? {
[this.hass.localize(
Expand All @@ -168,28 +171,6 @@ export class HaDateRangePicker extends LitElement {
}
),
],
[this.hass.localize(
"ui.components.date-range-picker.ranges.last_month"
)]: [
calcDate(
addMonths(today, -1),
startOfMonth,
this.hass.locale,
this.hass.config,
{
weekStartsOn,
}
),
calcDate(
addMonths(today, -1),
endOfMonth,
this.hass.locale,
this.hass.config,
{
weekStartsOn,
}
),
],
[this.hass.localize(
"ui.components.date-range-picker.ranges.this_year"
)]: [
Expand All @@ -206,28 +187,6 @@ export class HaDateRangePicker extends LitElement {
weekStartsOn,
}),
],
[this.hass.localize(
"ui.components.date-range-picker.ranges.last_year"
)]: [
calcDate(
addYears(today, -1),
startOfYear,
this.hass.locale,
this.hass.config,
{
weekStartsOn,
}
),
calcDate(
addYears(today, -1),
endOfYear,
this.hass.locale,
this.hass.config,
{
weekStartsOn,
}
),
],
}
: {}),
};
Expand Down Expand Up @@ -261,51 +220,44 @@ export class HaDateRangePicker extends LitElement {
>
<div slot="input" class="date-range-inputs" @click=${this._handleClick}>
${!this.minimal
? html`<ha-svg-icon .path=${mdiCalendar}></ha-svg-icon>
<ha-icon-button-prev
.label=${this.hass.localize("ui.common.previous")}
class="prev"
@click=${this._handlePrev}
>
</ha-icon-button-prev>
<ha-textfield
.value=${this.timePicker
? formatDateTime(
? html`<ha-textarea
mobile2multiline
.value=${(isThisYear(this.startDate)
? formatShortDateTime(
this.startDate,
this.hass.locale,
this.hass.config
)
: formatDate(
: formatShortDateTimeWithYear(
this.startDate,
this.hass.locale,
this.hass.config
)}
.label=${this.hass.localize(
"ui.components.date-range-picker.start_date"
)}
.disabled=${this.disabled}
@click=${this._handleInputClick}
readonly
></ha-textfield>
<ha-textfield
.value=${this.timePicker
? formatDateTime(
)) +
" - \n" +
(isThisYear(this.endDate)
? formatShortDateTime(
this.endDate,
this.hass.locale,
this.hass.config
)
: formatDate(
: formatShortDateTimeWithYear(
this.endDate,
this.hass.locale,
this.hass.config
)}
))}
.label=${this.hass.localize(
"ui.components.date-range-picker.end_date"
"ui.components.selectors.selector.types.datetime"
)}
.disabled=${this.disabled}
@click=${this._handleInputClick}
readonly
></ha-textfield>
></ha-textarea>
<ha-icon-button-prev
.label=${this.hass.localize("ui.common.previous")}
class="prev"
@click=${this._handlePrev}
>
</ha-icon-button-prev>
<ha-icon-button-next
.label=${this.hass.localize("ui.common.next")}
class="next"
Expand Down Expand Up @@ -343,39 +295,64 @@ export class HaDateRangePicker extends LitElement {
}

private _handleNext(): void {
const dateRange = [
roundToNearestHours(this.endDate),
subMilliseconds(
roundToNearestHours(
addMilliseconds(
this.endDate,
Math.max(
3600000,
differenceInMilliseconds(this.endDate, this.startDate)
let dateRange: [Date, Date];
if (isFirstDayOfMonth(this.startDate) && isLastDayOfMonth(this.endDate)) {
dateRange = [
roundToNearestHours(this.endDate),
subMilliseconds(
addMonths(
roundToNearestHours(this.endDate),
differenceInMonths(addMilliseconds(this.endDate, 1), this.startDate)
),
1
),
];
} else {
dateRange = [
roundToNearestHours(this.endDate),
subMilliseconds(
roundToNearestHours(
addMilliseconds(
this.endDate,
Math.max(
3600000,
differenceInMilliseconds(this.endDate, this.startDate)
)
)
)
),
1
),
1
),
];
];
}
const dateRangePicker = this._dateRangePicker;
dateRangePicker.clickRange(dateRange);
dateRangePicker.clickedApply();
}

private _handlePrev(): void {
const dateRange = [
roundToNearestHours(
subMilliseconds(
let dateRange: [Date, Date];
if (isFirstDayOfMonth(this.startDate) && isLastDayOfMonth(this.endDate)) {
dateRange = [
subMonths(
this.startDate,
Math.max(
3600000,
differenceInMilliseconds(this.endDate, this.startDate)
differenceInMonths(addMilliseconds(this.endDate, 1), this.startDate)
),
subMilliseconds(roundToNearestHours(this.startDate), 1),
];
} else {
dateRange = [
roundToNearestHours(
subMilliseconds(
this.startDate,
Math.max(
3600000,
differenceInMilliseconds(this.endDate, this.startDate)
)
)
)
),
subMilliseconds(roundToNearestHours(this.startDate), 1),
];
),
subMilliseconds(roundToNearestHours(this.startDate), 1),
];
}
const dateRangePicker = this._dateRangePicker;
dateRangePicker.clickRange(dateRange);
dateRangePicker.clickedApply();
Expand Down Expand Up @@ -430,12 +407,7 @@ export class HaDateRangePicker extends LitElement {

static get styles(): CSSResultGroup {
return css`
ha-svg-icon {
margin-right: 8px;
margin-inline-end: 8px;
margin-inline-start: initial;
direction: var(--direction);
}
ha-icon-button {
direction: var(--direction);
Expand All @@ -457,17 +429,13 @@ export class HaDateRangePicker extends LitElement {
border-top: 1px solid var(--divider-color);
}
ha-textfield {
ha-textarea {
display: inline-block;
max-width: 250px;
min-width: 220px;
width: 340px;
}
ha-textfield:last-child {
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
direction: var(--direction);
@media only screen and (max-width: 460px) {
ha-textarea {
width: 100%
}
@media only screen and (max-width: 800px) {
Expand All @@ -476,18 +444,6 @@ export class HaDateRangePicker extends LitElement {
border-bottom: 1px solid var(--divider-color);
}
}
@media only screen and (max-width: 500px) {
ha-textfield {
min-width: inherit;
}
ha-svg-icon,
.prev,
.next {
display: none;
}
}
`;
}
}
Expand Down
6 changes: 6 additions & 0 deletions src/components/ha-textarea.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,12 @@ export class HaTextArea extends TextAreaBase {
inset-inline-end: initial !important;
transform-origin: var(--float-start) top;
}
@media only screen and (min-width: 459px) {
:host([mobile2multiline]) .mdc-text-field__input {
white-space: nowrap;
max-height: 16px;
}
}
`,
];
}
Expand Down

0 comments on commit 9d41dbb

Please sign in to comment.