jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-23 09:16:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rtl updates 2 (#6340)

Browse Source
This commit is contained in:
Yosi Levy 2020-07-07 10:24:09 +03:00 committed by GitHub
parent 0c58c3572a
commit c7127b65bf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 75 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
src/components/data-table/ha-data-table.ts
View File

@ -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;

2
src/layouts/hass-tabs-subpage-data-table.ts
View File

@ -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`

2
src/panels/config/integrations/integration-panels/zha/zha-clusters-data-table.ts
View File

@ -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)}
></ha-data-table>
`;
}

2
src/panels/config/integrations/integration-panels/zha/zha-device-endpoint-data-table.ts
View File

@ -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)}
></ha-data-table>
`;
}

6
src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts
View File

@ -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)}
></ha-data-table>
${this._selectedEntities.length

2
src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts
View File

@ -76,7 +76,7 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
<div class="flex">
<ha-slider
.disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
.dir="${computeRTLDirection(this.hass!)}"
.dir=${computeRTLDirection(this.hass!)}
.step="${Number(stateObj.attributes.step)}"
.min="${Number(stateObj.attributes.min)}"
.max="${Number(stateObj.attributes.max)}"