From 1369d0f36d69e2696639c475796f449ca3612ad4 Mon Sep 17 00:00:00 2001 From: Donnie Date: Mon, 2 Nov 2020 11:59:17 -0800 Subject: [PATCH] Fix rtl and remove some unused CSS --- src/components/ha-clickable-list-item.ts | 20 +++- src/components/ha-sidebar.ts | 121 ++++------------------- 2 files changed, 37 insertions(+), 104 deletions(-) diff --git a/src/components/ha-clickable-list-item.ts b/src/components/ha-clickable-list-item.ts index 20adab1bae..d0b5ca6218 100644 --- a/src/components/ha-clickable-list-item.ts +++ b/src/components/ha-clickable-list-item.ts @@ -1,11 +1,14 @@ import { ListItem } from "@material/mwc-list/mwc-list-item"; -import { css, CSSResult, customElement } from "lit-element"; +import { css, CSSResult, customElement, property } from "lit-element"; import { html } from "lit-html"; @customElement("ha-clickable-list-item") export class HaClickableListItem extends ListItem { public href?: string; + // property used only in css + @property({ type: Boolean, reflect: true }) public rtl = false; + public render() { const r = super.render(); const href = this.href ? `/${this.href}` : ""; @@ -24,6 +27,17 @@ export class HaClickableListItem extends ListItem { padding-left: 0px; padding-right: 0px; } + + :host([rtl]) { + padding-left: var(--mdc-list-side-padding, 0px); + padding-right: var(--mdc-list-side-padding, 0px); + } + + :host([rtl]) span { + margin-left: var(--mdc-list-item-graphic-margin, 20px) !important; + margin-right: 0px !important; + } + :host([graphic="avatar"]:not([twoLine])), :host([graphic="icon"]:not([twoLine])) { height: 48px; @@ -33,8 +47,8 @@ export class HaClickableListItem extends ListItem { height: 100%; display: flex; align-items: center; - padding-left: var(--mdc-list-side-padding, 16px); - padding-right: var(--mdc-list-side-padding, 16px); + padding-left: var(--mdc-list-side-padding, 20px); + padding-right: var(--mdc-list-side-padding, 20px); } `, ]; diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts index 11debcda46..fa70755782 100644 --- a/src/components/ha-sidebar.ts +++ b/src/components/ha-sidebar.ts @@ -231,8 +231,8 @@ class HaSidebar extends LitElement { > ${this._renderNotifications()} ${this._renderUserItem()} + ${this._renderSpacer()} - ${this._renderSpacer()}
`; } @@ -403,6 +403,7 @@ class HaSidebar extends LitElement { class="hidden-panel" .panel=${url} graphic="icon" + .rtl=${this.rtl} > `; } @@ -482,6 +482,7 @@ class HaSidebar extends LitElement { hasMeta @mouseenter=${this._itemMouseEnter} @mouseleave=${this._itemMouseLeave} + .rtl=${this.rtl} > ${!this.expanded && notificationCount > 0 @@ -519,6 +520,7 @@ class HaSidebar extends LitElement { @mouseleave=${this._itemMouseLeave} graphic="icon" .activated=${this.hass.panelUrl === "profile"} + .rtl=${this.rtl} > @@ -553,7 +556,8 @@ class HaSidebar extends LitElement { ` - : ""}`; + : ""} + ${this._renderSpacer()} `; } private get _tooltip() { @@ -825,6 +829,7 @@ class HaSidebar extends LitElement { @mouseenter=${this._itemMouseEnter} @mouseleave=${this._itemMouseLeave} graphic="icon" + .rtl=${this.rtl} > ${iconPath ? html`` @@ -947,37 +952,12 @@ class HaSidebar extends LitElement { } :host([rtl]) mwc-list { border-right: 0; - border-left: 1px solid var(--divider-color); + /* border-left: 1px solid var(--divider-color); */ } - a { - text-decoration: none; - color: var(--sidebar-text-color); - font-weight: 500; - font-size: 14px; - position: relative; - outline: 0; - } - ha-clickable-list-item { - --mdc-list-side-padding: 20px; - } - - mwc-list-item { - --mdc-list-side-padding: 20px; - box-sizing: border-box; - margin: 4px; - border-radius: 4px; - width: 48px; - --mdc-list-item-graphic-margin: 16px; - --mdc-list-item-meta-size: 32px; - } - :host([expanded]) paper-icon-item { - width: 248px; - } - - :host([rtl]) mwc-list-item { - padding-left: auto; - padding-right: 12px; + :host([expanded]) mwc-list { + width: 256px; + width: calc(256px + env(safe-area-inset-left)); } ha-icon[slot="graphic"], @@ -994,48 +974,10 @@ class HaSidebar extends LitElement { margin-right: env(safe-area-inset-right); } - .iron-selected mwc-list-item::before, - a:not(.iron-selected):focus::before { - border-radius: 4px; - position: absolute; - top: 0; - right: 2px; - bottom: 0; - left: 2px; - pointer-events: none; - content: ""; - transition: opacity 15ms linear; - will-change: opacity; - } - .iron-selected mwc-list-item::before { - background-color: var(--sidebar-selected-icon-color); - opacity: 0.12; - } - a:not(.iron-selected):focus::before { - background-color: currentColor; - opacity: var(--dark-divider-opacity); - margin: 4px 8px; - } - .iron-selected mwc-list-item:focus::before, - .iron-selected:focus mwc-list-item::before { - opacity: 0.2; - } - - .iron-selected mwc-list-item[pressed]:before { - opacity: 0.37; - } - - mwc-list-item span { - color: var(--sidebar-text-color); - font-weight: 500; - font-size: 14px; - width: 100%; - } - a.iron-selected ha-icon, a.iron-selected ha-svg-icon, - a.iron-selected mwc-list-item ha-icon, - a.iron-selected mwc-list-item ha-svg-icon { + a.iron-selected ha-clickable-list-item ha-icon, + a.iron-selected ha-clickable-list-item ha-svg-icon { color: var(--sidebar-selected-icon-color); } @@ -1043,15 +985,6 @@ class HaSidebar extends LitElement { color: var(--sidebar-selected-text-color); } - mwc-list-item mwc-list-item .item-text, - mwc-list-item .item-text { - display: none; - max-width: calc(100% - 56px); - } - :host([expanded]) mwc-list-item .item-text { - display: block; - } - .notifications-container { display: flex; margin-left: env(safe-area-inset-left); @@ -1075,17 +1008,15 @@ class HaSidebar extends LitElement { :host([rtl]) .profile { margin-left: initial; margin-right: env(safe-area-inset-right); + --mdc-list-item-graphic-size: 40px; + --mdc-list-item-graphic-margin: 5px; + --mdc-list-side-padding: 6px; } - .profile mwc-list-item { - padding-left: 4px; - } - :host([rtl]) .profile mwc-list-item { - padding-left: auto; - padding-right: 4px; - } + .profile .item-text { margin-left: 8px; } + :host([rtl]) .profile .item-text { margin-right: 8px; } @@ -1102,6 +1033,7 @@ class HaSidebar extends LitElement { color: var(--text-accent-color, var(--text-primary-color)); font-size: 14px; } + ha-svg-icon + .notification-badge { position: absolute; bottom: 18px; @@ -1122,19 +1054,6 @@ class HaSidebar extends LitElement { white-space: nowrap; } - .dev-tools { - display: flex; - flex-direction: row; - justify-content: space-between; - padding: 0 8px; - width: 256px; - box-sizing: border-box; - } - - .dev-tools a { - color: var(--sidebar-icon-color); - } - .tooltip { display: none; position: absolute;