jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 03:36:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Convert date-range-picker to mwc (#11755)

Browse Source
This commit is contained in:
Bram Kragten 2022-02-21 17:48:31 +01:00 committed by GitHub
parent 98699b640a
commit 94b4b818aa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/ha-date-range-picker.ts
View File

@ -3,7 +3,6 @@ import "@material/mwc-list/mwc-list";
import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
import "@material/mwc-list/mwc-list-item"; import "@material/mwc-list/mwc-list-item";
import { mdiCalendar } from "@mdi/js"; import { mdiCalendar } from "@mdi/js";
import "@polymer/paper-input/paper-input";
import { import {
css, css,
CSSResultGroup, CSSResultGroup,
@ -19,6 +18,7 @@ import { computeRTLDirection } from "../common/util/compute_rtl";
import { HomeAssistant } from "../types"; import { HomeAssistant } from "../types";
import "./date-range-picker"; import "./date-range-picker";
import "./ha-svg-icon"; import "./ha-svg-icon";
import "./ha-textfield";
export interface DateRangePickerRanges { export interface DateRangePickerRanges {
[key: string]: [Date, Date]; [key: string]: [Date, Date];
@ -61,7 +61,7 @@ export class HaDateRangePicker extends LitElement {
> >
<div slot="input" class="date-range-inputs"> <div slot="input" class="date-range-inputs">
<ha-svg-icon .path=${mdiCalendar}></ha-svg-icon> <ha-svg-icon .path=${mdiCalendar}></ha-svg-icon>
<paper-input <ha-textfield
.value=${formatDateTime(this.startDate, this.hass.locale)} .value=${formatDateTime(this.startDate, this.hass.locale)}
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.components.date-range-picker.start_date" "ui.components.date-range-picker.start_date"
@ -69,16 +69,16 @@ export class HaDateRangePicker extends LitElement {
.disabled=${this.disabled} .disabled=${this.disabled}
@click=${this._handleInputClick} @click=${this._handleInputClick}
readonly readonly
></paper-input> ></ha-textfield>
<paper-input <ha-textfield
.value=${formatDateTime(this.endDate, this.hass.locale)} .value=${formatDateTime(this.endDate, this.hass.locale)}
label=${this.hass.localize( .label=${this.hass.localize(
"ui.components.date-range-picker.end_date" "ui.components.date-range-picker.end_date"
)} )}
.disabled=${this.disabled} .disabled=${this.disabled}
@click=${this._handleInputClick} @click=${this._handleInputClick}
readonly readonly
></paper-input> ></ha-textfield>
</div> </div>
${this.ranges ${this.ranges
? html`<div ? html`<div
@ -158,13 +158,13 @@ export class HaDateRangePicker extends LitElement {
border-top: 1px solid var(--divider-color); border-top: 1px solid var(--divider-color);
} }
paper-input { ha-textfield {
display: inline-block; display: inline-block;
max-width: 250px; max-width: 250px;
min-width: 200px; min-width: 200px;
} }
paper-input:last-child { ha-textfield:last-child {
margin-left: 8px; margin-left: 8px;
} }
@ -176,7 +176,7 @@ export class HaDateRangePicker extends LitElement {
} }
@media only screen and (max-width: 500px) { @media only screen and (max-width: 500px) {
paper-input { ha-textfield {
min-width: inherit; min-width: inherit;
} }

8
src/panels/history/ha-panel-history.ts
View File

@ -81,7 +81,7 @@ class HaPanelHistory extends LitElement {
</app-header> </app-header>
<div class="flex content"> <div class="flex content">
<div class="flex layout horizontal wrap"> <div class="filters">
<ha-date-range-picker <ha-date-range-picker
.hass=${this.hass} .hass=${this.hass}
?disabled=${this._isLoading} ?disabled=${this._isLoading}
@ -247,6 +247,12 @@ class HaPanelHistory extends LitElement {
position: relative; position: relative;
} }
.filters {
display: flex;
align-items: flex-end;
padding: 8px 16px 0;
}
ha-date-range-picker { ha-date-range-picker {
margin-right: 16px; margin-right: 16px;
max-width: 100%; max-width: 100%;

2
src/panels/logbook/ha-panel-logbook.ts
View File

@ -335,7 +335,7 @@ export class HaPanelLogbook extends LitElement {
.filters { .filters {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
padding: 0 16px; padding: 8px 16px 0;
} }
:host([narrow]) .filters { :host([narrow]) .filters {