RTL fix for range list #6417
RTL fix for range list #6417
Conversation
| ? html`<div slot="ranges" class="date-range-ranges"> | ||
| ? html`<div | ||
| slot="ranges" | ||
| class=${classMap({ "date-range-ranges": true, rtl: this._rtl })} |
There was a problem hiding this comment.
| class=${classMap({ "date-range-ranges": true, rtl: this._rtl })} | |
| class="date-range-ranges ${classMap({rtl: this._rtl })}" |
There was a problem hiding this comment.
Instead of setting a class, why not just set the direction (dir) attribute?
There was a problem hiding this comment.
OK. Fixed. So priority is local attribute if applicable, classmap, custom CSS attribute.
| 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 || | ||
| computeRTLDirection(oldHass) !== computeRTLDirection(this.hass) |
There was a problem hiding this comment.
Just compare the languages, you are now doing 2 computeRTLDirection extra.
There was a problem hiding this comment.
But lang can change and RTLDirection may not change. It is inefficient however I though re-rendering was the thing to avoid at almost all cost??
There was a problem hiding this comment.
I Joint both checks
| .date-range-ranges.rtl { | ||
| direction: rtl; | ||
| } |
There was a problem hiding this comment.
I thought I did. Oops
| @@ -36,11 +37,14 @@ export class HaDateRangePicker extends LitElement { | |||
|
|
|||
| @property({ type: Boolean }) private _hour24format = false; | |||
|
|
|||
| @property({ type: String }) private _rtlDirection = "ltr"; | |||
There was a problem hiding this comment.
let's not call this _rtlDirection as its value isn't a boolean, let's call it _textDirection or _direction or _dir
Fixed direction in range list in date-range-picker