RTL fixes - cloud section, ha-formfield, some missing + (mwc-fab)

This commit is contained in:
Yosi Levy 2020-07-05 06:23:35 +03:00
parent f236b76d5c
commit da10da79b3
28 changed files with 252 additions and 160 deletions

View File

@ -5,6 +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";
const MwcDialog = customElements.get("mwc-dialog") as Constructor<Dialog>; const MwcDialog = customElements.get("mwc-dialog") as Constructor<Dialog>;
@ -13,6 +14,7 @@ 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"
> >
<ha-svg-icon path=${mdiClose}></ha-svg-icon> <ha-svg-icon path=${mdiClose}></ha-svg-icon>
@ -48,6 +50,10 @@ export class HaDialog extends MwcDialog {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
} }
mwc-icon-button[rtl].header_button {
right: auto;
left: 16px;
}
`, `,
]; ];
} }

View File

@ -17,9 +17,9 @@ export class HaFormfield extends MwcFormfield {
::slotted(ha-switch) { ::slotted(ha-switch) {
margin-right: 10px; margin-right: 10px;
} }
[dir="rtl"] ::slotted(ha-switch), :host([dir="rtl"]:not([alignEnd])) ::slotted(ha-switch) {
::slotted(ha-switch)[dir="rtl"] {
margin-left: 10px; margin-left: 10px;
margin-right: auto;
} }
`, `,
]; ];

View File

@ -22,6 +22,7 @@ import type { PolymerChangedEvent } from "../../polymer-types";
import { haStyleDialog } from "../../resources/styles"; import { haStyleDialog } from "../../resources/styles";
import type { HomeAssistant } from "../../types"; import type { HomeAssistant } from "../../types";
import { ConfigEntrySystemOptionsDialogParams } from "./show-dialog-config-entry-system-options"; import { ConfigEntrySystemOptionsDialogParams } from "./show-dialog-config-entry-system-options";
import { computeRTLDirection } from "../../common/util/compute_rtl";
@customElement("dialog-config-entry-system-options") @customElement("dialog-config-entry-system-options")
class DialogConfigEntrySystemOptions extends LitElement { class DialogConfigEntrySystemOptions extends LitElement {
@ -99,6 +100,7 @@ class DialogConfigEntrySystemOptions extends LitElement {
) || this._params.entry.domain ) || this._params.entry.domain
)} )}
</p>`} </p>`}
.dir="${computeRTLDirection(this.hass)}"
> >
<ha-switch <ha-switch
.checked=${!this._disableNewEntities} .checked=${!this._disableNewEntities}

View File

@ -10,6 +10,7 @@ import { fetchCloudSubscriptionInfo } from "../../../../data/cloud";
import "../../../../layouts/hass-subpage"; import "../../../../layouts/hass-subpage";
import { EventsMixin } from "../../../../mixins/events-mixin"; import { EventsMixin } from "../../../../mixins/events-mixin";
import LocalizeMixin from "../../../../mixins/localize-mixin"; import LocalizeMixin from "../../../../mixins/localize-mixin";
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
import "../../../../styles/polymer-ha-style"; import "../../../../styles/polymer-ha-style";
import "../../ha-config-section"; import "../../ha-config-section";
import "./cloud-alexa-pref"; import "./cloud-alexa-pref";
@ -33,7 +34,6 @@ class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
} }
.content { .content {
padding-bottom: 24px; padding-bottom: 24px;
direction: ltr;
} }
.account-row { .account-row {
display: flex; display: flex;
@ -132,21 +132,25 @@ class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
<cloud-remote-pref <cloud-remote-pref
hass="[[hass]]" hass="[[hass]]"
cloud-status="[[cloudStatus]]" cloud-status="[[cloudStatus]]"
dir="[[_rtlDirection]]"
></cloud-remote-pref> ></cloud-remote-pref>
<cloud-alexa-pref <cloud-alexa-pref
hass="[[hass]]" hass="[[hass]]"
cloud-status="[[cloudStatus]]" cloud-status="[[cloudStatus]]"
dir="[[_rtlDirection]]"
></cloud-alexa-pref> ></cloud-alexa-pref>
<cloud-google-pref <cloud-google-pref
hass="[[hass]]" hass="[[hass]]"
cloud-status="[[cloudStatus]]" cloud-status="[[cloudStatus]]"
dir="[[_rtlDirection]]"
></cloud-google-pref> ></cloud-google-pref>
<cloud-webhooks <cloud-webhooks
hass="[[hass]]" hass="[[hass]]"
cloud-status="[[cloudStatus]]" cloud-status="[[cloudStatus]]"
dir="[[_rtlDirection]]"
></cloud-webhooks> ></cloud-webhooks>
</ha-config-section> </ha-config-section>
</div> </div>
@ -163,6 +167,10 @@ class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
type: Object, type: Object,
value: null, value: null,
}, },
_rtlDirection: {
type: Boolean,
computed: "_computeRTLDirection(hass)",
},
}; };
} }
@ -215,6 +223,10 @@ class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
return description; return description;
} }
_computeRTLDirection(hass) {
return computeRTLDirection(hass);
}
} }
customElements.define("cloud-account", CloudAccount); customElements.define("cloud-account", CloudAccount);

