feat(rtl): add rtl support (#310)

piitaya · Apr 14, 2022 · de7f52a · de7f52a
1 parent 7c09335
commit de7f52a
Show file tree

Hide file tree

Showing 28 changed files with 201 additions and 62 deletions.
diff --git a/src/cards/alarm-control-panel-card/alarm-control-panel-card.ts b/src/cards/alarm-control-panel-card/alarm-control-panel-card.ts
@@ -1,5 +1,6 @@
 import {
     ActionHandlerEvent,
+    computeRTL,
     handleAction,
     hasAction,
     HomeAssistant,
@@ -188,10 +189,13 @@ export class AlarmControlPanelCard extends LitElement implements LovelaceCard {
             "--shape-color": `rgba(${color}, 0.2)`,
         };
 
+        const rtl = computeRTL(this.hass);
+
         return html`
             <ha-card>
-                <mushroom-card .layout=${layout} no-card-style>
+                <mushroom-card .layout=${layout} no-card-style ?rtl=${rtl}>
                     <mushroom-state-item
+                        ?rtl=${rtl}
                         .layout=${layout}
                         @action=${this._handleAction}
                         .actionHandler=${actionHandler({
@@ -224,7 +228,7 @@ export class AlarmControlPanelCard extends LitElement implements LovelaceCard {
                     </mushroom-state-item>
                     ${actions.length > 0
                         ? html`
-                              <mushroom-button-group .fill="${layout !== "horizontal"},">
+                              <mushroom-button-group .fill="${layout !== "horizontal"}" ?rtl=${rtl}>
                                   ${actions.map(
                                       (action) => html`
                                           <mushroom-button

diff --git a/src/cards/chips-card/chips-card.ts b/src/cards/chips-card/chips-card.ts
@@ -1,4 +1,5 @@
 import {
+    computeRTL,
     HomeAssistant,
     LovelaceCard,
     LovelaceCardConfig,
@@ -70,8 +71,10 @@ export class ChipsCard extends LitElement implements LovelaceCard {
             alignment = `align-${this._config.alignment}`;
         }
 
+        const rtl = computeRTL(this._hass);
+
         return html`
-            <div class="chip-container ${alignment}">
+            <div class="chip-container ${alignment}" ?rtl=${rtl}>
                 ${this._config.chips.map((chip) => this.renderChip(chip))}
             </div>
         `;
@@ -115,6 +118,10 @@ export class ChipsCard extends LitElement implements LovelaceCard {
                 .chip-container *:not(:last-child) {
                     margin-right: var(--chip-spacing);
                 }
+                .chip-container[rtl] *:not(:last-child) {
+                    margin-right: initial;
+                    margin-left: var(--chip-spacing);
+                }
             `,
         ];
     }

diff --git a/src/cards/chips-card/chips/action-chip.ts b/src/cards/chips-card/chips/action-chip.ts
@@ -1,4 +1,10 @@
-import { ActionHandlerEvent, handleAction, hasAction, HomeAssistant } from "custom-card-helpers";
+import {
+    ActionHandlerEvent,
+    computeRTL,
+    handleAction,
+    hasAction,
+    HomeAssistant,
+} from "custom-card-helpers";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
@@ -54,8 +60,11 @@ export class ActionChip extends LitElement implements LovelaceChip {
             iconStyle["--color"] = `rgb(${iconRgbColor})`;
         }
 
+        const rtl = computeRTL(this.hass);
+
         return html`
             <mushroom-chip
+                ?rtl=${rtl}
                 @action=${this._handleAction}
                 .actionHandler=${actionHandler({
                     hasHold: hasAction(this._config.hold_action),

diff --git a/src/cards/chips-card/chips/alarm-control-panel-chip.ts b/src/cards/chips-card/chips/alarm-control-panel-chip.ts
@@ -1,4 +1,10 @@
-import { ActionHandlerEvent, handleAction, hasAction, HomeAssistant } from "custom-card-helpers";
+import {
+    ActionHandlerEvent,
+    computeRTL,
+    handleAction,
+    hasAction,
+    HomeAssistant,
+} from "custom-card-helpers";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
@@ -83,8 +89,11 @@ export class AlarmControlPanelChip extends LitElement implements LovelaceChip {
             this.hass
         );
 
+        const rtl = computeRTL(this.hass);
+
         return html`
             <mushroom-chip
+                ?rtl=${rtl}
                 @action=${this._handleAction}
                 .actionHandler=${actionHandler({
                     hasHold: hasAction(this._config.hold_action),

diff --git a/src/cards/chips-card/chips/back-chip.ts b/src/cards/chips-card/chips/back-chip.ts
@@ -1,4 +1,4 @@
-import { HomeAssistant } from "custom-card-helpers";
+import { computeRTL, HomeAssistant } from "custom-card-helpers";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { actionHandler } from "../../../utils/directives/action-handler-directive";
@@ -43,8 +43,14 @@ export class BackChip extends LitElement implements LovelaceChip {
 
         const icon = this._config.icon || DEFAULT_BACK_ICON;
 
+        const rtl = computeRTL(this.hass);
+
         return html`
-            <mushroom-chip @action=${this._handleAction} .actionHandler=${actionHandler()}>
+            <mushroom-chip
+                ?rtl=${rtl}
+                @action=${this._handleAction}
+                .actionHandler=${actionHandler()}
+            >
                 <ha-icon .icon=${icon}></ha-icon>
             </mushroom-chip>
         `;

diff --git a/src/cards/chips-card/chips/conditional-chip-editor.ts b/src/cards/chips-card/chips/conditional-chip-editor.ts
@@ -1,5 +1,11 @@
 import type { MDCTabBarActivatedEvent } from "@material/tab-bar";
-import { fireEvent, HASSDomEvent, HomeAssistant, LovelaceConfig } from "custom-card-helpers";
+import {
+    computeRTL,
+    fireEvent,
+    HASSDomEvent,
+    HomeAssistant,
+    LovelaceConfig,
+} from "custom-card-helpers";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import setupCustomlocalize from "../../../localize";
@@ -49,6 +55,8 @@ export class ConditionalChipEditor extends LitElement implements LovelaceChipEdi
 
         const customLocalize = setupCustomlocalize(this.hass);
 
+        const rtl = computeRTL(this.hass);
+
         return html`
             <mwc-tab-bar
                 .activeIndex=${this._cardTab ? 1 : 0}
@@ -121,7 +129,7 @@ export class ConditionalChipEditor extends LitElement implements LovelaceChipEdi
                           )}
                           ${this._config.conditions.map(
                               (cond, idx) => html`
-                                  <div class="condition">
+                                  <div class="condition" ?rtl=${rtl}>
                                       <div class="entity">
                                           <ha-entity-picker
                                               .hass=${this.hass}
@@ -329,6 +337,10 @@ export class ConditionalChipEditor extends LitElement implements LovelaceChipEdi
                 .condition .state mushroom-select {
                     margin-right: 16px;
                 }
+                .condition[rtl] .state mushroom-select {
+                    margin-right: initial;
+                    margin-left: 16px;
+                }
                 .card {
                     margin-top: 8px;
                     border: 1px solid var(--divider-color);
@@ -356,7 +368,3 @@ export class ConditionalChipEditor extends LitElement implements LovelaceChipEdi
         ];
     }
 }
-
-function capitalizeFirstLetter(string: string) {
-    return string.charAt(0).toUpperCase() + string.slice(1);
-}
diff --git a/src/cards/chips-card/chips/entity-chip.ts b/src/cards/chips-card/chips/entity-chip.ts
@@ -1,4 +1,10 @@
-import { ActionHandlerEvent, handleAction, hasAction, HomeAssistant } from "custom-card-helpers";
+import {
+    ActionHandlerEvent,
+    computeRTL,
+    handleAction,
+    hasAction,
+    HomeAssistant,
+} from "custom-card-helpers";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
@@ -75,8 +81,11 @@ export class EntityChip extends LitElement implements LovelaceChip {
             this.hass
         );
 
+        const rtl = computeRTL(this.hass);
+
         return html`
             <mushroom-chip
+                ?rtl=${rtl}
                 @action=${this._handleAction}
                 .actionHandler=${actionHandler({
                     hasHold: hasAction(this._config.hold_action),

diff --git a/src/cards/chips-card/chips/light-chip.ts b/src/cards/chips-card/chips/light-chip.ts
@@ -1,4 +1,10 @@
-import { ActionHandlerEvent, handleAction, hasAction, HomeAssistant } from "custom-card-helpers";
+import {
+    ActionHandlerEvent,
+    computeRTL,
+    handleAction,
+    hasAction,
+    HomeAssistant,
+} from "custom-card-helpers";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
@@ -91,8 +97,11 @@ export class LightChip extends LitElement implements LovelaceChip {
             this.hass
         );
 
+        const rtl = computeRTL(this.hass);
+
         return html`
             <mushroom-chip
+                ?rtl=${rtl}
                 @action=${this._handleAction}
                 .actionHandler=${actionHandler({
                     hasHold: hasAction(this._config.hold_action),

diff --git a/src/cards/chips-card/chips/menu-chip.ts b/src/cards/chips-card/chips/menu-chip.ts
@@ -1,4 +1,4 @@
-import { fireEvent, HomeAssistant } from "custom-card-helpers";
+import { computeRTL, fireEvent, HomeAssistant } from "custom-card-helpers";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { actionHandler } from "../../../utils/directives/action-handler-directive";
@@ -43,8 +43,14 @@ export class MenuChip extends LitElement implements LovelaceChip {
 
         const icon = this._config.icon || DEFAULT_MENU_ICON;
 
+        const rtl = computeRTL(this.hass);
+
         return html`
-            <mushroom-chip @action=${this._handleAction} .actionHandler=${actionHandler()}>
+            <mushroom-chip
+                ?rtl=${rtl}
+                @action=${this._handleAction}
+                .actionHandler=${actionHandler()}
+            >
                 <ha-icon .icon=${icon}></ha-icon>
             </mushroom-chip>
         `;

diff --git a/src/cards/chips-card/chips/template-chip.ts b/src/cards/chips-card/chips/template-chip.ts
@@ -1,4 +1,10 @@
-import { ActionHandlerEvent, handleAction, hasAction, HomeAssistant } from "custom-card-helpers";
+import {
+    ActionHandlerEvent,
+    computeRTL,
+    handleAction,
+    hasAction,
+    HomeAssistant,
+} from "custom-card-helpers";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
@@ -92,8 +98,11 @@ export class TemplateChip extends LitElement implements LovelaceChip {
         const iconColor = this.getValue("icon_color");
         const content = this.getValue("content");
 
+        const rtl = computeRTL(this.hass);
+
         return html`
             <mushroom-chip
+                ?rtl=${rtl}
                 @action=${this._handleAction}
                 .actionHandler=${actionHandler({
                     hasHold: hasAction(this._config.hold_action),

diff --git a/src/cards/chips-card/chips/weather-chip.ts b/src/cards/chips-card/chips/weather-chip.ts
@@ -1,5 +1,6 @@
 import {
     ActionHandlerEvent,
+    computeRTL,
     formatNumber,
     handleAction,
     hasAction,
@@ -72,8 +73,11 @@ export class WeatherChip extends LitElement implements LovelaceChip {
             displayLabels.push(temperatureDisplay);
         }
 
+        const rtl = computeRTL(this.hass);
+
         return html`
             <mushroom-chip
+                ?rtl=${rtl}
                 @action=${this._handleAction}
                 .actionHandler=${actionHandler({
                     hasHold: hasAction(this._config.hold_action),

diff --git a/src/cards/cover-card/controls/cover-buttons-control.ts b/src/cards/cover-card/controls/cover-buttons-control.ts
@@ -1,4 +1,4 @@
-import { HomeAssistant } from "custom-card-helpers";
+import { computeRTL, HomeAssistant } from "custom-card-helpers";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
@@ -58,8 +58,10 @@ export class CoverButtonsControl extends LitElement {
     }
 
     protected render(): TemplateResult {
+        const rtl = computeRTL(this.hass);
+
         return html`
-            <mushroom-button-group .fill=${this.fill}>
+            <mushroom-button-group .fill=${this.fill} ?rtl=${rtl}>
                 ${supportsFeature(this.entity, COVER_SUPPORT_CLOSE)
                     ? html`
                           <mushroom-button

diff --git a/src/cards/cover-card/cover-card.ts b/src/cards/cover-card/cover-card.ts
@@ -1,5 +1,6 @@
 import {
     ActionHandlerEvent,
+    computeRTL,
     handleAction,
     hasAction,
     HomeAssistant,
@@ -160,9 +161,12 @@ export class CoverCard extends LitElement implements LovelaceCard {
             stateValue += ` - ${this.position}%`;
         }
 
+        const rtl = computeRTL(this.hass);
+
         return html`
-            <mushroom-card .layout=${layout}>
+            <mushroom-card .layout=${layout} ?rtl=${rtl}>
                 <mushroom-state-item
+                    ?rtl=${rtl}
                     .layout=${layout}
                     @action=${this._handleAction}
                     .actionHandler=${actionHandler({
@@ -192,7 +196,7 @@ export class CoverCard extends LitElement implements LovelaceCard {
                 </mushroom-state-item>
                 ${this._controls.length > 0
                     ? html`
-                          <div class="actions">
+                          <div class="actions" ?rtl=${rtl}>
                               ${this.renderActiveControl(entity, layout)}
                               ${this.renderNextControlButton()}
                           </div>

diff --git a/src/cards/entity-card/entity-card.ts b/src/cards/entity-card/entity-card.ts
@@ -1,5 +1,6 @@
 import {
     ActionHandlerEvent,
+    computeRTL,
     handleAction,
     hasAction,
     HomeAssistant,
@@ -106,9 +107,12 @@ export class EntityCard extends LitElement implements LovelaceCard {
 
         const iconColor = this._config.icon_color;
 
+        const rtl = computeRTL(this.hass);
+
         return html`
-            <mushroom-card .layout=${layout}>
+            <mushroom-card .layout=${layout} ?rtl=${rtl}>
                 <mushroom-state-item
+                    ?rtl=${rtl}
                     .layout=${layout}
                     @action=${this._handleAction}
                     .actionHandler=${actionHandler({

diff --git a/src/cards/fan-card/fan-card.ts b/src/cards/fan-card/fan-card.ts
@@ -1,5 +1,6 @@
 import {
     ActionHandlerEvent,
+    computeRTL,
     handleAction,
     hasAction,
     HomeAssistant,
@@ -139,9 +140,12 @@ export class FanCard extends LitElement implements LovelaceCard {
             stateValue += ` - ${this.percentage}%`;
         }
 
+        const rtl = computeRTL(this.hass);
+
         return html`
-            <mushroom-card .layout=${layout}>
+            <mushroom-card .layout=${layout} ?rtl=${rtl}>
                 <mushroom-state-item
+                    ?rtl=${rtl}
                     .layout=${layout}
                     @action=${this._handleAction}
                     .actionHandler=${actionHandler({
@@ -175,7 +179,7 @@ export class FanCard extends LitElement implements LovelaceCard {
                 </mushroom-state-item>
                 ${this._config.show_percentage_control || this._config.show_oscillate_control
                     ? html`
-                          <div class="actions">
+                          <div class="actions" ?rtl=${rtl}>
                               ${this._config.show_percentage_control
                                   ? html`
                                         <mushroom-fan-percentage-control