diff --git a/src/common/util/compute_rtl.ts b/src/common/util/compute_rtl.ts new file mode 100644 index 0000000000..62be0a1c7e --- /dev/null +++ b/src/common/util/compute_rtl.ts @@ -0,0 +1,9 @@ +import { HomeAssistant } from "../../types"; + +export function computeRTL(hass: HomeAssistant) { + const lang = hass.language || "en"; + if (hass.translationMetadata.translations[lang]) { + return hass.translationMetadata.translations[lang].isRTL || false; + } + return false; +} diff --git a/src/components/entity/state-info.js b/src/components/entity/state-info.js index 64b67da2e5..d2859d15d5 100644 --- a/src/components/entity/state-info.js +++ b/src/components/entity/state-info.js @@ -4,6 +4,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element"; import "../ha-relative-time"; import "./state-badge"; import computeStateName from "../../common/entity/compute_state_name"; +import { computeRTL } from "../../common/util/compute_rtl"; class StateInfo extends PolymerElement { static get template() { @@ -25,10 +26,20 @@ class StateInfo extends PolymerElement { float: left; } + :host([rtl]) state-badge { + float: right; + } + .info { margin-left: 56px; } + :host([rtl]) .info { + margin-right: 56px; + margin-left: 0; + text-align: right; + } + .name { @apply --paper-font-common-nowrap; color: var(--primary-text-color); @@ -87,12 +98,21 @@ class StateInfo extends PolymerElement { hass: Object, stateObj: Object, inDialog: Boolean, + rtl: { + type: Boolean, + reflectToAttribute: true, + computed: "computeRTL(hass)", + }, }; } computeStateName(stateObj) { return computeStateName(stateObj); } + + computeRTL(hass) { + return computeRTL(hass); + } } customElements.define("state-info", StateInfo); diff --git a/src/dialogs/more-info/more-info-controls.js b/src/dialogs/more-info/more-info-controls.js index fc639af560..e608b5e9dd 100644 --- a/src/dialogs/more-info/more-info-controls.js +++ b/src/dialogs/more-info/more-info-controls.js @@ -16,6 +16,7 @@ import computeStateDomain from "../../common/entity/compute_state_domain"; import isComponentLoaded from "../../common/config/is_component_loaded"; import { DOMAINS_MORE_INFO_NO_HISTORY } from "../../common/const"; import EventsMixin from "../../mixins/events-mixin"; +import { computeRTL } from "../../common/util/compute_rtl"; const DOMAINS_NO_INFO = ["camera", "configurator", "history_graph"]; /* @@ -58,6 +59,11 @@ class MoreInfoControls extends EventsMixin(PolymerElement) { :host([domain="camera"]) paper-dialog-scrollable { margin: 0 -24px -21px; } + + :host([rtl]) app-toolbar { + direction: rtl; + text-align: right; + } @@ -147,6 +153,11 @@ class MoreInfoControls extends EventsMixin(PolymerElement) { hoursToShow: 24, }, }, + rtl: { + type: Boolean, + reflectToAttribute: true, + computed: "_computeRTL(hass)", + }, }; } @@ -190,5 +201,9 @@ class MoreInfoControls extends EventsMixin(PolymerElement) { _gotoSettings() { this.fire("more-info-page", { page: "settings" }); } + + _computeRTL(hass) { + return computeRTL(hass); + } } customElements.define("more-info-controls", MoreInfoControls); diff --git a/src/layouts/home-assistant-main.js b/src/layouts/home-assistant-main.js index 61a38b7bdc..624c2ad558 100644 --- a/src/layouts/home-assistant-main.js +++ b/src/layouts/home-assistant-main.js @@ -12,6 +12,7 @@ import "./partial-cards"; import "./partial-panel-resolver"; import EventsMixin from "../mixins/events-mixin"; import NavigateMixin from "../mixins/navigate-mixin"; +import { computeRTL } from "../common/util/compute_rtl"; import(/* webpackChunkName: "ha-sidebar" */ "../components/ha-sidebar"); import(/* webpackChunkName: "voice-command-dialog" */ "../dialogs/ha-voice-command-dialog"); @@ -115,7 +116,7 @@ class HomeAssistantMain extends NavigateMixin(EventsMixin(PolymerElement)) { rtl: { type: Boolean, reflectToAttribute: true, - computed: "computeRTL(hass)", + computed: "_computeRTL(hass)", }, }; } @@ -175,12 +176,8 @@ class HomeAssistantMain extends NavigateMixin(EventsMixin(PolymerElement)) { return NON_SWIPABLE_PANELS.indexOf(hass.panelUrl) !== -1; } - computeRTL(hass) { - var lang = hass.selectedLanguage || hass.language; - if (hass.translationMetadata.translations[lang]) { - return hass.translationMetadata.translations[lang].isRTL || false; - } - return false; + _computeRTL(hass) { + return computeRTL(hass); } } diff --git a/src/state-summary/state-card-display.js b/src/state-summary/state-card-display.js index 7414666cd2..050a093c2c 100644 --- a/src/state-summary/state-card-display.js +++ b/src/state-summary/state-card-display.js @@ -7,6 +7,7 @@ import LocalizeMixin from "../mixins/localize-mixin"; import computeStateDisplay from "../common/entity/compute_state_display"; import attributeClassNames from "../common/entity/attribute_class_names"; +import { computeRTL } from "../common/util/compute_rtl"; /* * @appliesMixin LocalizeMixin @@ -21,6 +22,11 @@ class StateCardDisplay extends LocalizeMixin(PolymerElement) { @apply --layout-baseline; } + :host([rtl]) { + direction: rtl; + text-align: right; + } + state-info { flex: 1 1 auto; min-width: 0; @@ -33,6 +39,12 @@ class StateCardDisplay extends LocalizeMixin(PolymerElement) { max-width: 40%; flex: 0 0 auto; } + :host([rtl]) .state { + margin-right: 16px; + margin-left: 0; + text-align: left; + } + .state.has-unit_of_measurement { white-space: nowrap; } @@ -63,6 +75,11 @@ class StateCardDisplay extends LocalizeMixin(PolymerElement) { type: Boolean, value: false, }, + rtl: { + type: Boolean, + reflectToAttribute: true, + computed: "_computeRTL(hass)", + }, }; } @@ -77,5 +94,9 @@ class StateCardDisplay extends LocalizeMixin(PolymerElement) { ]; return classes.join(" "); } + + _computeRTL(hass) { + return computeRTL(hass); + } } customElements.define("state-card-display", StateCardDisplay);