From 7bced283274fbe3e0a849a158e59cab9e7592f3c Mon Sep 17 00:00:00 2001 From: Yosi Levy Date: Fri, 17 Jul 2020 06:57:42 +0300 Subject: [PATCH 1/5] RTL fix for range list --- src/components/ha-date-range-picker.ts | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index 66bb2f1eae..83560cafca 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -8,6 +8,7 @@ import { TemplateResult, PropertyValues, } from "lit-element"; +import { classMap } from "lit-html/directives/class-map"; import { HomeAssistant } from "../types"; import { mdiCalendar } from "@mdi/js"; import { formatDateTime } from "../common/datetime/format_date_time"; @@ -17,6 +18,7 @@ import "./ha-svg-icon"; import "@polymer/paper-input/paper-input"; import "@material/mwc-list/mwc-list"; import "./date-range-picker"; +import { computeRTL } from "../common/util/compute_rtl"; export interface DateRangePickerRanges { [key: string]: [Date, Date]; @@ -36,12 +38,17 @@ export class HaDateRangePicker extends LitElement { @property({ type: Boolean }) private _hour24format = false; + @property({ type: Boolean }) private _rtl = false; + protected updated(changedProps: PropertyValues) { if (changedProps.has("hass")) { const oldHass = changedProps.get("hass") as HomeAssistant | undefined; if (!oldHass || oldHass.language !== this.hass.language) { this._hour24format = this._compute24hourFormat(); } + if (!oldHass || computeRTL(oldHass) !== computeRTL(this.hass)) { + this._rtl = computeRTL(this.hass); + } } } @@ -76,7 +83,10 @@ export class HaDateRangePicker extends LitElement { > ${this.ranges - ? html`
+ ? html`
${Object.entries(this.ranges).map( ([name, dates]) => html` Date: Sat, 18 Jul 2020 06:48:36 +0300 Subject: [PATCH 2/5] Fixed comments --- src/components/ha-date-range-picker.ts | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index 83560cafca..02d64faf17 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -8,7 +8,6 @@ import { TemplateResult, PropertyValues, } from "lit-element"; -import { classMap } from "lit-html/directives/class-map"; import { HomeAssistant } from "../types"; import { mdiCalendar } from "@mdi/js"; import { formatDateTime } from "../common/datetime/format_date_time"; @@ -18,7 +17,7 @@ import "./ha-svg-icon"; import "@polymer/paper-input/paper-input"; import "@material/mwc-list/mwc-list"; import "./date-range-picker"; -import { computeRTL } from "../common/util/compute_rtl"; +import { computeRTLDirection } from "../common/util/compute_rtl"; export interface DateRangePickerRanges { [key: string]: [Date, Date]; @@ -38,7 +37,7 @@ export class HaDateRangePicker extends LitElement { @property({ type: Boolean }) private _hour24format = false; - @property({ type: Boolean }) private _rtl = false; + @property({ type: String }) private _rtlDirection = "ltr"; protected updated(changedProps: PropertyValues) { if (changedProps.has("hass")) { @@ -46,8 +45,11 @@ export class HaDateRangePicker extends LitElement { if (!oldHass || oldHass.language !== this.hass.language) { this._hour24format = this._compute24hourFormat(); } - if (!oldHass || computeRTL(oldHass) !== computeRTL(this.hass)) { - this._rtl = computeRTL(this.hass); + if ( + !oldHass || + computeRTLDirection(oldHass) !== computeRTLDirection(this.hass) + ) { + this._rtlDirection = computeRTLDirection(this.hass); } } } @@ -85,7 +87,8 @@ export class HaDateRangePicker extends LitElement { ${this.ranges ? html`
${Object.entries(this.ranges).map( From d5a947e2cc9b2cf169ed3932b8cc042f81c174b6 Mon Sep 17 00:00:00 2001 From: Yosi Levy Date: Sun, 19 Jul 2020 06:09:57 +0300 Subject: [PATCH 3/5] Removed style --- src/components/ha-date-range-picker.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index 02d64faf17..9fd61a6903 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -174,9 +174,6 @@ export class HaDateRangePicker extends LitElement { .date-range-ranges { border-right: 1px solid var(--divider-color); } - .date-range-ranges.rtl { - direction: rtl; - } @media only screen and (max-width: 800px) { .date-range-ranges { From c6624e5cb6c6a6ffbc11ccdb99eb473e1bbad5db Mon Sep 17 00:00:00 2001 From: Yosi Levy Date: Sun, 19 Jul 2020 15:09:34 +0300 Subject: [PATCH 4/5] Optimized RTL check --- src/components/ha-date-range-picker.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index 9fd61a6903..3c9d2d70ec 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -44,11 +44,6 @@ export class HaDateRangePicker extends LitElement { const oldHass = changedProps.get("hass") as HomeAssistant | undefined; if (!oldHass || oldHass.language !== this.hass.language) { this._hour24format = this._compute24hourFormat(); - } - if ( - !oldHass || - computeRTLDirection(oldHass) !== computeRTLDirection(this.hass) - ) { this._rtlDirection = computeRTLDirection(this.hass); } } From 10a62ca17c63f012d79da287b0ce4773555faee3 Mon Sep 17 00:00:00 2001 From: Yosi Levy <37745463+yosilevy@users.noreply.github.com> Date: Mon, 20 Jul 2020 13:29:51 +0300 Subject: [PATCH 5/5] Fix bad merge --- src/components/ha-date-range-picker.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index c1deb1517f..d1e5244d02 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -84,6 +84,7 @@ export class HaDateRangePicker extends LitElement { slot="ranges" class="date-range-ranges" .dir=${this._rtlDirection} + > ${Object.entries(this.ranges).map( ([name, dates]) => html`