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

Fix ha-sidebar for RTL (#3469)

Browse Source 
* Fix menu alignments, icon, profile alignment in collapsed and expanded mode

* Refactor

* Lint exclude

* Refactor + lint ignore

* Fixed RTL calc location

* Refactored ifs
This commit is contained in:
Yosi Levy 2019-08-12 20:44:51 +03:00 committed by Paulus Schoutsen
parent 807dff99af
commit 88bea10b26
1 changed files with 31 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,6 +31,7 @@ import computeDomain from "../common/entity/compute_domain";
import { classMap } from "lit-html/directives/class-map"; import { classMap } from "lit-html/directives/class-map";
// tslint:disable-next-line: no-duplicate-imports // tslint:disable-next-line: no-duplicate-imports
import { PaperIconItemElement } from "@polymer/paper-item/paper-icon-item"; import { PaperIconItemElement } from "@polymer/paper-item/paper-icon-item";
import { computeRTL } from "../common/util/compute_rtl";
const SHOW_AFTER_SPACER = ["config", "developer-tools", "hassio"]; const SHOW_AFTER_SPACER = ["config", "developer-tools", "hassio"];
@ -106,6 +107,9 @@ class HaSidebar extends LitElement {
localStorage.defaultPage || DEFAULT_PANEL; localStorage.defaultPage || DEFAULT_PANEL;
@property() private _externalConfig?: ExternalConfig; @property() private _externalConfig?: ExternalConfig;
@property() private _notifications?: PersistentNotification[]; @property() private _notifications?: PersistentNotification[];
// property used only in css
// @ts-ignore
@property({ type: Boolean, reflect: true }) private _rtl = false;
private _mouseLeaveTimeout?: number; private _mouseLeaveTimeout?: number;
private _tooltipHideTimeout?: number; private _tooltipHideTimeout?: number;
@ -299,7 +303,13 @@ class HaSidebar extends LitElement {
if (changedProps.has("alwaysExpand")) { if (changedProps.has("alwaysExpand")) {
this.expanded = this.alwaysExpand; this.expanded = this.alwaysExpand;
} }
if (!SUPPORT_SCROLL_IF_NEEDED || !changedProps.has("hass")) { if (!changedProps.has("hass")) {
return;
}
this._rtl = computeRTL(this.hass);
if (!SUPPORT_SCROLL_IF_NEEDED) {
return; return;
} }
const oldHass = changedProps.get("hass") as HomeAssistant | undefined; const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
@ -472,6 +482,10 @@ class HaSidebar extends LitElement {
:host([expanded]) .menu paper-icon-button { :host([expanded]) .menu paper-icon-button {
margin-right: 23px; margin-right: 23px;
} }
:host([expanded][_rtl]) .menu paper-icon-button {
margin-right: 0px;
margin-left: 23px;
}
.title { .title {
display: none; display: none;
@ -521,6 +535,10 @@ class HaSidebar extends LitElement {
:host([expanded]) paper-icon-item { :host([expanded]) paper-icon-item {
width: 240px; width: 240px;
} }
:host([_rtl]) paper-icon-item {
padding-left: auto;
padding-right: 12px;
}
ha-icon[slot="item-icon"] { ha-icon[slot="item-icon"] {
color: var(--sidebar-icon-color); color: var(--sidebar-icon-color);
@ -588,9 +606,16 @@ class HaSidebar extends LitElement {
.profile paper-icon-item { .profile paper-icon-item {
padding-left: 4px; padding-left: 4px;
} }
:host([_rtl]) .profile paper-icon-item {
padding-left: auto;
padding-right: 4px;
}
.profile .item-text { .profile .item-text {
margin-left: 8px; margin-left: 8px;
} }
:host([_rtl]) .profile .item-text {
margin-right: 8px;
}
.notification-badge { .notification-badge {
min-width: 20px; min-width: 20px;
@ -647,6 +672,11 @@ class HaSidebar extends LitElement {
padding: 4px; padding: 4px;
font-weight: 500; font-weight: 500;
} }
:host([_rtl]) .menu paper-icon-button {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
`; `;
} }
} }