From 377c37425e0d70473a77ffa6cebfa733c0c2edcf Mon Sep 17 00:00:00 2001 From: Yosi Levy Date: Mon, 20 Jul 2020 07:32:09 +0300 Subject: [PATCH 1/4] Refactor ha-dialog RTL to include dialogs not using createCloseHeader --- src/components/ha-dialog.ts | 6 +++--- .../lovelace/editor/card-editor/hui-dialog-edit-card.ts | 2 ++ 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts index 2b87e25cfa..41d65bc602 100644 --- a/src/components/ha-dialog.ts +++ b/src/components/ha-dialog.ts @@ -5,7 +5,7 @@ import "./ha-icon-button"; import { css, CSSResult, customElement, html } from "lit-element"; import type { Constructor, HomeAssistant } from "../types"; import { mdiClose } from "@mdi/js"; -import { computeRTL } from "../common/util/compute_rtl"; +import { computeRTLDirection } from "../common/util/compute_rtl"; const MwcDialog = customElements.get("mwc-dialog") as Constructor; @@ -14,8 +14,8 @@ export const createCloseHeading = (hass: HomeAssistant, title: string) => html` @@ -61,7 +61,7 @@ export class HaDialog extends MwcDialog { text-decoration: none; color: inherit; } - mwc-icon-button[rtl].header_button { + [dir="rtl"].header_button { right: auto; left: 16px; } diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts index feac4d8ddc..6dfa04595f 100755 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts @@ -30,6 +30,7 @@ import "./hui-card-preview"; import type { EditCardDialogParams } from "./show-edit-card-dialog"; import { getCardDocumentationURL } from "../get-card-documentation-url"; import { mdiHelpCircle } from "@mdi/js"; +import { computeRTLDirection } from "../../../../common/util/compute_rtl"; declare global { // for fire event @@ -133,6 +134,7 @@ export class HuiDialogEditCard extends LitElement { title=${this.hass!.localize("ui.panel.lovelace.menu.help")} target="_blank" rel="noreferrer" + dir=${computeRTLDirection(this.hass)} > From e6b9389b33005c2669745d5d10fc730e28671fd4 Mon Sep 17 00:00:00 2001 From: Yosi Levy Date: Mon, 20 Jul 2020 07:49:09 +0300 Subject: [PATCH 2/4] Fixed heading (concat) to support RTL (name comes last) --- .../editor/card-editor/hui-dialog-edit-card.ts | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts index 6dfa04595f..8ff6fd9bfe 100755 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts @@ -30,7 +30,10 @@ import "./hui-card-preview"; import type { EditCardDialogParams } from "./show-edit-card-dialog"; import { getCardDocumentationURL } from "../get-card-documentation-url"; import { mdiHelpCircle } from "@mdi/js"; -import { computeRTLDirection } from "../../../../common/util/compute_rtl"; +import { + computeRTL, + computeRTLDirection, +} from "../../../../common/util/compute_rtl"; declare global { // for fire event @@ -101,9 +104,16 @@ export class HuiDialogEditCard extends LitElement { let heading: string; if (this._cardConfig && this._cardConfig.type) { - heading = `${this.hass!.localize( - `ui.panel.lovelace.editor.card.${this._cardConfig.type}.name` - )} ${this.hass!.localize("ui.panel.lovelace.editor.edit_card.header")}`; + heading = computeRTL(this.hass) + ? `${this.hass!.localize("ui.panel.lovelace.editor.edit_card.header")} + ${this.hass!.localize( + `ui.panel.lovelace.editor.card.${this._cardConfig.type}.name` + )}` + : `${this.hass!.localize( + `ui.panel.lovelace.editor.card.${this._cardConfig.type}.name` + )} ${this.hass!.localize( + "ui.panel.lovelace.editor.edit_card.header" + )}`; } else if (!this._cardConfig) { heading = this._viewConfig.title ? this.hass!.localize( From cae46453a74843754e830e227912d4fe74d2df38 Mon Sep 17 00:00:00 2001 From: Yosi Levy Date: Mon, 20 Jul 2020 13:56:39 +0300 Subject: [PATCH 3/4] New parameterized label --- .../editor/card-editor/hui-dialog-edit-card.ts | 17 +++++++---------- src/translations/en.json | 1 + 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts index 8ff6fd9bfe..64182158e6 100755 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts @@ -104,16 +104,13 @@ export class HuiDialogEditCard extends LitElement { let heading: string; if (this._cardConfig && this._cardConfig.type) { - heading = computeRTL(this.hass) - ? `${this.hass!.localize("ui.panel.lovelace.editor.edit_card.header")} - ${this.hass!.localize( - `ui.panel.lovelace.editor.card.${this._cardConfig.type}.name` - )}` - : `${this.hass!.localize( - `ui.panel.lovelace.editor.card.${this._cardConfig.type}.name` - )} ${this.hass!.localize( - "ui.panel.lovelace.editor.edit_card.header" - )}`; + heading = this.hass!.localize( + "ui.panel.lovelace.editor.edit_card.typed_header", + "type", + this.hass!.localize( + `ui.panel.lovelace.editor.card.${this._cardConfig.type}.name` + ) + ); } else if (!this._cardConfig) { heading = this._viewConfig.title ? this.hass!.localize( diff --git a/src/translations/en.json b/src/translations/en.json index 9dcdeb92e0..74d57e0d64 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -1898,6 +1898,7 @@ }, "edit_card": { "header": "Card Configuration", + "typed_header": "{type} Card Configuration", "pick_card": "Which card would you like to add?", "pick_card_view_title": "Which card would you like to add to your {name} view?", "toggle_editor": "Toggle Editor", From 6b0589d343c4802791b5c6024aef319db0991cad Mon Sep 17 00:00:00 2001 From: Yosi Levy <37745463+yosilevy@users.noreply.github.com> Date: Mon, 20 Jul 2020 14:30:32 +0300 Subject: [PATCH 4/4] Update lint --- .../lovelace/editor/card-editor/hui-dialog-edit-card.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts index b8c94852c6..0186f24508 100755 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts @@ -30,10 +30,7 @@ import "./hui-card-preview"; import type { EditCardDialogParams } from "./show-edit-card-dialog"; import { getCardDocumentationURL } from "../get-card-documentation-url"; import { mdiHelpCircle } from "@mdi/js"; -import { - computeRTL, - computeRTLDirection, -} from "../../../../common/util/compute_rtl"; +import { computeRTLDirection } from "../../../../common/util/compute_rtl"; import { HassDialog } from "../../../../dialogs/make-dialog-manager"; import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";