Various RTL fixes (#12857)

2025-04-24 21:37:21 +00:00 · 2022-06-08 11:46:39 +03:00 · 2022-06-08 11:46:39 +03:00 · bc47ecaa57
commit bc47ecaa57
parent 2bd617ce6e
15 changed files with 114 additions and 69 deletions
--- a/src/components/ha-chip.ts
+++ b/src/components/ha-chip.ts
@ -67,8 +67,7 @@ export class HaChip extends LitElement {
        color: var(--ha-chip-icon-color, var(--ha-chip-text-color));
      }
      .mdc-chip.mdc-chip--selected .mdc-chip__checkmark,
-      .mdc-chip.no-text
-        .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {
+      .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {
        margin-right: -4px;
        margin-inline-start: -4px;
        margin-inline-end: 4px;
--- a/src/components/ha-clickable-list-item.ts
+++ b/src/components/ha-clickable-list-item.ts
@ -1,17 +1,13 @@
-import { ListItemBase } from "@material/mwc-list/mwc-list-item-base";
-import { styles } from "@material/mwc-list/mwc-list-item.css";
-import { css, CSSResult, html } from "lit";
+import { css, CSSResultGroup, html } from "lit";
 import { customElement, property, query } from "lit/decorators";
+import { HaListItem } from "./ha-list-item";

@customElement("ha-clickable-list-item")
-export class HaClickableListItem extends ListItemBase {
+export class HaClickableListItem extends HaListItem {
  @property() public href?: string;

  @property({ type: Boolean }) public disableHref = false;

-  // property used only in css
-  @property({ type: Boolean, reflect: true }) public rtl = false;
-
  @property({ type: Boolean, reflect: true }) public openNewTab = false;

  @query("a") private _anchor!: HTMLAnchorElement;
@ -39,18 +35,10 @@ export class HaClickableListItem extends ListItemBase {
    });
  }

-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
    return [
-      styles,
+      super.styles,
      css`
-        :host {
-          padding-left: 0px;
-          padding-right: 0px;
-        }
-        :host([graphic="avatar"]:not([twoLine])),
-        :host([graphic="icon"]:not([twoLine])) {
-          height: 48px;
-        }
        a {
          width: 100%;
          height: 100%;
@ -60,19 +48,6 @@ export class HaClickableListItem extends ListItemBase {
          padding-right: var(--mdc-list-side-padding, 20px);
          overflow: hidden;
        }
-        span.material-icons:first-of-type {
-          margin-inline-start: 0px !important;
-          margin-inline-end: var(
-            --mdc-list-item-graphic-margin,
-            16px
-          ) !important;
-          direction: var(--direction);
-        }
-        span.material-icons:last-of-type {
-          margin-inline-start: auto !important;
-          margin-inline-end: 0px !important;
-          direction: var(--direction);
-        }
      `,
    ];
  }
--- a/src/components/ha-gauge.ts
+++ b/src/components/ha-gauge.ts
@ -50,7 +50,10 @@ export class Gauge extends LitElement {

  protected updated(changedProperties: PropertyValues) {
    super.updated(changedProperties);
-    if (!this._updated || !changedProperties.has("value")) {
+    if (
+      !this._updated ||
+      (!changedProperties.has("value") && !changedProperties.has("label"))
+    ) {
      return;
    }
    this._angle = getAngle(this.value, this.min, this.max);
--- a/src/components/ha-list-item.ts
+++ b/src/components/ha-list-item.ts
@ -0,0 +1,42 @@
+import { ListItemBase } from "@material/mwc-list/mwc-list-item-base";
+import { styles } from "@material/mwc-list/mwc-list-item.css";
+import { css, CSSResultGroup } from "lit";
+import { customElement } from "lit/decorators";
+
+@customElement("ha-list-item")
+export class HaListItem extends ListItemBase {
+  static get styles(): CSSResultGroup {
+    return [
+      styles,
+      css`
+        :host {
+          padding-left: var(--mdc-list-side-padding, 20px);
+          padding-right: var(--mdc-list-side-padding, 20px);
+        }
+        :host([graphic="avatar"]:not([twoLine])),
+        :host([graphic="icon"]:not([twoLine])) {
+          height: 48px;
+        }
+        span.material-icons:first-of-type {
+          margin-inline-start: 0px !important;
+          margin-inline-end: var(
+            --mdc-list-item-graphic-margin,
+            16px
+          ) !important;
+          direction: var(--direction);
+        }
+        span.material-icons:last-of-type {
+          margin-inline-start: auto !important;
+          margin-inline-end: 0px !important;
+          direction: var(--direction);
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-list-item": HaListItem;
+  }
+}
--- a/src/components/ha-textfield.ts
+++ b/src/components/ha-textfield.ts
@ -61,6 +61,11 @@ export class HaTextField extends TextFieldBase {
        padding-inline-end: var(--text-field-suffix-padding-right, 0px);
        direction: var(--direction);
      }
+      .mdc-text-field--with-leading-icon {
+        padding-inline-start: var(--text-field-suffix-padding-left, 0px);
+        padding-inline-end: var(--text-field-suffix-padding-right, 16px);
+        direction: var(--direction);
+      }

      .mdc-text-field:not(.mdc-text-field--disabled)
        .mdc-text-field__affix--suffix {
@ -71,6 +76,12 @@ export class HaTextField extends TextFieldBase {
        color: var(--secondary-text-color);
      }

+      .mdc-text-field__icon--leading {
+        margin-inline-start: 16px;
+        margin-inline-end: 8px;
+        direction: var(--direction);
+      }
+
      input {
        text-align: var(--text-field-text-align);
      }
@ -110,6 +121,10 @@ export class HaTextField extends TextFieldBase {
        inset-inline-end: initial !important;
        direction: var(--direction);
      }
+
+      .mdc-text-field__input[type="number"] {
+        direction: var(--direction);
+      }
    `,
  ];
 }
--- a/src/components/user/ha-user-picker.ts
+++ b/src/components/user/ha-user-picker.ts
@ -8,6 +8,7 @@ import { fetchUsers, User } from "../../data/user";
 import { HomeAssistant } from "../../types";
 import "../ha-select";
 import "./ha-user-badge";
+import "../ha-list-item";

 class HaUserPicker extends LitElement {
  public hass?: HomeAssistant;
@ -48,14 +49,14 @@ class HaUserPicker extends LitElement {
          : ""}
        ${this._sortedUsers(this.users).map(
          (user) => html`
-            <mwc-list-item graphic="avatar" .value=${user.id}>
+            <ha-list-item graphic="avatar" .value=${user.id}>
              <ha-user-badge
                .hass=${this.hass}
                .user=${user}
                slot="graphic"
              ></ha-user-badge>
              ${user.name}
-            </mwc-list-item>
+            </ha-list-item>
          `
        )}
      </ha-select>
--- a/src/dialogs/quick-bar/ha-quick-bar.ts
+++ b/src/dialogs/quick-bar/ha-quick-bar.ts
@ -803,6 +803,9 @@ export class QuickBar extends LitElement {

        span.command-text {
          margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: initial;
+          direction: var(--direction);
        }

        mwc-list-item {
--- a/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts
+++ b/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts
@ -181,6 +181,9 @@ class DialogDeviceRegistryDetail extends LitElement {
        }
        ha-switch {
          margin-right: 16px;
+          margin-inline-end: 16px;
+          margin-inline-start: initial;
+          direction: var(--direction);
        }
        .row {
          margin-top: 8px;
--- a/src/panels/config/devices/ha-config-device-page.ts
+++ b/src/panels/config/devices/ha-config-device-page.ts
@ -1265,8 +1265,11 @@ export class HaConfigDevicePage extends LitElement {

        .card-header ha-icon-button {
          margin-right: -8px;
+          margin-inline-end: -8px;
+          margin-inline-start: initial;
          color: var(--primary-color);
          height: auto;
+          direction: var(--direction);
        }

        .device-info {
@ -1332,6 +1335,9 @@ export class HaConfigDevicePage extends LitElement {

        .header-right > *:not(:first-child) {
          margin-left: 16px;
+          margin-inline-start: 16px;
+          margin-inline-end: initial;
+          direction: var(--direction);
        }

        .battery {
--- a/src/panels/logbook/ha-logbook-renderer.ts
+++ b/src/panels/logbook/ha-logbook-renderer.ts
@ -16,7 +16,6 @@ import { restoreScroll } from "../../common/decorators/restore-scroll";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
-import { computeRTL, emitRTLDirection } from "../../common/util/compute_rtl";
 import "../../components/entity/state-badge";
 import "../../components/ha-circular-progress";
 import "../../components/ha-relative-time";
@ -56,9 +55,6 @@ class HaLogbookRenderer extends LitElement {
  @property({ type: Boolean, attribute: "narrow" })
  public narrow = false;

-  @property({ attribute: "rtl", type: Boolean })
-  private _rtl = false;
-
  @property({ type: Boolean, attribute: "virtualize", reflect: true })
  public virtualize = false;

@ -86,18 +82,10 @@ class HaLogbookRenderer extends LitElement {
    );
  }

-  protected updated(_changedProps: PropertyValues) {
-    const oldHass = _changedProps.get("hass") as HomeAssistant | undefined;
-
-    if (oldHass === undefined || oldHass.language !== this.hass.language) {
-      this._rtl = computeRTL(this.hass);
-    }
-  }
-
  protected render(): TemplateResult {
    if (!this.entries?.length) {
      return html`
-        <div class="container no-entries" .dir=${emitRTLDirection(this._rtl)}>
+        <div class="container no-entries">
          ${this.hass.localize("ui.components.logbook.entries_not_found")}
        </div>
      `;
@ -107,7 +95,6 @@ class HaLogbookRenderer extends LitElement {
      <div
        class="container ha-scrollbar ${classMap({
          narrow: this.narrow,
-          rtl: this._rtl,
          "no-name": this.noName,
          "no-icon": this.noIcon,
        })}"
@ -507,10 +494,6 @@ class HaLogbookRenderer extends LitElement {
          height: 100%;
        }

-        .rtl {
-          direction: ltr;
-        }
-
        .entry-container {
          width: 100%;
        }
@ -535,6 +518,9 @@ class HaLogbookRenderer extends LitElement {

        .narrow:not(.no-icon) .time {
          margin-left: 32px;
+          margin-inline-start: 32px;
+          margin-inline-end: initial;
+          direction: var(--direction);
        }

        .message-relative_time {
@ -556,10 +542,6 @@ class HaLogbookRenderer extends LitElement {
          padding: 0 16px;
        }

-        .rtl .date {
-          direction: rtl;
-        }
-
        .icon-message {
          display: flex;
          align-items: center;
@ -572,8 +554,11 @@ class HaLogbookRenderer extends LitElement {

        state-badge {
          margin-right: 16px;
+          margin-inline-start: initial;
          flex-shrink: 0;
          color: var(--state-icon-color);
+          margin-inline-end: 16px;
+          direction: var(--direction);
        }

        .message {
@ -613,6 +598,9 @@ class HaLogbookRenderer extends LitElement {

        .narrow .icon-message state-badge {
          margin-left: 0;
+          margin-inline-start: 0;
+          margin-inline-end: initial;
+          direction: var(--direction);
        }
      `,
    ];
--- a/src/panels/logbook/ha-panel-logbook.ts
+++ b/src/panels/logbook/ha-panel-logbook.ts
@ -17,7 +17,6 @@ import {
  createSearchParam,
  extractSearchParamsObject,
 } from "../../common/url/search-params";
-import { computeRTL } from "../../common/util/compute_rtl";
 import "../../components/entity/ha-entity-picker";
 import "../../components/ha-date-range-picker";
 import type { DateRangePickerRanges } from "../../components/ha-date-range-picker";
@ -39,8 +38,6 @@ export class HaPanelLogbook extends LitElement {

  @state() _entityIds?: string[];

-  @property({ reflect: true, type: Boolean }) rtl = false;
-
  @state() private _ranges?: DateRangePickerRanges;

  public constructor() {
@ -149,15 +146,6 @@ export class HaPanelLogbook extends LitElement {
    this._applyURLParams();
  };

-  protected updated(changedProps: PropertyValues<this>) {
-    if (changedProps.has("hass")) {
-      const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-      if (!oldHass || oldHass.language !== this.hass.language) {
-        this.rtl = computeRTL(this.hass);
-      }
-    }
-  }
-
  private _applyURLParams() {
    const searchParams = new URLSearchParams(location.search);

--- a/src/panels/lovelace/cards/hui-alarm-panel-card.ts
+++ b/src/panels/lovelace/cards/hui-alarm-panel-card.ts
@ -346,6 +346,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
        margin: auto;
        width: 100%;
        max-width: 300px;
+        direction: ltr;
      }

      #keypad mwc-button {
--- a/src/panels/lovelace/cards/hui-light-card.ts
+++ b/src/panels/lovelace/cards/hui-light-card.ts
@ -276,9 +276,12 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
        cursor: pointer;
        top: 0;
        right: 0;
+        inset-inline-start: initial;
+        inset-inline-end: 0;
        border-radius: 100%;
        color: var(--secondary-text-color);
        z-index: 1;
+        direction: var(--direction);
      }

      .content {
--- a/src/panels/lovelace/cards/hui-media-control-card.ts
+++ b/src/panels/lovelace/cards/hui-media-control-card.ts
@ -600,6 +600,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
        );
        height: 100%;
        right: 0;
+
        opacity: 1;
        transition: width 0.8s, opacity 0.8s linear 0.8s;
      }
@ -668,6 +669,11 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
        transition: padding, color;
        transition-duration: 0.4s;
        margin-left: -12px;
+        margin-inline-start: -12px;
+        margin-inline-end: initial;
+        padding-inline-start: 0;
+        padding-inline-end: 8px;
+        direction: var(--direction);
      }

      .controls > div {
@ -693,6 +699,9 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
      ha-icon-button.browse-media {
        position: absolute;
        right: 4px;
+        inset-inline-start: initial;
+        inset-inline-end: 4px;
+        direction: var(--direction);
        --mdc-icon-size: 24px;
      }

@ -709,12 +718,18 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {

      .icon-name ha-state-icon {
        padding-right: 8px;
+        padding-inline-start: initial;
+        padding-inline-end: 8px;
+        direction: var(--direction);
      }

      .more-info {
        position: absolute;
        top: 4px;
        right: 4px;
+        inset-inline-start: initial;
+        inset-inline-end: 4px;
+        direction: var(--direction);
      }

      .media-info {
--- a/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts
@ -332,6 +332,9 @@ export class HuiConditionalCardEditor
        }
        .condition .state ha-select {
          margin-right: 16px;
+          margin-inline-end: 16px;
+          margin-inline-start: initial;
+          direction: var(--direction);
        }
        .condition .state ha-textfield {
          flex-grow: 1;