From f5d13c90799719f37360c1ac3b554e3d3efe1a0a Mon Sep 17 00:00:00 2001 From: Yosi Levy <37745463+yosilevy@users.noreply.github.com> Date: Wed, 27 Dec 2023 11:59:28 +0200 Subject: [PATCH] Various RTL fixes (#19134) * Various RTL fixes * Various RTL fixes --- src/components/ha-check-list-item.ts | 3 +++ src/components/ha-list-item.ts | 13 +++++++++++-- src/components/ha-settings-row.ts | 7 ++++++- src/components/ha-two-pane-top-app-bar-fixed.ts | 4 ++++ .../voice-command-dialog/ha-voice-command-dialog.ts | 11 ++++++++--- src/panels/lovelace/cards/hui-todo-list-card.ts | 5 +++++ .../lovelace/cards/hui-weather-forecast-card.ts | 12 +++++++++++- 7 files changed, 48 insertions(+), 7 deletions(-) diff --git a/src/components/ha-check-list-item.ts b/src/components/ha-check-list-item.ts index c5946798ad..19f04feda9 100644 --- a/src/components/ha-check-list-item.ts +++ b/src/components/ha-check-list-item.ts @@ -30,6 +30,9 @@ export class HaCheckListItem extends CheckListItemBase { } .mdc-deprecated-list-item__meta { flex-shrink: 0; + direction: var(--direction); + margin-inline-start: auto; + margin-inline-end: 0; } .mdc-deprecated-list-item__graphic { margin-top: var(--check-list-item-graphic-margin-top); diff --git a/src/components/ha-list-item.ts b/src/components/ha-list-item.ts index faf8a0663a..d3481cc192 100644 --- a/src/components/ha-list-item.ts +++ b/src/components/ha-list-item.ts @@ -36,12 +36,12 @@ export class HaListItem extends ListItemBase { --mdc-list-item-graphic-margin, 16px ) !important; - direction: var(--direction); + direction: var(--direction) !important; } span.material-icons:last-of-type { margin-inline-start: auto !important; margin-inline-end: 0px !important; - direction: var(--direction); + direction: var(--direction) !important; } .mdc-deprecated-list-item__meta { display: var(--mdc-list-item-meta-display); @@ -85,6 +85,15 @@ export class HaListItem extends ListItemBase { pointer-events: unset; } `, + // safari workaround - must be explicit + document.dir === "rtl" + ? css` + span.material-icons:first-of-type, + span.material-icons:last-of-type { + direction: rtl !important; + } + ` + : css``, ]; } } diff --git a/src/components/ha-settings-row.ts b/src/components/ha-settings-row.ts index 5d97d39b95..cae4ca158d 100644 --- a/src/components/ha-settings-row.ts +++ b/src/components/ha-settings-row.ts @@ -35,7 +35,12 @@ export class HaSettingsRow extends LitElement { align-items: center; } .body { - padding: 8px 16px 8px 0; + padding-top: 8px; + padding-bottom: 8px; + padding-left: 0; + padding-inline-start: 0; + padding-right: 16x; + padding-inline-end: 16px; overflow: hidden; display: var(--layout-vertical_-_display); flex-direction: var(--layout-vertical_-_flex-direction); diff --git a/src/components/ha-two-pane-top-app-bar-fixed.ts b/src/components/ha-two-pane-top-app-bar-fixed.ts index 995079aec0..df6477534c 100644 --- a/src/components/ha-two-pane-top-app-bar-fixed.ts +++ b/src/components/ha-two-pane-top-app-bar-fixed.ts @@ -280,6 +280,8 @@ export abstract class TopAppBarBaseBase extends BaseElement { } #title { border-right: 1px solid rgba(255, 255, 255, 0.12); + border-inline-end: 1px solid rgba(255, 255, 255, 0.12); + border-inline-start: initial; box-sizing: border-box; flex: 0 0 var(--sidepane-width, 250px); width: var(--sidepane-width, 250px); @@ -290,6 +292,8 @@ export abstract class TopAppBarBaseBase extends BaseElement { } .pane { border-right: 1px solid var(--divider-color); + border-inline-end: 1px solid var(--divider-color); + border-inline-start: initial; box-sizing: border-box; display: flex; flex: 0 0 var(--sidepane-width, 250px); diff --git a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts index 8f164875b7..700c6e8ea9 100644 --- a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts +++ b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts @@ -668,7 +668,12 @@ export class HaVoiceCommandDialog extends LitElement { ha-button-menu { --mdc-theme-on-primary: var(--text-primary-color); --mdc-theme-primary: var(--primary-color); - margin: -8px 0 0 -8px; + margin-top: -8px; + margin-bottom: 0; + margin-right: 0; + margin-inline-end: 0; + margin-left: -8px; + margin-inline-start: -8px; } ha-button-menu ha-button { --mdc-theme-primary: var(--secondary-text-color); @@ -689,7 +694,7 @@ export class HaVoiceCommandDialog extends LitElement { height: 28px; margin-left: 4px; margin-inline-start: 4px; - margin-inline-end: 4px; + margin-inline-end: initial; direction: var(--direction); } ha-list-item { @@ -698,7 +703,7 @@ export class HaVoiceCommandDialog extends LitElement { ha-list-item ha-svg-icon { margin-left: 4px; margin-inline-start: 4px; - margin-inline-end: 4px; + margin-inline-end: initial; direction: var(--direction); display: block; } diff --git a/src/panels/lovelace/cards/hui-todo-list-card.ts b/src/panels/lovelace/cards/hui-todo-list-card.ts index 3d3119f8f2..6dbc1c8150 100644 --- a/src/panels/lovelace/cards/hui-todo-list-card.ts +++ b/src/panels/lovelace/cards/hui-todo-list-card.ts @@ -624,6 +624,8 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard { .addRow ha-icon-button { position: absolute; right: 16px; + inset-inline-start: initial; + inset-inline-end: 16px; } .addRow, @@ -636,8 +638,11 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard { .header { padding-left: 30px; padding-right: 16px; + padding-inline-start: 30px; + padding-inline-end: 16px; margin-top: 8px; justify-content: space-between; + direction: var(--direction); } .header span { diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts index 4dbe071b45..6a8e6e7dd5 100644 --- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts +++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts @@ -486,6 +486,8 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { align-items: center; min-width: 64px; margin-right: 16px; + margin-inline-end: 16px; + margin-inline-start: initial; } .icon-image > * { @@ -505,7 +507,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { } .temp-attribute { - text-align: right; + text-align: var(--float-end); } .temp-attribute .temp { @@ -535,6 +537,8 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { .name-state { overflow: hidden; padding-right: 12px; + padding-inline-end: 12px; + padding-inline-start: initial; width: 100%; } @@ -634,6 +638,8 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { :host([narrow]) .temp-attribute .temp { margin-right: 16px; + margin-inline-end: 16px; + margin-inline-start: initial; } :host([narrow]) .temp span { @@ -655,6 +661,8 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { :host([veryNarrow]) .name-state { padding-right: 0; + padding-inline-end: 0; + padding-inline-start: initial; } /* ============= VERY VERY NARROW ============= */ @@ -672,6 +680,8 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { :host([veryVeryNarrow]) .icon-image { margin-right: 0; + margin-inline-end: 0; + margin-inline-start: initial; } `, ];