diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts index a3194ad23d..c6b38fc84b 100644 --- a/src/components/data-table/ha-data-table.ts +++ b/src/components/data-table/ha-data-table.ts @@ -604,10 +604,8 @@ export class HaDataTable extends LitElement { padding-right: 0; width: 56px; } - [dir="rtl"] .mdc-data-table__header-cell--checkbox, - .mdc-data-table__header-cell--checkbox[dir="rtl"], - [dir="rtl"] .mdc-data-table__cell--checkbox, - .mdc-data-table__cell--checkbox[dir="rtl"] { + :host([dir="rtl"]) .mdc-data-table__header-cell--checkbox, + :host([dir="rtl"]) .mdc-data-table__cell--checkbox { /* @noflip */ padding-left: 0; /* @noflip */ @@ -641,8 +639,7 @@ export class HaDataTable extends LitElement { .mdc-data-table__cell--numeric { text-align: right; } - [dir="rtl"] .mdc-data-table__cell--numeric, - .mdc-data-table__cell--numeric[dir="rtl"] { + :host([dir="rtl"]) .mdc-data-table__cell--numeric { /* @noflip */ text-align: left; } @@ -660,18 +657,33 @@ export class HaDataTable extends LitElement { .mdc-data-table__header-cell.mdc-data-table__header-cell--icon { text-align: center; } + .mdc-data-table__header-cell.sortable.mdc-data-table__header-cell--icon:hover, .mdc-data-table__header-cell.sortable.mdc-data-table__header-cell--icon:not(.not-sorted) { text-align: left; } + :host([dir="rtl"]) + .mdc-data-table__header-cell.sortable.mdc-data-table__header-cell--icon:hover, + :host([dir="rtl"]) + .mdc-data-table__header-cell.sortable.mdc-data-table__header-cell--icon:not(.not-sorted) { + text-align: right; + } .mdc-data-table__cell--icon:first-child ha-icon { margin-left: 8px; } + :host([dir="rtl"]) .mdc-data-table__cell--icon:first-child ha-icon { + margin-left: auto; + margin-right: 8px; + } .mdc-data-table__cell--icon:first-child state-badge { margin-right: -8px; } + :host([dir="rtl"]) .mdc-data-table__cell--icon:first-child state-badge { + margin-right: auto; + margin-left: -8px; + } .mdc-data-table__header-cell--icon-button, .mdc-data-table__cell--icon-button { @@ -689,12 +701,22 @@ export class HaDataTable extends LitElement { width: 64px; padding-left: 16px; } + :host([dir="rtl"]) .mdc-data-table__header-cell--icon-button:first-child, + :host([dir="rtl"]) .mdc-data-table__cell--icon-button:first-child { + padding-left: auto; + padding-right: 16px; + } .mdc-data-table__header-cell--icon-button:last-child, .mdc-data-table__cell--icon-button:last-child { width: 64px; padding-right: 16px; } + :host([dir="rtl"]) .mdc-data-table__header-cell--icon-button:last-child, + :host([dir="rtl"]) .mdc-data-table__cell--icon-button:last-child { + padding-right: auto; + padding-left: 16px; + } .mdc-data-table__cell--icon-button a { color: var(--secondary-text-color); @@ -712,8 +734,7 @@ export class HaDataTable extends LitElement { text-transform: inherit; text-align: left; } - [dir="rtl"] .mdc-data-table__header-cell, - .mdc-data-table__header-cell[dir="rtl"] { + :host([dir="rtl"]) .mdc-data-table__header-cell { /* @noflip */ text-align: right; } @@ -725,11 +746,15 @@ export class HaDataTable extends LitElement { .mdc-data-table__header-cell--numeric.sortable:not(.not-sorted) { text-align: left; } - [dir="rtl"] .mdc-data-table__header-cell--numeric, - .mdc-data-table__header-cell--numeric[dir="rtl"] { + :host([dir="rtl"]) .mdc-data-table__header-cell--numeric { /* @noflip */ text-align: left; } + :host([dir="rtl"]) .mdc-data-table__header-cell--numeric.sortable:hover, + :host([dir="rtl"]) + .mdc-data-table__header-cell--numeric.sortable:not(.not-sorted) { + text-align: right; + } /* custom from here */ @@ -750,6 +775,10 @@ export class HaDataTable extends LitElement { position: relative; left: 0px; } + :host([dir="rtl"]) .mdc-data-table__header-cell span { + left: auto; + right: 0px; + } .mdc-data-table__header-cell.sortable { cursor: pointer; @@ -757,6 +786,9 @@ export class HaDataTable extends LitElement { .mdc-data-table__header-cell > * { transition: left 0.2s ease; } + :host([dir="rtl"]) .mdc-data-table__header-cell > * { + transition: right 0.2s ease; + } .mdc-data-table__header-cell ha-icon { top: -3px; position: absolute; @@ -764,14 +796,35 @@ export class HaDataTable extends LitElement { .mdc-data-table__header-cell.not-sorted ha-icon { left: -20px; } + :host([dir="rtl"]) .mdc-data-table__header-cell.not-sorted ha-icon { + right: -20px; + } .mdc-data-table__header-cell.sortable:not(.not-sorted) span, .mdc-data-table__header-cell.sortable.not-sorted:hover span { left: 24px; } + :host([dir="rtl"]) + .mdc-data-table__header-cell.sortable:not(.not-sorted) + span, + :host([dir="rtl"]) + .mdc-data-table__header-cell.sortable.not-sorted:hover + span { + left: auto; + right: 24px; + } .mdc-data-table__header-cell.sortable:not(.not-sorted) ha-icon, .mdc-data-table__header-cell.sortable:hover.not-sorted ha-icon { left: 12px; } + :host([dir="rtl"]) + .mdc-data-table__header-cell.sortable:not(.not-sorted) + ha-icon, + :host([dir="rtl"]) + .mdc-data-table__header-cell.sortable:hover.not-sorted + ha-icon { + left: auto; + right: 12px; + } .table-header { border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12); padding: 0 16px; diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts index b55bbcfa37..74bf72e597 100644 --- a/src/layouts/hass-tabs-subpage-data-table.ts +++ b/src/layouts/hass-tabs-subpage-data-table.ts @@ -20,6 +20,7 @@ import type { import type { HomeAssistant, Route } from "../types"; import "./hass-tabs-subpage"; import type { PageNavigation } from "./hass-tabs-subpage"; +import { computeRTLDirection } from "../common/util/compute_rtl"; @customElement("hass-tabs-subpage-data-table") export class HaTabsSubpageDataTable extends LitElement { @@ -158,6 +159,7 @@ export class HaTabsSubpageDataTable extends LitElement { .hasFab=${this.hasFab} .id=${this.id} .noDataText=${this.noDataText} + .dir=${computeRTLDirection(this.hass)} > ${!this.narrow ? html` diff --git a/src/panels/config/integrations/integration-panels/zha/zha-clusters-data-table.ts b/src/panels/config/integrations/integration-panels/zha/zha-clusters-data-table.ts index 54cad8cf74..ad615721b1 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-clusters-data-table.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-clusters-data-table.ts @@ -16,6 +16,7 @@ import "../../../../../components/entity/ha-state-icon"; import type { Cluster } from "../../../../../data/zha"; import type { HomeAssistant } from "../../../../../types"; import { formatAsPaddedHex } from "./functions"; +import { computeRTLDirection } from "../../../../../common/util/compute_rtl"; export interface ClusterRowData extends Cluster { cluster?: Cluster; @@ -91,6 +92,7 @@ export class ZHAClustersDataTable extends LitElement { .id=${"cluster_id"} selectable auto-height + .dir=${computeRTLDirection(this.hass)} > `; } diff --git a/src/panels/config/integrations/integration-panels/zha/zha-device-endpoint-data-table.ts b/src/panels/config/integrations/integration-panels/zha/zha-device-endpoint-data-table.ts index e1c926b74e..b316805b31 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-device-endpoint-data-table.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-device-endpoint-data-table.ts @@ -21,6 +21,7 @@ import type { ZHAEntityReference, } from "../../../../../data/zha"; import type { HomeAssistant } from "../../../../../types"; +import { computeRTLDirection } from "../../../../../common/util/compute_rtl"; export interface DeviceEndpointRowData extends DataTableRowData { id: string; @@ -147,6 +148,7 @@ export class ZHADeviceEndpointDataTable extends LitElement { .data=${this._deviceEndpoints(this.deviceEndpoints)} .selectable=${this.selectable} auto-height + .dir=${computeRTLDirection(this.hass)} > `; } diff --git a/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts b/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts index cd0738ef27..e7b58f3342 100644 --- a/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts +++ b/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts @@ -14,7 +14,10 @@ import memoizeOne from "memoize-one"; import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event"; import { computeDomain } from "../../../../common/entity/compute_domain"; import { computeStateName } from "../../../../common/entity/compute_state_name"; -import { computeRTL } from "../../../../common/util/compute_rtl"; +import { + computeRTL, + computeRTLDirection, +} from "../../../../common/util/compute_rtl"; import "../../../../components/data-table/ha-data-table"; import type { DataTableColumnContainer, @@ -171,6 +174,7 @@ export class HuiUnusedEntities extends LitElement { .id=${"entity_id"} selectable @selection-changed=${this._handleSelectionChanged} + .dir=${computeRTLDirection(this.hass)} > ${this._selectedEntities.length diff --git a/src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts index 4ea8cb338b..075269a6d8 100644 --- a/src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts @@ -76,7 +76,7 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {