Refactor ha-dialog RTL to include dialogs not using createCloseHeader

This commit is contained in:
Yosi Levy 2020-07-20 07:32:09 +03:00
parent ba67b1291f
commit 377c37425e
2 changed files with 5 additions and 3 deletions

View File

@ -5,7 +5,7 @@ import "./ha-icon-button";
import { css, CSSResult, customElement, html } from "lit-element"; import { css, CSSResult, customElement, html } from "lit-element";
import type { Constructor, HomeAssistant } from "../types"; import type { Constructor, HomeAssistant } from "../types";
import { mdiClose } from "@mdi/js"; 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<Dialog>; const MwcDialog = customElements.get("mwc-dialog") as Constructor<Dialog>;
@ -14,8 +14,8 @@ export const createCloseHeading = (hass: HomeAssistant, title: string) => html`
<mwc-icon-button <mwc-icon-button
aria-label=${hass.localize("ui.dialogs.generic.close")} aria-label=${hass.localize("ui.dialogs.generic.close")}
dialogAction="close" dialogAction="close"
?rtl=${computeRTL(hass)}
class="header_button" class="header_button"
dir=${computeRTLDirection(hass)}
> >
<ha-svg-icon path=${mdiClose}></ha-svg-icon> <ha-svg-icon path=${mdiClose}></ha-svg-icon>
</mwc-icon-button> </mwc-icon-button>
@ -61,7 +61,7 @@ export class HaDialog extends MwcDialog {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
} }
mwc-icon-button[rtl].header_button { [dir="rtl"].header_button {
right: auto; right: auto;
left: 16px; left: 16px;
} }

View File

@ -30,6 +30,7 @@ import "./hui-card-preview";
import type { EditCardDialogParams } from "./show-edit-card-dialog"; import type { EditCardDialogParams } from "./show-edit-card-dialog";
import { getCardDocumentationURL } from "../get-card-documentation-url"; import { getCardDocumentationURL } from "../get-card-documentation-url";
import { mdiHelpCircle } from "@mdi/js"; import { mdiHelpCircle } from "@mdi/js";
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
declare global { declare global {
// for fire event // for fire event
@ -133,6 +134,7 @@ export class HuiDialogEditCard extends LitElement {
title=${this.hass!.localize("ui.panel.lovelace.menu.help")} title=${this.hass!.localize("ui.panel.lovelace.menu.help")}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
dir=${computeRTLDirection(this.hass)}
> >
<mwc-icon-button> <mwc-icon-button>
<ha-svg-icon path=${mdiHelpCircle}></ha-svg-icon> <ha-svg-icon path=${mdiHelpCircle}></ha-svg-icon>