View File

@ -167,6 +167,10 @@ export class CloudAlexaPref extends LitElement {
right: 24px; right: 24px;
top: 32px; top: 32px;
} }
:host([dir="rtl"]) .switch {
right: auto;
left: 24px;
}
.card-actions { .card-actions {
display: flex; display: flex;
} }

View File

@ -205,6 +205,10 @@ export class CloudGooglePref extends LitElement {
right: 24px; right: 24px;
top: 32px; top: 32px;
} }
:host([dir="rtl"]) .switch {
right: auto;
left: 24px;
}
ha-call-api-button { ha-call-api-button {
color: var(--primary-color); color: var(--primary-color);
font-weight: 500; font-weight: 500;

View File

@ -150,6 +150,10 @@ export class CloudRemotePref extends LitElement {
right: 24px; right: 24px;
top: 32px; top: 32px;
} }
:host([dir="rtl"]) .switch {
right: auto;
left: 24px;
}
.card-actions { .card-actions {
display: flex; display: flex;
} }

View File

@ -34,6 +34,7 @@ import "../../../../layouts/hass-loading-screen";
import "../../../../layouts/hass-subpage"; import "../../../../layouts/hass-subpage";
import type { HomeAssistant } from "../../../../types"; import type { HomeAssistant } from "../../../../types";
import "../../../../components/ha-formfield"; import "../../../../components/ha-formfield";
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
const DEFAULT_CONFIG_EXPOSE = true; const DEFAULT_CONFIG_EXPOSE = true;
const IGNORE_INTERFACES = ["Alexa.EndpointHealth"]; const IGNORE_INTERFACES = ["Alexa.EndpointHealth"];
@ -132,6 +133,7 @@ class CloudAlexa extends LitElement {
.label=${this.hass!.localize( .label=${this.hass!.localize(
"ui.panel.config.cloud.alexa.expose" "ui.panel.config.cloud.alexa.expose"
)} )}
.dir="${computeRTLDirection(this.hass!)}"
> >
<ha-switch <ha-switch
.entityId=${entity.entity_id} .entityId=${entity.entity_id}

View File

@ -19,7 +19,6 @@ class CloudForgotPassword extends LocalizeMixin(EventsMixin(PolymerElement)) {
<style include="iron-flex ha-style"> <style include="iron-flex ha-style">
.content { .content {
padding-bottom: 24px; padding-bottom: 24px;
direction: ltr;
} }
ha-card { ha-card {

View File

@ -39,6 +39,7 @@ import "../../../../layouts/hass-subpage";
import type { HomeAssistant } from "../../../../types"; import type { HomeAssistant } from "../../../../types";
import { showToast } from "../../../../util/toast"; import { showToast } from "../../../../util/toast";
import "../../../../components/ha-formfield"; import "../../../../components/ha-formfield";
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
const DEFAULT_CONFIG_EXPOSE = true; const DEFAULT_CONFIG_EXPOSE = true;
@ -128,32 +129,38 @@ class CloudGoogleAssistant extends LitElement {
.map((trait) => trait.substr(trait.lastIndexOf(".") + 1)) .map((trait) => trait.substr(trait.lastIndexOf(".") + 1))
.join(", ")} .join(", ")}
</state-info> </state-info>
<ha-formfield <div>
.label=${this.hass!.localize( <ha-formfield
"ui.panel.config.cloud.google.expose" .label=${this.hass!.localize(
)} "ui.panel.config.cloud.google.expose"
> )}
<ha-switch .dir="${computeRTLDirection(this.hass!)}"
.entityId=${entity.entity_id}
.disabled=${!emptyFilter}
.checked=${isExposed}
@change=${this._exposeChanged}
> >
</ha-switch> <ha-switch
</ha-formfield> .entityId=${entity.entity_id}
.disabled=${!emptyFilter}
.checked=${isExposed}
@change=${this._exposeChanged}
>
</ha-switch>
</ha-formfield>
</div>
${entity.might_2fa ${entity.might_2fa
? html` ? html`
<ha-formfield <div>
.label=${this.hass!.localize( <ha-formfield
"ui.panel.config.cloud.google.disable_2FA" .label=${this.hass!.localize(
)} "ui.panel.config.cloud.google.disable_2FA"
> )}
<ha-switch .dir="${computeRTLDirection(this.hass!)}"
.entityId=${entity.entity_id} >
.checked=${Boolean(config.disable_2fa)} <ha-switch
@change=${this._disable2FAChanged} .entityId=${entity.entity_id}
></ha-switch> .checked=${Boolean(config.disable_2fa)}
</ha-formfield> @change=${this._disable2FAChanged}
></ha-switch>
</ha-formfield>
</div>
` `
: ""} : ""}
</div> </div>
@ -377,9 +384,6 @@ class CloudGoogleAssistant extends LitElement {
state-info { state-info {
cursor: pointer; cursor: pointer;
} }
ha-formfield {
display: block;
}
ha-switch { ha-switch {
padding: 8px 0; padding: 8px 0;
} }

View File

@ -30,7 +30,6 @@ class CloudLogin extends LocalizeMixin(
<style include="iron-flex ha-style"> <style include="iron-flex ha-style">
.content { .content {
padding-bottom: 24px; padding-bottom: 24px;
direction: ltr;
} }
[slot="introduction"] { [slot="introduction"] {
margin: -1em 0; margin: -1em 0;

View File

@ -18,10 +18,6 @@ class CloudRegister extends LocalizeMixin(EventsMixin(PolymerElement)) {
static get template() { static get template() {
return html` return html`
<style include="iron-flex ha-style"> <style include="iron-flex ha-style">
.content {
direction: ltr;
}
[slot=introduction] { [slot=introduction] {
margin: -1em 0; margin: -1em 0;
} }

View File

@ -23,6 +23,7 @@ import { HomeAssistant } from "../../../../../../types";
import "./mqtt-discovery-payload"; import "./mqtt-discovery-payload";
import "./mqtt-messages"; import "./mqtt-messages";
import { MQTTDeviceDebugInfoDialogParams } from "./show-dialog-mqtt-device-debug-info"; import { MQTTDeviceDebugInfoDialogParams } from "./show-dialog-mqtt-device-debug-info";
import { computeRTLDirection } from "../../../../../../common/util/compute_rtl";
@customElement("dialog-mqtt-device-debug-info") @customElement("dialog-mqtt-device-debug-info")
class DialogMQTTDeviceDebugInfo extends LitElement { class DialogMQTTDeviceDebugInfo extends LitElement {
@ -65,28 +66,34 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
"ui.dialogs.mqtt_device_debug_info.payload_display" "ui.dialogs.mqtt_device_debug_info.payload_display"
)} )}
</h4> </h4>
<ha-formfield <div>
.label=${this.hass!.localize( <ha-formfield
"ui.dialogs.mqtt_device_debug_info.deserialize" .label=${this.hass!.localize(
)} "ui.dialogs.mqtt_device_debug_info.deserialize"
> )}
<ha-switch .dir="${computeRTLDirection(this.hass)}"
.checked=${this._showDeserialized}
@change=${this._showDeserializedChanged}
> >
</ha-switch> <ha-switch
</ha-formfield> .checked=${this._showDeserialized}
<ha-formfield @change=${this._showDeserializedChanged}
.label=${this.hass!.localize( >
"ui.dialogs.mqtt_device_debug_info.show_as_yaml" </ha-switch>
)} </ha-formfield>
> </div>
<ha-switch <div>
.checked=${this._showAsYaml} <ha-formfield
@change=${this._showAsYamlChanged} .label=${this.hass!.localize(
"ui.dialogs.mqtt_device_debug_info.show_as_yaml"
)}
.dir="${computeRTLDirection(this.hass)}"
> >
</ha-switch> <ha-switch
</ha-formfield> .checked=${this._showAsYaml}
@change=${this._showAsYamlChanged}
>
</ha-switch>
</ha-formfield>
</div>
<h4> <h4>
${this.hass!.localize("ui.dialogs.mqtt_device_debug_info.entities")} ${this.hass!.localize("ui.dialogs.mqtt_device_debug_info.entities")}
</h4> </h4>
@ -232,9 +239,6 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
.triggerlistitem { .triggerlistitem {
margin-bottom: 12px; margin-bottom: 12px;
} }
ha-formfield {
display: block;
}
`, `,
]; ];
} }

View File

@ -24,6 +24,7 @@ import { PolymerChangedEvent } from "../../../../polymer-types";
import { haStyleDialog } from "../../../../resources/styles"; import { haStyleDialog } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types"; import { HomeAssistant } from "../../../../types";
import { LovelaceDashboardDetailsDialogParams } from "./show-dialog-lovelace-dashboard-detail"; import { LovelaceDashboardDetailsDialogParams } from "./show-dialog-lovelace-dashboard-detail";
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
@customElement("dialog-lovelace-dashboard-detail") @customElement("dialog-lovelace-dashboard-detail")
export class DialogLovelaceDashboardDetail extends LitElement { export class DialogLovelaceDashboardDetail extends LitElement {
@ -143,28 +144,34 @@ export class DialogLovelaceDashboardDetail extends LitElement {
></paper-input> ></paper-input>
` `
: ""} : ""}
<ha-formfield <div>
.label=${this.hass.localize( <ha-formfield
"ui.panel.config.lovelace.dashboards.detail.show_sidebar" .label=${this.hass.localize(
)} "ui.panel.config.lovelace.dashboards.detail.show_sidebar"
> )}
<ha-switch .dir="${computeRTLDirection(this.hass)}"
.checked=${this._showInSidebar}
@change=${this._showSidebarChanged}
> >
</ha-switch> <ha-switch
</ha-formfield> .checked=${this._showInSidebar}
<ha-formfield @change=${this._showSidebarChanged}
.label=${this.hass.localize( >
"ui.panel.config.lovelace.dashboards.detail.require_admin" </ha-switch>
)} </ha-formfield>
> </div>
<ha-switch <div>
.checked=${this._requireAdmin} <ha-formfield
@change=${this._requireAdminChanged} .label=${this.hass.localize(
"ui.panel.config.lovelace.dashboards.detail.require_admin"
)}
.dir="${computeRTLDirection(this.hass)}"
> >
</ha-switch> <ha-switch
</ha-formfield> .checked=${this._requireAdmin}
@change=${this._requireAdminChanged}
>
</ha-switch>
</ha-formfield>
</div>
</div> </div>
`} `}
</div> </div>
@ -318,9 +325,6 @@ export class DialogLovelaceDashboardDetail extends LitElement {
ha-switch { ha-switch {
padding: 16px 0; padding: 16px 0;
} }
ha-formfield {
display: block;
}
`, `,
]; ];
} }

View File

@ -36,6 +36,7 @@ import { lovelaceTabs } from "../ha-config-lovelace";
import { showDashboardDetailDialog } from "./show-dialog-lovelace-dashboard-detail"; import { showDashboardDetailDialog } from "./show-dialog-lovelace-dashboard-detail";
import "../../../../components/ha-svg-icon"; import "../../../../components/ha-svg-icon";
import { mdiPlus } from "@mdi/js"; import { mdiPlus } from "@mdi/js";
import { computeRTL } from "../../../../common/util/compute_rtl";
@customElement("ha-config-lovelace-dashboards") @customElement("ha-config-lovelace-dashboards")
export class HaConfigLovelaceDashboards extends LitElement { export class HaConfigLovelaceDashboards extends LitElement {
@ -227,6 +228,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
<mwc-fab <mwc-fab
?is-wide=${this.isWide} ?is-wide=${this.isWide}
?narrow=${this.narrow} ?narrow=${this.narrow}
?rtl=${computeRTL(this.hass)}
title="${this.hass.localize( title="${this.hass.localize(
"ui.panel.config.lovelace.dashboards.picker.add_dashboard" "ui.panel.config.lovelace.dashboards.picker.add_dashboard"
)}" )}"
@ -324,6 +326,10 @@ export class HaConfigLovelaceDashboards extends LitElement {
mwc-fab[narrow] { mwc-fab[narrow] {
bottom: 84px; bottom: 84px;
} }
mwc-fab[rtl] {
left: 16px;
right: auto;
}
`; `;
} }
} }

View File

@ -26,6 +26,7 @@ import { PolymerChangedEvent } from "../../../polymer-types";
import { haStyleDialog } from "../../../resources/styles"; import { haStyleDialog } from "../../../resources/styles";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { AddUserDialogParams } from "./show-dialog-add-user"; import { AddUserDialogParams } from "./show-dialog-add-user";
import { computeRTLDirection } from "../../../common/util/compute_rtl";
@customElement("dialog-add-user") @customElement("dialog-add-user")
export class DialogAddUser extends LitElement { export class DialogAddUser extends LitElement {
@ -115,6 +116,7 @@ export class DialogAddUser extends LitElement {
></paper-input> ></paper-input>
<ha-formfield <ha-formfield
.label=${this.hass.localize("ui.panel.config.users.editor.admin")} .label=${this.hass.localize("ui.panel.config.users.editor.admin")}
.dir="${computeRTLDirection(this.hass)}"
> >
<ha-switch .checked=${this._isAdmin} @change=${this._adminChanged}> <ha-switch .checked=${this._isAdmin} @change=${this._adminChanged}>
</ha-switch> </ha-switch>

View File

@ -21,6 +21,7 @@ import { PolymerChangedEvent } from "../../../polymer-types";
import { haStyleDialog } from "../../../resources/styles"; import { haStyleDialog } from "../../../resources/styles";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { UserDetailDialogParams } from "./show-dialog-user-detail"; import { UserDetailDialogParams } from "./show-dialog-user-detail";
import { computeRTLDirection } from "../../../common/util/compute_rtl";
@customElement("dialog-user-detail") @customElement("dialog-user-detail")
class DialogUserDetail extends LitElement { class DialogUserDetail extends LitElement {
@ -102,6 +103,7 @@ class DialogUserDetail extends LitElement {
></paper-input> ></paper-input>
<ha-formfield <ha-formfield
.label=${this.hass.localize("ui.panel.config.users.editor.admin")} .label=${this.hass.localize("ui.panel.config.users.editor.admin")}
.dir="${computeRTLDirection(this.hass)}"
> >
<ha-switch <ha-switch
.disabled=${user.system_generated} .disabled=${user.system_generated}

View File

@ -22,6 +22,7 @@ import {
import { haStyleDialog } from "../../../resources/styles"; import { haStyleDialog } from "../../../resources/styles";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { ZoneDetailDialogParams } from "./show-dialog-zone-detail"; import { ZoneDetailDialogParams } from "./show-dialog-zone-detail";
import { computeRTLDirection } from "../../../common/util/compute_rtl";
class DialogZoneDetail extends LitElement { class DialogZoneDetail extends LitElement {
@property() public hass!: HomeAssistant; @property() public hass!: HomeAssistant;
@ -186,6 +187,7 @@ class DialogZoneDetail extends LitElement {
.label=${this.hass!.localize( .label=${this.hass!.localize(
"ui.panel.config.zone.detail.passive" "ui.panel.config.zone.detail.passive"
)} )}
.dir="${computeRTLDirection(this.hass)}"
> >
<ha-switch <ha-switch
.checked=${this._passive} .checked=${this._passive}

View File

@ -50,6 +50,7 @@ import type { HomeAssistant, Route } from "../../../types";
import "../ha-config-section"; import "../ha-config-section";
import { configSections } from "../ha-panel-config"; import { configSections } from "../ha-panel-config";
import { showZoneDetailDialog } from "./show-dialog-zone-detail"; import { showZoneDetailDialog } from "./show-dialog-zone-detail";
import { computeRTL } from "../../../common/util/compute_rtl";
@customElement("ha-config-zone") @customElement("ha-config-zone")
export class HaConfigZone extends SubscribeMixin(LitElement) { export class HaConfigZone extends SubscribeMixin(LitElement) {
@ -258,6 +259,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
<mwc-fab <mwc-fab
?is-wide=${this.isWide} ?is-wide=${this.isWide}
?narrow=${this.narrow} ?narrow=${this.narrow}
?rtl=${computeRTL(this.hass)}
title="${hass.localize("ui.panel.config.zone.add_zone")}" title="${hass.localize("ui.panel.config.zone.add_zone")}"
@click=${this._createZone} @click=${this._createZone}
> >
@ -554,6 +556,10 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
mwc-fab[narrow] { mwc-fab[narrow] {
bottom: 84px; bottom: 84px;
} }
mwc-fab[rtl] {
left: 24px;
right: auto;
}
`; `;
} }
} }

View File

@ -25,6 +25,7 @@ import {
import "../../../../components/ha-switch"; import "../../../../components/ha-switch";
import "../../../../components/ha-formfield"; import "../../../../components/ha-formfield";
import { configElementStyle } from "./config-elements-style"; import { configElementStyle } from "./config-elements-style";
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
const cardConfigStruct = struct({ const cardConfigStruct = struct({
type: "string", type: "string",
@ -143,28 +144,34 @@ export class HuiButtonCardEditor extends LitElement
></ha-icon-input> ></ha-icon-input>
</div> </div>
<div class="side-by-side"> <div class="side-by-side">
<ha-formfield <div>
.label=${this.hass.localize( <ha-formfield
"ui.panel.lovelace.editor.card.generic.show_name" .label=${this.hass.localize(
)} "ui.panel.lovelace.editor.card.generic.show_name"
> )}
<ha-switch .dir="${computeRTLDirection(this.hass)}"
.checked="${this._config!.show_name !== false}" >
.configValue="${"show_name"}" <ha-switch
@change="${this._valueChanged}" .checked="${this._config!.show_name !== false}"
></ha-switch> .configValue="${"show_name"}"
</ha-formfield> @change="${this._valueChanged}"
<ha-formfield ></ha-switch>
.label=${this.hass.localize( </ha-formfield>
"ui.panel.lovelace.editor.card.generic.show_icon" </div>
)} <div>
> <ha-formfield
<ha-switch .label=${this.hass.localize(
.checked="${this._config!.show_icon !== false}" "ui.panel.lovelace.editor.card.generic.show_icon"
.configValue="${"show_icon"}" )}
@change="${this._valueChanged}" .dir="${computeRTLDirection(this.hass)}"
></ha-switch> >
</ha-formfield> <ha-switch
.checked="${this._config!.show_icon !== false}"
.configValue="${"show_icon"}"
@change="${this._valueChanged}"
></ha-switch>
</ha-formfield>
</div>
</div> </div>
<div class="side-by-side"> <div class="side-by-side">
<paper-input <paper-input

View File

@ -31,6 +31,7 @@ import {
EntitiesEditorEvent, EntitiesEditorEvent,
} from "../types"; } from "../types";
import { configElementStyle } from "./config-elements-style"; import { configElementStyle } from "./config-elements-style";
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
const cardConfigStruct = struct({ const cardConfigStruct = struct({
type: "string", type: "string",
@ -93,6 +94,7 @@ export class HuiEntitiesCardEditor extends LitElement
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.lovelace.editor.card.entities.show_header_toggle" "ui.panel.lovelace.editor.card.entities.show_header_toggle"
)} )}
.dir="${computeRTLDirection(this.hass)}"
> >
<ha-switch <ha-switch
.checked="${this._config!.show_header_toggle !== false}" .checked="${this._config!.show_header_toggle !== false}"

View File

@ -19,6 +19,7 @@ import "../../components/hui-theme-select-editor";
import { LovelaceCardEditor } from "../../types"; import { LovelaceCardEditor } from "../../types";
import { EditorTarget, EntitiesEditorEvent } from "../types"; import { EditorTarget, EntitiesEditorEvent } from "../types";
import { configElementStyle } from "./config-elements-style"; import { configElementStyle } from "./config-elements-style";
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
const cardConfigStruct = struct({ const cardConfigStruct = struct({
type: "string", type: "string",
@ -146,6 +147,7 @@ export class HuiGaugeCardEditor extends LitElement
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.lovelace.editor.card.gauge.severity.define" "ui.panel.lovelace.editor.card.gauge.severity.define"
)} )}
.dir="${computeRTLDirection(this.hass)}"
> >
<ha-switch <ha-switch
.checked="${this._config!.severity !== undefined}" .checked="${this._config!.severity !== undefined}"

View File

@ -27,6 +27,7 @@ import {
EntitiesEditorEvent, EntitiesEditorEvent,
} from "../types"; } from "../types";
import { configElementStyle } from "./config-elements-style"; import { configElementStyle } from "./config-elements-style";
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
const cardConfigStruct = struct({ const cardConfigStruct = struct({
type: "string", type: "string",
@ -116,41 +117,50 @@ export class HuiGlanceCardEditor extends LitElement
></paper-input> ></paper-input>
</div> </div>
<div class="side-by-side"> <div class="side-by-side">
<ha-formfield <div>
.label=${this.hass.localize( <ha-formfield
"ui.panel.lovelace.editor.card.generic.show_name" .label=${this.hass.localize(
)} "ui.panel.lovelace.editor.card.generic.show_name"
> )}
<ha-switch .dir="${computeRTLDirection(this.hass)}"
.checked=${this._config!.show_name !== false}
.configValue="${"show_name"}"
@change="${this._valueChanged}"
></ha-switch>
</ha-formfield>
<ha-formfield
.label=${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.show_icon"
)}
>
<ha-switch
.checked=${this._config!.show_icon !== false}
.configValue="${"show_icon"}"
@change="${this._valueChanged}"
> >
</ha-switch> <ha-switch
</ha-formfield> .checked=${this._config!.show_name !== false}
<ha-formfield .configValue="${"show_name"}"
.label=${this.hass.localize( @change="${this._valueChanged}"
"ui.panel.lovelace.editor.card.generic.show_state" ></ha-switch>
)} </ha-formfield>
> </div>
<ha-switch <div>
.checked=${this._config!.show_state !== false} <ha-formfield
.configValue="${"show_state"}" .label=${this.hass.localize(
@change="${this._valueChanged}" "ui.panel.lovelace.editor.card.generic.show_icon"
)}
.dir="${computeRTLDirection(this.hass)}"
> >
</ha-switch> <ha-switch
</ha-formfield> .checked=${this._config!.show_icon !== false}
.configValue="${"show_icon"}"
@change="${this._valueChanged}"
>
</ha-switch>
</ha-formfield>
</div>
<div>
<ha-formfield
.label=${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.show_state"
)}
.dir="${computeRTLDirection(this.hass)}"
>
<ha-switch
.checked=${this._config!.show_state !== false}
.configValue="${"show_state"}"
@change="${this._valueChanged}"
>
</ha-switch>
</ha-formfield>
</div>
</div> </div>
</div> </div>
<hui-entity-editor <hui-entity-editor

View File

@ -26,6 +26,7 @@ import {
import "../../../../components/ha-switch"; import "../../../../components/ha-switch";
import "../../../../components/ha-formfield"; import "../../../../components/ha-formfield";
import { configElementStyle } from "./config-elements-style"; import { configElementStyle } from "./config-elements-style";
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
const cardConfigStruct = struct({ const cardConfigStruct = struct({
type: "string", type: "string",
@ -124,6 +125,7 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.lovelace.editor.card.map.dark_mode" "ui.panel.lovelace.editor.card.map.dark_mode"
)} )}
.dir="${computeRTLDirection(this.hass)}"
> >
<ha-switch <ha-switch
.checked="${this._dark_mode}" .checked="${this._dark_mode}"

View File

@ -26,6 +26,7 @@ import {
EntitiesEditorEvent, EntitiesEditorEvent,
} from "../types"; } from "../types";
import { configElementStyle } from "./config-elements-style"; import { configElementStyle } from "./config-elements-style";
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
const cardConfigStruct = struct({ const cardConfigStruct = struct({
type: "string", type: "string",
@ -188,28 +189,34 @@ export class HuiPictureEntityCardEditor extends LitElement
></paper-input> ></paper-input>
</div> </div>
<div class="side-by-side"> <div class="side-by-side">
<ha-formfield <div>
.label=${this.hass.localize( <ha-formfield
"ui.panel.lovelace.editor.card.generic.show_name" .label=${this.hass.localize(
)} "ui.panel.lovelace.editor.card.generic.show_name"
> )}
<ha-switch .dir="${computeRTLDirection(this.hass)}"
.checked="${this._config!.show_name !== false}" >
.configValue="${"show_name"}" <ha-switch
@change="${this._valueChanged}" .checked="${this._config!.show_name !== false}"
></ha-switch .configValue="${"show_name"}"
></ha-formfield> @change="${this._valueChanged}"
<ha-formfield ></ha-switch
.label=${this.hass.localize( ></ha-formfield>
"ui.panel.lovelace.editor.card.generic.show_state" </div>
)} <div>
> <ha-formfield
<ha-switch .label=${this.hass.localize(
.checked="${this._config!.show_state !== false}" "ui.panel.lovelace.editor.card.generic.show_state"
.configValue="${"show_state"}" )}
@change="${this._valueChanged}" .dir="${computeRTLDirection(this.hass)}"
></ha-switch >
></ha-formfield> <ha-switch
.checked="${this._config!.show_state !== false}"
.configValue="${"show_state"}"
@change="${this._valueChanged}"
></ha-switch
></ha-formfield>
</div>
</div> </div>
<div class="side-by-side"> <div class="side-by-side">
<hui-action-editor <hui-action-editor

View File

@ -16,6 +16,7 @@ import "../../components/hui-theme-select-editor";
import { LovelaceCardEditor } from "../../types"; import { LovelaceCardEditor } from "../../types";
import { EditorTarget, EntitiesEditorEvent } from "../types"; import { EditorTarget, EntitiesEditorEvent } from "../types";
import { configElementStyle } from "./config-elements-style"; import { configElementStyle } from "./config-elements-style";
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
const cardConfigStruct = struct({ const cardConfigStruct = struct({
type: "string", type: "string",
@ -114,6 +115,7 @@ export class HuiWeatherForecastCardEditor extends LitElement
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.lovelace.editor.card.weather-forecast.show_forecast" "ui.panel.lovelace.editor.card.weather-forecast.show_forecast"
)} )}
.dir="${computeRTLDirection(this.hass)}"
> >
<ha-switch <ha-switch
.checked=${this._config!.show_forecast !== false} .checked=${this._config!.show_forecast !== false}

View File

@ -21,6 +21,7 @@ import type { PolymerChangedEvent } from "../../../polymer-types";
import { haStyleDialog } from "../../../resources/styles"; import { haStyleDialog } from "../../../resources/styles";
import type { HomeAssistant } from "../../../types"; import type { HomeAssistant } from "../../../types";
import type { SaveDialogParams } from "./show-save-config-dialog"; import type { SaveDialogParams } from "./show-save-config-dialog";
import { computeRTLDirection } from "../../../common/util/compute_rtl";
const EMPTY_CONFIG = { views: [] }; const EMPTY_CONFIG = { views: [] };
@ -77,6 +78,7 @@ export class HuiSaveConfig extends LitElement {
.label=${this.hass!.localize( .label=${this.hass!.localize(
"ui.panel.lovelace.editor.save_config.empty_config" "ui.panel.lovelace.editor.save_config.empty_config"
)} )}
.dir="${computeRTLDirection(this.hass)}"
> >
<ha-switch <ha-switch
.checked=${this._emptyConfig} .checked=${this._emptyConfig}

View File

@ -18,6 +18,7 @@ import { HomeAssistant } from "../../../../types";
import "../../components/hui-theme-select-editor"; import "../../components/hui-theme-select-editor";
import { configElementStyle } from "../config-elements/config-elements-style"; import { configElementStyle } from "../config-elements/config-elements-style";
import { EditorTarget } from "../types"; import { EditorTarget } from "../types";
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
declare global { declare global {
interface HASSDomEvents { interface HASSDomEvents {
@ -126,6 +127,7 @@ export class HuiViewEditor extends LitElement {
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.lovelace.editor.view.panel_mode.title" "ui.panel.lovelace.editor.view.panel_mode.title"
)} )}
.dir="${computeRTLDirection(this.hass!)}"
> >
<ha-switch <ha-switch
.checked=${this._panel !== false} .checked=${this._panel !== false}
@ -180,8 +182,6 @@ export class HuiViewEditor extends LitElement {
return css` return css`
.panel { .panel {
color: var(--secondary-text-color); color: var(--secondary-text-color);
}
ha-formfield {
display: block; display: block;
} }
`; `;