Proper RTL support in weather forecast card (#2424)

* Proper RTL support in weather forecast card

* States panel force left to right since RTL is not usable

* Updated class names and switched div to span

src/cards/ha-weather-card.js

@@ -8,6 +8,7 @@ import "../components/ha-icon";
 
 import EventsMixin from "../mixins/events-mixin";
 import LocalizeMixin from "../mixins/localize-mixin";
+import { computeRTL } from "../common/util/compute_rtl";
 
 /*
  * @appliesMixin LocalizeMixin
@@ -52,6 +53,11 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
           color: var(--secondary-text-color);
         }
 
+        :host([rtl]) .name {
+          margin-left: 0px;
+          margin-right: 16px;
+        }
+
         .now {
           display: flex;
           justify-content: space-between;
@@ -65,18 +71,31 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
           margin-right: 32px;
         }
 
+        :host([rtl]) .main {
+          margin-right: 0px;
+        }
+
         .main ha-icon {
           --iron-icon-height: 72px;
           --iron-icon-width: 72px;
           margin-right: 8px;
         }
 
+        :host([rtl]) .main ha-icon {
+          margin-right: 0px;
+        }
+
         .main .temp {
           font-size: 52px;
           line-height: 1em;
           position: relative;
         }
 
+        :host([rtl]) .main .temp {
+          direction: ltr;
+          margin-right: 28px;
+        }
+
         .main .temp span {
           font-size: 24px;
           line-height: 1em;
@@ -84,6 +103,14 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
           top: 4px;
         }
 
+        .measurand {
+          display: inline-block;
+        }
+
+        :host([rtl]) .measurand {
+          direction: ltr;
+        }
+
         .forecast {
           margin-top: 16px;
           display: flex;
@@ -100,6 +127,10 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
           text-align: center;
         }
 
+        :host([rtl]) .forecast .temp {
+          direction: ltr;
+        }
+
         .weekday {
           font-weight: bold;
         }
@@ -134,7 +165,9 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
               >
                 <div>
                   [[localize('ui.card.weather.attributes.air_pressure')]]:
-                  [[stateObj.attributes.pressure]] [[getUnit('air_pressure')]]
+                  <span class="measurand">
+                    [[stateObj.attributes.pressure]] [[getUnit('air_pressure')]]
+                  </span>
                 </div>
               </template>
               <template
@@ -143,7 +176,9 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
               >
                 <div>
                   [[localize('ui.card.weather.attributes.humidity')]]:
-                  [[stateObj.attributes.humidity]] %
+                  <span class="measurand"
+                    >[[stateObj.attributes.humidity]] %</span
+                  >
                 </div>
               </template>
               <template
@@ -152,8 +187,10 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
               >
                 <div>
                   [[localize('ui.card.weather.attributes.wind_speed')]]:
-                  [[getWind(stateObj.attributes.wind_speed,
-                  stateObj.attributes.wind_bearing, localize)]]
+                  <span class="measurand">
+                    [[getWindSpeed(stateObj.attributes.wind_speed)]]
+                  </span>
+                  [[getWindBearing(stateObj.attributes.wind_bearing, localize)]]
                 </div>
               </template>
             </div>
@@ -206,6 +243,11 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
         type: Array,
         computed: "computeForecast(stateObj.attributes.forecast)",
       },
+      rtl: {
+        type: Boolean,
+        reflectToAttribute: true,
+        computed: "_computeRTL(hass)",
+      },
     };
   }
 
@@ -299,14 +341,18 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
     return degree;
   }
 
-  getWind(speed, bearing, localize) {
+  getWindSpeed(speed) {
+    return `${speed} ${this.getUnit("length")}/h`;
+  }
+
+  getWindBearing(bearing, localize) {
     if (bearing != null) {
       const cardinalDirection = this.windBearingToText(bearing);
-      return `${speed} ${this.getUnit("length")}/h (${localize(
+      return `(${localize(
         `ui.card.weather.cardinal_direction.${cardinalDirection.toLowerCase()}`
       ) || cardinalDirection})`;
     }
-    return `${speed} ${this.getUnit("length")}/h`;
+    return ``;
   }
 
   _showValue(item) {
@@ -328,5 +374,9 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
       { hour: "numeric" }
     );
   }
+
+  _computeRTL(hass) {
+    return computeRTL(hass);
+  }
 }
 customElements.define("ha-weather-card", HaWeatherCard);

src/panels/dev-state/ha-panel-dev-state.js

@@ -28,6 +28,7 @@ class HaPanelDevState extends EventsMixin(PolymerElement) {
 
         .content {
           padding: 16px;
+          direction: ltr;
         }
 
         ha-entity-picker,