Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Move date-range-picker to Top for Logbook and History #22947

Open
wants to merge 5 commits into
base: dev
Choose a base branch
from
+131 −92
Open

Move date-range-picker to Top for Logbook and History #22947

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7770e84
Move date-range-picker to Top for Logbook and History
boern99 Nov 21, 2024
56184c2
added @click=${this._handleInputClick}
boern99 Nov 21, 2024
bd559aa
Merge branch 'dev' into move-date-range-picker-to-header-for-History-…
boern99 Nov 21, 2024
352a868
changed to ShortDateTimeWithYear and display date select button for m…
boern99 Nov 23, 2024
0353f2e
changed Media query for title
boern99 Nov 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 56 additions & 58 deletions src/components/ha-date-range-picker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,12 @@ 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 } 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-icon-button-next";
import "./ha-icon-button-prev";

Expand Down Expand Up @@ -254,57 +253,57 @@ 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>
? html`<div class="label">
<div
@click=${this._handleInputClick}
title=${this.hass.localize(
"ui.components.date-range-picker.start_date"
)}
>
${this.timePicker
? formatShortDateTimeWithYear(
this.startDate,
this.hass.locale,
this.hass.config
)
: formatDate(
this.startDate,
this.hass.locale,
this.hass.config
)}
</div>
<div
@click=${this._handleInputClick}
title=${this.hass.localize(
"ui.components.date-range-picker.end_date"
)}
>
${this.timePicker
? formatShortDateTimeWithYear(
this.endDate,
this.hass.locale,
this.hass.config
)
: formatDate(
this.endDate,
this.hass.locale,
this.hass.config
)}
</div>
</div>
<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(
this.startDate,
this.hass.locale,
this.hass.config
)
: formatDate(
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(
this.endDate,
this.hass.locale,
this.hass.config
)
: formatDate(
this.endDate,
this.hass.locale,
this.hass.config
)}
.label=${this.hass.localize(
"ui.components.date-range-picker.end_date"
)}
.disabled=${this.disabled}
@click=${this._handleInputClick}
readonly
></ha-textfield>
<ha-icon-button-next
.label=${this.hass.localize("ui.common.next")}
class="next"
@click=${this._handleNext}
>
</ha-icon-button-next>`
</ha-icon-button-next>
<ha-svg-icon .path=${mdiCalendar}></ha-svg-icon>`
: html`<ha-icon-button
.label=${this.hass.localize(
"ui.components.date-range-picker.select_date_range"
Expand Down Expand Up @@ -443,26 +442,25 @@ export class HaDateRangePicker extends LitElement {
border-right: 1px solid var(--divider-color);
}

.label div {
white-space: nowrap;
}

.label div {
white-space: nowrap;
text-align-last: justify;
}
.label div:first-child {
border-bottom: 1px solid var(--divider-color);
}

.date-range-footer {
display: flex;
justify-content: flex-end;
padding: 8px;
border-top: 1px solid var(--divider-color);
}

ha-textfield {
display: inline-block;
max-width: 250px;
min-width: 220px;
}

ha-textfield:last-child {
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
direction: var(--direction);
}

@media only screen and (max-width: 800px) {
.date-range-ranges {
border-right: none;
Expand All @@ -474,10 +472,10 @@ export class HaDateRangePicker extends LitElement {
ha-textfield {
min-width: inherit;
}
}

ha-svg-icon,
.prev,
.next {
@media only screen and (max-width: 380px) {
.label {
display: none;
}
}
Expand Down
58 changes: 38 additions & 20 deletions src/panels/history/ha-panel-history.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,18 +140,22 @@ class HaPanelHistory extends LitElement {
.narrow=${this.narrow}
></ha-menu-button>
`}

<div slot="title">${this.hass.localize("panel.history")}</div>
${entitiesSelected
? html`
<ha-icon-button
slot="actionItems"
@click=${this._removeAll}
.disabled=${this._isLoading}
.path=${mdiFilterRemove}
.label=${this.hass.localize("ui.panel.history.remove_all")}
></ha-icon-button>
`
: ""}

<div slot="actionItems">
<div class="time-handle">
<ha-date-range-picker
.hass=${this.hass}
?disabled=${this._isLoading}
.startDate=${this._startDate}
.endDate=${this._endDate}
extendedPresets
@change=${this._dateRangeChanged}
></ha-date-range-picker>
</div>
</div>

<ha-button-menu slot="actionItems" @action=${this._handleMenuAction}>
<ha-icon-button
slot="trigger"
Expand All @@ -169,24 +173,25 @@ class HaPanelHistory extends LitElement {
<ha-svg-icon slot="graphic" .path=${mdiImagePlus}></ha-svg-icon>
</ha-list-item>
</ha-button-menu>

<div class="flex content">
<div class="filters">
<ha-date-range-picker
.hass=${this.hass}
?disabled=${this._isLoading}
.startDate=${this._startDate}
.endDate=${this._endDate}
extendedPresets
@change=${this._dateRangeChanged}
></ha-date-range-picker>
<ha-target-picker
.hass=${this.hass}
.value=${this._targetPickerValue}
.disabled=${this._isLoading}
addOnTop
@value-changed=${this._targetsChanged}
></ha-target-picker>
${entitiesSelected
? html`
<ha-icon-button
@click=${this._removeAll}
.disabled=${this._isLoading}
.path=${mdiFilterRemove}
.label=${this.hass.localize("ui.panel.history.remove_all")}
></ha-icon-button>
`
: ""}
</div>
${this._isLoading
? html`<div class="progress-wrapper">
Expand Down Expand Up @@ -758,6 +763,10 @@ class HaPanelHistory extends LitElement {
align-items: flex-start;
margin-top: 16px;
}
.time-handle {
float: right;
margin-top: 22px;
}

ha-date-range-picker {
margin-right: 16px;
Expand All @@ -777,13 +786,22 @@ class HaPanelHistory extends LitElement {
margin-inline-start: initial;
width: 100%;
}
.time-handle {
margin-top: 0px;
}
}

.start-search {
padding-top: 16px;
text-align: center;
color: var(--secondary-text-color);
}

@media only screen and (max-width: 490px) {
div[slot="title"] {
display: none;
}
}
`,
];
}
Expand Down
51 changes: 37 additions & 14 deletions src/panels/logbook/ha-panel-logbook.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,30 +80,32 @@ export class HaPanelLogbook extends LitElement {
></ha-menu-button>
`}
<div slot="title">${this.hass.localize("panel.logbook")}</div>
<ha-icon-button
slot="actionItems"
@click=${this._refreshLogbook}
.path=${mdiRefresh}
.label=${this.hass!.localize("ui.common.refresh")}
></ha-icon-button>

<div class="filters">
<ha-date-range-picker
.hass=${this.hass}
.startDate=${this._time.range[0]}
.endDate=${this._time.range[1]}
@change=${this._dateRangeChanged}
></ha-date-range-picker>
<div slot="actionItems">
<div class="time-handle">
<ha-date-range-picker
.hass=${this.hass}
.startDate=${this._time.range[0]}
.endDate=${this._time.range[1]}
@change=${this._dateRangeChanged}
></ha-date-range-picker>
</div>
</div>

<div class="filters">
<ha-target-picker
.hass=${this.hass}
.entityFilter=${filterLogbookCompatibleEntities}
.value=${this._targetPickerValue}
addOnTop
@value-changed=${this._targetsChanged}
></ha-target-picker>
<ha-icon-button
@click=${this._refreshLogbook}
.path=${mdiRefresh}
.label=${this.hass!.localize("ui.common.refresh")}
></ha-icon-button>
</div>

<ha-logbook
.hass=${this.hass}
.time=${this._time}
Expand Down Expand Up @@ -297,6 +299,21 @@ export class HaPanelLogbook extends LitElement {
height: calc(100vh - 198px);
}

.time-handle {
margin-top: 22px;
float: right;
}
.label div {
overflow: hidden;
display: inline-block;
white-space: nowrap;
}

@media all and (max-width: 870px) {
.time-handle {
margin-top: 0px;
}
}
ha-date-range-picker {
margin-right: 16px;
margin-inline-end: 16px;
Expand Down Expand Up @@ -332,6 +349,12 @@ export class HaPanelLogbook extends LitElement {
max-width: none;
width: 100%;
}

@media only screen and (max-width: 430px) {
div[slot="title"] {
display: none;
}
}
`,
];
}
Expand Down
Loading