diff --git a/src/cards/ha-weather-card.js b/src/cards/ha-weather-card.js
index 320558e0ee..4f27663ede 100644
--- a/src/cards/ha-weather-card.js
+++ b/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)) {
>
[[localize('ui.card.weather.attributes.air_pressure')]]:
- [[stateObj.attributes.pressure]] [[getUnit('air_pressure')]]
+
+ [[stateObj.attributes.pressure]] [[getUnit('air_pressure')]]
+
[[localize('ui.card.weather.attributes.humidity')]]:
- [[stateObj.attributes.humidity]] %
+ [[stateObj.attributes.humidity]] %
[[localize('ui.card.weather.attributes.wind_speed')]]:
- [[getWind(stateObj.attributes.wind_speed,
- stateObj.attributes.wind_bearing, localize)]]
+
+ [[getWindSpeed(stateObj.attributes.wind_speed)]]
+
+ [[getWindBearing(stateObj.attributes.wind_bearing, localize)]]
@@ -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);
diff --git a/src/panels/dev-state/ha-panel-dev-state.js b/src/panels/dev-state/ha-panel-dev-state.js
index f309a2386e..c0d495f5a9 100644
--- a/src/panels/dev-state/ha-panel-dev-state.js
+++ b/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,