From 3f78647e1e70b91b9c5f1f9fab523121245c542a Mon Sep 17 00:00:00 2001 From: piitaya Date: Thu, 14 Apr 2022 18:14:38 +0200 Subject: [PATCH] feat(rtl): add rtl support --- .../alarm-control-panel-card.ts | 8 +++- src/cards/chips-card/chips-card.ts | 9 +++- src/cards/chips-card/chips/action-chip.ts | 11 ++++- .../chips/alarm-control-panel-chip.ts | 11 ++++- src/cards/chips-card/chips/back-chip.ts | 10 +++- .../chips/conditional-chip-editor.ts | 20 +++++--- src/cards/chips-card/chips/entity-chip.ts | 11 ++++- src/cards/chips-card/chips/light-chip.ts | 11 ++++- src/cards/chips-card/chips/menu-chip.ts | 10 +++- src/cards/chips-card/chips/template-chip.ts | 11 ++++- src/cards/chips-card/chips/weather-chip.ts | 4 ++ .../controls/cover-buttons-control.ts | 6 ++- src/cards/cover-card/cover-card.ts | 8 +++- src/cards/entity-card/entity-card.ts | 6 ++- src/cards/fan-card/fan-card.ts | 8 +++- src/cards/light-card/light-card.ts | 8 +++- src/cards/person-card/person-card.ts | 46 +++++++++---------- src/cards/template-card/template-card.ts | 6 ++- .../controls/update-buttons-control.ts | 6 ++- src/cards/update-card/update-card.ts | 8 +++- .../controls/vacuum-commands-control.ts | 6 ++- src/cards/vacuum-card/vacuum-card.ts | 8 +++- src/shared/button-group.ts | 6 +++ src/shared/card.ts | 5 ++ src/shared/chip.ts | 4 ++ src/shared/slider.ts | 3 -- src/shared/state-item.ts | 9 ++++ src/utils/card-styles.ts | 4 ++ 28 files changed, 201 insertions(+), 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 index 02e4448d4..572cd6b86 100644 --- 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, @@ -187,10 +188,13 @@ export class AlarmControlPanelCard extends LitElement implements LovelaceCard { "--shape-color": `rgba(${color}, 0.2)`, }; + const rtl = computeRTL(this.hass); + return html` - + ${actions.length > 0 ? html` - + ${actions.map( (action) => html` +
${this._config.chips.map((chip) => this.renderChip(chip))}
`; @@ -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 index 49ecf8915..becee7670 100644 --- 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` + `; diff --git a/src/cards/chips-card/chips/conditional-chip-editor.ts b/src/cards/chips-card/chips/conditional-chip-editor.ts index 4b0d6f47a..425533e2a 100644 --- 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` html` -
+
+ `; diff --git a/src/cards/chips-card/chips/template-chip.ts b/src/cards/chips-card/chips/template-chip.ts index 8a6429dc0..aafa50bda 100644 --- 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` + ${supportsFeature(this.entity, COVER_SUPPORT_CLOSE) ? html` + ${this._controls.length > 0 ? html` -
+
${this.renderActiveControl(entity, layout)} ${this.renderNextControlButton()}
diff --git a/src/cards/entity-card/entity-card.ts b/src/cards/entity-card/entity-card.ts index 5bf7b9737..ce31fd8de 100644 --- 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` - + + ${this._config.show_percentage_control || this._config.show_oscillate_control ? html` -
+
${this._config.show_percentage_control ? html` + ${this._controls.length > 0 ? html` -
+
${this.renderActiveControl(entity)} ${this.renderOtherControls()}
` diff --git a/src/cards/person-card/person-card.ts b/src/cards/person-card/person-card.ts index ef91788e5..d439da91b 100644 --- a/src/cards/person-card/person-card.ts +++ b/src/cards/person-card/person-card.ts @@ -1,5 +1,6 @@ import { ActionHandlerEvent, + computeRTL, computeStateDisplay, handleAction, hasAction, @@ -100,10 +101,13 @@ export class PersonCard extends LitElement implements LovelaceCard { const stateDisplay = computeStateDisplay(this.hass.localize, entity, this.hass.locale); + const rtl = computeRTL(this.hass); + return html` - +
- ${ - picture - ? html` - - ` - : html` - - ` - } - ${ - isAvailable(entity) - ? this.renderStateBadge(stateIcon, stateColor) - : this.renderUnvailableBadge() - } + ${picture + ? html` + + ` + : html` + + `} + ${isAvailable(entity) + ? this.renderStateBadge(stateIcon, stateColor) + : this.renderUnvailableBadge()}
- + `; } diff --git a/src/cards/template-card/template-card.ts b/src/cards/template-card/template-card.ts index bb206bedc..90a7a9874 100644 --- a/src/cards/template-card/template-card.ts +++ b/src/cards/template-card/template-card.ts @@ -1,5 +1,6 @@ import { ActionHandlerEvent, + computeRTL, handleAction, hasAction, HomeAssistant, @@ -125,9 +126,12 @@ export class TemplateCard extends LitElement implements LovelaceCard { iconStyle["--shape-color"] = `rgba(${iconRgbColor}, 0.2)`; } + const rtl = computeRTL(this.hass); + return html` - + + + +
+ ${VACUUM_BUTTONS.filter((item) => item.isVisible(this.entity, this.commands)).map( (item) => html` + ${isCommandsControlVisible(entity, commands) ? html` -
+
::slotted(*) { flex: 1; } diff --git a/src/shared/card.ts b/src/shared/card.ts index 691af7993..05257220b 100644 --- a/src/shared/card.ts +++ b/src/shared/card.ts @@ -58,6 +58,11 @@ export class Card extends LitElement { margin-right: var(--spacing); margin-bottom: 0; } + :host([rtl]) .container.horizontal > ::slotted(*:not(:last-child)) { + margin-right: initial; + margin-left: var(--spacing); + margin-bottom: 0; + } `; } } diff --git a/src/shared/chip.ts b/src/shared/chip.ts index c20f72dab..71173a85a 100644 --- a/src/shared/chip.ts +++ b/src/shared/chip.ts @@ -54,6 +54,10 @@ export class BadgeIcon extends LitElement { ::slotted(*:not(:last-child)) { margin-right: 0.5em; } + :host([rtl]) ::slotted(*:not(:last-child)) { + margin-right: initial; + margin-left: 0.5em; + } `; } } diff --git a/src/shared/slider.ts b/src/shared/slider.ts index 60f19be59..a307100f5 100644 --- a/src/shared/slider.ts +++ b/src/shared/slider.ts @@ -176,9 +176,6 @@ export class SliderItem extends LitElement { flex-direction: row; height: 42px; } - .container > *:not(:last-child) { - margin-right: var(--spacing); - } .slider { position: relative; height: 100%; diff --git a/src/shared/state-item.ts b/src/shared/state-item.ts index 2149d9c41..af8b6a7f6 100644 --- a/src/shared/state-item.ts +++ b/src/shared/state-item.ts @@ -50,6 +50,10 @@ export class StateItem extends LitElement { .container > *:not(:last-child) { margin-right: var(--spacing); } + :host([rtl]) .container > *:not(:last-child) { + margin-right: initial; + margin-left: var(--spacing); + } .icon { position: relative; } @@ -58,6 +62,10 @@ export class StateItem extends LitElement { top: -3px; right: -3px; } + :host([rtl]) .icon ::slotted(*[slot="badge"]) { + right: initial; + left: -3px; + } .info { min-width: 0; width: 100%; @@ -70,6 +78,7 @@ export class StateItem extends LitElement { .container.vertical > *:not(:last-child) { margin-bottom: var(--spacing); margin-right: 0; + margin-left: 0; } .container.vertical .info { text-align: center; diff --git a/src/utils/card-styles.ts b/src/utils/card-styles.ts index ab4094057..e639d81e9 100644 --- a/src/utils/card-styles.ts +++ b/src/utils/card-styles.ts @@ -42,6 +42,10 @@ export const cardStyle = css` .actions *:not(:last-child) { margin-right: var(--spacing); } + .actions[rtl] *:not(:last-child) { + margin-right: initial; + margin-left: var(--spacing); + } .unavailable { --main-color: var(--warning-color); }