Skip to content

Rtl menu fix #12561

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bramkragten merged 17 commits into from
May 11, 2022
Merged

Rtl menu fix #12561

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
20cca1b
each
yosilevy May 3, 2022
5021b6d
Initial commit
yosilevy May 3, 2022
949ceda
Fixes
yosilevy May 3, 2022
d8c9684
Cleanup
yosilevy May 3, 2022
8ef03cb
Only run when in RTL
yosilevy May 3, 2022
f7aa73b
Lint fixes
yosilevy May 3, 2022
42d0f41
Fix lint
yosilevy May 3, 2022
ef9f317
Fix lint yet again
yosilevy May 3, 2022
03cbca7
Only run when RTL
yosilevy May 5, 2022
5907d07
Removal of host-context
yosilevy May 5, 2022
60f13eb
Switched to first-of-type
yosilevy May 5, 2022
d407d9b
ID is not needed
yosilevy May 7, 2022
c436d5c
Fixes following review
yosilevy May 10, 2022
cdfadb9
Merge branch 'RTL-menu-fix' of https://github.com/yosilevy/home-assis…
yosilevy May 10, 2022
bfcf089
Update src/components/ha-button-menu.ts
bramkragten May 10, 2022
1e50511
Lint fix
yosilevy May 11, 2022
53050fb
Merge branch 'RTL-menu-fix' of https://github.com/yosilevy/home-assis…
yosilevy May 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions src/components/ha-button-menu.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,21 @@ export class HaButtonMenu extends LitElement {
`;
}

protected firstUpdated(changedProps): void {
super.firstUpdated(changedProps);

if (document.dir === "rtl") {
this.updateComplete.then(() => {
this.querySelectorAll("mwc-list-item").forEach((item) => {
const style = document.createElement("style");
style.innerHTML =
"span.material-icons:first-of-type { margin-left: var(--mdc-list-item-graphic-margin, 32px) !important; margin-right: 0px !important;}";
item!.shadowRoot!.appendChild(style);
});
});
}
}

private _handleClick(): void {
if (this.disabled) {
return;
Expand Down
4 changes: 2 additions & 2 deletions src/state/translations-mixin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { atLeastVersion } from "../common/config/version";
import { computeLocalize, LocalizeFunc } from "../common/translations/localize";
import { computeRTL } from "../common/util/compute_rtl";
import { computeRTLDirection } from "../common/util/compute_rtl";
import { debounce } from "../common/util/debounce";
import {
getHassTranslations,
Expand Down Expand Up @@ -180,7 +180,7 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>

private _applyTranslations(hass: HomeAssistant) {
document.querySelector("html")!.setAttribute("lang", hass.language);
this.style.direction = computeRTL(hass) ? "rtl" : "ltr";
Copy link
Copy Markdown
Member

@bramkragten bramkragten May 10, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need/use this somewhere now?

Copy link
Copy Markdown
Contributor Author

@yosilevy yosilevy May 11, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No. I tested it and it works fine when direction is on body and not on home-assistant tag. All my previous fixes will work because host-context would just climb 1 level up.

document.dir = computeRTLDirection(hass);
this._loadCoreTranslations(hass.language);
this.__loadedFragmetTranslations = new Set();
this._loadFragmentTranslations(hass.language, hass.panelUrl);
Expand Down