Merge pull request #4673 from home-assistant/fix-tooltip

Fix tooltip in sidemenu
This commit is contained in:
Bram Kragten 2020-01-30 17:18:02 +01:00 committed by GitHub
commit 2e25db4d1b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

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