diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts index 1226fffbc4..d02c7bbd60 100644 --- a/src/components/ha-sidebar.ts +++ b/src/components/ha-sidebar.ts @@ -322,7 +322,7 @@ class HaSidebar extends LitElement { )} href="#external-app-configuration" tabindex="-1" - @click=${this._handleExternalAppConfiguration} + @panel-tap=${this._handleExternalAppConfiguration} @mouseenter=${this._itemMouseEnter} @mouseleave=${this._itemMouseLeave} > @@ -479,7 +479,8 @@ class HaSidebar extends LitElement { } private async _handleAction(ev: CustomEvent) { - if (ev.detail.action !== "hold") { + if (ev.detail.action === "tap") { + fireEvent(ev.target as HTMLElement, "panel-tap"); return; } @@ -497,6 +498,10 @@ class HaSidebar extends LitElement { } this._editMode = true; + if (!this.expanded) { + fireEvent(this, "hass-toggle-menu"); + } + await this.updateComplete; this._createSortable(); @@ -655,8 +660,11 @@ class HaSidebar extends LitElement { ); } - private _handlePanelTap(ev: Event) { - navigate(this, (ev.currentTarget as HTMLAnchorElement).href); + private async _handlePanelTap(ev: Event) { + const path = __DEMO__ + ? (ev.currentTarget as HTMLAnchorElement).getAttribute("href")! + : (ev.currentTarget as HTMLAnchorElement).href; + navigate(this, path); } private _renderPanel( @@ -668,10 +676,10 @@ class HaSidebar extends LitElement { return html` @@ -980,4 +988,8 @@ declare global { interface HTMLElementTagNameMap { "ha-sidebar": HaSidebar; } + + interface HASSDomEvents { + "panel-tap": undefined; + } } diff --git a/src/panels/lovelace/common/directives/action-handler-directive.ts b/src/panels/lovelace/common/directives/action-handler-directive.ts index 0c245a4764..3b0ea378c8 100644 --- a/src/panels/lovelace/common/directives/action-handler-directive.ts +++ b/src/panels/lovelace/common/directives/action-handler-directive.ts @@ -154,6 +154,7 @@ class ActionHandler extends HTMLElement implements ActionHandler { if (["touchend", "touchcancel"].includes(ev.type) && this.cancelled) { return; } + const target = ev.target as HTMLElement; // Prevent mouse event if touch event if (ev.cancelable) { ev.preventDefault(); @@ -164,7 +165,7 @@ class ActionHandler extends HTMLElement implements ActionHandler { this.timer = undefined; } if (options.hasHold && this.held) { - fireEvent(element, "action", { action: "hold" }); + fireEvent(target, "action", { action: "hold" }); } else if (options.hasDoubleClick) { if ( (ev.type === "click" && (ev as MouseEvent).detail < 2) || @@ -172,15 +173,15 @@ class ActionHandler extends HTMLElement implements ActionHandler { ) { this.dblClickTimeout = window.setTimeout(() => { this.dblClickTimeout = undefined; - fireEvent(element, "action", { action: "tap" }); + fireEvent(target, "action", { action: "tap" }); }, 250); } else { clearTimeout(this.dblClickTimeout); this.dblClickTimeout = undefined; - fireEvent(element, "action", { action: "double_tap" }); + fireEvent(target, "action", { action: "double_tap" }); } } else { - fireEvent(element, "action", { action: "tap" }); + fireEvent(target, "action", { action: "tap" }); } }; diff --git a/src/resources/ha-sortable-style.ts b/src/resources/ha-sortable-style.ts index aa5ffe7789..5751f54819 100644 --- a/src/resources/ha-sortable-style.ts +++ b/src/resources/ha-sortable-style.ts @@ -20,8 +20,6 @@ export const sortableStyles = css` #sortable { outline: none; - display: flex; - flex-direction: column; } .sortable-ghost {