Climate RTL fixes (#3002)

src/components/ha-climate-control.js

@@ -25,6 +25,7 @@ class HaClimateControl extends EventsMixin(PolymerElement) {
         #target_temperature {
           @apply --layout-self-center;
           font-size: 200%;
+          direction: ltr;
         }
         .control-buttons {
           font-size: 200%;

src/components/ha-climate-state.js

@@ -29,18 +29,24 @@ class HaClimateState extends LocalizeMixin(PolymerElement) {
           font-weight: bold;
           text-transform: capitalize;
         }
+
+        .unit {
+          display: inline-block;
+          direction: ltr;
+        }
       </style>
 
       <div class="target">
         <template is="dom-if" if="[[_hasKnownState(stateObj.state)]]">
           <span class="state-label"> [[_localizeState(stateObj.state)]] </span>
         </template>
-        [[computeTarget(hass, stateObj)]]
+        <div class="unit">[[computeTarget(hass, stateObj)]]</div>
       </div>
 
       <template is="dom-if" if="[[currentStatus]]">
         <div class="current">
-          [[localize('ui.card.climate.currently')]]: [[currentStatus]]
+          [[localize('ui.card.climate.currently')]]:
+          <div class="unit">[[currentStatus]]</div>
         </div>
       </template>
     `;

src/dialogs/more-info/controls/more-info-climate.js

@@ -17,6 +17,7 @@ import { supportsFeature } from "../../../common/entity/supports-feature";
 
 import EventsMixin from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
+import { computeRTLDirection } from "../../../common/util/compute_rtl";
 
 /*
  * @appliesMixin EventsMixin
@@ -84,6 +85,7 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
           width: 90px;
           font-size: 200%;
           margin: auto;
+          direction: ltr;
         }
 
         ha-climate-control.range-control-left,
@@ -181,6 +183,7 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
                 value="[[stateObj.attributes.humidity]]"
                 on-change="targetHumiditySliderChanged"
                 ignore-bar-touch=""
+                dir="[[rtl]]"
               >
               </ha-paper-slider>
             </div>
@@ -314,6 +317,12 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
       awayToggleChecked: Boolean,
       auxToggleChecked: Boolean,
       onToggleChecked: Boolean,
+
+      rtl: {
+        type: String,
+        value: "ltr",
+        computed: "_computeRTLDirection(hass)",
+      },
     };
   }
 
@@ -557,6 +566,10 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
   _localizeFanMode(localize, mode) {
     return localize(`state_attributes.climate.fan_mode.${mode}`) || mode;
   }
+
+  _computeRTLDirection(hass) {
+    return computeRTLDirection(hass);
+  }
 }
 
 customElements.define("more-info-climate", MoreInfoClimate);