-
Notifications
You must be signed in to change notification settings - Fork 2.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
RTL fix for range list #6417
RTL fix for range list #6417
Changes from 2 commits
7bced28
689febd
d5a947e
c6624e5
168e26a
10a62ca
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -17,6 +17,7 @@ import "./ha-svg-icon"; | |
import "@polymer/paper-input/paper-input"; | ||
import "@material/mwc-list/mwc-list"; | ||
import "./date-range-picker"; | ||
import { computeRTLDirection } from "../common/util/compute_rtl"; | ||
|
||
export interface DateRangePickerRanges { | ||
[key: string]: [Date, Date]; | ||
|
@@ -36,12 +37,20 @@ export class HaDateRangePicker extends LitElement { | |
|
||
@property({ type: Boolean }) private _hour24format = false; | ||
|
||
@property({ type: String }) private _rtlDirection = "ltr"; | ||
|
||
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. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Just compare the languages, you are now doing 2 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I Joint both checks |
||
) { | ||
this._rtlDirection = computeRTLDirection(this.hass); | ||
} | ||
} | ||
} | ||
|
||
|
@@ -76,7 +85,11 @@ export class HaDateRangePicker extends LitElement { | |
></paper-input> | ||
</div> | ||
${this.ranges | ||
? html`<div slot="ranges" class="date-range-ranges"> | ||
? html`<div | ||
slot="ranges" | ||
class="date-range-ranges" | ||
.dir=${this._rtlDirection} | ||
> | ||
<mwc-list @click=${this._setDateRange}> | ||
${Object.entries(this.ranges).map( | ||
([name, dates]) => html`<mwc-list-item | ||
|
@@ -161,6 +174,9 @@ export class HaDateRangePicker extends LitElement { | |
.date-range-ranges { | ||
border-right: 1px solid var(--divider-color); | ||
} | ||
.date-range-ranges.rtl { | ||
direction: rtl; | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. You can remove this now There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I thought I did. Oops There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Fixed |
||
|
||
@media only screen and (max-width: 800px) { | ||
.date-range-ranges { | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
let's not call this
_rtlDirection
as its value isn't a boolean, let's call it_textDirection
or_direction
or_dir