mirror of
https://github.com/home-assistant/frontend.git
synced 2025-08-08 08:57:47 +00:00
Fix rtl and remove some unused CSS
This commit is contained in:
Donnie
parent
4a38f7a9e0
commit
1369d0f36d
@ -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);
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
@ -231,8 +231,8 @@ class HaSidebar extends LitElement {
|
||||
>
|
||||
${this._renderNotifications()}
|
||||
${this._renderUserItem()}
|
||||
${this._renderSpacer()}
|
||||
</mwc-list>
|
||||
${this._renderSpacer()}
|
||||
<div class="tooltip"></div>
|
||||
`;
|
||||
}
|
||||
@ -403,6 +403,7 @@ class HaSidebar extends LitElement {
|
||||
class="hidden-panel"
|
||||
.panel=${url}
|
||||
graphic="icon"
|
||||
.rtl=${this.rtl}
|
||||
>
|
||||
<ha-icon
|
||||
slot="graphic"
|
||||
@ -455,7 +456,6 @@ class HaSidebar extends LitElement {
|
||||
)
|
||||
)}
|
||||
${this._renderExternalConfiguration()}
|
||||
<li divider role="separator" class="spacer"></li>
|
||||
</mwc-list>
|
||||
`;
|
||||
}
|
||||
@ -482,6 +482,7 @@ class HaSidebar extends LitElement {
|
||||
hasMeta
|
||||
@mouseenter=${this._itemMouseEnter}
|
||||
@mouseleave=${this._itemMouseLeave}
|
||||
.rtl=${this.rtl}
|
||||
>
|
||||
<ha-svg-icon slot="graphic" .path=${mdiBell}></ha-svg-icon>
|
||||
${!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}
|
||||
>
|
||||
<ha-user-badge
|
||||
slot="graphic"
|
||||
@ -546,6 +548,7 @@ class HaSidebar extends LitElement {
|
||||
@mouseenter=${this._itemMouseEnter}
|
||||
@mouseleave=${this._itemMouseLeave}
|
||||
graphic="icon"
|
||||
.rtl=${this.rtl}
|
||||
>
|
||||
<ha-svg-icon slot="graphic" .path=${mdiCellphoneCog}></ha-svg-icon>
|
||||
<span class="item-text">
|
||||
@ -553,7 +556,8 @@ class HaSidebar extends LitElement {
|
||||
</span>
|
||||
</ha-clickable-list-item>
|
||||
`
|
||||
: ""}`;
|
||||
: ""}
|
||||
${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`<ha-svg-icon slot="graphic" .path=${iconPath}></ha-svg-icon>`
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user