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

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

Browse Source 
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
1 changed files with 39 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
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}
>
<paper-icon-item
@mouseenter=${this._itemMouseEnter} @mouseenter=${this._itemMouseEnter}
@mouseleave=${this._itemMouseLeave} @mouseleave=${this._itemMouseLeave}
> >
<paper-icon-item>
<ha-icon <ha-icon
slot="item-icon" slot="item-icon"
icon="hass:cellphone-settings-variant" icon="hass:cellphone-settings-variant"
@ -207,12 +206,15 @@ class HaSidebar extends LitElement {
<div class="divider"></div> <div class="divider"></div>
<div
class="notifications-container"
@mouseenter=${this._itemMouseEnter}
@mouseleave=${this._itemMouseLeave}
>
<paper-icon-item <paper-icon-item
class="notifications" class="notifications"
aria-role="option" aria-role="option"
@click=${this._handleShowNotificationDrawer} @click=${this._handleShowNotificationDrawer}
@mouseenter=${this._itemMouseEnter}
@mouseleave=${this._itemMouseLeave}
> >
<ha-icon slot="item-icon" icon="hass:bell"></ha-icon> <ha-icon slot="item-icon" icon="hass:bell"></ha-icon>
${!this.expanded && notificationCount > 0 ${!this.expanded && notificationCount > 0
@ -231,6 +233,7 @@ class HaSidebar extends LitElement {
` `
: ""} : ""}
</paper-icon-item> </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")}
>
<paper-icon-item
@mouseenter=${this._itemMouseEnter} @mouseenter=${this._itemMouseEnter}
@mouseleave=${this._itemMouseLeave} @mouseleave=${this._itemMouseLeave}
> >
<paper-icon-item>
<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() {
@ -431,11 +433,10 @@ class HaSidebar extends LitElement {
href="${`/${urlPath}`}" href="${`/${urlPath}`}"
data-panel="${urlPath}" data-panel="${urlPath}"
tabindex="-1" tabindex="-1"
>
<paper-icon-item
@mouseenter=${this._itemMouseEnter} @mouseenter=${this._itemMouseEnter}
@mouseleave=${this._itemMouseLeave} @mouseleave=${this._itemMouseLeave}
> >
<paper-icon-item>
<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;
} }