Rtl changes (#12693)

2025-07-23 17:26:42 +00:00 · 2022-05-16 16:57:14 +03:00 · 2022-05-16 16:57:14 +03:00 · 1bd760b455
commit 1bd760b455
parent 3d66a68791
24 changed files with 109 additions and 125 deletions
--- a/src/components/ha-clickable-list-item.ts
+++ b/src/components/ha-clickable-list-item.ts
@ -60,15 +60,18 @@ export class HaClickableListItem extends ListItemBase {
          padding-right: var(--mdc-list-side-padding, 20px);
          overflow: hidden;
        }
-        :host-context([style*="direction: rtl;"])
        span.material-icons:first-of-type {
-          margin-left: var(--mdc-list-item-graphic-margin, 16px) !important;
-          margin-right: 0px !important;
+          margin-inline-start: 0px !important;
+          margin-inline-end: var(
+            --mdc-list-item-graphic-margin,
+            16px
+          ) !important;
+          direction: var(--direction);
        }
-        :host-context([style*="direction: rtl;"])
        span.material-icons:last-of-type {
-          margin-left: 0px !important;
-          margin-right: auto !important;
+          margin-inline-start: auto !important;
+          margin-inline-end: 0px !important;
+          direction: var(--direction);
        }
      `,
    ];
--- a/src/components/ha-combo-box.ts
+++ b/src/components/ha-combo-box.ts
@ -241,6 +241,9 @@ export class HaComboBox extends LitElement {
      .toggle-button {
        right: 12px;
        top: -10px;
+        inset-inline-start: initial;
+        inset-inline-end: 12px;
+        direction: var(--direction);
      }
      :host([opened]) .toggle-button {
        color: var(--primary-color);
@ -249,18 +252,9 @@ export class HaComboBox extends LitElement {
        --mdc-icon-size: 20px;
        top: -7px;
        right: 36px;
-      }
-
-      :host-context([style*="direction: rtl;"]) .toggle-button {
-        left: 12px;
-        right: auto;
-        top: -10px;
-      }
-      :host-context([style*="direction: rtl;"]) .clear-button {
-        --mdc-icon-size: 20px;
-        top: -7px;
-        left: 36px;
-        right: auto;
+        inset-inline-start: initial;
+        inset-inline-end: 36px;
+        direction: var(--direction);
      }
    `;
  }
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@ -3,7 +3,6 @@ import { styles } from "@material/mwc-dialog/mwc-dialog.css";
 import { mdiClose } from "@mdi/js";
 import { css, html, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
-import { computeRTLDirection } from "../common/util/compute_rtl";
 import type { HomeAssistant } from "../types";
 import "./ha-icon-button";

@ -17,7 +16,6 @@ export const createCloseHeading = (
    .path=${mdiClose}
    dialogAction="close"
    class="header_button"
-    dir=${computeRTLDirection(hass)}
  ></ha-icon-button>
 `;

@ -89,18 +87,18 @@ export class HaDialog extends DialogBase {
      }
      .header_title {
        margin-right: 40px;
+        margin-inline-end: 40px;
+        direction: var(--direction);
      }
-      [dir="rtl"].header_button {
-        right: auto;
-        left: 16px;
+      .header_button {
+        inset-inline-start: initial;
+        inset-inline-end: 16px;
+        direction: var(--direction);
      }
-      [dir="rtl"].header_title {
-        margin-left: 40px;
-        margin-right: 0px;
-      }
-      :host-context([style*="direction: rtl;"]) .dialog-actions {
-        left: 0px !important;
-        right: auto !important;
+      .dialog-actions {
+        inset-inline-start: initial !important;
+        inset-inline-end: 0px !important;
+        direction: var(--direction);
      }
    `,
  ];
--- a/src/components/ha-file-upload.ts
+++ b/src/components/ha-file-upload.ts
@ -175,24 +175,23 @@ export class HaFileUpload extends LitElement {
        }
        .mdc-text-field__icon--leading {
          margin-bottom: 12px;
-        }
-        :host-context([style*="direction: rtl;"])
-          .mdc-text-field__icon--leading {
-          margin-right: 0px;
+          inset-inline-start: initial;
+          inset-inline-end: 0px;
+          direction: var(--direction);
        }
        .mdc-text-field--filled .mdc-floating-label--float-above {
          transform: scale(0.75);
          top: 8px;
        }
-        :host-context([style*="direction: rtl;"]) .mdc-floating-label {
-          left: initial;
-          right: 16px;
-        }
-        :host-context([style*="direction: rtl;"])
-          .mdc-text-field--filled
        .mdc-floating-label {
-          left: initial;
-          right: 48px;
+          inset-inline-start: 16px !important;
+          inset-inline-end: initial !important;
+          direction: var(--direction);
+        }
+        .mdc-text-field--filled .mdc-floating-label {
+          inset-inline-start: 48px !important;
+          inset-inline-end: initial !important;
+          direction: var(--direction);
        }
        .dragged:before {
          position: var(--layout-fit_-_position);
--- a/src/components/ha-form/ha-form-string.ts
+++ b/src/components/ha-form/ha-form-string.ts
@ -133,9 +133,10 @@ export class HaFormString extends LitElement implements HaFormElement {
        color: var(--secondary-text-color);
      }

-      :host-context([style*="direction: rtl;"]) ha-icon-button {
-        right: auto;
-        left: 12px;
+      ha-icon-button {
+        inset-inline-start: initial;
+        inset-inline-end: 12px;
+        direction: var(--direction);
      }
    `;
  }
--- a/src/components/ha-select.ts
+++ b/src/components/ha-select.ts
@ -47,9 +47,10 @@ export class HaSelect extends SelectBase {
      .mdc-select__anchor {
        width: var(--ha-select-min-width, 200px);
      }
-      :host-context([style*="direction: rtl;"]) .mdc-floating-label {
-        right: 16px !important;
-        left: initial !important;
+      .mdc-floating-label {
+        inset-inline-start: 16px !important;
+        inset-inline-end: initial !important;
+        direction: var(--direction);
      }
    `,
  ];
--- a/src/components/ha-target-picker.ts
+++ b/src/components/ha-target-picker.ts
@ -616,9 +616,10 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
        opacity: var(--light-disabled-opacity);
        pointer-events: none;
      }
-      :host-context([style*="direction: rtl;"]) .mdc-chip__icon {
-        margin-right: -14px !important;
-        margin-left: 4px !important;
+      .mdc-chip__icon {
+        margin-inline-start: -14px !important;
+        margin-inline-end: 4px !important;
+        direction: var(--direction);
      }
    `;
  }
--- a/src/components/ha-textfield.ts
+++ b/src/components/ha-textfield.ts
@ -92,17 +92,18 @@ export class HaTextField extends TextFieldBase {
        overflow: var(--text-field-overflow);
      }

-      :host-context([style*="direction: rtl;"]) .mdc-floating-label {
-        right: 10px !important;
-        left: initial !important;
+      .mdc-floating-label {
+        inset-inline-start: 16px !important;
+        inset-inline-end: initial !important;
+        direction: var(--direction);
      }

-      :host-context([style*="direction: rtl;"])
      .mdc-text-field--with-leading-icon.mdc-text-field--filled
        .mdc-floating-label {
        max-width: calc(100% - 48px);
-        right: 48px !important;
-        left: initial !important;
+        inset-inline-start: 48px !important;
+        inset-inline-end: initial !important;
+        direction: var(--direction);
      }
    `,
  ];
--- a/src/components/media-player/dialog-media-manage.ts
+++ b/src/components/media-player/dialog-media-manage.ts
@ -314,9 +314,10 @@ class DialogMediaManage extends LitElement {
          vertical-align: middle;
        }

-        :host-context([style*="direction: rtl;"]) ha-svg-icon[slot="icon"] {
-          margin-left: 8px !important;
-          margin-right: 0px !important;
+        ha-svg-icon[slot="icon"] {
+          margin-inline-start: 0px !important;
+          margin-inline-end: 8px !important;
+          direction: var(--direction);
        }

        .refresh {
--- a/src/components/media-player/ha-media-manage-button.ts
+++ b/src/components/media-player/ha-media-manage-button.ts
@ -60,9 +60,10 @@ class MediaManageButton extends LitElement {
      vertical-align: middle;
    }

-    :host-context([style*="direction: rtl;"]) ha-svg-icon[slot="icon"] {
-      margin-left: 8px;
-      margin-right: 0px;
+    ha-svg-icon[slot="icon"] {
+      margin-inline-start: 0px;
+      margin-inline-end: 8px;
+      direction: var(--direction);
    }
  `;
 }
--- a/src/components/media-player/ha-media-upload-button.ts
+++ b/src/components/media-player/ha-media-upload-button.ts
@ -120,9 +120,10 @@ class MediaUploadButton extends LitElement {
      vertical-align: middle;
    }

-    :host-context([style*="direction: rtl;"]) ha-svg-icon[slot="icon"] {
-      margin-left: 8px;
-      margin-right: 0px;
+    ha-svg-icon[slot="icon"] {
+      margin-inline-start: 0px;
+      margin-inline-end: 8px;
+      direction: var(--direction);
    }
  `;
 }
--- a/src/dialogs/config-flow/dialog-data-entry-flow.ts
+++ b/src/dialogs/config-flow/dialog-data-entry-flow.ts
@ -518,10 +518,9 @@ class DataEntryFlowDialog extends LitElement {
          position: absolute;
          top: 0;
          right: 0;
-        }
-        :host-context([style*="direction: rtl;"]) .dialog-actions {
-          right: auto;
-          left: 0;
+          inset-inline-start: initial;
+          inset-inline-end: 0px;
+          direction: var(--direction);
        }
        .dialog-actions > * {
          color: var(--secondary-text-color);
--- a/src/dialogs/config-flow/step-flow-form.ts
+++ b/src/dialogs/config-flow/step-flow-form.ts
@ -192,11 +192,8 @@ class StepFlowForm extends LitElement {
        }
        h2 {
          word-break: break-word;
-          padding-right: 72px;
-        }
-        :host-context([style*="direction: rtl;"]) h2 {
-          padding-right: auto !important;
-          padding-left: 72px !important;
+          padding-inline-end: 72px;
+          direction: var(--direction);
        }
      `,
    ];
--- a/src/dialogs/config-flow/step-flow-pick-flow.ts
+++ b/src/dialogs/config-flow/step-flow-pick-flow.ts
@ -104,11 +104,8 @@ class StepFlowPickFlow extends LitElement {
          margin: 16px 0;
        }
        h2 {
-          padding-right: 66px;
-        }
-        :host-context([style*="direction: rtl;"]) h2 {
-          padding-right: auto !important;
-          padding-left: 66px !important;
+          padding-inline-end: 66px;
+          direction: var(--direction);
        }
        @media all and (max-height: 900px) {
          div {
--- a/src/dialogs/config-flow/step-flow-pick-handler.ts
+++ b/src/dialogs/config-flow/step-flow-pick-handler.ts
@ -311,11 +311,8 @@ class StepFlowPickHandler extends LitElement {
          border-bottom-color: var(--divider-color);
        }
        h2 {
-          padding-right: 66px;
-        }
-        :host-context([style*="direction: rtl;"]) h2 {
-          padding-right: auto !important;
-          padding-left: 66px !important;
+          padding-inline-end: 66px;
+          direction: var(--direction);
        }
        @media all and (max-height: 900px) {
          mwc-list {
--- a/src/dialogs/config-flow/styles.ts
+++ b/src/dialogs/config-flow/styles.ts
@ -3,7 +3,11 @@ import { css } from "lit";
 export const configFlowContentStyles = css`
  h2 {
    margin: 24px 38px 0 0;
+    margin-inline-start: 0px;
+    margin-inline-end: 38px;
    padding: 0 24px;
+    padding-inline-start: 24px;
+    padding-inline-end: 24px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: var(
--- a/src/panels/config/automation/action/ha-automation-action-row.ts
+++ b/src/panels/config/automation/action/ha-automation-action-row.ts
@ -460,17 +460,13 @@ export default class HaAutomationActionRow extends LitElement {
          border-top-left-radius: var(--ha-card-border-radius);
        }
        .card-menu {
-          float: right;
+          float: var(--float-end, right);
          z-index: 3;
          margin: 4px;
          --mdc-theme-text-primary-on-background: var(--primary-text-color);
          display: flex;
          align-items: center;
        }
-        :host-context([style*="direction: rtl;"]) .card-menu {
-          right: initial;
-          left: 16px;
-        }
        mwc-list-item[disabled] {
          --mdc-theme-text-primary-on-background: var(--disabled-text-color);
        }
--- a/src/panels/config/automation/condition/ha-automation-condition-row.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts
@ -288,16 +288,13 @@ export default class HaAutomationConditionRow extends LitElement {
          border-top-left-radius: var(--ha-card-border-radius);
        }
        .card-menu {
-          float: right;
+          float: var(--float-end, right);
          z-index: 3;
          margin: 4px;
          --mdc-theme-text-primary-on-background: var(--primary-text-color);
          display: flex;
          align-items: center;
        }
-        :host-context([style*="direction: rtl;"]) .card-menu {
-          float: left;
-        }
        mwc-list-item[disabled] {
          --mdc-theme-text-primary-on-background: var(--disabled-text-color);
        }
--- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
@ -487,16 +487,13 @@ export default class HaAutomationTriggerRow extends LitElement {
          border-top-left-radius: var(--ha-card-border-radius);
        }
        .card-menu {
-          float: right;
+          float: var(--float-end, right);
          z-index: 3;
          margin: 4px;
          --mdc-theme-text-primary-on-background: var(--primary-text-color);
          display: flex;
          align-items: center;
        }
-        :host-context([style*="direction: rtl;"]) .card-menu {
-          float: left;
-        }
        .triggered {
          cursor: pointer;
          position: absolute;
--- a/src/panels/config/integrations/ha-integration-header.ts
+++ b/src/panels/config/integrations/ha-integration-header.ts
@ -135,17 +135,19 @@ export class HaIntegrationHeader extends LitElement {
    .header {
      display: flex;
      position: relative;
-      padding: 0 8px 8px 16px;
+      padding-top: 0px;
+      padding-bottom: 8px;
+      padding-inline-start: 16px;
+      padding-inline-end: 8px;
+      direction: var(--direction);
    }
    .header img {
-      margin-right: 16px;
      margin-top: 16px;
+      margin-inline-start: initial;
+      margin-inline-end: 16px;
      width: 40px;
      height: 40px;
-    }
-    :host-context([style*="direction: rtl;"]) .header img {
-      margin-right: auto !important;
-      margin-left: 16px;
+      direction: var(--direction);
    }
    .header .info {
      flex: 1;
--- a/src/panels/config/logs/error-log-card.ts
+++ b/src/panels/config/logs/error-log-card.ts
@ -16,7 +16,6 @@ import "../../../components/ha-ansi-to-html";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-select";
-import { computeRTLDirection } from "../../../common/util/compute_rtl";
 import { fetchErrorLog } from "../../../data/error_log";
 import { extractApiErrorMessage } from "../../../data/hassio/common";
 import { fetchHassioLogs } from "../../../data/hassio/supervisor";
@ -64,11 +63,7 @@ class ErrorLogCard extends LitElement {
          : ""}
        ${!this._logHTML
          ? html`
-              <mwc-button
-                raised
-                @click=${this._refreshLogs}
-                dir=${computeRTLDirection(this.hass)}
-              >
+              <mwc-button raised @click=${this._refreshLogs}>
                ${this.hass.localize("ui.panel.config.logs.load_logs")}
              </mwc-button>
            `
--- a/src/panels/config/logs/system-log-card.ts
+++ b/src/panels/config/logs/system-log-card.ts
@ -18,7 +18,6 @@ import {
 import { HomeAssistant } from "../../../types";
 import { showSystemLogDetailDialog } from "./show-dialog-system-log-detail";
 import { formatSystemLogTime } from "./util";
-import { computeRTLDirection } from "../../../common/util/compute_rtl";

@customElement("system-log-card")
 export class SystemLogCard extends LitElement {
@ -86,7 +85,7 @@ export class SystemLogCard extends LitElement {
            : html`
                ${this._items.length === 0
                  ? html`
-                      <div class="card-content">
+                      <div class="card-content empty-content">
                        ${this.hass.localize("ui.panel.config.logs.no_issues")}
                      </div>
                    `
@ -132,7 +131,7 @@ export class SystemLogCard extends LitElement {
                      `
                    )}

-                <div class="card-actions" dir=${computeRTLDirection(this.hass)}>
+                <div class="card-actions">
                  <ha-call-service-button
                    .hass=${this.hass}
                    domain="system_log"
@ -206,8 +205,9 @@ export class SystemLogCard extends LitElement {
        color: var(--warning-color);
      }

-      :host-context([style*="direction: rtl;"]) .card-actions {
-        direction: rtl;
+      .card-actions,
+      .empty-content {
+        direction: var(--direction);
      }
    `;
  }
--- a/src/panels/media-browser/ha-bar-media-player.ts
+++ b/src/panels/media-browser/ha-bar-media-player.ts
@ -687,14 +687,15 @@ export class BarMediaPlayer extends LitElement {
        font-weight: bold;
      }

-      :host-context([style*="direction: rtl;"]) ha-svg-icon[slot="icon"] {
-        margin-left: 8px !important;
-        margin-right: 8px !important;
+      ha-svg-icon[slot="icon"] {
+        margin-inline-start: 8px !important;
+        margin-inline-end: 8px !important;
+        direction: var(--direction);
      }
-      :host-context([style*="direction: rtl;"])
      ha-svg-icon[slot="trailingIcon"] {
-        margin-left: 0px !important;
-        margin-right: 8px !important;
+        margin-inline-start: 8px !important;
+        margin-inline-end: 0px !important;
+        direction: var(--direction);
      }
    `;
  }
--- a/src/state/translations-mixin.ts
+++ b/src/state/translations-mixin.ts
@ -191,6 +191,7 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
      this.style.direction = direction;
      document.dir = direction;
      this.style.setProperty("--direction", direction);
+      this.style.setProperty("--float-end", "left");
    }

    /**