RTL fixes (#12367)

2025-04-25 05:47:20 +00:00 · 2022-04-22 18:27:49 +03:00 · 2022-04-22 18:27:49 +03:00 · 3b8b6eb315
commit 3b8b6eb315
parent 4f13db3178
16 changed files with 84 additions and 7 deletions
--- a/src/components/ha-combo-box.ts
+++ b/src/components/ha-combo-box.ts
@ -250,6 +250,18 @@ export class HaComboBox extends LitElement {
        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;
+      }
    `;
  }
 }
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@ -98,6 +98,10 @@ export class HaDialog extends DialogBase {
        margin-left: 40px;
        margin-right: 0px;
      }
+      :host-context([style*="direction: rtl;"]) .dialog-actions {
+        left: 0px !important;
+        right: auto !important;
+      }
    `,
  ];
 }
--- a/src/components/ha-fab.ts
+++ b/src/components/ha-fab.ts
@ -1,5 +1,6 @@
 import { Fab } from "@material/mwc-fab";
 import { customElement } from "lit/decorators";
+import { css } from "lit";

@customElement("ha-fab")
 export class HaFab extends Fab {
@ -7,6 +8,17 @@ export class HaFab extends Fab {
    super.firstUpdated(changedProperties);
    this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
  }
+
+  static override styles = Fab.styles.concat([
+    css`
+      :host-context([style*="direction: rtl;"])
+        .mdc-fab--extended
+        .mdc-fab__icon {
+        margin-left: 12px !important;
+        margin-right: calc(12px - 20px) !important;
+      }
+    `,
+  ]);
 }

 declare global {
--- a/src/components/ha-file-upload.ts
+++ b/src/components/ha-file-upload.ts
@ -176,10 +176,24 @@ 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;
+        }
        .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;
+        }
        .dragged:before {
          position: var(--layout-fit_-_position);
          top: var(--layout-fit_-_top);
--- a/src/components/ha-select.ts
+++ b/src/components/ha-select.ts
@ -47,6 +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;
+      }
    `,
  ];
 }
--- a/src/components/ha-target-picker.ts
+++ b/src/components/ha-target-picker.ts
@ -616,6 +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;
+      }
    `;
  }
 }
--- a/src/components/ha-textfield.ts
+++ b/src/components/ha-textfield.ts
@ -91,6 +91,19 @@ export class HaTextField extends TextFieldBase {
      .mdc-text-field {
        overflow: var(--text-field-overflow);
      }
+
+      :host-context([style*="direction: rtl;"]) .mdc-floating-label {
+        right: 10px !important;
+        left: initial !important;
+      }
+
+      :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;
+      }
    `,
  ];
 }
--- a/src/dialogs/config-flow/dialog-data-entry-flow.ts
+++ b/src/dialogs/config-flow/dialog-data-entry-flow.ts
@ -11,7 +11,6 @@ import {
 } from "lit";
 import { customElement, state } from "lit/decorators";
 import { fireEvent, HASSDomEvent } from "../../common/dom/fire_event";
-import { computeRTL } from "../../common/util/compute_rtl";
 import "../../components/ha-circular-progress";
 import "../../components/ha-dialog";
 import "../../components/ha-icon-button";
@ -261,7 +260,6 @@ class DataEntryFlowDialog extends LitElement {
                          <ha-icon-button
                            .label=${this.hass.localize("ui.common.help")}
                            .path=${mdiHelpCircle}
-                            ?rtl=${computeRTL(this.hass)}
                          >
                          </ha-icon-button
                        ></a>
@ -273,7 +271,6 @@ class DataEntryFlowDialog extends LitElement {
                    )}
                    .path=${mdiClose}
                    dialogAction="close"
-                    ?rtl=${computeRTL(this.hass)}
                  ></ha-icon-button>
                </div>
                ${this._step === null
@ -521,7 +518,7 @@ class DataEntryFlowDialog extends LitElement {
          top: 0;
          right: 0;
        }
-        .dialog-actions[rtl] {
+        :host-context([style*="direction: rtl;"]) .dialog-actions {
          right: auto;
          left: 0;
        }
--- a/src/dialogs/config-flow/step-flow-form.ts
+++ b/src/dialogs/config-flow/step-flow-form.ts
@ -194,6 +194,10 @@ class StepFlowForm extends LitElement {
          word-break: break-word;
          padding-right: 72px;
        }
+        :host-context([style*="direction: rtl;"]) h2 {
+          padding-right: auto !important;
+          padding-left: 72px !important;
+        }
      `,
    ];
  }
--- a/src/dialogs/config-flow/step-flow-pick-flow.ts
+++ b/src/dialogs/config-flow/step-flow-pick-flow.ts
@ -106,6 +106,10 @@ class StepFlowPickFlow extends LitElement {
        h2 {
          padding-right: 66px;
        }
+        :host-context([style*="direction: rtl;"]) h2 {
+          padding-right: auto !important;
+          padding-left: 66px !important;
+        }
        @media all and (max-height: 900px) {
          div {
            max-height: calc(100vh - 134px);
--- a/src/dialogs/config-flow/step-flow-pick-handler.ts
+++ b/src/dialogs/config-flow/step-flow-pick-handler.ts
@ -313,6 +313,10 @@ class StepFlowPickHandler extends LitElement {
        h2 {
          padding-right: 66px;
        }
+        :host-context([style*="direction: rtl;"]) h2 {
+          padding-right: auto !important;
+          padding-left: 66px !important;
+        }
        @media all and (max-height: 900px) {
          mwc-list {
            max-height: calc(100vh - 134px);
--- a/src/panels/config/automation/action/ha-automation-action-row.ts
+++ b/src/panels/config/automation/action/ha-automation-action-row.ts
@ -414,7 +414,7 @@ export default class HaAutomationActionRow extends LitElement {
          z-index: 3;
          --mdc-theme-text-primary-on-background: var(--primary-text-color);
        }
-        .rtl .card-menu {
+        :host-context([style*="direction: rtl;"]) .card-menu {
          right: initial;
          left: 16px;
        }
--- a/src/panels/config/automation/condition/ha-automation-condition-row.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts
@ -245,7 +245,7 @@ export default class HaAutomationConditionRow extends LitElement {
          display: flex;
          align-items: center;
        }
-        .rtl .card-menu {
+        :host-context([style*="direction: rtl;"]) .card-menu {
          float: left;
        }
        mwc-list-item[disabled] {
--- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
@ -442,7 +442,7 @@ export default class HaAutomationTriggerRow extends LitElement {
          z-index: 3;
          --mdc-theme-text-primary-on-background: var(--primary-text-color);
        }
-        .rtl .card-menu {
+        :host-context([style*="direction: rtl;"]) .card-menu {
          float: left;
        }
        .triggered {
--- a/src/panels/config/integrations/ha-integration-header.ts
+++ b/src/panels/config/integrations/ha-integration-header.ts
@ -143,6 +143,10 @@ export class HaIntegrationHeader extends LitElement {
      width: 40px;
      height: 40px;
    }
+    :host-context([style*="direction: rtl;"]) .header img {
+      margin-right: auto !important;
+      margin-left: 16px;
+    }
    .header .info {
      flex: 1;
      align-self: center;
--- a/src/panels/config/logs/dialog-system-log-detail.ts
+++ b/src/panels/config/logs/dialog-system-log-detail.ts
@ -228,6 +228,7 @@ class DialogSystemLogDetail extends LitElement {
        .contents {
          padding: 16px;
          outline: none;
+          direction: ltr;
        }
        .error {
          color: var(--error-color);