Move computeRTL to a separate file and add RTL support in state-info (#2165)

* RTL support (POC)

* restore yarn.lock

* Move computeRTL to a separate file and add RTL support in state-info

* Move import to top after failed CI

* Replace var to const

* Change HassEntity to HomeAssistant object

* Support RTL in state info and state card display

* Support for RTL in more-info-controls:

* Update src/common/util/compute_rtl.ts

Co-Authored-By: rhayun <ronen.hayun@gmail.com>

* remove default from export

* prefix all computeRTL with underscroe for privately uses

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;
+}

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);

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;
+        }
       </style>
 
       <app-toolbar>
@@ -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);

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) {
+  _computeRTL(hass) {
-    var lang = hass.selectedLanguage || hass.language;
+    return computeRTL(hass);
-    if (hass.translationMetadata.translations[lang]) {
-      return hass.translationMetadata.translations[lang].isRTL || false;
-    }
-    return false;
   }
 }
 

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);