RTL updates (#19848)

* RTL updates * Additional fixes * TODO fix
2025-07-24 09:46:36 +00:00 · 2024-02-26 16:14:32 +02:00 · 2024-02-26 16:14:32 +02:00 · a39cf99024
commit a39cf99024
parent 0ff27154e6
25 changed files with 58 additions and 6 deletions
--- a/src/components/ha-climate-state.ts
+++ b/src/components/ha-climate-state.ts
@ -156,6 +156,7 @@ class HaClimateState extends LitElement {

      .current {
        color: var(--secondary-text-color);
+        direction: var(--direction);
      }

      .state-label {
--- a/src/components/ha-metric.ts
+++ b/src/components/ha-metric.ts
@ -19,7 +19,9 @@ class HaMetric extends LitElement {
      <ha-settings-row>
        <span slot="heading"> ${this.heading} </span>
        <div slot="description" .title=${this.tooltip ?? ""}>
-          <span class="value"> ${roundedValue} % </span>
+          <span class="value">
+            <div>${roundedValue} %</div>
+          </span>
          <ha-bar
            class=${classMap({
              "target-warning": roundedValue > 50,
@ -70,6 +72,10 @@ class HaMetric extends LitElement {
        padding-inline-start: initial;
        flex-shrink: 0;
      }
+      .value > div {
+        direction: ltr;
+        text-align: var(--float-start);
+      }
    `;
  }
 }
--- a/src/components/ha-qr-scanner.ts
+++ b/src/components/ha-qr-scanner.ts
@ -186,6 +186,8 @@ class HaQrScanner extends LitElement {
      position: absolute;
      bottom: 8px;
      right: 8px;
+      inset-inline-end: 8px;
+      inset-inline-start: initial;
      background: #727272b2;
      color: white;
      border-radius: 50%;
--- a/src/components/ha-textfield.ts
+++ b/src/components/ha-textfield.ts
@ -90,7 +90,7 @@ export class HaTextField extends TextFieldBase {
        padding-right: var(--text-field-suffix-padding-right, 0px);
        padding-inline-start: var(--text-field-suffix-padding-left, 12px);
        padding-inline-end: var(--text-field-suffix-padding-right, 0px);
-        direction: var(--direction);
+        direction: ltr;
      }
      .mdc-text-field--with-leading-icon {
        padding-inline-start: var(--text-field-suffix-padding-left, 0px);
@ -199,7 +199,6 @@ export class HaTextField extends TextFieldBase {
    // safari workaround - must be explicit
    mainWindow.document.dir === "rtl"
      ? css`
-          .mdc-text-field__affix--suffix,
          .mdc-text-field--with-leading-icon,
          .mdc-text-field__icon--leading,
          .mdc-floating-label,
--- a/src/components/media-player/dialog-media-player-browse.ts
+++ b/src/components/media-player/dialog-media-player-browse.ts
@ -223,7 +223,6 @@ class DialogMediaPlayerBrowse extends LitElement {

        ha-media-player-browse {
          --media-browser-max-height: calc(100vh - 65px);
-          direction: ltr;
        }

        :host(.opened) ha-media-player-browse {
--- a/src/components/media-player/ha-media-player-browse.ts
+++ b/src/components/media-player/ha-media-player-browse.ts
@ -879,6 +879,7 @@ export class HaMediaPlayerBrowse extends LitElement {
          display: flex;
          flex-direction: column;
          position: relative;
+          direction: ltr;
        }

        ha-circular-progress {
--- a/src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts
+++ b/src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts
@ -322,6 +322,8 @@ export class HaMoreInfoLightFavoriteColors extends LitElement {
        position: absolute;
        top: -6px;
        right: -6px;
+        inset-inline-end: -6px;
+        inset-inline-start: initial;
        width: 20px;
        height: 20px;
        outline: none;
--- a/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts
+++ b/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts
@ -446,6 +446,8 @@ class LightRgbColorPicker extends LitElement {
          position: absolute;
          top: 0;
          right: 0;
+          inset-inline-end: 0;
+          inset-inline-start: initial;
          z-index: 1;
        }

--- a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
+++ b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
@ -647,6 +647,8 @@ export class HaVoiceCommandDialog extends LitElement {
          position: absolute;
          --mdc-icon-size: 16px;
          right: 5px;
+          inset-inline-end: 5px;
+          inset-inline-start: initial;
          top: 0px;
        }

--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/src/layouts/hass-tabs-subpage-data-table.ts
@ -377,6 +377,8 @@ export class HaTabsSubpageDataTable extends LitElement {
        color: var(--text-primary-color);
        position: absolute;
        right: 0;
+        inset-inline-end: 0;
+        inset-inline-start: initial;
        top: 4px;
        font-size: 0.65em;
      }
--- a/src/onboarding/onboarding-location.ts
+++ b/src/onboarding/onboarding-location.ts
@ -499,6 +499,8 @@ class OnboardingLocation extends LitElement {
          position: absolute;
          top: 10px;
          right: 10px;
+          inset-inline-end: 10px;
+          inset-inline-start: initial;
          --mdc-icon-button-size: 36px;
          --mdc-icon-size: 20px;
          color: var(--secondary-text-color);
@ -509,6 +511,8 @@ class OnboardingLocation extends LitElement {
        ha-textfield > ha-circular-progress {
          position: relative;
          left: 12px;
+          inset-inline-start: 12px;
+          inset-inline-end: initial;
        }
        ha-locations-editor {
          display: block;
--- a/src/panels/config/areas/ha-config-area-page.ts
+++ b/src/panels/config/areas/ha-config-area-page.ts
@ -710,6 +710,8 @@ class HaConfigAreaPage extends LitElement {
          position: absolute;
          top: 4px;
          right: 4px;
+          inset-inline-end: 4px;
+          inset-inline-start: initial;
          display: none;
        }
        .img-container:hover .img-edit-btn {
@ -736,6 +738,11 @@ class HaConfigAreaPage extends LitElement {
          padding: 16px;
          color: var(--secondary-text-color);
        }
+
+        mwc-button > ha-svg-icon {
+          margin-inline-start: 0;
+          margin-inline-end: 8px;
+        }
      `,
    ];
  }
--- a/src/panels/config/cloud/account/cloud-remote-pref.ts
+++ b/src/panels/config/cloud/account/cloud-remote-pref.ts
@ -226,6 +226,8 @@ export class CloudRemotePref extends LitElement {
        position: absolute;
        right: 24px;
        top: 24px;
+        inset-inline-end: 24px;
+        inset-inline-start: initial;
      }
      .card-actions {
        display: flex;
--- a/src/panels/config/hardware/dialog-hardware-available.ts
+++ b/src/panels/config/hardware/dialog-hardware-available.ts
@ -172,6 +172,8 @@ class DialogHardwareAvailable extends LitElement implements HassDialog {
          position: absolute;
          right: 16px;
          top: 10px;
+          inset-inline-end: 16px;
+          inset-inline-start: initial;
          text-decoration: none;
          color: var(--primary-text-color);
        }
--- a/src/panels/config/integrations/ha-config-integrations-dashboard.ts
+++ b/src/panels/config/integrations/ha-config-integrations-dashboard.ts
@ -877,6 +877,8 @@ class HaConfigIntegrationsDashboard extends SubscribeMixin(LitElement) {
          color: var(--text-primary-color);
          position: absolute;
          right: 0px;
+          inset-inline-end: 0px;
+          inset-inline-start: initial;
          top: 4px;
          font-size: 0.65em;
        }
@ -884,7 +886,10 @@ class HaConfigIntegrationsDashboard extends SubscribeMixin(LitElement) {
          position: relative;
        }
        h1 {
-          margin: 8px 0 0 16px;
+          margin-top: 8px;
+          margin-left: 16px;
+          margin-inline-start: 16px;
+          margin-inline-end: initial;
        }
        ha-button-menu {
          color: var(--primary-text-color);
--- a/src/panels/config/integrations/ha-integration-action-card.ts
+++ b/src/panels/config/integrations/ha-integration-action-card.ts
@ -90,6 +90,8 @@ export class HaIntegrationActionCard extends LitElement {
        position: absolute;
        top: 8px;
        right: 8px;
+        inset-inline-end: 8px;
+        inset-inline-start: initial;
      }
      .filler {
        flex: 1;
--- a/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts
@ -269,6 +269,8 @@ class ZHAAddDevicesPage extends LitElement {
          margin-inline-start: initial;
          top: -6px;
          right: 0;
+          inset-inline-end: 0;
+          inset-inline-start: initial;
          color: var(--primary-color);
        }
        .search-button {
--- a/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts
@ -241,6 +241,8 @@ export class ZHAClusterCommands extends LitElement {
          float: right;
          top: -6px;
          right: 0;
+          inset-inline-end: 0;
+          inset-inline-start: initial;
          padding-right: 0px;
          padding-inline-end: 0px;
          padding-inline-start: initial;
--- a/src/panels/config/storage/ha-config-section-storage.ts
+++ b/src/panels/config/storage/ha-config-section-storage.ts
@ -334,6 +334,8 @@ class HaConfigSectionStorage extends LitElement {
      position: relative;
      top: -10px;
      right: 10px;
+      inset-inline-end: 10px;
+      inset-inline-start: initial;
    }

    .no-mounts {
--- a/src/panels/config/voice-assistants/expose/expose-assistant-icon.ts
+++ b/src/panels/config/voice-assistants/expose/expose-assistant-icon.ts
@ -93,6 +93,8 @@ export class VoiceAssistantExposeAssistantIcon extends LitElement {
        --mdc-icon-size: 16px;
        right: 10px;
        top: -7px;
+        inset-inline-end: 10px;
+        inset-inline-start: initial;
      }
    `;
  }
--- a/src/panels/developer-tools/template/developer-tools-template.ts
+++ b/src/panels/developer-tools/template/developer-tools-template.ts
@ -290,6 +290,8 @@ class HaPanelDevTemplate extends LitElement {
          position: absolute;
          top: 8px;
          right: 8px;
+          inset-inline-end: 8px;
+          inset-inline-start: initial;
        }

        ha-alert {
--- a/src/panels/lovelace/cards/hui-media-control-card.ts
+++ b/src/panels/lovelace/cards/hui-media-control-card.ts
@ -726,6 +726,8 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
        position: absolute;
        right: 4px;
        --mdc-icon-size: 24px;
+        inset-inline-end: 4px;
+        inset-inline-start: initial;
      }

      .top-info {
--- a/src/panels/lovelace/cards/hui-todo-list-card.ts
+++ b/src/panels/lovelace/cards/hui-todo-list-card.ts
@ -732,6 +732,8 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
      .deleteItemButton {
        position: relative;
        left: 8px;
+        inset-inline-start: 8px;
+        inset-inline-end: initial;
      }

      ha-textfield {
--- a/src/panels/lovelace/entity-rows/hui-number-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-number-entity-row.ts
@ -139,6 +139,7 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow {
      }
      ha-textfield {
        text-align: end;
+        direction: ltr !important;
      }
      ha-slider {
        width: 100%;
--- a/src/panels/media-browser/ha-panel-media-browser.ts
+++ b/src/panels/media-browser/ha-panel-media-browser.ts
@ -343,7 +343,6 @@ class PanelMediaBrowser extends LitElement {

        ha-media-player-browse {
          height: calc(100vh - (100px + var(--header-height)));
-          direction: ltr;
        }

        :host([narrow]) ha-media-player-browse {