jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-27 19:26:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix tooltip sidemenu

Browse Source
This commit is contained in:
Bram Kragten 2020-01-30 16:38:42 +01:00
parent e3984d7bf9
commit 2c740cedb8
1 changed files with 40 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -187,11 +187,10 @@ class HaSidebar extends LitElement {
href="#external-app-configuration" href="#external-app-configuration"
tabindex="-1" tabindex="-1"
@click=${this._handleExternalAppConfiguration} @click=${this._handleExternalAppConfiguration}
@mouseenter=${this._itemMouseEnter}
@mouseleave=${this._itemMouseLeave}
> >
<paper-icon-item <paper-icon-item>
@mouseenter=${this._itemMouseEnter}
@mouseleave=${this._itemMouseLeave}
>
<ha-icon <ha-icon
slot="item-icon" slot="item-icon"
icon="hass:cellphone-settings-variant" icon="hass:cellphone-settings-variant"
@ -207,30 +206,34 @@ class HaSidebar extends LitElement {
<div class="divider"></div> <div class="divider"></div>
<paper-icon-item <div
class="notifications" class="notifications-container"
aria-role="option"
@click=${this._handleShowNotificationDrawer}
@mouseenter=${this._itemMouseEnter} @mouseenter=${this._itemMouseEnter}
@mouseleave=${this._itemMouseLeave} @mouseleave=${this._itemMouseLeave}
> >
<ha-icon slot="item-icon" icon="hass:bell"></ha-icon> <paper-icon-item
${!this.expanded && notificationCount > 0 class="notifications"
? html` aria-role="option"
<span class="notification-badge" slot="item-icon"> @click=${this._handleShowNotificationDrawer}
${notificationCount} >
</span> <ha-icon slot="item-icon" icon="hass:bell"></ha-icon>
` ${!this.expanded && notificationCount > 0
: ""} ? html`
<span class="item-text"> <span class="notification-badge" slot="item-icon">
${hass.localize("ui.notification_drawer.title")} ${notificationCount}
</span> </span>
${this.expanded && notificationCount > 0 `
? html` : ""}
<span class="notification-badge">${notificationCount}</span> <span class="item-text">
` ${hass.localize("ui.notification_drawer.title")}
: ""} </span>
</paper-icon-item> ${this.expanded && notificationCount > 0
? html`
<span class="notification-badge">${notificationCount}</span>
`
: ""}
</paper-icon-item>
</div>
<a <a
class=${classMap({ class=${classMap({
@ -243,11 +246,10 @@ class HaSidebar extends LitElement {
tabindex="-1" tabindex="-1"
aria-role="option" aria-role="option"
aria-label=${hass.localize("panel.profile")} aria-label=${hass.localize("panel.profile")}
@mouseenter=${this._itemMouseEnter}
@mouseleave=${this._itemMouseLeave}
> >
<paper-icon-item <paper-icon-item>
@mouseenter=${this._itemMouseEnter}
@mouseleave=${this._itemMouseLeave}
>
<ha-user-badge slot="item-icon" .user=${hass.user}></ha-user-badge> <ha-user-badge slot="item-icon" .user=${hass.user}></ha-user-badge>
<span class="item-text"> <span class="item-text">
@ -389,14 +391,14 @@ class HaSidebar extends LitElement {
} }
const tooltip = this._tooltip; const tooltip = this._tooltip;
const listbox = this.shadowRoot!.querySelector("paper-listbox")!; const listbox = this.shadowRoot!.querySelector("paper-listbox")!;
let top = item.offsetTop + 7; let top = item.offsetTop + 11;
if (listbox.contains(item)) { if (listbox.contains(item)) {
top -= listbox.scrollTop; top -= listbox.scrollTop;
} }
tooltip.innerHTML = item.querySelector(".item-text")!.innerHTML; tooltip.innerHTML = item.querySelector(".item-text")!.innerHTML;
tooltip.style.display = "block"; tooltip.style.display = "block";
tooltip.style.top = `${top}px`; tooltip.style.top = `${top}px`;
tooltip.style.left = `${item.offsetLeft + item.clientWidth + 12}px`; tooltip.style.left = `${item.offsetLeft + item.clientWidth + 4}px`;
} }
private _hideTooltip() { private _hideTooltip() {
@ -404,7 +406,7 @@ class HaSidebar extends LitElement {
if (!this._tooltipHideTimeout) { if (!this._tooltipHideTimeout) {
this._tooltipHideTimeout = window.setTimeout(() => { this._tooltipHideTimeout = window.setTimeout(() => {
this._tooltipHideTimeout = undefined; this._tooltipHideTimeout = undefined;
this._tooltip.style.display = "none"; // this._tooltip.style.display = "none";
}, 10); }, 10);
} }
} }
@ -431,11 +433,10 @@ class HaSidebar extends LitElement {
href="${`/${urlPath}`}" href="${`/${urlPath}`}"
data-panel="${urlPath}" data-panel="${urlPath}"
tabindex="-1" tabindex="-1"
@mouseenter=${this._itemMouseEnter}
@mouseleave=${this._itemMouseLeave}
> >
<paper-icon-item <paper-icon-item>
@mouseenter=${this._itemMouseEnter}
@mouseleave=${this._itemMouseLeave}
>
<ha-icon slot="item-icon" .icon="${icon}"></ha-icon> <ha-icon slot="item-icon" .icon="${icon}"></ha-icon>
<span class="item-text">${title}</span> <span class="item-text">${title}</span>
</paper-icon-item> </paper-icon-item>
@ -611,7 +612,9 @@ class HaSidebar extends LitElement {
height: 1px; height: 1px;
background-color: var(--divider-color); background-color: var(--divider-color);
} }
.notifications-container {
display: flex;
}
.notifications { .notifications {
cursor: pointer; cursor: pointer;
} }