jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-11-08 18:39:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate ha-tooltip to webawesome (#26540)

Browse Source 
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Simon Lamon
2025-09-12 13:09:24 +02:00
committed by GitHub
parent 0d8d18617c
commit dcbc8b627f
34 changed files with 451 additions and 449 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/data-table/ha-data-table-icon.ts
View File

@@ -12,9 +12,8 @@ class HaDataTableIcon extends LitElement {
protected render(): TemplateResult {
return html`
<ha-tooltip .content=${this.tooltip}>
<ha-svg-icon .path=${this.path}></ha-svg-icon>
</ha-tooltip>
<ha-tooltip for="svg-icon">${this.tooltip}</ha-tooltip>
<ha-svg-icon id="svg-icon" .path=${this.path}></ha-svg-icon>
`;
}

61
src/components/entity/state-info.ts
View File

@@ -36,39 +36,38 @@ class StateInfo extends LitElement {
</div>
${this.inDialog
? html`<div class="time-ago">
<ha-tooltip>
<ha-relative-time
.hass=${this.hass}
.datetime=${this.stateObj.last_changed}
capitalize
></ha-relative-time>
<div slot="content">
<div class="row">
<span class="column-name">
${this.hass.localize(
"ui.dialogs.more_info_control.last_changed"
)}:
</span>
<ha-relative-time
.hass=${this.hass}
.datetime=${this.stateObj.last_changed}
capitalize
></ha-relative-time>
</div>
<div class="row">
<span>
${this.hass.localize(
"ui.dialogs.more_info_control.last_updated"
)}:
</span>
<ha-relative-time
.hass=${this.hass}
.datetime=${this.stateObj.last_updated}
capitalize
></ha-relative-time>
</div>
<ha-tooltip for="relative-time">
<div class="row">
<span class="column-name">
${this.hass.localize(
"ui.dialogs.more_info_control.last_changed"
)}:
</span>
<ha-relative-time
.hass=${this.hass}
.datetime=${this.stateObj.last_changed}
capitalize
></ha-relative-time>
</div>
<div class="row">
<span>
${this.hass.localize(
"ui.dialogs.more_info_control.last_updated"
)}:
</span>
<ha-relative-time
.hass=${this.hass}
.datetime=${this.stateObj.last_updated}
capitalize
></ha-relative-time>
</div>
</ha-tooltip>
<ha-relative-time
id="relative-time"
.hass=${this.hass}
.datetime=${this.stateObj.last_changed}
capitalize
></ha-relative-time>
</div>`
: html`<div class="extra-info"><slot></slot></div>`}
</div>`;

23
src/components/ha-analytics.ts
View File

@@ -67,20 +67,19 @@ export class HaAnalytics extends LitElement {
)}
</span>
<span>
<ha-tooltip
content=${this.localize(
`ui.panel.${this.translationKeyPanel}.analytics.need_base_enabled`
)}
placement="right"
<ha-switch
.id="switch-${preference}"
@change=${this._handleRowClick}
.checked=${this.analytics?.preferences[preference]}
.preference=${preference}
name=${preference}
?disabled=${baseEnabled}
>
<ha-switch
@change=${this._handleRowClick}
.checked=${this.analytics?.preferences[preference]}
.preference=${preference}
name=${preference}
>
</ha-switch>
</ha-switch>
<ha-tooltip .for="switch-${preference}" placement="right">
${this.localize(
`ui.panel.${this.translationKeyPanel}.analytics.need_base_enabled`
)}
</ha-tooltip>
</span>
</ha-settings-row>

5
src/components/ha-help-tooltip.ts
View File

@@ -25,8 +25,9 @@ export class HaHelpTooltip extends LitElement {
protected render(): TemplateResult {
return html`
<ha-tooltip .placement=${this.position} .content=${this.label}>
<ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
<ha-svg-icon id="svg-icon" .path=${mdiHelpCircle}></ha-svg-icon>
<ha-tooltip for="svg-icon" .placement=${this.position}>
${this.label}
</ha-tooltip>
`;
}

12
src/components/ha-icon-overflow-menu.ts
View File

@@ -74,16 +74,16 @@ export class HaIconOverflowMenu extends LitElement {
: item.divider
? html`<div role="separator"></div>`
: html`<ha-tooltip
.disabled=${!item.tooltip}
.content=${item.tooltip ?? ""}
>
<ha-icon-button
.disabled=${!item.tooltip}
.for="icon-button-${item.label}"
>${item.tooltip ?? ""} </ha-tooltip
><ha-icon-button
.id="icon-button-${item.label}"
@click=${item.action}
.label=${item.label}
.path=${item.path}
?disabled=${item.disabled}
></ha-icon-button>
</ha-tooltip>`
></ha-icon-button> `
)}
`}
`;

52
src/components/ha-target-picker.ts
View File

@@ -343,40 +343,36 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
${type === "entity_id"
? ""
: html`<span role="gridcell">
<ha-tooltip
.content=${this.hass.localize(
<ha-tooltip .for="expand-${id}"
>${this.hass.localize(
`ui.components.target-picker.expand_${type}`
)}
>
<ha-icon-button
class="expand-btn mdc-chip__icon mdc-chip__icon--trailing"
.label=${this.hass.localize(
"ui.components.target-picker.expand"
)}
.path=${mdiUnfoldMoreVertical}
hide-title
.id=${id}
.type=${type}
@click=${this._handleExpand}
></ha-icon-button>
</ha-tooltip>
<ha-icon-button
class="expand-btn mdc-chip__icon mdc-chip__icon--trailing"
.label=${this.hass.localize(
"ui.components.target-picker.expand"
)}
.path=${mdiUnfoldMoreVertical}
hide-title
.id="expand-${id}"
.type=${type}
@click=${this._handleExpand}
></ha-icon-button>
</span>`}
<span role="gridcell">
<ha-tooltip
.content=${this.hass.localize(
`ui.components.target-picker.remove_${type}`
)}
>
<ha-icon-button
class="mdc-chip__icon mdc-chip__icon--trailing"
.label=${this.hass.localize("ui.components.target-picker.remove")}
.path=${mdiClose}
hide-title
.id=${id}
.type=${type}
@click=${this._handleRemove}
></ha-icon-button>
<ha-tooltip .for="remove-${id}">
${this.hass.localize(`ui.components.target-picker.remove_${type}`)}
</ha-tooltip>
<ha-icon-button
class="mdc-chip__icon mdc-chip__icon--trailing"
.label=${this.hass.localize("ui.components.target-picker.remove")}
.path=${mdiClose}
hide-title
.id="remove-${id}"
.type=${type}
@click=${this._handleRemove}
></ha-icon-button>
</span>
</div>
`;

85
src/components/ha-tooltip.ts
View File

@@ -1,50 +1,47 @@
import SlTooltip from "@shoelace-style/shoelace/dist/components/tooltip/tooltip.component";
import styles from "@shoelace-style/shoelace/dist/components/tooltip/tooltip.styles";
import Tooltip from "@home-assistant/webawesome/dist/components/tooltip/tooltip";
import { css } from "lit";
import { customElement } from "lit/decorators";
import { setDefaultAnimation } from "@shoelace-style/shoelace/dist/utilities/animation-registry";
setDefaultAnimation("tooltip.show", {
keyframes: [{ opacity: 0 }, { opacity: 1 }],
options: { duration: 150, easing: "ease" },
});
setDefaultAnimation("tooltip.hide", {
keyframes: [{ opacity: 1 }, { opacity: 0 }],
options: { duration: 400, easing: "ease" },
});
import type { CSSResultGroup } from "lit";
import { customElement, property } from "lit/decorators";
@customElement("ha-tooltip")
export class HaTooltip extends SlTooltip {
static override styles = [
styles,
css`
:host {
--sl-tooltip-background-color: var(--secondary-background-color);
--sl-tooltip-color: var(--primary-text-color);
--sl-tooltip-font-family: var(
--ha-tooltip-font-family,
var(--ha-font-family-body)
);
--sl-tooltip-font-size: var(
--ha-tooltip-font-size,
var(--ha-font-size-s)
);
--sl-tooltip-font-weight: var(
--ha-tooltip-font-weight,
var(--ha-font-weight-normal)
);
--sl-tooltip-line-height: var(
--ha-tooltip-line-height,
var(--ha-line-height-condensed)
);
--sl-tooltip-padding: 8px;
--sl-tooltip-border-radius: var(--ha-tooltip-border-radius, 4px);
--sl-tooltip-arrow-size: var(--ha-tooltip-arrow-size, 8px);
--sl-z-index-tooltip: var(--ha-tooltip-z-index, 1000);
}
`,
];
export class HaTooltip extends Tooltip {
/** The amount of time to wait before showing the tooltip when the user mouses in. */
@property({ attribute: "show-delay", type: Number }) showDelay = 150;
/** The amount of time to wait before hiding the tooltip when the user mouses out.. */
@property({ attribute: "hide-delay", type: Number }) hideDelay = 400;
static get styles(): CSSResultGroup {
return [
Tooltip.styles,
css`
:host {
--wa-tooltip-background-color: var(--secondary-background-color);
--wa-tooltip-color: var(--primary-text-color);
--wa-tooltip-font-family: var(
--ha-tooltip-font-family,
var(--ha-font-family-body)
);
--wa-tooltip-font-size: var(
--ha-tooltip-font-size,
var(--ha-font-size-s)
);
--wa-tooltip-font-weight: var(
--ha-tooltip-font-weight,
var(--ha-font-weight-normal)
);
--wa-tooltip-line-height: var(
--ha-tooltip-line-height,
var(--ha-line-height-condensed)
);
--wa-tooltip-padding: 8px;
--wa-tooltip-border-radius: var(--ha-tooltip-border-radius, 4px);
--wa-tooltip-arrow-size: var(--ha-tooltip-arrow-size, 8px);
--wa-z-index-tooltip: var(--ha-tooltip-z-index, 1000);
}
`,
];
}
}
declare global {

5
src/components/media-player/ha-media-player-browse.ts
View File

@@ -642,9 +642,10 @@ export class HaMediaPlayerBrowse extends LitElement {
`
: ""}
</div>
<ha-tooltip distance="-4" .content=${child.title}>
<div class="title">${child.title}</div>
<ha-tooltip .for="grid-${child.title}" distance="-4">
${child.title}
</ha-tooltip>
<div .id="grid-${child.title}" class="title">${child.title}</div>
</ha-card>
</div>
`;