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

RTL fix for range list

Browse Source
This commit is contained in:
Yosi Levy 2020-07-17 06:57:42 +03:00
parent 894f4379e6
commit 7bced28327
1 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,7 @@ import {
TemplateResult, TemplateResult,
PropertyValues, PropertyValues,
} from "lit-element"; } from "lit-element";
import { classMap } from "lit-html/directives/class-map";
import { HomeAssistant } from "../types"; import { HomeAssistant } from "../types";
import { mdiCalendar } from "@mdi/js"; import { mdiCalendar } from "@mdi/js";
import { formatDateTime } from "../common/datetime/format_date_time"; import { formatDateTime } from "../common/datetime/format_date_time";
@ -17,6 +18,7 @@ import "./ha-svg-icon";
import "@polymer/paper-input/paper-input"; import "@polymer/paper-input/paper-input";
import "@material/mwc-list/mwc-list"; import "@material/mwc-list/mwc-list";
import "./date-range-picker"; import "./date-range-picker";
import { computeRTL } from "../common/util/compute_rtl";
export interface DateRangePickerRanges { export interface DateRangePickerRanges {
[key: string]: [Date, Date]; [key: string]: [Date, Date];
@ -36,12 +38,17 @@ export class HaDateRangePicker extends LitElement {
@property({ type: Boolean }) private _hour24format = false; @property({ type: Boolean }) private _hour24format = false;
@property({ type: Boolean }) private _rtl = false;
protected updated(changedProps: PropertyValues) { protected updated(changedProps: PropertyValues) {
if (changedProps.has("hass")) { if (changedProps.has("hass")) {
const oldHass = changedProps.get("hass") as HomeAssistant | undefined; const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
if (!oldHass || oldHass.language !== this.hass.language) { if (!oldHass || oldHass.language !== this.hass.language) {
this._hour24format = this._compute24hourFormat(); 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 {
></paper-input> ></paper-input>
</div> </div>
${this.ranges ${this.ranges
? html`<div slot="ranges" class="date-range-ranges"> ? html`<div
slot="ranges"
class=${classMap({ "date-range-ranges": true, rtl: this._rtl })}
>
<mwc-list @click=${this._setDateRange}> <mwc-list @click=${this._setDateRange}>
${Object.entries(this.ranges).map( ${Object.entries(this.ranges).map(
([name, dates]) => html`<mwc-list-item ([name, dates]) => html`<mwc-list-item
@ -161,6 +171,9 @@ export class HaDateRangePicker extends LitElement {
.date-range-ranges { .date-range-ranges {
border-right: 1px solid var(--divider-color); border-right: 1px solid var(--divider-color);
} }
.date-range-ranges.rtl {
direction: rtl;
}
@media only screen and (max-width: 800px) { @media only screen and (max-width: 800px) {
.date-range-ranges { .date-range-ranges {