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

Merge pull request #6417 from yosilevy/RTL-date-selector

Browse Source 
RTL fix for range list
This commit is contained in:
Yosi Levy 2020-07-20 13:57:27 +03:00 committed by GitHub
commit d7e1e9e284
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,6 +17,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 { computeRTLDirection } from "../common/util/compute_rtl";
export interface DateRangePickerRanges { export interface DateRangePickerRanges {
[key: string]: [Date, Date]; [key: string]: [Date, Date];
@ -36,11 +37,14 @@ export class HaDateRangePicker extends LitElement {
@property({ type: Boolean }) private _hour24format = false; @property({ type: Boolean }) private _hour24format = false;
@property({ type: String }) private _rtlDirection = "ltr";
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();
this._rtlDirection = computeRTLDirection(this.hass);
} }
} }
} }
@ -76,7 +80,11 @@ 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="date-range-ranges"
.dir=${this._rtlDirection}
>
<mwc-list @request-selected=${this._setDateRange}> <mwc-list @request-selected=${this._setDateRange}>
${Object.entries(this.ranges).map( ${Object.entries(this.ranges).map(
([name, dates]) => html`<mwc-list-item ([name, dates]) => html`<mwc-list-item