jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-04-30 16:27:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Select + target picker Rtl fixes (#12711)

Browse Source
This commit is contained in:
Yosi Levy 2022-05-19 17:28:56 +03:00 committed by GitHub
parent 6f19ea1d84
commit f6411dce66
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -47,11 +47,19 @@ export class HaSelect extends SelectBase {
.mdc-select__anchor { .mdc-select__anchor {
width: var(--ha-select-min-width, 200px); width: var(--ha-select-min-width, 200px);
} }
.mdc-floating-label { .mdc-select--filled .mdc-floating-label {
inset-inline-start: 16px !important; inset-inline-start: 12px;
inset-inline-end: initial !important; inset-inline-end: initial;
direction: var(--direction); direction: var(--direction);
} }
.mdc-select .mdc-select__anchor {
padding-inline-start: 12px;
padding-inline-end: 0px;
direction: var(--direction);
}
.mdc-select__anchor .mdc-floating-label--float-above {
transform-origin: var(--float-start);
}
`, `,
]; ];
} }

11
src/components/ha-target-picker.ts
View File

@ -569,6 +569,9 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
height: 16px; height: 16px;
--mdc-icon-size: 14px; --mdc-icon-size: 14px;
color: var(--secondary-text-color); color: var(--secondary-text-color);
margin-inline-start: 4px !important;
margin-inline-end: -4px !important;
direction: var(--direction);
} }
.mdc-chip__icon--leading { .mdc-chip__icon--leading {
display: flex; display: flex;
@ -578,6 +581,9 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
border-radius: 50%; border-radius: 50%;
padding: 6px; padding: 6px;
margin-left: -14px !important; margin-left: -14px !important;
margin-inline-start: -14px !important;
margin-inline-end: 4px !important;
direction: var(--direction);
} }
.expand-btn { .expand-btn {
margin-right: 0; margin-right: 0;
@ -616,11 +622,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
opacity: var(--light-disabled-opacity); opacity: var(--light-disabled-opacity);
pointer-events: none; pointer-events: none;
} }
.mdc-chip__icon {
margin-inline-start: -14px !important;
margin-inline-end: 4px !important;
direction: var(--direction);
}
`; `;
} }
} }

3
src/panels/lovelace/components/hui-action-editor.ts
View File

@ -198,6 +198,9 @@ export class HuiActionEditor extends LitElement {
position: absolute; position: absolute;
right: 40px; right: 40px;
top: 16px; top: 16px;
inset-inline-start: initial;
inset-inline-end: 40px;
direction: var(--direction);
} }
ha-select, ha-select,
ha-textfield { ha-textfield {

4
src/state/translations-mixin.ts
View File

@ -191,6 +191,10 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
this.style.direction = direction; this.style.direction = direction;
document.dir = direction; document.dir = direction;
this.style.setProperty("--direction", direction); this.style.setProperty("--direction", direction);
this.style.setProperty(
"--float-start",
direction === "ltr" ? "left" : "right"
);
this.style.setProperty( this.style.setProperty(
"--float-end", "--float-end",
direction === "ltr" ? "right" : "left" direction === "ltr" ? "right" : "left"