diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts index 12ac252e739c..698706260318 100644 --- a/src/components/ha-sidebar.ts +++ b/src/components/ha-sidebar.ts @@ -1,3 +1,5 @@ +import "@material/mwc-list/mwc-list-item"; +import "@material/mwc-list/mwc-list"; import "@material/mwc-button/mwc-button"; import "@material/mwc-icon-button"; import { @@ -9,8 +11,6 @@ import { mdiPlus, mdiViewDashboard, } from "@mdi/js"; -import "@polymer/paper-item/paper-icon-item"; -import type { PaperIconItemElement } from "@polymer/paper-item/paper-icon-item"; import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import { @@ -48,6 +48,7 @@ import "./ha-icon"; import "./ha-menu-button"; import "./ha-svg-icon"; import "./user/ha-user-badge"; +import { navigate } from "../common/navigate"; const SHOW_AFTER_SPACER = ["config", "developer-tools", "hassio"]; @@ -201,6 +202,8 @@ class HaSidebar extends LitElement { private _sortable?; + private _selectItem(ev: Event) {} + protected render() { const hass = this.hass; @@ -255,12 +258,11 @@ class HaSidebar extends LitElement { : "Home Assistant"} - @@ -273,7 +275,8 @@ class HaSidebar extends LitElement { )} ` : this._renderPanels(beforeSpacer)} -
+ + ${this.editMode && this._hiddenPanels.length ? html` ${this._hiddenPanels.map((url) => { @@ -281,7 +284,7 @@ class HaSidebar extends LitElement { if (!panel) { return ""; } - return html` - ${panel.url_path === this.hass.defaultPanel - ? hass.localize("panel.states") - : hass.localize(`panel.${panel.title}`) || - panel.title} + ${panel.url_path === this.hass.defaultPanel + ? hass.localize("panel.states") + : hass.localize(`panel.${panel.title}`) || panel.title} - `; + `; })} -
+ > ` : ""} ${this._renderPanels(afterSpacer)} ${this._externalConfig && this._externalConfig.hasSettingsScreen ? html` - - + + ${hass.localize("ui.sidebar.external_app_configuration")} - - + + ` : ""} - +
-
- - - ${!this.expanded && notificationCount > 0 - ? html` - - ${notificationCount} - - ` - : ""} - - ${hass.localize("ui.notification_drawer.title")} - - ${this.expanded && notificationCount > 0 - ? html` - ${notificationCount} - ` - : ""} - -
- - + ${!this.expanded && notificationCount > 0 + ? html` + + ${notificationCount} + + ` + : ""} + ${hass.localize("ui.notification_drawer.title")} + ${this.expanded && notificationCount > 0 + ? html` ${notificationCount} ` + : ""} + + - - - - - ${hass.user ? hass.user.name : ""} - - - -
+ + ${hass.user ? hass.user.name : ""} + +
`; } @@ -491,7 +480,7 @@ class HaSidebar extends LitElement { if (!Sortable) { const [sortableImport, sortStylesImport] = await Promise.all([ import("sortablejs/modular/sortable.core.esm"), - import("../resources/ha-sortable-style"), + import("../resources/ha-sortable-style-mwc"), ]); const style = document.createElement("style"); @@ -513,7 +502,7 @@ class HaSidebar extends LitElement { animation: 150, fallbackClass: "sortable-fallback", dataIdAttr: "data-panel", - handle: "paper-icon-item", + handle: "mwc-list-item", onSort: async () => { this._panelOrder = this._sortable.toArray(); }, @@ -575,7 +564,7 @@ class HaSidebar extends LitElement { clearTimeout(this._mouseLeaveTimeout); this._mouseLeaveTimeout = undefined; } - this._showTooltip(ev.currentTarget as PaperIconItemElement); + this._showTooltip(ev.currentTarget); } private _itemMouseLeave() { @@ -591,7 +580,7 @@ class HaSidebar extends LitElement { if (this.expanded || ev.target.nodeName !== "A") { return; } - this._showTooltip(ev.target.querySelector("paper-icon-item")); + this._showTooltip(ev.target.querySelector("mwc-list-item")); } private _listboxFocusOut() { @@ -615,18 +604,20 @@ class HaSidebar extends LitElement { this._recentKeydownActiveUntil = new Date().getTime() + 100; } - private _showTooltip(item: PaperIconItemElement) { + private _showTooltip(_item: EventTarget) { + const item = _item as any; + if (this._tooltipHideTimeout) { clearTimeout(this._tooltipHideTimeout); this._tooltipHideTimeout = undefined; } const tooltip = this._tooltip; - const listbox = this.shadowRoot!.querySelector("paper-listbox")!; + const listbox = this.shadowRoot!.querySelector("mwc-list")!; let top = item.offsetTop + 11; if (listbox.contains(item)) { top -= listbox.scrollTop; } - tooltip.innerHTML = item.querySelector(".item-text")!.innerHTML; + tooltip.innerHTML = item.text; tooltip.style.display = "block"; tooltip.style.top = `${top}px`; tooltip.style.left = `${item.offsetLeft + item.clientWidth + 4}px`; @@ -675,6 +666,10 @@ class HaSidebar extends LitElement { ); } + private _navigateToPanel(ev: Event) { + navigate(this, (ev.currentTarget as any).url); + } + private _renderPanel( urlPath: string, title: string | null, @@ -682,23 +677,19 @@ class HaSidebar extends LitElement { iconPath?: string | null ) { return html` - - - ${iconPath - ? html`` - : html``} - ${title} - + ${iconPath + ? html`` + : html``} + ${title} ${this.editMode ? html` ` : ""} - + `; } @@ -788,7 +779,7 @@ class HaSidebar extends LitElement { display: none; } - paper-listbox { + mwc-list { padding: 4px 0; display: flex; flex-direction: column; @@ -799,7 +790,7 @@ class HaSidebar extends LitElement { margin-left: env(safe-area-inset-left); } - :host([rtl]) paper-listbox { + :host([rtl]) mwc-list { margin-left: initial; margin-right: env(safe-area-inset-right); } @@ -814,7 +805,7 @@ class HaSidebar extends LitElement { outline: 0; } - paper-icon-item { + mwc-list-item { box-sizing: border-box; margin: 4px 8px; padding-left: 12px; @@ -822,10 +813,10 @@ class HaSidebar extends LitElement { --paper-item-min-height: 40px; width: 48px; } - :host([expanded]) paper-icon-item { + :host([expanded]) mwc-list-item { width: 240px; } - :host([rtl]) paper-icon-item { + :host([rtl]) mwc-list-item { padding-left: auto; padding-right: 12px; } @@ -834,8 +825,8 @@ class HaSidebar extends LitElement { ha-svg-icon[slot="item-icon"] { color: var(--sidebar-icon-color); } - - .iron-selected paper-icon-item::before, + /* + .iron-selected mwc-list-item::before, a:not(.iron-selected):focus::before { border-radius: 4px; position: absolute; @@ -848,7 +839,7 @@ class HaSidebar extends LitElement { transition: opacity 15ms linear; will-change: opacity; } - .iron-selected paper-icon-item::before { + .iron-selected mwc-list-item::before { background-color: var(--sidebar-selected-icon-color); opacity: 0.12; } @@ -857,37 +848,25 @@ class HaSidebar extends LitElement { opacity: var(--dark-divider-opacity); margin: 4px 8px; } - .iron-selected paper-icon-item:focus::before, - .iron-selected:focus paper-icon-item::before { + .iron-selected mwc-list-item:focus::before, + .iron-selected:focus mwc-list-item::before { opacity: 0.2; } - .iron-selected paper-icon-item[pressed]:before { + .iron-selected mwc-list-item[pressed]:before { opacity: 0.37; - } + } */ - paper-icon-item span { + mwc-list-item span { color: var(--sidebar-text-color); font-weight: 500; font-size: 14px; } - - a.iron-selected paper-icon-item ha-icon, - a.iron-selected paper-icon-item ha-svg-icon { + /* + a.iron-selected mwc-list-item ha-icon, + a.iron-selected mwc-list-item ha-svg-icon { color: var(--sidebar-selected-icon-color); - } - - a.iron-selected .item-text { - color: var(--sidebar-selected-text-color); - } - - paper-icon-item .item-text { - display: none; - max-width: calc(100% - 56px); - } - :host([expanded]) paper-icon-item .item-text { - display: block; - } + } */ .divider { bottom: 112px; @@ -899,18 +878,14 @@ class HaSidebar extends LitElement { height: 1px; background-color: var(--divider-color); } - .notifications-container { - display: flex; - margin-left: env(safe-area-inset-left); - } - :host([rtl]) .notifications-container { + + :host([rtl]) .notifications { margin-left: initial; margin-right: env(safe-area-inset-right); } .notifications { + margin-left: env(safe-area-inset-left); cursor: pointer; - } - .notifications .item-text { flex: 1; } .profile { @@ -920,19 +895,19 @@ class HaSidebar extends LitElement { margin-left: initial; margin-right: env(safe-area-inset-right); } - .profile paper-icon-item { + .profile mwc-list-item { padding-left: 4px; } - :host([rtl]) .profile paper-icon-item { + :host([rtl]) .profile mwc-list-item { padding-left: auto; padding-right: 4px; } - .profile .item-text { + /* .profile .item-text { margin-left: 8px; } :host([rtl]) .profile .item-text { margin-right: 8px; - } + } */ .notification-badge { min-width: 20px; @@ -995,6 +970,7 @@ class HaSidebar extends LitElement { transform: scaleX(-1); } `, + // END CSS ]; } } diff --git a/src/resources/ha-sortable-style-mwc.ts b/src/resources/ha-sortable-style-mwc.ts new file mode 100644 index 000000000000..f4f92a57d56b --- /dev/null +++ b/src/resources/ha-sortable-style-mwc.ts @@ -0,0 +1,99 @@ +import { css } from "lit-element"; + +export const sortableStyles = css` + #sortable mwc-list-item:nth-of-type(2n) { + animation-name: keyframes1; + animation-iteration-count: infinite; + transform-origin: 50% 10%; + animation-delay: -0.75s; + animation-duration: 0.25s; + } + + #sortable mwc-list-item:nth-of-type(2n-1) { + animation-name: keyframes2; + animation-iteration-count: infinite; + animation-direction: alternate; + transform-origin: 30% 5%; + animation-delay: -0.5s; + animation-duration: 0.33s; + } + + #sortable mwc-list-item { + height: 48px; + display: flex; + } + + #sortable { + outline: none; + display: block !important; + } + + .hidden-panel { + display: flex !important; + } + + .sortable-fallback { + display: none; + } + + .sortable-ghost { + opacity: 0.4; + } + + .sortable-fallback { + opacity: 0; + } + + @keyframes keyframes1 { + 0% { + transform: rotate(-1deg); + animation-timing-function: ease-in; + } + + 50% { + transform: rotate(1.5deg); + animation-timing-function: ease-out; + } + } + + @keyframes keyframes2 { + 0% { + transform: rotate(1deg); + animation-timing-function: ease-in; + } + + 50% { + transform: rotate(-1.5deg); + animation-timing-function: ease-out; + } + } + + .show-panel, + .hide-panel { + display: none; + position: absolute; + top: 0; + right: 0; + --mdc-icon-button-size: 40px; + } + + .hide-panel { + top: 4px; + right: 8px; + } + + :host([expanded]) .hide-panel { + display: block; + } + + :host([expanded]) .show-panel { + display: inline-flex; + } + + mwc-list-item.hidden-panel, + mwc-list-item.hidden-panel span, + mwc-list-item.hidden-panel ha-icon[slot="item-icon"] { + color: var(--secondary-text-color); + cursor: pointer; + } +`;