mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 01:06:35 +00:00
RTL arrow problems (#3467)
* Updated style check since load sequence must have changed * Refactored to timeout * Added comment
This commit is contained in:
parent
9fa8544972
commit
807dff99af
@ -5,13 +5,15 @@ import { HaIcon } from "./ha-icon";
|
||||
|
||||
export class HaIconNext extends HaIcon {
|
||||
public connectedCallback() {
|
||||
this.icon =
|
||||
window.getComputedStyle(this).direction === "ltr"
|
||||
? "hass:chevron-right"
|
||||
: "hass:chevron-left";
|
||||
|
||||
// calling super after setting icon to have it consistently show the icon (otherwise not always shown)
|
||||
super.connectedCallback();
|
||||
|
||||
// wait to check for direction since otherwise direction is wrong even though top level is RTL
|
||||
setTimeout(() => {
|
||||
this.icon =
|
||||
window.getComputedStyle(this).direction === "ltr"
|
||||
? "hass:chevron-right"
|
||||
: "hass:chevron-left";
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -5,13 +5,15 @@ import { HaIcon } from "./ha-icon";
|
||||
|
||||
export class HaIconPrev extends HaIcon {
|
||||
public connectedCallback() {
|
||||
this.icon =
|
||||
window.getComputedStyle(this).direction === "ltr"
|
||||
? "hass:chevron-left"
|
||||
: "hass:chevron-right";
|
||||
|
||||
// calling super after setting icon to have it consistently show the icon (otherwise not always shown)
|
||||
super.connectedCallback();
|
||||
|
||||
// wait to check for direction since otherwise direction is wrong even though top level is RTL
|
||||
setTimeout(() => {
|
||||
this.icon =
|
||||
window.getComputedStyle(this).direction === "ltr"
|
||||
? "hass:chevron-left"
|
||||
: "hass:chevron-right";
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -10,13 +10,15 @@ const paperIconButtonClass = customElements.get(
|
||||
|
||||
export class HaPaperIconButtonArrowNext extends paperIconButtonClass {
|
||||
public connectedCallback() {
|
||||
this.icon =
|
||||
window.getComputedStyle(this).direction === "ltr"
|
||||
? "hass:arrow-right"
|
||||
: "hass:arrow-left";
|
||||
|
||||
// calling super after setting icon to have it consistently show the icon (otherwise not always shown)
|
||||
super.connectedCallback();
|
||||
|
||||
// wait to check for direction since otherwise direction is wrong even though top level is RTL
|
||||
setTimeout(() => {
|
||||
this.icon =
|
||||
window.getComputedStyle(this).direction === "ltr"
|
||||
? "hass:arrow-right"
|
||||
: "hass:arrow-left";
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -12,17 +12,19 @@ export class HaPaperIconButtonArrowPrev extends paperIconButtonClass {
|
||||
public hassio?: boolean;
|
||||
|
||||
public connectedCallback() {
|
||||
this.icon =
|
||||
window.getComputedStyle(this).direction === "ltr"
|
||||
? this.hassio
|
||||
? "hassio:arrow-left"
|
||||
: "hass:arrow-left"
|
||||
: this.hassio
|
||||
? "hassio:arrow-right"
|
||||
: "hass:arrow-right";
|
||||
|
||||
// calling super after setting icon to have it consistently show the icon (otherwise not always shown)
|
||||
super.connectedCallback();
|
||||
|
||||
// wait to check for direction since otherwise direction is wrong even though top level is RTL
|
||||
setTimeout(() => {
|
||||
this.icon =
|
||||
window.getComputedStyle(this).direction === "ltr"
|
||||
? this.hassio
|
||||
? "hassio:arrow-left"
|
||||
: "hass:arrow-left"
|
||||
: this.hassio
|
||||
? "hassio:arrow-right"
|
||||
: "hass:arrow-right";
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -10,13 +10,15 @@ const paperIconButtonClass = customElements.get(
|
||||
|
||||
export class HaPaperIconButtonNext extends paperIconButtonClass {
|
||||
public connectedCallback() {
|
||||
this.icon =
|
||||
window.getComputedStyle(this).direction === "ltr"
|
||||
? "hass:chevron-right"
|
||||
: "hass:chevron-left";
|
||||
|
||||
// calling super after setting icon to have it consistently show the icon (otherwise not always shown)
|
||||
super.connectedCallback();
|
||||
|
||||
// wait to check for direction since otherwise direction is wrong even though top level is RTL
|
||||
setTimeout(() => {
|
||||
this.icon =
|
||||
window.getComputedStyle(this).direction === "ltr"
|
||||
? "hass:chevron-right"
|
||||
: "hass:chevron-left";
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -10,13 +10,15 @@ const paperIconButtonClass = customElements.get(
|
||||
|
||||
export class HaPaperIconButtonPrev extends paperIconButtonClass {
|
||||
public connectedCallback() {
|
||||
this.icon =
|
||||
window.getComputedStyle(this).direction === "ltr"
|
||||
? "hass:chevron-left"
|
||||
: "hass:chevron-right";
|
||||
|
||||
// calling super after setting icon to have it consistently show the icon (otherwise not always shown)
|
||||
super.connectedCallback();
|
||||
|
||||
// wait to check for direction since otherwise direction is wrong even though top level is RTL
|
||||
setTimeout(() => {
|
||||
this.icon =
|
||||
window.getComputedStyle(this).direction === "ltr"
|
||||
? "hass:chevron-left"
|
||||
: "hass:chevron-right";
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user