Various RTL fixes (#15446)
This commit is contained in:
parent
1e7fe59519
commit
a13e2af17a
|
@ -156,18 +156,6 @@ The `title ` option should not be used without a description.
|
|||
|
||||
*Documentation coming soon*
|
||||
|
||||
**Right to left**
|
||||
|
||||
<ha-alert alert-type="success" rtl>
|
||||
This is an info alert — check it out!
|
||||
</ha-alert>
|
||||
|
||||
```html
|
||||
<ha-alert alert-type="success" rtl>
|
||||
This is an info alert — check it out!
|
||||
</ha-alert>
|
||||
```
|
||||
|
||||
### API
|
||||
**Properties/Attributes**
|
||||
|
||||
|
|
|
@ -37,13 +37,10 @@ class HaAlert extends LitElement {
|
|||
|
||||
@property({ type: Boolean }) public dismissable = false;
|
||||
|
||||
@property({ type: Boolean }) public rtl = false;
|
||||
|
||||
public render() {
|
||||
return html`
|
||||
<div
|
||||
class="issue-type ${classMap({
|
||||
rtl: this.rtl,
|
||||
[this.alertType]: true,
|
||||
})}"
|
||||
role="alert"
|
||||
|
@ -84,9 +81,6 @@ class HaAlert extends LitElement {
|
|||
padding: 8px;
|
||||
display: flex;
|
||||
}
|
||||
.issue-type.rtl {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.issue-type::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
@ -104,15 +98,12 @@ class HaAlert extends LitElement {
|
|||
.icon.no-title {
|
||||
align-self: center;
|
||||
}
|
||||
.issue-type.rtl > .content {
|
||||
flex-direction: row-reverse;
|
||||
text-align: right;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
text-align: var(--float-start);
|
||||
}
|
||||
.action {
|
||||
z-index: 1;
|
||||
|
@ -124,10 +115,9 @@ class HaAlert extends LitElement {
|
|||
word-break: break-word;
|
||||
margin-left: 8px;
|
||||
margin-right: 0;
|
||||
}
|
||||
.issue-type.rtl > .content > .main-content {
|
||||
margin-left: 0;
|
||||
margin-right: 8px;
|
||||
margin-inline-start: 8px;
|
||||
margin-inline-end: 0;
|
||||
direction: var(--direction);
|
||||
}
|
||||
.title {
|
||||
margin-top: 2px;
|
||||
|
|
|
@ -8,6 +8,12 @@ import { customElement, property } from "lit/decorators";
|
|||
export class HaTextArea extends TextAreaBase {
|
||||
@property({ type: Boolean, reflect: true }) autogrow = false;
|
||||
|
||||
firstUpdated() {
|
||||
super.firstUpdated();
|
||||
|
||||
this.setAttribute("dir", document.dir);
|
||||
}
|
||||
|
||||
updated(changedProperties: PropertyValues) {
|
||||
super.updated(changedProperties);
|
||||
if (this.autogrow && changedProperties.has("value")) {
|
||||
|
@ -47,6 +53,10 @@ export class HaTextArea extends TextAreaBase {
|
|||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
:host([dir="rtl"]) .mdc-floating-label {
|
||||
right: 16px;
|
||||
left: initial;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
|
|
@ -39,6 +39,7 @@ import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
|
|||
import "../../../layouts/hass-subpage";
|
||||
import { haStyle } from "../../../resources/styles";
|
||||
import { HomeAssistant, Route } from "../../../types";
|
||||
import { computeRTL } from "../../../common/util/compute_rtl";
|
||||
|
||||
@customElement("ha-automation-trace")
|
||||
export class HaAutomationTrace extends LitElement {
|
||||
|
@ -176,7 +177,9 @@ export class HaAutomationTrace extends LitElement {
|
|||
.label=${this.hass!.localize(
|
||||
"ui.panel.config.automation.trace.older_trace"
|
||||
)}
|
||||
.path=${mdiRayEndArrow}
|
||||
.path=${computeRTL(this.hass!)
|
||||
? mdiRayStartArrow
|
||||
: mdiRayEndArrow}
|
||||
.disabled=${this._traces[this._traces.length - 1].run_id ===
|
||||
this._runId}
|
||||
@click=${this._pickOlderTrace}
|
||||
|
@ -198,7 +201,9 @@ export class HaAutomationTrace extends LitElement {
|
|||
.label=${this.hass!.localize(
|
||||
"ui.panel.config.automation.trace.newer_trace"
|
||||
)}
|
||||
.path=${mdiRayStartArrow}
|
||||
.path=${computeRTL(this.hass!)
|
||||
? mdiRayEndArrow
|
||||
: mdiRayStartArrow}
|
||||
.disabled=${this._traces[0].run_id === this._runId}
|
||||
@click=${this._pickNewerTrace}
|
||||
></ha-icon-button>
|
||||
|
|
Loading…
Reference in New Issue