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')]] +
@@ -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,