github
/
ha-frontend
mirror of https://github.com/home-assistant/frontend
1
Fork 0
Code Releases Activity

RTL simplification and updates (#19586) 

* RTL simplification and updates

* Fixes

* Fix weird icon offset when mwc-list-item is in a concat html``

* Additional updates
This commit is contained in:
Yosi Levy 2024-02-01 15:29:00 +02:00 committed by GitHub
parent cf960be07e
commit 7b3797502a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
70 changed files with 208 additions and 604 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/common/util/compute_rtl.ts
View File

@ -38,4 +38,8 @@ export function setDirectionStyles(direction: string, element: LitElement) {
"--margin-title",
direction === "ltr" ? "var(--margin-title-ltr)" : "var(--margin-title-rtl)"
);
element.style.setProperty(
"--scale-direction",
direction === "ltr" ? "1" : "-1"
);
}

23
src/components/chart/ha-chart-base.ts
View File

@ -10,7 +10,6 @@ import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { styleMap } from "lit/directives/style-map";
import { clamp } from "../../common/number/clamp";
import { computeRTL } from "../../common/util/compute_rtl";
import { HomeAssistant } from "../../types";
import { debounce } from "../../common/util/debounce";
@ -212,12 +211,10 @@ export class HaChartBase extends LitElement {
height: `${
this.height ?? this._chartHeight ?? this.clientWidth / 2
}px`,
"padding-left": `${
computeRTL(this.hass) ? 0 : this._paddingYAxisInternal
}px`,
"padding-right": `${
computeRTL(this.hass) ? this._paddingYAxisInternal : 0
}px`,
"padding-left": `${this._paddingYAxisInternal}`,
"padding-right": 0,
"padding-inline-start": `${this._paddingYAxisInternal}`,
"padding-inline-end": 0,
})}
>
<canvas></canvas>
@ -433,14 +430,6 @@ export class HaChartBase extends LitElement {
.chartTooltip .bullet {
align-self: baseline;
}
:host([rtl]) .chartLegend .bullet,
:host([rtl]) .chartTooltip .bullet {
margin-right: inherit;
margin-left: 6px;
margin-inline-end: inherit;
margin-inline-start: 6px;
direction: var(--direction);
}
.chartTooltip {
padding: 8px;
font-size: 90%;
@ -452,9 +441,7 @@ export class HaChartBase extends LitElement {
z-index: 1000;
width: 200px;
box-sizing: border-box;
}
:host([rtl]) .chartTooltip {
direction: rtl;
direction: var(--direction);
}
.chartLegend ul,
.chartTooltip ul {

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

@ -688,15 +688,12 @@ export class HaDataTable extends LitElement {
padding-left: 16px;
/* @noflip */
padding-right: 0;
/* @noflip */
padding-inline-start: 16px;
/* @noflip */
padding-inline-end: initial;
width: 60px;
}
:host([dir="rtl"]) .mdc-data-table__header-cell--checkbox,
:host([dir="rtl"]) .mdc-data-table__cell--checkbox {
/* @noflip */
padding-left: 0;
/* @noflip */
padding-right: 16px;
}
.mdc-data-table__table {
height: 100%;
@ -723,11 +720,7 @@ export class HaDataTable extends LitElement {
}
.mdc-data-table__cell--numeric {
text-align: right;
}
:host([dir="rtl"]) .mdc-data-table__cell--numeric {
/* @noflip */
text-align: left;
text-align: var(--float-end);
}
.mdc-data-table__cell--icon {
@ -753,15 +746,7 @@ export class HaDataTable extends LitElement {
.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;
text-align: var(--float-start);
}
.mdc-data-table__cell--icon:first-child img,
@ -771,27 +756,14 @@ export class HaDataTable extends LitElement {
.mdc-data-table__cell--icon:first-child ha-domain-icon,
.mdc-data-table__cell--icon:first-child ha-service-icon {
margin-left: 8px;
}
:host([dir="rtl"]) .mdc-data-table__cell--icon:first-child ha-icon,
:host([dir="rtl"])
.mdc-data-table__cell--icon:first-child
ha-state-icon,
:host([dir="rtl"])
.mdc-data-table__cell--icon:first-child
ha-svg-icon
:host([dir="rtl"])
.mdc-data-table__cell--icon:first-child
img {
margin-left: auto;
margin-right: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
}
.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;
margin-inline-end: -8px;
margin-inline-start: initial;
}
.mdc-data-table__cell--overflow-menu,
@ -824,15 +796,8 @@ export class HaDataTable extends LitElement {
.mdc-data-table__header-cell--icon-button:first-child,
.mdc-data-table__cell--icon-button:first-child {
padding-left: 16px;
}
:host([dir="rtl"])
.mdc-data-table__header-cell--overflow-menu:first-child,
:host([dir="rtl"]) .mdc-data-table__cell--overflow-menu:first-child,
:host([dir="rtl"])
.mdc-data-table__header-cell--overflow-menu:first-child,
:host([dir="rtl"]) .mdc-data-table__cell--overflow-menu:first-child {
padding-left: 8px;
padding-right: 16px;
padding-inline-start: 16px;
padding-inline-end: initial; // 8px?
}
.mdc-data-table__cell--overflow-menu:last-child,
@ -840,14 +805,8 @@ export class HaDataTable extends LitElement {
.mdc-data-table__header-cell--icon-button:last-child,
.mdc-data-table__cell--icon-button:last-child {
padding-right: 16px;
}
:host([dir="rtl"])
.mdc-data-table__header-cell--overflow-menu:last-child,
:host([dir="rtl"]) .mdc-data-table__cell--overflow-menu:last-child,
: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: 8px;
padding-left: 16px;
padding-inline-end: 16px;
padding-inline-start: initial; // 8px?
}
.mdc-data-table__cell--overflow-menu,
.mdc-data-table__header-cell--overflow-menu {
@ -867,28 +826,15 @@ export class HaDataTable extends LitElement {
letter-spacing: 0.0071428571em;
text-decoration: inherit;
text-transform: inherit;
text-align: left;
}
:host([dir="rtl"]) .mdc-data-table__header-cell {
/* @noflip */
text-align: right;
text-align: var(--float-start);
}
.mdc-data-table__header-cell--numeric {
text-align: right;
text-align: var(--float-end);
}
.mdc-data-table__header-cell--numeric.sortable:hover,
.mdc-data-table__header-cell--numeric.sortable:not(.not-sorted) {
text-align: left;
}
: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;
text-align: var(--float-start);
}
/* custom from here */
@ -909,20 +855,15 @@ export class HaDataTable extends LitElement {
.mdc-data-table__header-cell span {
position: relative;
left: 0px;
}
:host([dir="rtl"]) .mdc-data-table__header-cell span {
left: auto;
right: 0px;
inset-inline-start: 0px;
inset-inline-end: initial;
}
.mdc-data-table__header-cell.sortable {
cursor: pointer;
}
.mdc-data-table__header-cell > * {
transition: left 0.2s ease;
}
:host([dir="rtl"]) .mdc-data-table__header-cell > * {
transition: right 0.2s ease;
transition: var(--float-start) 0.2s ease;
}
.mdc-data-table__header-cell ha-svg-icon {
top: -3px;
@ -930,35 +871,20 @@ export class HaDataTable extends LitElement {
}
.mdc-data-table__header-cell.not-sorted ha-svg-icon {
left: -20px;
}
:host([dir="rtl"]) .mdc-data-table__header-cell.not-sorted ha-svg-icon {
right: -20px;
inset-inline-start: -20px;
inset-inline-end: initial;
}
.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;
inset-inline-start: 24px;
inset-inline-end: initial;
}
.mdc-data-table__header-cell.sortable:not(.not-sorted) ha-svg-icon,
.mdc-data-table__header-cell.sortable:hover.not-sorted ha-svg-icon {
left: 12px;
}
:host([dir="rtl"])
.mdc-data-table__header-cell.sortable:not(.not-sorted)
ha-svg-icon,
:host([dir="rtl"])
.mdc-data-table__header-cell.sortable:hover.not-sorted
ha-svg-icon {
left: auto;
right: 12px;
inset-inline-start: 12px;
inset-inline-end: initial;
}
.table-header {
border-bottom: 1px solid var(--divider-color);

29
src/components/date-range-picker.ts
View File

@ -9,6 +9,7 @@ import {
localizeWeekdays,
localizeMonths,
} from "../common/datetime/localize_date";
import { mainWindow } from "../common/dom/get_main_window";
// Set the current date to the left picker instead of the right picker because the right is hidden
const CustomDateRangePicker = Vue.extend({
@ -157,7 +158,7 @@ class DateRangePickerElement extends WrappedElement {
min-width: initial !important;
max-height: var(--date-range-picker-max-height);
overflow-y: auto;
}
}
.daterangepicker:before {
display: none;
}
@ -267,15 +268,37 @@ class DateRangePickerElement extends WrappedElement {
.calendar-table {
padding: 0 !important;
}
.daterangepicker.ltr {
.calendar-time {
direction: ltr;
text-align: left;
}
.daterangepicker.ltr {
direction: var(--direction);
text-align: var(--float-start);
}
.vue-daterange-picker{
min-width: unset !important;
display: block !important;
}
`;
if (mainWindow.document.dir === "rtl") {
style.innerHTML += `
.daterangepicker .calendar-table .next span {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.daterangepicker .calendar-table .prev span {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.daterangepicker td.start-date {
border-radius: 0 50% 50% 0;
}
.daterangepicker td.end-date {
border-radius: 50% 0 0 50%;
}
`;
}
const shadowRoot = this.shadowRoot!;
shadowRoot.appendChild(style);
// Stop click events from reaching the document, otherwise it will close the picker immediately.

25
src/components/entity/state-info.ts
View File

@ -3,7 +3,6 @@ import type { HassEntity } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { computeStateName } from "../../common/entity/compute_state_name";
import { computeRTL } from "../../common/util/compute_rtl";
import type { HomeAssistant } from "../../types";
import "../ha-relative-time";
import "./state-badge";
@ -16,9 +15,6 @@ class StateInfo extends LitElement {
@property({ type: Boolean }) public inDialog = false;
// property used only in CSS
@property({ type: Boolean, reflect: true }) public rtl = false;
@property() public color?: string;
protected render() {
@ -79,18 +75,6 @@ class StateInfo extends LitElement {
</div>`;
}
protected updated(changedProps) {
super.updated(changedProps);
if (!changedProps.has("hass")) {
return;
}
const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
if (!oldHass || oldHass.locale !== this.hass.locale) {
this.rtl = computeRTL(this.hass);
}
}
static get styles(): CSSResultGroup {
return css`
:host {
@ -106,17 +90,14 @@ class StateInfo extends LitElement {
.info {
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
min-width: 0;
}
:host([rtl]) .info {
margin-right: 8px;
margin-left: 0;
text-align: right;
text-align: var(--float-start);
}
.name {

14
src/components/ha-button-toggle-group.ts
View File

@ -69,6 +69,7 @@ export class HaButtonToggleGroup extends LitElement {
display: flex;
--mdc-icon-button-size: var(--button-toggle-size, 36px);
--mdc-icon-size: var(--button-toggle-icon-size, 20px);
direction: ltr;
}
mwc-button {
--mdc-shape-small: 0;
@ -119,19 +120,6 @@ export class HaButtonToggleGroup extends LitElement {
--mdc-shape-small: 4px;
border-right-width: 1px;
}
:host([dir="rtl"]) ha-icon-button:first-child,
:host([dir="rtl"]) mwc-button:first-child {
border-radius: 0 4px 4px 0;
border-right-width: 1px;
--mdc-shape-small: 0 4px 4px 0;
--mdc-button-outline-width: 1px;
}
:host([dir="rtl"]) ha-icon-button:last-child,
:host([dir="rtl"]) mwc-button:last-child {
--mdc-shape-small: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
`;
}
}

10
src/components/ha-date-range-picker.ts
View File

@ -32,7 +32,6 @@ import { firstWeekdayIndex } from "../common/datetime/first_weekday";
import { formatDate } from "../common/datetime/format_date";
import { formatDateTime } from "../common/datetime/format_date_time";
import { useAmPm } from "../common/datetime/use_am_pm";
import { computeRTLDirection } from "../common/util/compute_rtl";
import { HomeAssistant } from "../types";
import "./date-range-picker";
import "./ha-icon-button";
@ -65,8 +64,6 @@ export class HaDateRangePicker extends LitElement {
@state() private _hour24format = false;
@state() private _rtlDirection = "ltr";
@property({ type: Boolean }) public extendedPresets = false;
@property() public openingDirection?: "right" | "left" | "center" | "inline";
@ -236,7 +233,6 @@ export class HaDateRangePicker extends LitElement {
const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
if (!oldHass || oldHass.locale !== this.hass.locale) {
this._hour24format = !useAmPm(this.hass.locale);
this._rtlDirection = computeRTLDirection(this.hass);
}
}
}
@ -306,11 +302,7 @@ export class HaDateRangePicker extends LitElement {
></ha-icon-button>`}
</div>
${this.ranges !== false && (this.ranges || this._ranges)
? html`<div
slot="ranges"
class="date-range-ranges"
.dir=${this._rtlDirection}
>
? html`<div slot="ranges" class="date-range-ranges">
<mwc-list @action=${this._setDateRange} activatable>
${Object.keys(this.ranges || this._ranges!).map(
(name) => html`<mwc-list-item>${name}</mwc-list-item>`

25
src/components/ha-drawer.ts
View File

@ -3,6 +3,7 @@ import { styles } from "@material/mwc-drawer/mwc-drawer.css";
import { css, PropertyValues } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
import { mainWindow } from "../common/dom/get_main_window";
const blockingElements = (document as any).$blockingElements;
@ -12,6 +13,8 @@ export class HaDrawer extends DrawerBase {
private _mc?: HammerManager;
private _rtlStyle?: HTMLElement;
protected createAdapter() {
return {
...super.createAdapter(),
@ -31,8 +34,26 @@ export class HaDrawer extends DrawerBase {
protected updated(changedProps: PropertyValues) {
super.updated(changedProps);
if (changedProps.has("direction")) {
this.mdcRoot.dir = this.direction;
if (mainWindow.document.dir === "rtl") {
this._rtlStyle = document.createElement("style");
this._rtlStyle.innerHTML = `
.mdc-drawer--animate {
transform: translateX(100%);
}
.mdc-drawer--opening {
transform: translateX(0);
}
.mdc-drawer--closing {
transform: translateX(100%);
}
`;
this.shadowRoot!.appendChild(this._rtlStyle);
} else if (this._rtlStyle) {
this.shadowRoot!.removeChild(this._rtlStyle);
}
}
if (changedProps.has("open") && this.open && this.type === "modal") {
this._setupSwipe();
} else if (this._mc) {
@ -66,6 +87,8 @@ export class HaDrawer extends DrawerBase {
position: fixed;
top: 0;
border-color: var(--divider-color, rgba(0, 0, 0, 0.12));
inset-inline-start: 0 !important;
inset-inline-end: initial !important;
}
.mdc-drawer.mdc-drawer--modal.mdc-drawer--open {
z-index: 200;

65
src/components/ha-sidebar.ts
View File

@ -38,7 +38,6 @@ import { storage } from "../common/decorators/storage";
import { fireEvent } from "../common/dom/fire_event";
import { toggleAttribute } from "../common/dom/toggle_attribute";
import { stringCompare } from "../common/string/compare";
import { computeRTL } from "../common/util/compute_rtl";
import { throttle } from "../common/util/throttle";
import { ActionHandlerDetail } from "../data/lovelace/action_handler";
import {
@ -307,16 +306,12 @@ class HaSidebar extends SubscribeMixin(LitElement) {
return;
}
const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
if (!oldHass || oldHass.locale !== this.hass.locale) {
toggleAttribute(this, "rtl", computeRTL(this.hass));
}
this._calculateCounts();
if (!SUPPORT_SCROLL_IF_NEEDED) {
return;
}
const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
if (!oldHass || oldHass.panelUrl !== this.hass.panelUrl) {
const selectedEl = this.shadowRoot!.querySelector(".iron-selected");
if (selectedEl) {
@ -851,29 +846,22 @@ class HaSidebar extends SubscribeMixin(LitElement) {
font-size: 20px;
align-items: center;
padding-left: calc(4px + env(safe-area-inset-left));
}
:host([rtl]) .menu {
padding-left: 4px;
padding-right: calc(4px + env(safe-area-inset-right));
padding-inline-start: calc(4px + env(safe-area-inset-left));
padding-inline-end: initial;
}
:host([expanded]) .menu {
width: calc(256px + env(safe-area-inset-left));
}
:host([rtl][expanded]) .menu {
width: calc(256px + env(safe-area-inset-right));
}
.menu ha-icon-button {
color: var(--sidebar-icon-color);
}
.title {
margin-left: 19px;
margin-inline-start: 19px;
margin-inline-end: initial;
width: 100%;
display: none;
}
:host([rtl]) .title {
margin-left: 0;
margin-right: 19px;
}
:host([narrow]) .title {
margin: 0;
padding: 0 16px;
@ -904,11 +892,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
overflow-x: hidden;
background: none;
margin-left: env(safe-area-inset-left);
}
:host([rtl]) paper-listbox {
margin-left: initial;
margin-right: env(safe-area-inset-right);
margin-inline-start: env(safe-area-inset-left);
margin-inline-end: initial;
}
a {
@ -925,6 +910,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
box-sizing: border-box;
margin: 4px;
padding-left: 12px;
padding-inline-start: 12px;
padding-inline-end: initial;
border-radius: 4px;
--paper-item-min-height: 40px;
width: 48px;
@ -932,10 +919,6 @@ class HaSidebar extends SubscribeMixin(LitElement) {
:host([expanded]) paper-icon-item {
width: 248px;
}
:host([rtl]) paper-icon-item {
padding-left: auto;
padding-right: 12px;
}
ha-icon[slot="item-icon"],
ha-svg-icon[slot="item-icon"] {
@ -1010,11 +993,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
.configuration-container {
display: flex;
margin-left: env(safe-area-inset-left);
}
:host([rtl]) .notifications-container,
:host([rtl]) .configuration-container {
margin-left: initial;
margin-right: env(safe-area-inset-right);
margin-inline-start: env(safe-area-inset-left);
margin-inline-end: initial;
}
.notifications {
cursor: pointer;
@ -1025,23 +1005,18 @@ class HaSidebar extends SubscribeMixin(LitElement) {
}
.profile {
margin-left: env(safe-area-inset-left);
}
:host([rtl]) .profile {
margin-left: initial;
margin-right: env(safe-area-inset-right);
margin-inline-start: env(safe-area-inset-left);
margin-inline-end: initial;
}
.profile paper-icon-item {
padding-left: 4px;
}
:host([rtl]) .profile paper-icon-item {
padding-left: auto;
padding-right: 4px;
margin-inline-start: 4px;
margin-inline-end: auto;
}
.profile .item-text {
margin-left: 8px;
}
:host([rtl]) .profile .item-text {
margin-right: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
}
.notification-badge,
@ -1106,9 +1081,9 @@ class HaSidebar extends SubscribeMixin(LitElement) {
font-weight: 500;
}
:host([rtl]) .menu ha-icon-button {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
.menu ha-icon-button {
-webkit-transform: scaleX(var(--scale-direction));
transform: scaleX(var(--scale-direction));
}
`,
];

6
src/components/ha-slider.ts
View File

@ -2,9 +2,15 @@ import { customElement } from "lit/decorators";
import "element-internals-polyfill";
import { MdSlider } from "@material/web/slider/slider";
import { CSSResult, css } from "lit";
import { mainWindow } from "../common/dom/get_main_window";
@customElement("ha-slider")
export class HaSlider extends MdSlider {
public connectedCallback() {
super.connectedCallback();
this.dir = mainWindow.document.dir;
}
static override styles: CSSResult[] = [
...MdSlider.styles,
css`

14
src/components/ha-textarea.ts
View File

@ -3,18 +3,11 @@ import { styles as textfieldStyles } from "@material/mwc-textfield/mwc-textfield
import { styles as textareaStyles } from "@material/mwc-textarea/mwc-textarea.css";
import { css, PropertyValues } from "lit";
import { customElement, property } from "lit/decorators";
import { mainWindow } from "../common/dom/get_main_window";
@customElement("ha-textarea")
export class HaTextArea extends TextAreaBase {
@property({ type: Boolean, reflect: true }) autogrow = false;
firstUpdated() {
super.firstUpdated();
this.setAttribute("dir", mainWindow.document.dir);
}
updated(changedProperties: PropertyValues) {
super.updated(changedProperties);
if (this.autogrow && changedProperties.has("value")) {
@ -54,9 +47,10 @@ export class HaTextArea extends TextAreaBase {
margin-top: 16px;
margin-bottom: 16px;
}
:host([dir="rtl"]) .mdc-floating-label {
right: 16px;
left: initial;
.mdc-floating-label {
inset-inline-start: 16px !important;
inset-inline-end: initial !important;
transform-origin: var(--float-start) top;
}
`,
];

13
src/components/media-player/ha-media-player-browse.ts
View File

@ -25,7 +25,6 @@ import { classMap } from "lit/directives/class-map";
import { styleMap } from "lit/directives/style-map";
import { until } from "lit/directives/until";
import { fireEvent } from "../../common/dom/fire_event";
import { computeRTLDirection } from "../../common/util/compute_rtl";
import { debounce } from "../../common/util/debounce";
import { isUnavailableState } from "../../data/entity";
import type { MediaPlayerItem } from "../../data/media-player";
@ -539,7 +538,6 @@ export class HaMediaPlayerBrowse extends LitElement {
.graphic=${mediaClass.show_list_images
? "medium"
: "avatar"}
dir=${computeRTLDirection(this.hass)}
>
<span class="title">
${this.hass.localize(
@ -637,7 +635,6 @@ export class HaMediaPlayerBrowse extends LitElement {
@click=${this._childClicked}
.item=${child}
.graphic=${mediaClass.show_list_images ? "medium" : "avatar"}
dir=${computeRTLDirection(this.hass)}
>
${backgroundImage === "none" && !child.can_play
? html`<ha-svg-icon
@ -1198,10 +1195,8 @@ export class HaMediaPlayerBrowse extends LitElement {
mwc-list-item .title {
margin-left: 16px;
}
mwc-list-item[dir="rtl"] .title {
margin-right: 16px;
margin-left: 0;
margin-inline-start: 16px;
margin-inline-end: initial;
}
/* ============= Narrow ============= */
@ -1332,6 +1327,10 @@ export class HaMediaPlayerBrowse extends LitElement {
lit-virtualizer.not_shown {
height: calc(100% - 36px);
}
ha-browse-media-tts {
direction: var(--direction);
}
`,
];
}

3
src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
View File

@ -2,7 +2,6 @@ import "@material/mwc-button/mwc-button";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import { computeRTLDirection } from "../../common/util/compute_rtl";
import "../../components/ha-dialog";
import "../../components/ha-formfield";
import "../../components/ha-switch";
@ -82,7 +81,6 @@ class DialogConfigEntrySystemOptions extends LitElement {
}
)}
</p>`}
.dir=${computeRTLDirection(this.hass)}
>
<ha-switch
.checked=${!this._disableNewEntities}
@ -109,7 +107,6 @@ class DialogConfigEntrySystemOptions extends LitElement {
}
)}
</p>`}
.dir=${computeRTLDirection(this.hass)}
>
<ha-switch
.checked=${!this._disablePolling}

2
src/dialogs/more-info/controls/more-info-media_player.ts
View File

@ -14,7 +14,6 @@ import { customElement, property } from "lit/decorators";
import { stopPropagation } from "../../../common/dom/stop_propagation";
import { stateActive } from "../../../common/entity/state_active";
import { supportsFeature } from "../../../common/entity/supports-feature";
import { computeRTLDirection } from "../../../common/util/compute_rtl";
import "../../../components/ha-icon-button";
import "../../../components/ha-select";
import "../../../components/ha-slider";
@ -131,7 +130,6 @@ class MoreInfoMediaPlayer extends LitElement {
<ha-slider
labeled
id="input"
.dir=${computeRTLDirection(this.hass!)}
.value=${Number(stateObj.attributes.volume_level) * 100}
@change=${this._selectedValueChanged}
></ha-slider>

36
src/layouts/hass-subpage.ts
View File

@ -1,15 +1,6 @@
import {
css,
CSSResultGroup,
html,
LitElement,
PropertyValues,
TemplateResult,
} from "lit";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, eventOptions, property } from "lit/decorators";
import { restoreScroll } from "../common/decorators/restore-scroll";
import { toggleAttribute } from "../common/dom/toggle_attribute";
import { computeRTL } from "../common/util/compute_rtl";
import "../components/ha-icon-button-arrow-prev";
import "../components/ha-menu-button";
import { HomeAssistant } from "../types";
@ -34,17 +25,6 @@ class HassSubpage extends LitElement {
// @ts-ignore
@restoreScroll(".content") private _savedScrollPos?: number;
protected willUpdate(changedProps: PropertyValues): void {
super.willUpdate(changedProps);
if (!changedProps.has("hass")) {
return;
}
const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
if (!oldHass || oldHass.locale !== this.hass.locale) {
toggleAttribute(this, "rtl", computeRTL(this.hass));
}
}
protected render(): TemplateResult {
return html`
<div class="toolbar">
@ -160,6 +140,9 @@ class HassSubpage extends LitElement {
#fab {
position: absolute;
right: calc(16px + env(safe-area-inset-right));
inset-inline-end: calc(16px + env(safe-area-inset-right));
inset-inline-start: initial;
bottom: calc(16px + env(safe-area-inset-bottom));
z-index: 1;
}
@ -169,15 +152,8 @@ class HassSubpage extends LitElement {
#fab[is-wide] {
bottom: 24px;
right: 24px;
}
:host([rtl]) #fab {
right: auto;
left: calc(16px + env(safe-area-inset-left));
}
:host([rtl][is-wide]) #fab {
bottom: 24px;
left: 24px;
right: auto;
inset-inline-end: 24px;
inset-inline-start: initial;
}
`,
];

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

@ -4,7 +4,6 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, query } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
import { LocalizeFunc } from "../common/translations/localize";
import { computeRTLDirection } from "../common/util/compute_rtl";
import "../components/data-table/ha-data-table";
import type {
DataTableColumnContainer,
@ -244,7 +243,6 @@ export class HaTabsSubpageDataTable extends LitElement {
.selectable=${this.selectable}
.hasFab=${this.hasFab}
.id=${this.id}
.dir=${computeRTLDirection(this.hass)}
.clickable=${this.clickable}
.appendRow=${this.appendRow}
>

24
src/layouts/hass-tabs-subpage.ts
View File

@ -13,7 +13,6 @@ import memoizeOne from "memoize-one";
import { isComponentLoaded } from "../common/config/is_component_loaded";
import { restoreScroll } from "../common/decorators/restore-scroll";
import { LocalizeFunc } from "../common/translations/localize";
import { computeRTL } from "../common/util/compute_rtl";
import "../components/ha-icon-button-arrow-prev";
import "../components/ha-menu-button";
import "../components/ha-svg-icon";
@ -58,8 +57,6 @@ class HassTabsSubpage extends LitElement {
@property({ type: Boolean, reflect: true, attribute: "is-wide" })
public isWide = false;
@property({ type: Boolean, reflect: true }) public rtl = false;
@state() private _activeTab?: PageNavigation;
// @ts-ignore
@ -123,14 +120,6 @@ class HassTabsSubpage extends LitElement {
`${this.route.prefix}${this.route.path}`.includes(tab.path)
);
}
if (changedProperties.has("hass")) {
const oldHass = changedProperties.get("hass") as
| HomeAssistant
| undefined;
if (!oldHass || oldHass.language !== this.hass.language) {
this.rtl = computeRTL(this.hass);
}
}
super.willUpdate(changedProperties);
}
@ -334,6 +323,8 @@ class HassTabsSubpage extends LitElement {
#fab {
position: fixed;
right: calc(16px + env(safe-area-inset-right));
inset-inline-end: calc(16px + env(safe-area-inset-right));
inset-inline-start: initial;
bottom: calc(16px + env(safe-area-inset-bottom));
z-index: 1;
}
@ -343,15 +334,8 @@ class HassTabsSubpage extends LitElement {
#fab[is-wide] {
bottom: 24px;
right: 24px;
}
:host([rtl]) #fab {
right: auto;
left: calc(16px + env(safe-area-inset-left));
}
:host([rtl][is-wide]) #fab {
bottom: 24px;
left: 24px;
right: auto;
inset-inline-end: 24px;
inset-inline-start: initial;
}
`,
];

2
src/layouts/home-assistant-main.ts
View File

@ -11,7 +11,6 @@ import { customElement, property, state } from "lit/decorators";
import { fireEvent, HASSDomEvent } from "../common/dom/fire_event";
import { listenMediaQuery } from "../common/dom/media_query";
import { toggleAttribute } from "../common/dom/toggle_attribute";
import { computeRTLDirection } from "../common/util/compute_rtl";
import "../components/ha-drawer";
import { showNotificationDrawer } from "../dialogs/notifications/show-notification-drawer";
import type { HomeAssistant, Route } from "../types";
@ -62,7 +61,6 @@ export class HomeAssistantMain extends LitElement {
<ha-drawer
.type=${sidebarNarrow ? "modal" : ""}
.open=${sidebarNarrow ? this._drawerOpen : undefined}
.direction=${computeRTLDirection(this.hass)}
@MDCDrawer:closed=${this._drawerClosed}
>
<ha-sidebar

5
src/panels/calendar/ha-full-calendar.ts
View File

@ -28,7 +28,6 @@ import { useAmPm } from "../../common/datetime/use_am_pm";
import { fireEvent } from "../../common/dom/fire_event";
import { supportsFeature } from "../../common/entity/supports-feature";
import { LocalizeFunc } from "../../common/translations/localize";
import { computeRTLDirection } from "../../common/util/compute_rtl";
import "../../components/ha-button-toggle-group";
import "../../components/ha-fab";
import "../../components/ha-icon-button-next";
@ -169,7 +168,6 @@ export class HAFullCalendar extends LitElement {
.buttons=${viewToggleButtons}
.active=${this._activeView}
@value-changed=${this._handleView}
.dir=${computeRTLDirection(this.hass)}
></ha-button-toggle-group>
`
: html`
@ -203,7 +201,6 @@ export class HAFullCalendar extends LitElement {
.buttons=${viewToggleButtons}
.active=${this._activeView}
@value-changed=${this._handleView}
.dir=${computeRTLDirection(this.hass)}
></ha-button-toggle-group>
</div>
`}
@ -503,6 +500,8 @@ export class HAFullCalendar extends LitElement {
position: absolute;
bottom: 32px;
right: 32px;
inset-inline-end: 32px;
inset-inline-start: initial;
z-index: 1;
}

42
src/panels/config/automation/ha-automation-editor.ts
View File

@ -1,5 +1,4 @@
import "@material/mwc-button";
import "@material/mwc-list/mwc-list-item";
import {
mdiCheck,
mdiContentDuplicate,
@ -35,6 +34,7 @@ import "../../../components/ha-fab";
import "../../../components/ha-icon-button";
import "../../../components/ha-svg-icon";
import "../../../components/ha-yaml-editor";
import "../../../components/ha-list-item";
import {
AutomationConfig,
AutomationEntity,
@ -150,7 +150,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
.path=${mdiDotsVertical}
></ha-icon-button>
<mwc-list-item
<ha-list-item
graphic="icon"
.disabled=${!stateObj}
@click=${this._showInfo}
@ -160,20 +160,20 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
slot="graphic"
.path=${mdiInformationOutline}
></ha-svg-icon>
</mwc-list-item>
</ha-list-item>
<mwc-list-item
<ha-list-item
graphic="icon"
.disabled=${!stateObj}
@click=${this._runActions}
>
${this.hass.localize("ui.panel.config.automation.editor.run")}
<ha-svg-icon slot="graphic" .path=${mdiPlay}></ha-svg-icon>
</mwc-list-item>
</ha-list-item>
${stateObj && this._config && this.narrow
? html`<a href="/config/automation/trace/${this._config.id}">
<mwc-list-item graphic="icon">
<ha-list-item graphic="icon">
${this.hass.localize(
"ui.panel.config.automation.editor.show_trace"
)}
@ -181,22 +181,22 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
slot="graphic"
.path=${mdiTransitConnection}
></ha-svg-icon>
</mwc-list-item>
</ha-list-item>
</a>`
: ""}
<mwc-list-item
<ha-list-item
graphic="icon"
@click=${this._promptAutomationAlias}
.disabled=${!this.automationId || this._mode === "yaml"}
>
${this.hass.localize("ui.panel.config.automation.editor.rename")}
<ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon>
</mwc-list-item>
</ha-list-item>
${this._config && !("use_blueprint" in this._config)
? html`
<mwc-list-item
<ha-list-item
graphic="icon"
@click=${this._promptAutomationMode}
.disabled=${this._readOnly || this._mode === "yaml"}
@ -208,11 +208,11 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
slot="graphic"
.path=${mdiDebugStepOver}
></ha-svg-icon>
</mwc-list-item>
</ha-list-item>
`
: ""}
<mwc-list-item
<ha-list-item
.disabled=${!this._readOnly && !this.automationId}
graphic="icon"
@click=${this._duplicate}
@ -226,11 +226,11 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
slot="graphic"
.path=${mdiContentDuplicate}
></ha-svg-icon>
</mwc-list-item>
</ha-list-item>
<li divider role="separator"></li>
<mwc-list-item graphic="icon" @click=${this._switchUiMode}>
<ha-list-item graphic="icon" @click=${this._switchUiMode}>
${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
${this._mode === "gui"
? html`<ha-svg-icon
@ -239,8 +239,8 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
.path=${mdiCheck}
></ha-svg-icon>`
: ``}
</mwc-list-item>
<mwc-list-item graphic="icon" @click=${this._switchYamlMode}>
</ha-list-item>
<ha-list-item graphic="icon" @click=${this._switchYamlMode}>
${this.hass.localize("ui.panel.config.automation.editor.edit_yaml")}
${this._mode === "yaml"
? html`<ha-svg-icon
@ -249,11 +249,11 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
.path=${mdiCheck}
></ha-svg-icon>`
: ``}
</mwc-list-item>
</ha-list-item>
<li divider role="separator"></li>
<mwc-list-item
<ha-list-item
graphic="icon"
.disabled=${!stateObj}
@click=${this._toggle}
@ -267,9 +267,9 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
? mdiPlayCircleOutline
: mdiStopCircleOutline}
></ha-svg-icon>
</mwc-list-item>
</ha-list-item>
<mwc-list-item
<ha-list-item
.disabled=${!this.automationId}
class=${classMap({ warning: Boolean(this.automationId) })}
graphic="icon"
@ -282,7 +282,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
.path=${mdiDelete}
>
</ha-svg-icon>
</mwc-list-item>
</ha-list-item>
</ha-button-menu>
${this._config

21
src/panels/config/cloud/account/cloud-account.ts
View File

@ -1,9 +1,8 @@
import "@material/mwc-button";
import { css, html, LitElement, PropertyValues } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
import { formatDateTime } from "../../../../common/datetime/format_date_time";
import { fireEvent } from "../../../../common/dom/fire_event";
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
import { debounce } from "../../../../common/util/debounce";
import "../../../../components/ha-alert";
import "../../../../components/ha-card";
@ -37,8 +36,6 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
@state() private _subscription?: SubscriptionInfo;
@state() private _rtlDirection: "rtl" | "ltr" = "rtl";
protected render() {
return html`
<hass-subpage
@ -172,13 +169,11 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
<cloud-remote-pref
.hass=${this.hass}
.cloudStatus=${this.cloudStatus}
dir=${this._rtlDirection}
></cloud-remote-pref>
<cloud-tts-pref
.hass=${this.hass}
.cloudStatus=${this.cloudStatus}
dir=${this._rtlDirection}
></cloud-tts-pref>
<ha-tip .hass=${this.hass}>
@ -193,7 +188,6 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
.hass=${this.hass}
.narrow=${this.narrow}
.cloudStatus=${this.cloudStatus}
dir=${this._rtlDirection}
></cloud-webhooks>
</ha-config-section>
</div>
@ -205,15 +199,6 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
this._fetchSubscriptionInfo();
}
protected updated(changedProps: PropertyValues) {
if (changedProps.has("hass")) {
const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
if (!oldHass || oldHass.locale !== this.hass.locale) {
this._rtlDirection = computeRTLDirection(this.hass);
}
}
}
protected override hassSubscribe() {
const googleCheck = debounce(
() => {
@ -272,10 +257,6 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
fireEvent(this, "ha-refresh-cloud-status");
}
_computeRTLDirection(hass) {
return computeRTLDirection(hass);
}
static get styles() {
return [
haStyle,

6
src/panels/config/cloud/account/cloud-remote-pref.ts
View File

@ -179,14 +179,12 @@ export class CloudRemotePref extends LitElement {
.header-actions {
position: absolute;
right: 24px;
inset-inline-end: 24px;
inset-inline-start: initial;
top: 24px;
display: flex;
flex-direction: row;
}
:host([dir="rtl"]) .header-actions {
right: auto;
left: 24px;
}
.header-actions .icon-link {
margin-top: -16px;
margin-right: 8px;

6
src/panels/config/cloud/account/cloud-tts-pref.ts
View File

@ -177,12 +177,10 @@ export class CloudTTSPref extends LitElement {
.example {
position: absolute;
right: 16px;
inset-inline-end: 16px;
inset-inline-start: initial;
top: 16px;
}
:host([dir="rtl"]) .example {
right: auto;
left: 24px;
}
.row {
display: flex;
}

5
src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts
View File

@ -9,7 +9,6 @@ import {
} from "lit";
import { customElement, state } from "lit/decorators";
import { computeStateName } from "../../../../../../common/entity/compute_state_name";
import { computeRTLDirection } from "../../../../../../common/util/compute_rtl";
import "../../../../../../components/ha-dialog";
import "../../../../../../components/ha-formfield";
import "../../../../../../components/ha-switch";
@ -51,8 +50,6 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
return nothing;
}
const dir = computeRTLDirection(this.hass!);
return html`
<ha-dialog
open
@ -72,7 +69,6 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
.label=${this.hass!.localize(
"ui.dialogs.mqtt_device_debug_info.deserialize"
)}
.dir=${dir}
>
<ha-switch
.checked=${this._showDeserialized}
@ -87,7 +83,6 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
.label=${this.hass!.localize(
"ui.dialogs.mqtt_device_debug_info.show_as_yaml"
)}
.dir=${dir}
>
<ha-switch
.checked=${this._showAsYaml}

2
src/panels/config/devices/ha-config-devices-dashboard.ts
View File

@ -20,7 +20,6 @@ import {
} from "../../../common/integrations/protocolIntegrationPicked";
import { navigate } from "../../../common/navigate";
import { LocalizeFunc } from "../../../common/translations/localize";
import { computeRTL } from "../../../common/util/compute_rtl";
import {
DataTableColumnContainer,
RowClickedEvent,
@ -488,7 +487,6 @@ export class HaConfigDeviceDashboard extends LitElement {
.label=${this.hass.localize("ui.panel.config.devices.add_device")}
extended
@click=${this._addDevice}
?rtl=${computeRTL(this.hass)}
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</ha-fab>

2
src/panels/config/entities/ha-config-entities.ts
View File

@ -35,7 +35,6 @@ import {
} from "../../../common/integrations/protocolIntegrationPicked";
import { navigate } from "../../../common/navigate";
import { LocalizeFunc } from "../../../common/translations/localize";
import { computeRTL } from "../../../common/util/compute_rtl";
import type {
DataTableColumnContainer,
RowClickedEvent,
@ -680,7 +679,6 @@ export class HaConfigEntities extends LitElement {
extended
@click=${this._addDevice}
slot="fab"
?rtl=${computeRTL(this.hass)}
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</ha-fab>`

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

@ -1,7 +1,6 @@
import { html, LitElement, TemplateResult } from "lit";
import { customElement, property, query } from "lit/decorators";
import memoizeOne from "memoize-one";
import { computeRTLDirection } from "../../../../../common/util/compute_rtl";
import "../../../../../components/data-table/ha-data-table";
import type {
DataTableColumnContainer,
@ -82,7 +81,6 @@ export class ZHAClustersDataTable extends LitElement {
.id=${"cluster_id"}
selectable
auto-height
.dir=${computeRTLDirection(this.hass)}
.searchLabel=${this.hass.localize("ui.components.data-table.search")}
.noDataText=${this.hass.localize("ui.components.data-table.no-data")}
></ha-data-table>

2
src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts
View File

@ -19,7 +19,6 @@ import {
ConfigEntry,
getConfigEntries,
} from "../../../../../data/config_entries";
import { computeRTL } from "../../../../../common/util/compute_rtl";
import "../../../../../components/ha-card";
import "../../../../../components/ha-fab";
import "../../../../../components/ha-icon-button";
@ -259,7 +258,6 @@ class ZHAConfigDashboard extends LitElement {
<ha-fab
.label=${this.hass.localize("ui.panel.config.zha.add_device")}
extended
?rtl=${computeRTL(this.hass)}
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</ha-fab>

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

@ -1,7 +1,6 @@
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, query } from "lit/decorators";
import memoizeOne from "memoize-one";
import { computeRTLDirection } from "../../../../../common/util/compute_rtl";
import "../../../../../components/data-table/ha-data-table";
import type {
DataTableColumnContainer,
@ -142,7 +141,6 @@ export class ZHADeviceEndpointDataTable extends LitElement {
.data=${this._deviceEndpoints(this.deviceEndpoints)}
.selectable=${this.selectable}
auto-height
.dir=${computeRTLDirection(this.hass)}
.searchLabel=${this.hass.localize("ui.components.data-table.search")}
.noDataText=${this.hass.localize("ui.components.data-table.no-data")}
></ha-data-table>

2
src/panels/config/integrations/integration-panels/zha/zha-device-neighbors.ts
View File

@ -1,7 +1,6 @@
import { html, LitElement, PropertyValues, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { computeRTLDirection } from "../../../../../common/util/compute_rtl";
import "../../../../../components/data-table/ha-data-table";
import type {
DataTableColumnContainer,
@ -128,7 +127,6 @@ class ZHADeviceNeighbors extends LitElement {
.columns=${this._columns(this.narrow)}
.data=${this._deviceNeighbors(this.device, this._devices)}
auto-height
.dir=${computeRTLDirection(this.hass)}
.searchLabel=${this.hass.localize(
"ui.components.data-table.search"
)}

2
src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts
View File

@ -18,7 +18,6 @@ import {
} from "lit";
import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { computeRTL } from "../../../../../common/util/compute_rtl";
import "../../../../../components/ha-card";
import "../../../../../components/ha-expansion-panel";
import "../../../../../components/ha-fab";
@ -472,7 +471,6 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
"ui.panel.config.zwave_js.common.add_node"
)}
extended
?rtl=${computeRTL(this.hass)}
@click=${this._addNodeClicked}
.disabled=${this._status !== "connected" ||
(this._network?.controller.inclusion_state !== InclusionState.Idle &&

2
src/panels/config/script/ha-script-picker.ts
View File

@ -26,7 +26,6 @@ import { relativeTime } from "../../../common/datetime/relative_time";
import { HASSDomEvent, fireEvent } from "../../../common/dom/fire_event";
import { computeStateName } from "../../../common/entity/compute_state_name";
import { navigate } from "../../../common/navigate";
import { computeRTL } from "../../../common/util/compute_rtl";
import {
DataTableColumnContainer,
RowClickedEvent,
@ -308,7 +307,6 @@ class HaScriptPicker extends LitElement {
"ui.panel.config.script.picker.add_script"
)}
extended
?rtl=${computeRTL(this.hass)}
@click=${this._createNew}
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>

3
src/panels/config/users/dialog-add-user.ts
View File

@ -8,7 +8,6 @@ import {
nothing,
} from "lit";
import { customElement, property, state } from "lit/decorators";
import { computeRTLDirection } from "../../../common/util/compute_rtl";
import "../../../components/ha-circular-progress";
import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-formfield";
@ -161,7 +160,6 @@ export class DialogAddUser extends LitElement {
.label=${this.hass.localize(
"ui.panel.config.users.editor.local_only"
)}
.dir=${computeRTLDirection(this.hass)}
>
<ha-switch
.checked=${this._localOnly}
@ -173,7 +171,6 @@ export class DialogAddUser extends LitElement {
<div class="row">
<ha-formfield
.label=${this.hass.localize("ui.panel.config.users.editor.admin")}
.dir=${computeRTLDirection(this.hass)}
>
<ha-switch
.checked=${this._isAdmin}

4
src/panels/config/users/dialog-user-detail.ts
View File

@ -3,7 +3,6 @@ import "@material/mwc-button";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { computeRTLDirection } from "../../../common/util/compute_rtl";
import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-formfield";
import "../../../components/ha-help-tooltip";
@ -99,7 +98,6 @@ class DialogUserDetail extends LitElement {
.label=${this.hass.localize(
"ui.panel.config.users.editor.local_only"
)}
.dir=${computeRTLDirection(this.hass)}
>
<ha-switch
.disabled=${user.system_generated}
@ -114,7 +112,6 @@ class DialogUserDetail extends LitElement {
.label=${this.hass.localize(
"ui.panel.config.users.editor.admin"
)}
.dir=${computeRTLDirection(this.hass)}
>
<ha-switch
.disabled=${user.system_generated || user.is_owner}
@ -137,7 +134,6 @@ class DialogUserDetail extends LitElement {
.label=${this.hass.localize(
"ui.panel.config.users.editor.active"
)}
.dir=${computeRTLDirection(this.hass)}
>
<ha-switch
.disabled=${user.system_generated || user.is_owner}

6
src/panels/config/voice-assistants/assist-pref.ts
View File

@ -225,14 +225,12 @@ export class AssistPref extends LitElement {
.header-actions {
position: absolute;
right: 0px;
inset-inline-end: 0px;
inset-inline-start: initial;
top: 24px;
display: flex;
flex-direction: row;
}
:host([dir="rtl"]) .header-actions {
right: auto;
left: 0;
}
.header-actions .icon-link {
margin-top: -16px;
margin-right: 8px;

6
src/panels/config/voice-assistants/cloud-alexa-pref.ts
View File

@ -258,14 +258,12 @@ export class CloudAlexaPref extends LitElement {
.header-actions {
position: absolute;
right: 24px;
inset-inline-end: 24px;
inset-inline-start: initial;
top: 24px;
display: flex;
flex-direction: row;
}
:host([dir="rtl"]) .header-actions {
right: auto;
left: 24px;
}
.header-actions .icon-link {
margin-top: -16px;
margin-right: 8px;

6
src/panels/config/voice-assistants/cloud-google-pref.ts
View File

@ -327,14 +327,12 @@ export class CloudGooglePref extends LitElement {
.header-actions {
position: absolute;
right: 24px;
inset-inline-end: 24px;
inset-inline-start: initial;
top: 24px;
display: flex;
flex-direction: row;
}
:host([dir="rtl"]) .header-actions {
right: auto;
left: 24px;
}
.header-actions .icon-link {
margin-top: -16px;
margin-right: 8px;

4
src/panels/config/voice-assistants/ha-config-voice-assistants-assistants.ts
View File

@ -1,7 +1,6 @@
import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
import { computeRTLDirection } from "../../../common/util/compute_rtl";
import { CloudStatus } from "../../../data/cloud";
import { ExposeEntitySettings } from "../../../data/expose";
@ -48,7 +47,6 @@ export class HaConfigVoiceAssistantsAssistants extends LitElement {
${isComponentLoaded(this.hass, "assist_pipeline")
? html`
<assist-pref
.dir=${computeRTLDirection(this.hass)}
.hass=${this.hass}
.cloudStatus=${this.cloudStatus}
.exposedEntities=${this.exposedEntities}
@ -61,13 +59,11 @@ export class HaConfigVoiceAssistantsAssistants extends LitElement {
.hass=${this.hass}
.exposedEntities=${this.exposedEntities}
.cloudStatus=${this.cloudStatus}
.dir=${computeRTLDirection(this.hass)}
></cloud-alexa-pref>
<cloud-google-pref
.hass=${this.hass}
.exposedEntities=${this.exposedEntities}
.cloudStatus=${this.cloudStatus}
.dir=${computeRTLDirection(this.hass)}
></cloud-google-pref>
`
: html`<cloud-discover .hass=${this.hass}></cloud-discover>`}

2
src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts
View File

@ -27,7 +27,6 @@ import {
isEmptyFilter,
} from "../../../common/entity/entity_filter";
import { navigate } from "../../../common/navigate";
import { computeRTL } from "../../../common/util/compute_rtl";
import {
DataTableColumnContainer,
DataTableRowData,
@ -618,7 +617,6 @@ export class VoiceAssistantsExpose extends LitElement {
"ui.panel.config.voice_assistants.expose.add"
)}
extended
?rtl=${computeRTL(this.hass)}
@click=${this._addEntry}
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>

7
src/panels/developer-tools/service/developer-tools-service.ts
View File

@ -588,13 +588,10 @@ class HaPanelDevService extends LitElement {
}
.attributes th {
text-align: left;
text-align: var(--float-start);
background-color: var(--card-background-color);
border-bottom: 1px solid var(--primary-text-color);
}
:host([rtl]) .attributes th {
text-align: right;
direction: var(--direction);
}
.attributes tr {

24
src/panels/developer-tools/state/developer-tools-state.ts
View File

@ -16,9 +16,7 @@ import memoizeOne from "memoize-one";
import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time";
import { storage } from "../../../common/decorators/storage";
import { fireEvent } from "../../../common/dom/fire_event";
import { toggleAttribute } from "../../../common/dom/toggle_attribute";
import { escapeRegExp } from "../../../common/string/escape_regexp";
import { computeRTL } from "../../../common/util/compute_rtl";
import { copyToClipboard } from "../../../common/util/copy-clipboard";
import "../../../components/entity/ha-entity-picker";
import "../../../components/ha-alert";
@ -69,8 +67,6 @@ class HaPanelDevState extends LitElement {
@property({ type: Boolean, reflect: true }) public narrow = false;
@property({ type: Boolean, reflect: true }) public rtl = false;
@query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;
private _filteredEntities = memoizeOne(
@ -325,14 +321,6 @@ class HaPanelDevState extends LitElement {
`;
}
protected updated(changedProps) {
super.updated(changedProps);
const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
if (!oldHass || oldHass.locale !== this.hass.locale) {
toggleAttribute(this, "rtl", computeRTL(this.hass));
}
}
private _copyEntity(ev) {
ev.preventDefault();
const entity = (ev.currentTarget! as any).entity;
@ -626,7 +614,8 @@ class HaPanelDevState extends LitElement {
.entities th {
padding: 0 8px;
text-align: left;
text-align: var(--float-start);
direction: var(--direction);
}
.filters th {
@ -652,15 +641,6 @@ class HaPanelDevState extends LitElement {
bottom: -8px;
}
:host([rtl]) .entities th {
text-align: right;
direction: rtl;
}
:host([rtl]) .filters {
direction: rtl;
}
.entities tr {
vertical-align: top;
direction: ltr;

44
src/panels/developer-tools/statistics/developer-tools-statistics.ts
View File

@ -1,7 +1,7 @@
import "@material/mwc-button/mwc-button";
import { mdiSlopeUphill } from "@mdi/js";
import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement } from "lit";
import { CSSResultGroup, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../../common/dom/fire_event";
@ -26,7 +26,6 @@ import { haStyle } from "../../../resources/styles";
import { HomeAssistant } from "../../../types";
import { showStatisticsAdjustSumDialog } from "./show-dialog-statistics-adjust-sum";
import { showFixStatisticsUnitsChangedDialog } from "./show-dialog-statistics-fix-units-changed";
import { computeRTLDirection } from "../../../common/util/compute_rtl";
import { documentationUrl } from "../../../util/documentation-url";
const FIX_ISSUES_ORDER = {
@ -183,7 +182,6 @@ class HaPanelDevStatistics extends SubscribeMixin(LitElement) {
id="statistic_id"
clickable
@row-click=${this._rowClicked}
.dir=${computeRTLDirection(this.hass)}
></ha-data-table>
`;
}
@ -411,45 +409,7 @@ class HaPanelDevStatistics extends SubscribeMixin(LitElement) {
};
static get styles(): CSSResultGroup {
return [
haStyle,
css`
.content {
padding: 16px;
padding: max(16px, env(safe-area-inset-top))
max(16px, env(safe-area-inset-right))
max(16px, env(safe-area-inset-bottom))
max(16px, env(safe-area-inset-left));
}
th {
padding: 0 8px;
text-align: left;
}
:host([rtl]) th {
text-align: right;
}
tr {
vertical-align: top;
direction: ltr;
}
tr:nth-child(odd) {
background-color: var(--table-row-background-color, #fff);
}
tr:nth-child(even) {
background-color: var(--table-row-alternative-background-color, #eee);
}
td {
padding: 4px;
min-width: 200px;
word-break: break-word;
}
`,
];
return haStyle;
}
}

8
src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts
View File

@ -1,5 +1,4 @@
import "@material/mwc-button/mwc-button";
import "@material/mwc-list/mwc-list-item";
import formatISO9075 from "date-fns/formatISO9075";
import {
css,
@ -21,6 +20,7 @@ import "../../../components/ha-selector/ha-selector-datetime";
import "../../../components/ha-selector/ha-selector-number";
import "../../../components/ha-svg-icon";
import "../../../components/ha-icon-next";
import "../../../components/ha-list-item";
import {
adjustStatisticsSum,
fetchStatistics,
@ -151,7 +151,7 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
const stat = data[i];
const growth = Math.round(stat.change! * 100) / 100;
rows.push(html`
<mwc-list-item
<ha-list-item
twoline
hasMeta
.stat=${stat}
@ -166,7 +166,7 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
)}
</span>
<ha-icon-next slot="meta"></ha-icon-next>
</mwc-list-item>
</ha-list-item>
`);
}
stats = html`${rows}`;
@ -413,7 +413,7 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
ha-selector-number {
margin-bottom: 20px;
}
mwc-list-item {
ha-list-item {
margin: 0 -24px;
--mdc-list-side-padding: 24px;
}

11
src/panels/history/ha-panel-history.ts
View File

@ -15,7 +15,6 @@ import {
extractSearchParamsObject,
removeSearchParam,
} from "../../common/url/search-params";
import { computeRTL } from "../../common/util/compute_rtl";
import { MIN_TIME_BETWEEN_UPDATES } from "../../components/chart/ha-chart-base";
import "../../components/chart/state-history-charts";
import type { StateHistoryCharts } from "../../components/chart/state-history-charts";
@ -355,15 +354,6 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
this._getHistory();
this._getStats();
}
if (!changedProps.has("hass") && !changedProps.has("_entities")) {
return;
}
const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
if (!oldHass || oldHass.language !== this.hass.language) {
this.rtl = computeRTL(this.hass);
}
}
private _removeAll() {
@ -710,6 +700,7 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
ha-date-range-picker {
margin-right: 0;
margin-inline-end: 0;
margin-inline-start: initial;
width: 100%;
}
}

2
src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts
View File

@ -215,6 +215,8 @@ class HuiEnergyCarbonGaugeCard
ha-svg-icon {
position: absolute;
right: 4px;
inset-inline-end: 4px;
inset-inline-start: initial;
top: 4px;
color: var(--secondary-text-color);
}

2
src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts
View File

@ -192,6 +192,8 @@ class HuiEnergyGridGaugeCard
ha-svg-icon {
position: absolute;
right: 4px;
inset-inline-end: 4px;
inset-inline-start: initial;
top: 4px;
color: var(--secondary-text-color);
}

2
src/panels/lovelace/cards/energy/hui-energy-self-sufficiency-gauge-card.ts
View File

@ -255,6 +255,8 @@ class HuiEnergySelfSufficiencyGaugeCard
ha-svg-icon {
position: absolute;
right: 4px;
inset-inline-end: 4px;
inset-inline-start: initial;
top: 4px;
color: var(--secondary-text-color);
}

2
src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts
View File

@ -194,6 +194,8 @@ class HuiEnergySolarGaugeCard
ha-svg-icon {
position: absolute;
right: 4px;
inset-inline-end: 4px;
inset-inline-start: initial;
top: 4px;
color: var(--secondary-text-color);
}

2
src/panels/lovelace/cards/hui-tile-card.ts
View File

@ -524,6 +524,8 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
position: absolute;
top: -3px;
right: -3px;
inset-inline-end: -3px;
inset-inline-start: initial;
}
.icon-container:not([role="button"]) {
pointer-events: none;

5
src/panels/lovelace/cards/hui-weather-forecast-card.ts
View File

@ -612,11 +612,6 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
text-align: center;
}
/* ============= RTL ============= */
:host([rtl]) .temp-attribute {
text-align: left;
}
/* ============= NARROW ============= */
:host([narrow]) .icon-image {

17
src/panels/lovelace/components/hui-generic-entity-row.ts
View File

@ -13,7 +13,6 @@ import { DOMAINS_INPUT_ROW } from "../../../common/const";
import { toggleAttribute } from "../../../common/dom/toggle_attribute";
import { computeDomain } from "../../../common/entity/compute_domain";
import { computeStateName } from "../../../common/entity/compute_state_name";
import { computeRTL } from "../../../common/util/compute_rtl";
import "../../../components/entity/state-badge";
import "../../../components/ha-relative-time";
import { ActionHandlerEvent } from "../../../data/lovelace/action_handler";
@ -186,9 +185,6 @@ export class HuiGenericEntityRow extends LitElement {
"no-secondary",
!this.secondaryText && !this.config?.secondary_info
);
if (changedProps.has("hass")) {
toggleAttribute(this, "rtl", computeRTL(this.hass!));
}
}
private _handleAction(ev: ActionHandlerEvent) {
@ -233,22 +229,11 @@ export class HuiGenericEntityRow extends LitElement {
state-badge {
flex: 0 0 40px;
}
:host([rtl]) .flex {
margin-left: 0;
margin-right: 16px;
}
:host([rtl]) .flex ::slotted(*) {
margin-left: 0;
margin-right: 8px;
}
.pointer {
cursor: pointer;
}
.state {
text-align: right;
}
.state.rtl {
text-align: left;
text-align: var(--float-end);
}
.value {
direction: ltr;

8
src/panels/lovelace/editor/card-editor/hui-card-preview.ts
View File

@ -1,6 +1,5 @@
import { PropertyValues, ReactiveElement } from "lit";
import { property } from "lit/decorators";
import { computeRTL } from "../../../../common/util/compute_rtl";
import { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
import { HomeAssistant } from "../../../../types";
import { createCardElement } from "../../create-element/create-card-element";
@ -70,13 +69,6 @@ export class HuiCardPreview extends ReactiveElement {
}
if (changedProperties.has("hass")) {
const oldHass = changedProperties.get("hass") as
| HomeAssistant
| undefined;
if (!oldHass || oldHass.language !== this.hass!.language) {
this.style.direction = computeRTL(this.hass!) ? "rtl" : "ltr";
}
if (this._element) {
this._element.hass = this.hass;
}

2
src/panels/lovelace/editor/card-editor/hui-entity-picker-table.ts
View File

@ -3,7 +3,6 @@ import { customElement, property } from "lit/decorators";
import memoizeOne from "memoize-one";
import type { HASSDomEvent } from "../../../../common/dom/fire_event";
import { fireEvent } from "../../../../common/dom/fire_event";
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
import "../../../../components/data-table/ha-data-table";
import type {
DataTableColumnContainer,
@ -33,7 +32,6 @@ export class HuiEntityPickerTable extends LitElement {
.id=${"entity_id"}
.columns=${this._columns(this.narrow!)}
.data=${this.entities}
.dir=${computeRTLDirection(this.hass)}
.searchLabel=${this.hass.localize(
"ui.panel.lovelace.unused_entities.search"
)}

3
src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
View File

@ -18,7 +18,6 @@ import {
} from "superstruct";
import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
import { customType } from "../../../../common/structs/is-custom-type";
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
import "../../../../components/ha-card";
import "../../../../components/ha-formfield";
import "../../../../components/ha-icon";
@ -265,7 +264,6 @@ export class HuiEntitiesCardEditor
.label=${this.hass.localize(
"ui.panel.lovelace.editor.card.entities.show_header_toggle"
)}
.dir=${computeRTLDirection(this.hass)}
>
<ha-switch
.checked=${this._config!.show_header_toggle !== false}
@ -277,7 +275,6 @@ export class HuiEntitiesCardEditor
.label=${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.state_color"
)}
.dir=${computeRTLDirection(this.hass)}
>
<ha-switch
.checked=${this._config!.state_color}

5
src/panels/lovelace/editor/hui-badge-preview.ts
View File

@ -1,4 +1,3 @@
import { computeRTL } from "../../../common/util/compute_rtl";
import "../../../components/entity/ha-state-label-badge";
import { LovelaceBadgeConfig } from "../../../data/lovelace/config/badge";
import { HomeAssistant } from "../../../types";
@ -29,10 +28,6 @@ export class HuiBadgePreview extends HTMLElement {
}
set hass(hass: HomeAssistant) {
if (!this._hass || this._hass.language !== hass.language) {
this.style.direction = computeRTL(hass) ? "rtl" : "ltr";
}
this._hass = hass;
if (this._element) {
this._element.hass = hass;

3
src/panels/lovelace/editor/hui-dialog-save-config.ts
View File

@ -3,7 +3,6 @@ import { mdiHelpCircle } from "@mdi/js";
import { CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
import { computeRTLDirection } from "../../../common/util/compute_rtl";
import "../../../components/ha-circular-progress";
import "../../../components/ha-dialog";
import "../../../components/ha-formfield";
@ -64,7 +63,6 @@ export class HuiSaveConfig extends LitElement implements HassDialog {
title=${this.hass!.localize("ui.panel.lovelace.menu.help")}
target="_blank"
rel="noreferrer"
dir=${computeRTLDirection(this.hass!)}
>
<ha-icon-button
.path=${mdiHelpCircle}
@ -88,7 +86,6 @@ export class HuiSaveConfig extends LitElement implements HassDialog {
.label=${this.hass!.localize(
"ui.panel.lovelace.editor.save_config.empty_config"
)}
.dir=${computeRTLDirection(this.hass!)}
>
<ha-switch
.checked=${this._emptyConfig}

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

@ -11,7 +11,6 @@ import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { computeDomain } from "../../../../common/entity/compute_domain";
import { computeStateName } from "../../../../common/entity/compute_state_name";
import { computeRTL } from "../../../../common/util/compute_rtl";
import type { DataTableRowData } from "../../../../components/data-table/ha-data-table";
import "../../../../components/ha-fab";
import "../../../../components/ha-svg-icon";
@ -99,7 +98,6 @@ export class HuiUnusedEntities extends LitElement {
</div>
<div
class="fab ${classMap({
rtl: computeRTL(this.hass),
selected: this._selectedEntities.length,
})}"
>
@ -171,20 +169,13 @@ export class HuiUnusedEntities extends LitElement {
}
.fab {
position: sticky;
float: right;
float: var(--float-end);
right: calc(16px + env(safe-area-inset-right));
bottom: calc(16px + env(safe-area-inset-bottom));
inset-inline-end: calc(16px + env(safe-area-inset-right));
inset-inline-start: initial;
z-index: 1;
}
.fab.rtl {
right: initial;
left: 0;
bottom: 0;
padding-right: 16px;
padding-left: calc(16px + env(safe-area-inset-left));
padding-inline-end: 16px;
padding-inline-start: calc(16px + env(safe-area-inset-left));
}
ha-fab {
position: relative;
bottom: calc(-80px - env(safe-area-inset-bottom));

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

@ -7,7 +7,6 @@ import {
nothing,
} from "lit";
import { customElement, property, state } from "lit/decorators";
import { computeRTLDirection } from "../../../common/util/compute_rtl";
import { debounce } from "../../../common/util/debounce";
import "../../../components/ha-slider";
import "../../../components/ha-textfield";
@ -86,7 +85,6 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
<div class="flex">
<ha-slider
labeled
.dir=${computeRTLDirection(this.hass)}
.disabled=${isUnavailableState(stateObj.state)}
.step=${Number(stateObj.attributes.step)}
.min=${Number(stateObj.attributes.min)}

2
src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts
View File

@ -23,7 +23,6 @@ import {
import { customElement, property, state } from "lit/decorators";
import { stateActive } from "../../../common/entity/state_active";
import { supportsFeature } from "../../../common/entity/supports-feature";
import { computeRTLDirection } from "../../../common/util/compute_rtl";
import { debounce } from "../../../common/util/debounce";
import "../../../components/ha-icon-button";
import "../../../components/ha-slider";
@ -254,7 +253,6 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
? html`
<ha-slider
labeled
.dir=${computeRTLDirection(this.hass!)}
.value=${Number(stateObj.attributes.volume_level) * 100}
@change=${this._selectedValueChanged}
id="input"

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

@ -7,7 +7,6 @@ import {
nothing,
} from "lit";
import { customElement, property, state } from "lit/decorators";
import { computeRTLDirection } from "../../../common/util/compute_rtl";
import { debounce } from "../../../common/util/debounce";
import "../../../components/ha-slider";
import "../../../components/ha-textfield";
@ -91,7 +90,6 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow {
<ha-slider
labeled
.disabled=${stateObj.state === UNAVAILABLE}
.dir=${computeRTLDirection(this.hass)}
.step=${Number(stateObj.attributes.step)}
.min=${Number(stateObj.attributes.min)}
.max=${Number(stateObj.attributes.max)}

5
src/panels/lovelace/entity-rows/hui-weather-entity-row.ts
View File

@ -260,11 +260,6 @@ class HuiWeatherEntityRow extends LitElement implements LovelaceRow {
--mdc-icon-size: 40px;
}
:host([rtl]) .flex {
margin-left: 0;
margin-right: 16px;
}
.pointer {
cursor: pointer;
}

12
src/panels/lovelace/views/hui-masonry-view.ts
View File

@ -8,9 +8,7 @@ import {
TemplateResult,
} from "lit";
import { property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { fireEvent } from "../../../common/dom/fire_event";
import { computeRTL } from "../../../common/util/compute_rtl";
import { nextRender } from "../../../common/util/render-status";
import "../../../components/entity/ha-state-label-badge";
import "../../../components/ha-svg-icon";
@ -97,9 +95,6 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
)}
extended
@click=${this._addCard}
class=${classMap({
rtl: computeRTL(this.hass!),
})}
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</ha-fab>
@ -338,14 +333,11 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
position: fixed;
right: calc(16px + env(safe-area-inset-right));
bottom: calc(16px + env(safe-area-inset-bottom));
inset-inline-end: calc(16px + env(safe-area-inset-right));
inset-inline-start: initial;
z-index: 1;
}
ha-fab.rtl {
right: auto;
left: calc(16px + env(safe-area-inset-left));
}
@media (max-width: 500px) {
.column > * {
margin-left: 0;

9
src/panels/lovelace/views/hui-panel-view.ts
View File

@ -137,12 +137,9 @@ export class PanelView extends LitElement implements LovelaceViewElement {
right: calc(16px + env(safe-area-inset-right));
bottom: calc(16px + env(safe-area-inset-bottom));
z-index: 1;
}
ha-fab.rtl {
float: left;
right: auto;
left: calc(16px + env(safe-area-inset-left));
float: var(--float-end);
inset-inline-end: calc(16px + env(safe-area-inset-right));
inset-inline-start: initial;
}
`;
}

12
src/panels/lovelace/views/hui-sidebar-view.ts
View File

@ -8,9 +8,7 @@ import {
html,
} from "lit";
import { property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { fireEvent } from "../../../common/dom/fire_event";
import { computeRTL } from "../../../common/util/compute_rtl";
import type { LovelaceViewElement } from "../../../data/lovelace";
import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
import type { HomeAssistant } from "../../../types";
@ -100,9 +98,6 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
)}
extended
@click=${this._addCard}
class=${classMap({
rtl: computeRTL(this.hass!),
})}
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</ha-fab>
@ -241,13 +236,10 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
position: fixed;
right: calc(16px + env(safe-area-inset-right));
bottom: calc(16px + env(safe-area-inset-bottom));
inset-inline-end: calc(16px + env(safe-area-inset-right));
inset-inline-start: initial;
z-index: 1;
}
ha-fab.rtl {
right: auto;
left: calc(16px + env(safe-area-inset-left));
}
`;
}
}

2
src/panels/todo/ha-panel-todo.ts
View File

@ -430,6 +430,8 @@ class PanelTodo extends LitElement {
position: fixed;
right: 16px;
bottom: 16px;
inset-inline-end: 16px;
inset-inline-start: initial;
}
`,
];

14
src/resources/ha-sidebar-edit-style.ts
View File

@ -62,22 +62,16 @@ export const sidebarEditStyle = css`
position: absolute;
top: 0;
right: 4px;
inset-inline-end: 4px;
inset-inline-start: initial;
--mdc-icon-button-size: 40px;
}
:host([rtl]) .show-panel {
right: initial;
left: 4px;
}
.hide-panel {
top: 4px;
right: 8px;
}
:host([rtl]) .hide-panel {
right: initial;
left: 8px;
inset-inline-end: 8px;
inset-inline-start: initial;
}
:host([expanded]) .hide-panel {

17
src/state-summary/state-card-alert.ts
View File

@ -2,7 +2,6 @@ import type { HassEntity } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { stateActive } from "../common/entity/state_active";
import { computeRTL } from "../common/util/compute_rtl";
import "../components/entity/ha-entity-toggle";
import "../components/entity/state-info";
import { haStyle } from "../resources/styles";
@ -16,9 +15,6 @@ class StateCardAlert extends LitElement {
@property({ type: Boolean }) public inDialog = false;
// property used only in CSS
@property({ type: Boolean, reflect: true }) public rtl = false;
protected render(): TemplateResult {
return html`
<div class="horizontal justified layout">
@ -40,18 +36,6 @@ class StateCardAlert extends LitElement {
`;
}
protected updated(changedProps) {
super.updated(changedProps);
if (!changedProps.has("hass")) {
return;
}
const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
if (!oldHass || oldHass.language !== this.hass.language) {
this.rtl = computeRTL(this.hass);
}
}
static get styles(): CSSResultGroup {
return [
haStyle,
@ -69,7 +53,6 @@ class StateCardAlert extends LitElement {
overflow-wrap: break-word;
display: flex;
align-items: center;
direction: ltr;
}
ha-entity-toggle {
margin: -4px -16px -4px 0;

14
src/state-summary/state-card-display.ts
View File

@ -3,7 +3,6 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { computeDomain } from "../common/entity/compute_domain";
import { computeRTL } from "../common/util/compute_rtl";
import "../components/entity/state-info";
import { isUnavailableState } from "../data/entity";
import { SENSOR_DEVICE_CLASS_TIMESTAMP } from "../data/sensor";
@ -53,18 +52,6 @@ class StateCardDisplay extends LitElement {
`;
}
protected updated(changedProps) {
super.updated(changedProps);
if (!changedProps.has("hass")) {
return;
}
const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
if (!oldHass || oldHass.language !== this.hass.language) {
this.rtl = computeRTL(this.hass);
}
}
static get styles(): CSSResultGroup {
return [
haStyle,
@ -83,7 +70,6 @@ class StateCardDisplay extends LitElement {
word-break: break-word;
display: flex;
align-items: center;
direction: ltr;
justify-content: flex-end;
}
.state.has-unit_of_measurement {

2
src/state-summary/state-card-input_number.ts
View File

@ -1,7 +1,6 @@
import { HassEntity } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { computeRTLDirection } from "../common/util/compute_rtl";
import { debounce } from "../common/util/debounce";
import "../components/entity/state-info";
import "../components/ha-slider";
@ -58,7 +57,6 @@ class StateCardInputNumber extends LitElement {
<div class="flex">
<ha-slider
labeled
.dir=${computeRTLDirection(this.hass)}
.disabled=${isUnavailableState(this.stateObj.state)}
.step=${Number(this.stateObj.attributes.step)}
.min=${Number(this.stateObj.attributes.min)}

2
src/state-summary/state-card-number.ts
View File

@ -7,7 +7,6 @@ import "../components/ha-textfield";
import { HomeAssistant } from "../types";
import { haStyle } from "../resources/styles";
import { loadPolyfillIfNeeded } from "../resources/resize-observer.polyfill";
import { computeRTLDirection } from "../common/util/compute_rtl";
import { isUnavailableState } from "../data/entity";
import { debounce } from "../common/util/debounce";
@ -61,7 +60,6 @@ class StateCardNumber extends LitElement {
<div class="flex">
<ha-slider
labeled
.dir=${computeRTLDirection(this.hass)}
.disabled=${isUnavailableState(this.stateObj.state)}
.step=${Number(this.stateObj.attributes.step)}
.min=${Number(this.stateObj.attributes.min)}