From 6c73ae5bf74c27a0c7217dc90df8254e51344650 Mon Sep 17 00:00:00 2001 From: Yosi Levy Date: Sat, 7 May 2022 06:39:39 +0300 Subject: [PATCH 1/7] Replace host-context with css properties --- src/components/ha-fab.ts | 8 +++----- src/panels/config/logs/error-log-card.ts | 4 ++-- src/state/translations-mixin.ts | 19 ++++++++++++++++++- 3 files changed, 23 insertions(+), 8 deletions(-) diff --git a/src/components/ha-fab.ts b/src/components/ha-fab.ts index 563ee32e32..8d73e8bda4 100644 --- a/src/components/ha-fab.ts +++ b/src/components/ha-fab.ts @@ -11,11 +11,9 @@ export class HaFab extends Fab { static override styles = Fab.styles.concat([ css` - :host-context([style*="direction: rtl;"]) - .mdc-fab--extended - .mdc-fab__icon { - margin-left: 12px !important; - margin-right: calc(12px - 20px) !important; + .mdc-fab--extended .mdc-fab__icon { + margin-left: var(--rtl-12px, calc(12px - 20px)) !important; + margin-right: var(--rtl--8px, 12px) !important; } `, ]); diff --git a/src/panels/config/logs/error-log-card.ts b/src/panels/config/logs/error-log-card.ts index 2a7f91fba2..f3458df109 100644 --- a/src/panels/config/logs/error-log-card.ts +++ b/src/panels/config/logs/error-log-card.ts @@ -235,8 +235,8 @@ class ErrorLogCard extends LitElement { color: var(--warning-color); } - :host-context([style*="direction: rtl;"]) mwc-button { - direction: rtl; + mwc-button { + direction: var(--rtl-dir, ltr); } `; } diff --git a/src/state/translations-mixin.ts b/src/state/translations-mixin.ts index 5a118b67cc..37f7d9893d 100644 --- a/src/state/translations-mixin.ts +++ b/src/state/translations-mixin.ts @@ -180,12 +180,29 @@ export default >(superClass: T) => private _applyTranslations(hass: HomeAssistant) { document.querySelector("html")!.setAttribute("lang", hass.language); - this.style.direction = computeRTL(hass) ? "rtl" : "ltr"; + this._applyDirection(hass); this._loadCoreTranslations(hass.language); this.__loadedFragmetTranslations = new Set(); this._loadFragmentTranslations(hass.language, hass.panelUrl); } + private _applyDirection(hass: HomeAssistant) { + if (computeRTL(hass)) { + this.style.direction = "rtl"; + // apply custom properties used to fix RTL appearance throughout the system + this.style.setProperty("--rtl-12px", "12px"); + this.style.setProperty("--rtl--8px", "-8px"); + this.style.setProperty("--rtl-dir", "rtl"); + } else { + // clear all custom properties (can't use "all" for this) + for (let i = this.style.length; i--; ) { + this.style.removeProperty(this.style[i]); + } + + this.style.direction = "ltr"; + } + } + /** * Load translations from the backend * @param language language to fetch From f09c8429818129d4fb3c7ffb87af1b7f8fa39af3 Mon Sep 17 00:00:00 2001 From: Yosi Levy <37745463+yosilevy@users.noreply.github.com> Date: Tue, 10 May 2022 18:25:28 +0300 Subject: [PATCH 2/7] Update src/state/translations-mixin.ts Co-authored-by: Bram Kragten --- src/state/translations-mixin.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/state/translations-mixin.ts b/src/state/translations-mixin.ts index 37f7d9893d..30dd7578b7 100644 --- a/src/state/translations-mixin.ts +++ b/src/state/translations-mixin.ts @@ -195,9 +195,7 @@ export default >(superClass: T) => this.style.setProperty("--rtl-dir", "rtl"); } else { // clear all custom properties (can't use "all" for this) - for (let i = this.style.length; i--; ) { - this.style.removeProperty(this.style[i]); - } + this.style = ""; this.style.direction = "ltr"; } From 7db28c0156e00a3e2c53c06f92282616ffb8ccd8 Mon Sep 17 00:00:00 2001 From: Yosi Levy Date: Tue, 10 May 2022 19:31:23 +0300 Subject: [PATCH 3/7] Update following review --- src/components/ha-fab.ts | 2 +- src/state/translations-mixin.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ha-fab.ts b/src/components/ha-fab.ts index 8d73e8bda4..5a215f3907 100644 --- a/src/components/ha-fab.ts +++ b/src/components/ha-fab.ts @@ -12,7 +12,7 @@ export class HaFab extends Fab { static override styles = Fab.styles.concat([ css` .mdc-fab--extended .mdc-fab__icon { - margin-left: var(--rtl-12px, calc(12px - 20px)) !important; + margin-left: var(--rtl-12px, -8px) !important; margin-right: var(--rtl--8px, 12px) !important; } `, diff --git a/src/state/translations-mixin.ts b/src/state/translations-mixin.ts index 30dd7578b7..be798b6dc3 100644 --- a/src/state/translations-mixin.ts +++ b/src/state/translations-mixin.ts @@ -192,10 +192,10 @@ export default >(superClass: T) => // apply custom properties used to fix RTL appearance throughout the system this.style.setProperty("--rtl-12px", "12px"); this.style.setProperty("--rtl--8px", "-8px"); - this.style.setProperty("--rtl-dir", "rtl"); + this.style.setProperty("--dir", "rtl"); } else { // clear all custom properties (can't use "all" for this) - this.style = ""; + this.style.cssText = ""; this.style.direction = "ltr"; } From 96d375cb84c4e6254de4adc84598cc7bb17ef2e3 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 11 May 2022 14:16:44 +0200 Subject: [PATCH 4/7] Use / --- src/components/ha-fab.ts | 5 +++-- src/state/translations-mixin.ts | 18 +++++------------- 2 files changed, 8 insertions(+), 15 deletions(-) diff --git a/src/components/ha-fab.ts b/src/components/ha-fab.ts index 5a215f3907..57f2a2bbf4 100644 --- a/src/components/ha-fab.ts +++ b/src/components/ha-fab.ts @@ -12,8 +12,9 @@ export class HaFab extends Fab { static override styles = Fab.styles.concat([ css` .mdc-fab--extended .mdc-fab__icon { - margin-left: var(--rtl-12px, -8px) !important; - margin-right: var(--rtl--8px, 12px) !important; + margin-inline-start: -8px !important; + margin-inline-end: 12px !important; + direction: var(--direction) !important; } `, ]); diff --git a/src/state/translations-mixin.ts b/src/state/translations-mixin.ts index be798b6dc3..10eacb090e 100644 --- a/src/state/translations-mixin.ts +++ b/src/state/translations-mixin.ts @@ -1,6 +1,6 @@ import { atLeastVersion } from "../common/config/version"; import { computeLocalize, LocalizeFunc } from "../common/translations/localize"; -import { computeRTL } from "../common/util/compute_rtl"; +import { computeRTLDirection } from "../common/util/compute_rtl"; import { debounce } from "../common/util/debounce"; import { getHassTranslations, @@ -187,18 +187,10 @@ export default >(superClass: T) => } private _applyDirection(hass: HomeAssistant) { - if (computeRTL(hass)) { - this.style.direction = "rtl"; - // apply custom properties used to fix RTL appearance throughout the system - this.style.setProperty("--rtl-12px", "12px"); - this.style.setProperty("--rtl--8px", "-8px"); - this.style.setProperty("--dir", "rtl"); - } else { - // clear all custom properties (can't use "all" for this) - this.style.cssText = ""; - - this.style.direction = "ltr"; - } + const direction = computeRTLDirection(hass); + this.style.direction = direction; + document.dir = direction; + this.style.setProperty("--direction", direction); } /** From 2040a49458a47668c0ef5993b50d58fadf5bca16 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 11 May 2022 14:21:02 +0200 Subject: [PATCH 5/7] Update var name --- src/panels/config/logs/error-log-card.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/panels/config/logs/error-log-card.ts b/src/panels/config/logs/error-log-card.ts index 313b153644..7bbbf3ff3c 100644 --- a/src/panels/config/logs/error-log-card.ts +++ b/src/panels/config/logs/error-log-card.ts @@ -236,7 +236,7 @@ class ErrorLogCard extends LitElement { } mwc-button { - direction: var(--rtl-dir, ltr); + direction: var(--direction); } `; } From a08a23a93dd5a53016201172a7f410c1c342ee26 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 11 May 2022 14:25:43 +0200 Subject: [PATCH 6/7] Use FabBase --- src/components/ha-fab.ts | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/ha-fab.ts b/src/components/ha-fab.ts index 57f2a2bbf4..da769ad773 100644 --- a/src/components/ha-fab.ts +++ b/src/components/ha-fab.ts @@ -1,23 +1,25 @@ -import { Fab } from "@material/mwc-fab"; +import { FabBase } from "@material/mwc-fab/mwc-fab-base"; +import { styles } from "@material/mwc-fab/mwc-fab.css"; import { customElement } from "lit/decorators"; import { css } from "lit"; @customElement("ha-fab") -export class HaFab extends Fab { +export class HaFab extends FabBase { protected firstUpdated(changedProperties) { super.firstUpdated(changedProperties); this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)"); } - static override styles = Fab.styles.concat([ + static override styles = [ + styles, css` .mdc-fab--extended .mdc-fab__icon { - margin-inline-start: -8px !important; - margin-inline-end: 12px !important; - direction: var(--direction) !important; + margin-inline-start: -8px; + margin-inline-end: 12px; + direction: var(--direction); } `, - ]); + ]; } declare global { From f1b965dcc55a704b8c5fa0169a786e1522184537 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 11 May 2022 15:19:03 +0200 Subject: [PATCH 7/7] Update ha-fab.ts --- src/components/ha-fab.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ha-fab.ts b/src/components/ha-fab.ts index da769ad773..b36871e381 100644 --- a/src/components/ha-fab.ts +++ b/src/components/ha-fab.ts @@ -13,7 +13,7 @@ export class HaFab extends FabBase { static override styles = [ styles, css` - .mdc-fab--extended .mdc-fab__icon { + :host .mdc-fab--extended .mdc-fab__icon { margin-inline-start: -8px; margin-inline-end: 12px; direction: var(--direction);