jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-08-03 14:37:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix issue with being unable to drag sidebar items when clicking on text or icon

Browse Source
This commit is contained in:
Donnie 2020-11-16 17:00:47 -08:00
parent 28405f6ddf
commit aa6915cb90
3 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/ha-clickable-list-item.ts
View File

@ -6,6 +6,8 @@ import { html } from "lit-html";
export class HaClickableListItem extends ListItem { export class HaClickableListItem extends ListItem {
public href?: string; public href?: string;
public disableHref = false;
// property used only in css // property used only in css
@property({ type: Boolean, reflect: true }) public rtl = false; @property({ type: Boolean, reflect: true }) public rtl = false;
@ -14,9 +16,9 @@ export class HaClickableListItem extends ListItem {
const href = this.href ? `/${this.href}` : ""; const href = this.href ? `/${this.href}` : "";
return html` ${this.renderRipple()} return html` ${this.renderRipple()}
<a aria-role="option" href=${href}> ${this.disableHref
${r} ? html`<a aria-role="option">${r}</a>`
</a>`; : html`<a aria-role="option" href=${href}>${r}</a>`}`;
} }
static get styles(): CSSResult[] { static get styles(): CSSResult[] {

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

@ -47,6 +47,7 @@ import { actionHandler } from "../panels/lovelace/common/directives/action-handl
import { haStyleScrollbar } from "../resources/styles"; import { haStyleScrollbar } from "../resources/styles";
import type { HomeAssistant, PanelInfo } from "../types"; import type { HomeAssistant, PanelInfo } from "../types";
import { ListItem } from "@material/mwc-list/mwc-list-item"; import { ListItem } from "@material/mwc-list/mwc-list-item";
import { navigate } from "../common/navigate";
const SHOW_AFTER_SPACER = ["config", "developer-tools", "hassio"]; const SHOW_AFTER_SPACER = ["config", "developer-tools", "hassio"];
@ -603,7 +604,6 @@ class HaSidebar extends LitElement {
animation: 150, animation: 150,
fallbackClass: "sortable-fallback", fallbackClass: "sortable-fallback",
dataIdAttr: "data-panel", dataIdAttr: "data-panel",
handle: "ha-clickable-list-item",
onSort: async () => { onSort: async () => {
this._panelOrder = this._sortable.toArray(); this._panelOrder = this._sortable.toArray();
}, },
@ -849,18 +849,19 @@ class HaSidebar extends LitElement {
<ha-clickable-list-item <ha-clickable-list-item
.activated=${urlPath === this.hass.panelUrl} .activated=${urlPath === this.hass.panelUrl}
.href=${urlPath} .href=${urlPath}
.disableHref=${this.editMode}
data-panel=${urlPath} data-panel=${urlPath}
tabindex="-1" tabindex="-1"
@mouseenter=${this._itemMouseEnter} @mouseenter=${this._itemMouseEnter}
@mouseleave=${this._itemMouseLeave} @mouseleave=${this._itemMouseLeave}
@click=${() => navigate(this, `/${urlPath}`)}
graphic="icon" graphic="icon"
.rtl=${this.rtl} .rtl=${this.rtl}
> >
${iconPath ${iconPath
? html`<ha-svg-icon slot="graphic" .path=${iconPath}></ha-svg-icon>` ? html`<ha-svg-icon slot="graphic" .path=${iconPath}></ha-svg-icon>`
: html`<ha-icon slot="graphic" .icon=${icon}></ha-icon>`} : html`<ha-icon slot="graphic" .icon=${icon}></ha-icon>`}
${title}
<span class="item-text">${title}</span>
${this.editMode ${this.editMode
? html`<mwc-icon-button ? html`<mwc-icon-button
class="hide-panel" class="hide-panel"

5
src/resources/ha-sortable-style-ha-clickable.ts
View File

@ -34,16 +34,13 @@ export const sortableStyles = css`
.sortable-fallback { .sortable-fallback {
display: none; display: none;
opacity: 0;
} }
.sortable-ghost { .sortable-ghost {
opacity: 0.4; opacity: 0.4;
} }
.sortable-fallback {
opacity: 0;
}
@keyframes keyframes1 { @keyframes keyframes1 {
0% { 0% {
transform: rotate(-1deg); transform: rotate(-1deg);