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

Fix sidebar issues (#6853)

Browse Source 
* Fix sidebar issues

* fix navigate in demo
This commit is contained in:
Bram Kragten 2020-09-08 14:10:34 +02:00 committed by GitHub
parent 82e9178320
commit 4631994f20
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -322,7 +322,7 @@ class HaSidebar extends LitElement {
)} )}
href="#external-app-configuration" href="#external-app-configuration"
tabindex="-1" tabindex="-1"
@click=${this._handleExternalAppConfiguration} @panel-tap=${this._handleExternalAppConfiguration}
@mouseenter=${this._itemMouseEnter} @mouseenter=${this._itemMouseEnter}
@mouseleave=${this._itemMouseLeave} @mouseleave=${this._itemMouseLeave}
> >
@ -479,7 +479,8 @@ class HaSidebar extends LitElement {
} }
private async _handleAction(ev: CustomEvent<ActionHandlerDetail>) { private async _handleAction(ev: CustomEvent<ActionHandlerDetail>) {
if (ev.detail.action !== "hold") { if (ev.detail.action === "tap") {
fireEvent(ev.target as HTMLElement, "panel-tap");
return; return;
} }
@ -497,6 +498,10 @@ class HaSidebar extends LitElement {
} }
this._editMode = true; this._editMode = true;
if (!this.expanded) {
fireEvent(this, "hass-toggle-menu");
}
await this.updateComplete; await this.updateComplete;
this._createSortable(); this._createSortable();
@ -655,8 +660,11 @@ class HaSidebar extends LitElement {
); );
} }
private _handlePanelTap(ev: Event) { private async _handlePanelTap(ev: Event) {
navigate(this, (ev.currentTarget as HTMLAnchorElement).href); const path = __DEMO__
? (ev.currentTarget as HTMLAnchorElement).getAttribute("href")!
: (ev.currentTarget as HTMLAnchorElement).href;
navigate(this, path);
} }
private _renderPanel( private _renderPanel(
@ -668,10 +676,10 @@ class HaSidebar extends LitElement {
return html` return html`
<a <a
aria-role="option" aria-role="option"
href="${`/${urlPath}`}" href=${`/${urlPath}`}
data-panel="${urlPath}" data-panel=${urlPath}
tabindex="-1" tabindex="-1"
@tap=${this._handlePanelTap} @panel-tap=${this._handlePanelTap}
@mouseenter=${this._itemMouseEnter} @mouseenter=${this._itemMouseEnter}
@mouseleave=${this._itemMouseLeave} @mouseleave=${this._itemMouseLeave}
> >
@ -980,4 +988,8 @@ declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"ha-sidebar": HaSidebar; "ha-sidebar": HaSidebar;
} }
interface HASSDomEvents {
"panel-tap": undefined;
}
} }

9
src/panels/lovelace/common/directives/action-handler-directive.ts
View File

@ -154,6 +154,7 @@ class ActionHandler extends HTMLElement implements ActionHandler {
if (["touchend", "touchcancel"].includes(ev.type) && this.cancelled) { if (["touchend", "touchcancel"].includes(ev.type) && this.cancelled) {
return; return;
} }
const target = ev.target as HTMLElement;
// Prevent mouse event if touch event // Prevent mouse event if touch event
if (ev.cancelable) { if (ev.cancelable) {
ev.preventDefault(); ev.preventDefault();
@ -164,7 +165,7 @@ class ActionHandler extends HTMLElement implements ActionHandler {
this.timer = undefined; this.timer = undefined;
} }
if (options.hasHold && this.held) { if (options.hasHold && this.held) {
fireEvent(element, "action", { action: "hold" }); fireEvent(target, "action", { action: "hold" });
} else if (options.hasDoubleClick) { } else if (options.hasDoubleClick) {
if ( if (
(ev.type === "click" && (ev as MouseEvent).detail < 2) || (ev.type === "click" && (ev as MouseEvent).detail < 2) ||
@ -172,15 +173,15 @@ class ActionHandler extends HTMLElement implements ActionHandler {
) { ) {
this.dblClickTimeout = window.setTimeout(() => { this.dblClickTimeout = window.setTimeout(() => {
this.dblClickTimeout = undefined; this.dblClickTimeout = undefined;
fireEvent(element, "action", { action: "tap" }); fireEvent(target, "action", { action: "tap" });
}, 250); }, 250);
} else { } else {
clearTimeout(this.dblClickTimeout); clearTimeout(this.dblClickTimeout);
this.dblClickTimeout = undefined; this.dblClickTimeout = undefined;
fireEvent(element, "action", { action: "double_tap" }); fireEvent(target, "action", { action: "double_tap" });
} }
} else { } else {
fireEvent(element, "action", { action: "tap" }); fireEvent(target, "action", { action: "tap" });
} }
}; };

2
src/resources/ha-sortable-style.ts
View File

@ -20,8 +20,6 @@ export const sortableStyles = css`
#sortable { #sortable {
outline: none; outline: none;
display: flex;
flex-direction: column;
} }
.sortable-ghost { .sortable-ghost {