mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-12 20:06:33 +00:00
Replace simple-tooltip with ha-tooltip (#24384)
* Start with simple-tooltip migration * Remove simple-tooltip * Fix tooltip in hassio-repositories * Remove space * Update hassio/src/dialogs/repositories/dialog-hassio-repositories.ts Co-authored-by: Bram Kragten <mail@bramkragten.nl> * Update src/components/ha-icon-overflow-menu.ts Co-authored-by: Bram Kragten <mail@bramkragten.nl> * Update src/components/ha-target-picker.ts Co-authored-by: Bram Kragten <mail@bramkragten.nl> * Update src/components/media-player/ha-media-player-browse.ts Co-authored-by: Bram Kragten <mail@bramkragten.nl> * Update src/components/ha-target-picker.ts Co-authored-by: Bram Kragten <mail@bramkragten.nl> * Fix content props * Use ha-tooltip in data-table-icon * Update src/panels/config/areas/ha-config-area-page.ts Co-authored-by: Bram Kragten <mail@bramkragten.nl> * Update src/panels/config/devices/ha-config-device-page.ts Co-authored-by: Bram Kragten <mail@bramkragten.nl> * Update src/panels/config/integrations/ha-integration-card.ts Co-authored-by: Bram Kragten <mail@bramkragten.nl> * Update src/panels/config/integrations/ha-integration-card.ts Co-authored-by: Bram Kragten <mail@bramkragten.nl> * Update src/panels/config/integrations/ha-integration-list-item.ts Co-authored-by: Bram Kragten <mail@bramkragten.nl> * Update src/panels/config/integrations/ha-integration-list-item.ts Co-authored-by: Bram Kragten <mail@bramkragten.nl> --------- Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
parent
10c3e4c6f8
commit
a7b1c45c00
@ -253,13 +253,9 @@ export class HassioBackups extends LitElement {
|
|||||||
"backup.delete_selected"
|
"backup.delete_selected"
|
||||||
)}
|
)}
|
||||||
.path=${mdiDelete}
|
.path=${mdiDelete}
|
||||||
id="delete-btn"
|
|
||||||
class="warning"
|
class="warning"
|
||||||
@click=${this._deleteSelected}
|
@click=${this._deleteSelected}
|
||||||
></ha-icon-button>
|
></ha-icon-button>
|
||||||
<simple-tooltip animation-delay="0" for="delete-btn">
|
|
||||||
${this.supervisor.localize("backup.delete_selected")}
|
|
||||||
</simple-tooltip>
|
|
||||||
`}
|
`}
|
||||||
</div>
|
</div>
|
||||||
</div> `
|
</div> `
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
import "@material/mwc-button/mwc-button";
|
import "@material/mwc-button/mwc-button";
|
||||||
import { mdiDelete, mdiDeleteOff } from "@mdi/js";
|
import { mdiDelete, mdiDeleteOff } from "@mdi/js";
|
||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
|
||||||
import type { CSSResultGroup } from "lit";
|
import type { CSSResultGroup } from "lit";
|
||||||
import { css, html, LitElement, nothing } from "lit";
|
import { css, html, LitElement, nothing } from "lit";
|
||||||
import { customElement, property, query, state } from "lit/decorators";
|
import { customElement, property, query, state } from "lit/decorators";
|
||||||
@ -8,6 +7,7 @@ import memoizeOne from "memoize-one";
|
|||||||
import { fireEvent } from "../../../../src/common/dom/fire_event";
|
import { fireEvent } from "../../../../src/common/dom/fire_event";
|
||||||
import { caseInsensitiveStringCompare } from "../../../../src/common/string/compare";
|
import { caseInsensitiveStringCompare } from "../../../../src/common/string/compare";
|
||||||
import "../../../../src/components/ha-alert";
|
import "../../../../src/components/ha-alert";
|
||||||
|
import "../../../../src/components/ha-tooltip";
|
||||||
import "../../../../src/components/ha-circular-progress";
|
import "../../../../src/components/ha-circular-progress";
|
||||||
import { createCloseHeading } from "../../../../src/components/ha-dialog";
|
import { createCloseHeading } from "../../../../src/components/ha-dialog";
|
||||||
import "../../../../src/components/ha-icon-button";
|
import "../../../../src/components/ha-icon-button";
|
||||||
@ -118,28 +118,27 @@ class HassioRepositoriesDialog extends LitElement {
|
|||||||
<div>${repo.maintainer}</div>
|
<div>${repo.maintainer}</div>
|
||||||
<div>${repo.url}</div>
|
<div>${repo.url}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="delete" slot="end">
|
<ha-tooltip
|
||||||
<ha-icon-button
|
class="delete"
|
||||||
.disabled=${usedRepositories.includes(repo.slug)}
|
slot="end"
|
||||||
.slug=${repo.slug}
|
.content=${this._dialogParams!.supervisor.localize(
|
||||||
.path=${usedRepositories.includes(repo.slug)
|
usedRepositories.includes(repo.slug)
|
||||||
? mdiDeleteOff
|
? "dialog.repositories.used"
|
||||||
: mdiDelete}
|
: "dialog.repositories.remove"
|
||||||
@click=${this._removeRepository}
|
)}
|
||||||
>
|
>
|
||||||
</ha-icon-button>
|
<div>
|
||||||
<simple-tooltip
|
<ha-icon-button
|
||||||
animation-delay="0"
|
.disabled=${usedRepositories.includes(repo.slug)}
|
||||||
position="bottom"
|
.slug=${repo.slug}
|
||||||
offset="1"
|
.path=${usedRepositories.includes(repo.slug)
|
||||||
>
|
? mdiDeleteOff
|
||||||
${this._dialogParams!.supervisor.localize(
|
: mdiDelete}
|
||||||
usedRepositories.includes(repo.slug)
|
@click=${this._removeRepository}
|
||||||
? "dialog.repositories.used"
|
>
|
||||||
: "dialog.repositories.remove"
|
</ha-icon-button>
|
||||||
)}
|
</div>
|
||||||
</simple-tooltip>
|
</ha-tooltip>
|
||||||
</div>
|
|
||||||
</ha-md-list-item>
|
</ha-md-list-item>
|
||||||
`
|
`
|
||||||
)
|
)
|
||||||
|
@ -56,7 +56,6 @@
|
|||||||
"@lit-labs/motion": "1.0.8",
|
"@lit-labs/motion": "1.0.8",
|
||||||
"@lit-labs/observers": "2.0.5",
|
"@lit-labs/observers": "2.0.5",
|
||||||
"@lit-labs/virtualizer": "2.1.0",
|
"@lit-labs/virtualizer": "2.1.0",
|
||||||
"@lrnwebcomponents/simple-tooltip": "8.0.2",
|
|
||||||
"@material/chips": "=14.0.0-canary.53b3cad2f.0",
|
"@material/chips": "=14.0.0-canary.53b3cad2f.0",
|
||||||
"@material/data-table": "=14.0.0-canary.53b3cad2f.0",
|
"@material/data-table": "=14.0.0-canary.53b3cad2f.0",
|
||||||
"@material/mwc-base": "0.27.0",
|
"@material/mwc-base": "0.27.0",
|
||||||
|
@ -1,7 +1,8 @@
|
|||||||
import type { PropertyValues, TemplateResult } from "lit";
|
import type { TemplateResult } from "lit";
|
||||||
import { css, html, LitElement } from "lit";
|
import { css, html, LitElement } from "lit";
|
||||||
import { customElement, property, state } from "lit/decorators";
|
import { customElement, property } from "lit/decorators";
|
||||||
import "../ha-svg-icon";
|
import "../ha-svg-icon";
|
||||||
|
import "../ha-tooltip";
|
||||||
|
|
||||||
@customElement("ha-data-table-icon")
|
@customElement("ha-data-table-icon")
|
||||||
class HaDataTableIcon extends LitElement {
|
class HaDataTableIcon extends LitElement {
|
||||||
@ -9,30 +10,14 @@ class HaDataTableIcon extends LitElement {
|
|||||||
|
|
||||||
@property() public path!: string;
|
@property() public path!: string;
|
||||||
|
|
||||||
@state() private _hovered = false;
|
|
||||||
|
|
||||||
protected render(): TemplateResult {
|
protected render(): TemplateResult {
|
||||||
return html`
|
return html`
|
||||||
${this._hovered ? html`<div>${this.tooltip}</div>` : ""}
|
<ha-tooltip .content=${this.tooltip}>
|
||||||
<ha-svg-icon .path=${this.path}></ha-svg-icon>
|
<ha-svg-icon .path=${this.path}></ha-svg-icon>
|
||||||
|
</ha-tooltip>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
protected override firstUpdated(changedProps: PropertyValues): void {
|
|
||||||
super.firstUpdated(changedProps);
|
|
||||||
const show = () => {
|
|
||||||
this._hovered = true;
|
|
||||||
};
|
|
||||||
const hide = () => {
|
|
||||||
this._hovered = false;
|
|
||||||
};
|
|
||||||
this.addEventListener("mouseenter", show);
|
|
||||||
this.addEventListener("focus", show);
|
|
||||||
this.addEventListener("mouseleave", hide);
|
|
||||||
this.addEventListener("blur", hide);
|
|
||||||
this.addEventListener("tap", hide);
|
|
||||||
}
|
|
||||||
|
|
||||||
static styles = css`
|
static styles = css`
|
||||||
:host {
|
:host {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -41,20 +26,6 @@ class HaDataTableIcon extends LitElement {
|
|||||||
ha-svg-icon {
|
ha-svg-icon {
|
||||||
color: var(--secondary-text-color);
|
color: var(--secondary-text-color);
|
||||||
}
|
}
|
||||||
div {
|
|
||||||
position: absolute;
|
|
||||||
right: 28px;
|
|
||||||
inset-inline-end: 28px;
|
|
||||||
inset-inline-start: initial;
|
|
||||||
z-index: 1002;
|
|
||||||
outline: none;
|
|
||||||
font-size: 10px;
|
|
||||||
line-height: 1;
|
|
||||||
background-color: var(--simple-tooltip-background, #616161);
|
|
||||||
color: var(--simple-tooltip-text-color, white);
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
|
||||||
import type { HassEntity } from "home-assistant-js-websocket";
|
import type { HassEntity } from "home-assistant-js-websocket";
|
||||||
import { css, html, LitElement, nothing } from "lit";
|
import { css, html, LitElement, nothing } from "lit";
|
||||||
import { customElement, property } from "lit/decorators";
|
import { customElement, property } from "lit/decorators";
|
||||||
@ -6,6 +5,7 @@ import { computeStateName } from "../../common/entity/compute_state_name";
|
|||||||
import type { HomeAssistant } from "../../types";
|
import type { HomeAssistant } from "../../types";
|
||||||
import "../ha-relative-time";
|
import "../ha-relative-time";
|
||||||
import "./state-badge";
|
import "./state-badge";
|
||||||
|
import "../ha-tooltip";
|
||||||
|
|
||||||
@customElement("state-info")
|
@customElement("state-info")
|
||||||
class StateInfo extends LitElement {
|
class StateInfo extends LitElement {
|
||||||
@ -36,13 +36,13 @@ class StateInfo extends LitElement {
|
|||||||
</div>
|
</div>
|
||||||
${this.inDialog
|
${this.inDialog
|
||||||
? html`<div class="time-ago">
|
? html`<div class="time-ago">
|
||||||
<ha-relative-time
|
<ha-tooltip>
|
||||||
.hass=${this.hass}
|
<ha-relative-time
|
||||||
.datetime=${this.stateObj.last_changed}
|
.hass=${this.hass}
|
||||||
capitalize
|
.datetime=${this.stateObj.last_changed}
|
||||||
></ha-relative-time>
|
capitalize
|
||||||
<simple-tooltip animation-delay="0">
|
></ha-relative-time>
|
||||||
<div>
|
<div slot="content">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<span class="column-name">
|
<span class="column-name">
|
||||||
${this.hass.localize(
|
${this.hass.localize(
|
||||||
@ -68,7 +68,7 @@ class StateInfo extends LitElement {
|
|||||||
></ha-relative-time>
|
></ha-relative-time>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</simple-tooltip>
|
</ha-tooltip>
|
||||||
</div>`
|
</div>`
|
||||||
: html`<div class="extra-info"><slot></slot></div>`}
|
: html`<div class="extra-info"><slot></slot></div>`}
|
||||||
</div>`;
|
</div>`;
|
||||||
|
@ -1,25 +1,33 @@
|
|||||||
import { mdiHelpCircle } from "@mdi/js";
|
import { mdiHelpCircle } from "@mdi/js";
|
||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
|
||||||
import type { TemplateResult } from "lit";
|
import type { TemplateResult } from "lit";
|
||||||
import { css, html, LitElement } from "lit";
|
import { css, html, LitElement } from "lit";
|
||||||
import { customElement, property } from "lit/decorators";
|
import { customElement, property } from "lit/decorators";
|
||||||
import "./ha-svg-icon";
|
import "./ha-svg-icon";
|
||||||
|
import "./ha-tooltip";
|
||||||
|
|
||||||
@customElement("ha-help-tooltip")
|
@customElement("ha-help-tooltip")
|
||||||
export class HaHelpTooltip extends LitElement {
|
export class HaHelpTooltip extends LitElement {
|
||||||
@property() public label!: string;
|
@property() public label!: string;
|
||||||
|
|
||||||
@property() public position = "top";
|
@property() public position:
|
||||||
|
| "top"
|
||||||
|
| "bottom"
|
||||||
|
| "left"
|
||||||
|
| "right"
|
||||||
|
| "top-start"
|
||||||
|
| "top-end"
|
||||||
|
| "right-start"
|
||||||
|
| "right-end"
|
||||||
|
| "bottom-start"
|
||||||
|
| "bottom-end"
|
||||||
|
| "left-start"
|
||||||
|
| "left-end" = "top";
|
||||||
|
|
||||||
protected render(): TemplateResult {
|
protected render(): TemplateResult {
|
||||||
return html`
|
return html`
|
||||||
<ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
|
<ha-tooltip .placement=${this.position} .content=${this.label}>
|
||||||
<simple-tooltip
|
<ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
|
||||||
offset="4"
|
</ha-tooltip>
|
||||||
.position=${this.position}
|
|
||||||
.fitToVisibleBounds=${true}
|
|
||||||
>${this.label}</simple-tooltip
|
|
||||||
>
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
|
||||||
import { mdiDotsVertical } from "@mdi/js";
|
import { mdiDotsVertical } from "@mdi/js";
|
||||||
import type { TemplateResult } from "lit";
|
import type { TemplateResult } from "lit";
|
||||||
import { css, html, LitElement } from "lit";
|
import { css, html, LitElement, nothing } from "lit";
|
||||||
import { customElement, property } from "lit/decorators";
|
import { customElement, property } from "lit/decorators";
|
||||||
import { classMap } from "lit/directives/class-map";
|
import { classMap } from "lit/directives/class-map";
|
||||||
import { haStyle } from "../resources/styles";
|
import { haStyle } from "../resources/styles";
|
||||||
@ -10,6 +9,7 @@ import "./ha-button-menu";
|
|||||||
import "./ha-icon-button";
|
import "./ha-icon-button";
|
||||||
import "./ha-list-item";
|
import "./ha-list-item";
|
||||||
import "./ha-svg-icon";
|
import "./ha-svg-icon";
|
||||||
|
import "./ha-tooltip";
|
||||||
|
|
||||||
export interface IconOverflowMenuItem {
|
export interface IconOverflowMenuItem {
|
||||||
[key: string]: any;
|
[key: string]: any;
|
||||||
@ -70,25 +70,20 @@ export class HaIconOverflowMenu extends LitElement {
|
|||||||
<!-- Icon representation for big screens -->
|
<!-- Icon representation for big screens -->
|
||||||
${this.items.map((item) =>
|
${this.items.map((item) =>
|
||||||
item.narrowOnly
|
item.narrowOnly
|
||||||
? ""
|
? nothing
|
||||||
: item.divider
|
: item.divider
|
||||||
? html`<div role="separator"></div>`
|
? html`<div role="separator"></div>`
|
||||||
: html`<div>
|
: html`<ha-tooltip
|
||||||
${item.tooltip
|
.disabled=${!item.tooltip}
|
||||||
? html`<simple-tooltip
|
.content=${item.tooltip ?? ""}
|
||||||
animation-delay="0"
|
>
|
||||||
position="left"
|
|
||||||
>
|
|
||||||
${item.tooltip}
|
|
||||||
</simple-tooltip>`
|
|
||||||
: ""}
|
|
||||||
<ha-icon-button
|
<ha-icon-button
|
||||||
@click=${item.action}
|
@click=${item.action}
|
||||||
.label=${item.label}
|
.label=${item.label}
|
||||||
.path=${item.path}
|
.path=${item.path}
|
||||||
?disabled=${item.disabled}
|
?disabled=${item.disabled}
|
||||||
></ha-icon-button>
|
></ha-icon-button>
|
||||||
</div> `
|
</ha-tooltip>`
|
||||||
)}
|
)}
|
||||||
`}
|
`}
|
||||||
`;
|
`;
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import { mdiStar } from "@mdi/js";
|
import { mdiStar } from "@mdi/js";
|
||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
|
||||||
import type { CSSResultGroup, TemplateResult } from "lit";
|
import type { CSSResultGroup, TemplateResult } from "lit";
|
||||||
import { css, html, LitElement, nothing } from "lit";
|
import { css, html, LitElement, nothing } from "lit";
|
||||||
import { customElement, property, state } from "lit/decorators";
|
import { customElement, property, state } from "lit/decorators";
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import chipStyles from "@material/chips/dist/mdc.chips.min.css";
|
import chipStyles from "@material/chips/dist/mdc.chips.min.css";
|
||||||
import "@material/mwc-button/mwc-button";
|
import "@material/mwc-button/mwc-button";
|
||||||
@ -47,6 +46,7 @@ import { floorDefaultIconPath } from "./ha-floor-icon";
|
|||||||
import "./ha-icon-button";
|
import "./ha-icon-button";
|
||||||
import "./ha-input-helper-text";
|
import "./ha-input-helper-text";
|
||||||
import "./ha-svg-icon";
|
import "./ha-svg-icon";
|
||||||
|
import "./ha-tooltip";
|
||||||
|
|
||||||
@customElement("ha-target-picker")
|
@customElement("ha-target-picker")
|
||||||
export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
||||||
@ -339,38 +339,40 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
|||||||
${type === "entity_id"
|
${type === "entity_id"
|
||||||
? ""
|
? ""
|
||||||
: html`<span role="gridcell">
|
: html`<span role="gridcell">
|
||||||
<ha-icon-button
|
<ha-tooltip
|
||||||
class="expand-btn mdc-chip__icon mdc-chip__icon--trailing"
|
.content=${this.hass.localize(
|
||||||
.label=${this.hass.localize(
|
|
||||||
"ui.components.target-picker.expand"
|
|
||||||
)}
|
|
||||||
.path=${mdiUnfoldMoreVertical}
|
|
||||||
hide-title
|
|
||||||
.id=${id}
|
|
||||||
.type=${type}
|
|
||||||
@click=${this._handleExpand}
|
|
||||||
></ha-icon-button>
|
|
||||||
<simple-tooltip class="expand" animation-delay="0"
|
|
||||||
>${this.hass.localize(
|
|
||||||
`ui.components.target-picker.expand_${type}`
|
`ui.components.target-picker.expand_${type}`
|
||||||
)}</simple-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=${id}
|
||||||
|
.type=${type}
|
||||||
|
@click=${this._handleExpand}
|
||||||
|
></ha-icon-button>
|
||||||
|
</ha-tooltip>
|
||||||
</span>`}
|
</span>`}
|
||||||
<span role="gridcell">
|
<span role="gridcell">
|
||||||
<ha-icon-button
|
<ha-tooltip
|
||||||
class="mdc-chip__icon mdc-chip__icon--trailing"
|
.content=${this.hass.localize(
|
||||||
.label=${this.hass.localize("ui.components.target-picker.remove")}
|
|
||||||
.path=${mdiClose}
|
|
||||||
hide-title
|
|
||||||
.id=${id}
|
|
||||||
.type=${type}
|
|
||||||
@click=${this._handleRemove}
|
|
||||||
></ha-icon-button>
|
|
||||||
<simple-tooltip animation-delay="0"
|
|
||||||
>${this.hass.localize(
|
|
||||||
`ui.components.target-picker.remove_${type}`
|
`ui.components.target-picker.remove_${type}`
|
||||||
)}</simple-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=${id}
|
||||||
|
.type=${type}
|
||||||
|
@click=${this._handleRemove}
|
||||||
|
></ha-icon-button>
|
||||||
|
</ha-tooltip>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
@ -828,9 +830,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
|||||||
.mdc-chip:hover {
|
.mdc-chip:hover {
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
}
|
}
|
||||||
simple-tooltip.expand {
|
|
||||||
min-width: 200px;
|
|
||||||
}
|
|
||||||
:host([disabled]) .mdc-chip {
|
:host([disabled]) .mdc-chip {
|
||||||
opacity: var(--light-disabled-opacity);
|
opacity: var(--light-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
@ -844,6 +843,9 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
|||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
ha-tooltip {
|
||||||
|
--ha-tooltip-arrow-size: 0;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -4,7 +4,6 @@ import "@material/mwc-button/mwc-button";
|
|||||||
import "@material/mwc-list/mwc-list";
|
import "@material/mwc-list/mwc-list";
|
||||||
import "@material/mwc-list/mwc-list-item";
|
import "@material/mwc-list/mwc-list-item";
|
||||||
import { mdiArrowUpRight, mdiPlay, mdiPlus } from "@mdi/js";
|
import { mdiArrowUpRight, mdiPlay, mdiPlus } from "@mdi/js";
|
||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
|
||||||
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
|
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
|
||||||
import { css, html, LitElement, nothing } from "lit";
|
import { css, html, LitElement, nothing } from "lit";
|
||||||
import {
|
import {
|
||||||
@ -50,6 +49,7 @@ import "../ha-circular-progress";
|
|||||||
import "../ha-fab";
|
import "../ha-fab";
|
||||||
import "../ha-icon-button";
|
import "../ha-icon-button";
|
||||||
import "../ha-svg-icon";
|
import "../ha-svg-icon";
|
||||||
|
import "../ha-tooltip";
|
||||||
import "./ha-browse-media-tts";
|
import "./ha-browse-media-tts";
|
||||||
import type { TtsMediaPickedEvent } from "./ha-browse-media-tts";
|
import type { TtsMediaPickedEvent } from "./ha-browse-media-tts";
|
||||||
import { loadVirtualizer } from "../../resources/virtualizer";
|
import { loadVirtualizer } from "../../resources/virtualizer";
|
||||||
@ -603,12 +603,9 @@ export class HaMediaPlayerBrowse extends LitElement {
|
|||||||
`
|
`
|
||||||
: ""}
|
: ""}
|
||||||
</div>
|
</div>
|
||||||
<div class="title">
|
<ha-tooltip distance="-4" .content=${child.title}>
|
||||||
${child.title}
|
<div class="title">${child.title}</div>
|
||||||
<simple-tooltip fitToVisibleBounds position="top" offset="4"
|
</ha-tooltip>
|
||||||
>${child.title}</simple-tooltip
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</ha-card>
|
</ha-card>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
|
||||||
import "@material/mwc-button";
|
import "@material/mwc-button";
|
||||||
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
|
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
|
||||||
import { css, html, LitElement, nothing } from "lit";
|
import { css, html, LitElement, nothing } from "lit";
|
||||||
|
@ -9,6 +9,7 @@ import { formatDateWeekdayShort } from "../../../common/datetime/format_date";
|
|||||||
import { formatTime } from "../../../common/datetime/format_time";
|
import { formatTime } from "../../../common/datetime/format_time";
|
||||||
import { formatNumber } from "../../../common/number/format_number";
|
import { formatNumber } from "../../../common/number/format_number";
|
||||||
import "../../../components/ha-svg-icon";
|
import "../../../components/ha-svg-icon";
|
||||||
|
import "../../../components/ha-tooltip";
|
||||||
import type {
|
import type {
|
||||||
ForecastEvent,
|
ForecastEvent,
|
||||||
ModernForecastType,
|
ModernForecastType,
|
||||||
@ -157,14 +158,13 @@ class MoreInfoWeather extends LitElement {
|
|||||||
${this.hass.formatEntityState(this.stateObj)}
|
${this.hass.formatEntityState(this.stateObj)}
|
||||||
</div>
|
</div>
|
||||||
<div class="time-ago">
|
<div class="time-ago">
|
||||||
<ha-relative-time
|
<ha-tooltip>
|
||||||
id="last_changed"
|
<ha-relative-time
|
||||||
.hass=${this.hass}
|
.hass=${this.hass}
|
||||||
.datetime=${this.stateObj.last_changed}
|
.datetime=${this.stateObj.last_changed}
|
||||||
capitalize
|
capitalize
|
||||||
></ha-relative-time>
|
></ha-relative-time>
|
||||||
<simple-tooltip animation-delay="0" for="last_changed">
|
<div slot="content">
|
||||||
<div>
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<span class="column-name">
|
<span class="column-name">
|
||||||
${this.hass.localize(
|
${this.hass.localize(
|
||||||
@ -190,7 +190,7 @@ class MoreInfoWeather extends LitElement {
|
|||||||
></ha-relative-time>
|
></ha-relative-time>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</simple-tooltip>
|
</ha-tooltip>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="temp-attribute">
|
<div class="temp-attribute">
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import { ResizeController } from "@lit-labs/observers/resize-controller";
|
import { ResizeController } from "@lit-labs/observers/resize-controller";
|
||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
|
||||||
import "@material/mwc-button/mwc-button";
|
import "@material/mwc-button/mwc-button";
|
||||||
import {
|
import {
|
||||||
mdiArrowDown,
|
mdiArrowDown,
|
||||||
|
@ -20,6 +20,7 @@ import "../../../components/ha-icon-button";
|
|||||||
import "../../../components/ha-icon-next";
|
import "../../../components/ha-icon-next";
|
||||||
import "../../../components/ha-list-item";
|
import "../../../components/ha-list-item";
|
||||||
import "../../../components/ha-button-menu";
|
import "../../../components/ha-button-menu";
|
||||||
|
import "../../../components/ha-tooltip";
|
||||||
import type { AreaRegistryEntry } from "../../../data/area_registry";
|
import type { AreaRegistryEntry } from "../../../data/area_registry";
|
||||||
import {
|
import {
|
||||||
deleteAreaRegistryEntry,
|
deleteAreaRegistryEntry,
|
||||||
@ -549,7 +550,11 @@ class HaConfigAreaPage extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private _renderScene(name: string, entityState: SceneEntity) {
|
private _renderScene(name: string, entityState: SceneEntity) {
|
||||||
return html`<div>
|
return html`<ha-tooltip
|
||||||
|
.distance=${-4}
|
||||||
|
.disabled=${!!entityState.attributes.id}
|
||||||
|
.content=${this.hass.localize("ui.panel.config.devices.cant_edit")}
|
||||||
|
>
|
||||||
<a
|
<a
|
||||||
href=${ifDefined(
|
href=${ifDefined(
|
||||||
entityState.attributes.id
|
entityState.attributes.id
|
||||||
@ -562,18 +567,15 @@ class HaConfigAreaPage extends LitElement {
|
|||||||
<ha-icon-next slot="meta"></ha-icon-next>
|
<ha-icon-next slot="meta"></ha-icon-next>
|
||||||
</ha-list-item>
|
</ha-list-item>
|
||||||
</a>
|
</a>
|
||||||
${!entityState.attributes.id
|
</ha-tooltip>`;
|
||||||
? html`
|
|
||||||
<simple-tooltip animation-delay="0">
|
|
||||||
${this.hass.localize("ui.panel.config.devices.cant_edit")}
|
|
||||||
</simple-tooltip>
|
|
||||||
`
|
|
||||||
: ""}
|
|
||||||
</div>`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private _renderAutomation(name: string, entityState: AutomationEntity) {
|
private _renderAutomation(name: string, entityState: AutomationEntity) {
|
||||||
return html`<div>
|
return html`<ha-tooltip
|
||||||
|
.disabled=${!!entityState.attributes.id}
|
||||||
|
.distance=${-4}
|
||||||
|
.content=${this.hass.localize("ui.panel.config.devices.cant_edit")}
|
||||||
|
>
|
||||||
<a
|
<a
|
||||||
href=${ifDefined(
|
href=${ifDefined(
|
||||||
entityState.attributes.id
|
entityState.attributes.id
|
||||||
@ -586,14 +588,7 @@ class HaConfigAreaPage extends LitElement {
|
|||||||
<ha-icon-next slot="meta"></ha-icon-next>
|
<ha-icon-next slot="meta"></ha-icon-next>
|
||||||
</ha-list-item>
|
</ha-list-item>
|
||||||
</a>
|
</a>
|
||||||
${!entityState.attributes.id
|
</ha-tooltip>`;
|
||||||
? html`
|
|
||||||
<simple-tooltip animation-delay="0">
|
|
||||||
${this.hass.localize("ui.panel.config.devices.cant_edit")}
|
|
||||||
</simple-tooltip>
|
|
||||||
`
|
|
||||||
: ""}
|
|
||||||
</div>`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private _renderScript(name: string, entityState: ScriptEntity) {
|
private _renderScript(name: string, entityState: ScriptEntity) {
|
||||||
|
@ -33,6 +33,7 @@ import "../../../../components/ha-card";
|
|||||||
import "../../../../components/ha-expansion-panel";
|
import "../../../../components/ha-expansion-panel";
|
||||||
import "../../../../components/ha-icon-button";
|
import "../../../../components/ha-icon-button";
|
||||||
import "../../../../components/ha-service-icon";
|
import "../../../../components/ha-service-icon";
|
||||||
|
import "../../../../components/ha-tooltip";
|
||||||
import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
|
import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
|
||||||
import { ACTION_ICONS, YAML_ONLY_ACTION_TYPES } from "../../../../data/action";
|
import { ACTION_ICONS, YAML_ONLY_ACTION_TYPES } from "../../../../data/action";
|
||||||
import type { AutomationClipboard } from "../../../../data/automation";
|
import type { AutomationClipboard } from "../../../../data/automation";
|
||||||
@ -231,14 +232,14 @@ export default class HaAutomationActionRow extends LitElement {
|
|||||||
|
|
||||||
${type !== "condition" &&
|
${type !== "condition" &&
|
||||||
(this.action as NonConditionAction).continue_on_error === true
|
(this.action as NonConditionAction).continue_on_error === true
|
||||||
? html`<div slot="icons">
|
? html`<ha-tooltip
|
||||||
|
slot="icons"
|
||||||
|
.content=${this.hass.localize(
|
||||||
|
"ui.panel.config.automation.editor.actions.continue_on_error"
|
||||||
|
)}
|
||||||
|
>
|
||||||
<ha-svg-icon .path=${mdiAlertCircleCheck}></ha-svg-icon>
|
<ha-svg-icon .path=${mdiAlertCircleCheck}></ha-svg-icon>
|
||||||
<simple-tooltip animation-delay="0">
|
</ha-tooltip>`
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.automation.editor.actions.continue_on_error"
|
|
||||||
)}
|
|
||||||
</simple-tooltip>
|
|
||||||
</div> `
|
|
||||||
: nothing}
|
: nothing}
|
||||||
|
|
||||||
<ha-md-button-menu
|
<ha-md-button-menu
|
||||||
@ -659,6 +660,9 @@ export default class HaAutomationActionRow extends LitElement {
|
|||||||
ha-md-menu-item > ha-svg-icon {
|
ha-md-menu-item > ha-svg-icon {
|
||||||
--mdc-icon-size: 24px;
|
--mdc-icon-size: 24px;
|
||||||
}
|
}
|
||||||
|
ha-tooltip {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
`,
|
`,
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
import { consume } from "@lit-labs/context";
|
import { consume } from "@lit-labs/context";
|
||||||
import { ResizeController } from "@lit-labs/observers/resize-controller";
|
import { ResizeController } from "@lit-labs/observers/resize-controller";
|
||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
|
||||||
import {
|
import {
|
||||||
mdiChevronRight,
|
mdiChevronRight,
|
||||||
mdiCog,
|
mdiCog,
|
||||||
@ -58,7 +57,6 @@ import "../../../components/ha-filter-entities";
|
|||||||
import "../../../components/ha-filter-floor-areas";
|
import "../../../components/ha-filter-floor-areas";
|
||||||
import "../../../components/ha-filter-labels";
|
import "../../../components/ha-filter-labels";
|
||||||
import "../../../components/ha-icon-button";
|
import "../../../components/ha-icon-button";
|
||||||
import "../../../components/ha-icon-overflow-menu";
|
|
||||||
import "../../../components/ha-md-menu-item";
|
import "../../../components/ha-md-menu-item";
|
||||||
import type { HaMdMenuItem } from "../../../components/ha-md-menu-item";
|
import type { HaMdMenuItem } from "../../../components/ha-md-menu-item";
|
||||||
import "../../../components/ha-menu";
|
import "../../../components/ha-menu";
|
||||||
|
@ -428,15 +428,9 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
|
|||||||
"ui.panel.config.backup.backups.delete_selected"
|
"ui.panel.config.backup.backups.delete_selected"
|
||||||
)}
|
)}
|
||||||
.path=${mdiDelete}
|
.path=${mdiDelete}
|
||||||
id="delete-btn"
|
|
||||||
class="warning"
|
class="warning"
|
||||||
@click=${this._deleteSelected}
|
@click=${this._deleteSelected}
|
||||||
></ha-icon-button>
|
></ha-icon-button>
|
||||||
<simple-tooltip animation-delay="0" for="delete-btn">
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.backup.backups.delete_selected"
|
|
||||||
)}
|
|
||||||
</simple-tooltip>
|
|
||||||
`}
|
`}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
|
||||||
import {
|
import {
|
||||||
mdiAlertCircle,
|
mdiAlertCircle,
|
||||||
mdiDelete,
|
mdiDelete,
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import { consume } from "@lit-labs/context";
|
import { consume } from "@lit-labs/context";
|
||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
|
||||||
import {
|
import {
|
||||||
mdiCog,
|
mdiCog,
|
||||||
mdiDelete,
|
mdiDelete,
|
||||||
@ -30,6 +29,7 @@ import "../../../components/ha-icon-button";
|
|||||||
import "../../../components/ha-icon-next";
|
import "../../../components/ha-icon-next";
|
||||||
import "../../../components/ha-svg-icon";
|
import "../../../components/ha-svg-icon";
|
||||||
import "../../../components/ha-expansion-panel";
|
import "../../../components/ha-expansion-panel";
|
||||||
|
import "../../../components/ha-tooltip";
|
||||||
import { getSignedPath } from "../../../data/auth";
|
import { getSignedPath } from "../../../data/auth";
|
||||||
import type {
|
import type {
|
||||||
ConfigEntry,
|
ConfigEntry,
|
||||||
@ -444,7 +444,13 @@ export class HaConfigDevicePage extends LitElement {
|
|||||||
${this._related.automation.map((automation) => {
|
${this._related.automation.map((automation) => {
|
||||||
const entityState = this.hass.states[automation];
|
const entityState = this.hass.states[automation];
|
||||||
return entityState
|
return entityState
|
||||||
? html`<div>
|
? html`<ha-tooltip
|
||||||
|
placement="left"
|
||||||
|
.disabled=${!!entityState.attributes.id}
|
||||||
|
.content=${this.hass.localize(
|
||||||
|
"ui.panel.config.devices.cant_edit"
|
||||||
|
)}
|
||||||
|
>
|
||||||
<a
|
<a
|
||||||
href=${ifDefined(
|
href=${ifDefined(
|
||||||
entityState.attributes.id
|
entityState.attributes.id
|
||||||
@ -461,17 +467,8 @@ export class HaConfigDevicePage extends LitElement {
|
|||||||
<ha-icon-next slot="meta"></ha-icon-next>
|
<ha-icon-next slot="meta"></ha-icon-next>
|
||||||
</ha-list-item>
|
</ha-list-item>
|
||||||
</a>
|
</a>
|
||||||
${!entityState.attributes.id
|
</ha-tooltip>`
|
||||||
? html`
|
: nothing;
|
||||||
<simple-tooltip animation-delay="0">
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.devices.cant_edit"
|
|
||||||
)}
|
|
||||||
</simple-tooltip>
|
|
||||||
`
|
|
||||||
: ""}
|
|
||||||
</div> `
|
|
||||||
: "";
|
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
@ -536,7 +533,13 @@ export class HaConfigDevicePage extends LitElement {
|
|||||||
const entityState = this.hass.states[scene];
|
const entityState = this.hass.states[scene];
|
||||||
return entityState
|
return entityState
|
||||||
? html`
|
? html`
|
||||||
<div>
|
<ha-tooltip
|
||||||
|
placement="left"
|
||||||
|
.disabled=${!!entityState.attributes.id}
|
||||||
|
.content=${this.hass.localize(
|
||||||
|
"ui.panel.config.devices.cant_edit"
|
||||||
|
)}
|
||||||
|
>
|
||||||
<a
|
<a
|
||||||
href=${ifDefined(
|
href=${ifDefined(
|
||||||
entityState.attributes.id
|
entityState.attributes.id
|
||||||
@ -553,18 +556,9 @@ export class HaConfigDevicePage extends LitElement {
|
|||||||
<ha-icon-next slot="meta"></ha-icon-next>
|
<ha-icon-next slot="meta"></ha-icon-next>
|
||||||
</ha-list-item>
|
</ha-list-item>
|
||||||
</a>
|
</a>
|
||||||
${!entityState.attributes.id
|
</ha-tooltip>
|
||||||
? html`
|
|
||||||
<simple-tooltip animation-delay="0">
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.devices.cant_edit"
|
|
||||||
)}
|
|
||||||
</simple-tooltip>
|
|
||||||
`
|
|
||||||
: ""}
|
|
||||||
</div>
|
|
||||||
`
|
`
|
||||||
: "";
|
: nothing;
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import { consume } from "@lit-labs/context";
|
import { consume } from "@lit-labs/context";
|
||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
|
||||||
import {
|
import {
|
||||||
mdiChevronRight,
|
mdiChevronRight,
|
||||||
mdiDotsVertical,
|
mdiDotsVertical,
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import { consume } from "@lit-labs/context";
|
import { consume } from "@lit-labs/context";
|
||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
|
||||||
import {
|
import {
|
||||||
mdiAlertCircle,
|
mdiAlertCircle,
|
||||||
mdiCancel,
|
mdiCancel,
|
||||||
@ -66,6 +65,7 @@ import "../../../components/ha-icon-button";
|
|||||||
import "../../../components/ha-md-menu-item";
|
import "../../../components/ha-md-menu-item";
|
||||||
import "../../../components/ha-sub-menu";
|
import "../../../components/ha-sub-menu";
|
||||||
import "../../../components/ha-svg-icon";
|
import "../../../components/ha-svg-icon";
|
||||||
|
import "../../../components/ha-tooltip";
|
||||||
import type { ConfigEntry, SubEntry } from "../../../data/config_entries";
|
import type { ConfigEntry, SubEntry } from "../../../data/config_entries";
|
||||||
import { getConfigEntries, getSubEntries } from "../../../data/config_entries";
|
import { getConfigEntries, getSubEntries } from "../../../data/config_entries";
|
||||||
import { fullEntitiesContext } from "../../../data/context";
|
import { fullEntitiesContext } from "../../../data/context";
|
||||||
@ -367,22 +367,9 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
|
|||||||
tabindex="0"
|
tabindex="0"
|
||||||
style="display:inline-block; position: relative;"
|
style="display:inline-block; position: relative;"
|
||||||
>
|
>
|
||||||
<ha-svg-icon
|
<ha-tooltip
|
||||||
style=${styleMap({
|
placement="left"
|
||||||
color: entry.unavailable ? "var(--error-color)" : "",
|
.content=${entry.restored
|
||||||
})}
|
|
||||||
.path=${entry.restored
|
|
||||||
? mdiRestoreAlert
|
|
||||||
: entry.unavailable
|
|
||||||
? mdiAlertCircle
|
|
||||||
: entry.disabled_by
|
|
||||||
? mdiCancel
|
|
||||||
: entry.hidden_by
|
|
||||||
? mdiEyeOff
|
|
||||||
: mdiPencilOff}
|
|
||||||
></ha-svg-icon>
|
|
||||||
<simple-tooltip animation-delay="0" position="left">
|
|
||||||
${entry.restored
|
|
||||||
? this.hass.localize(
|
? this.hass.localize(
|
||||||
"ui.panel.config.entities.picker.status.not_provided"
|
"ui.panel.config.entities.picker.status.not_provided"
|
||||||
)
|
)
|
||||||
@ -401,7 +388,22 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
|
|||||||
: this.hass.localize(
|
: this.hass.localize(
|
||||||
"ui.panel.config.entities.picker.status.unmanageable"
|
"ui.panel.config.entities.picker.status.unmanageable"
|
||||||
)}
|
)}
|
||||||
</simple-tooltip>
|
>
|
||||||
|
<ha-svg-icon
|
||||||
|
style=${styleMap({
|
||||||
|
color: entry.unavailable ? "var(--error-color)" : "",
|
||||||
|
})}
|
||||||
|
.path=${entry.restored
|
||||||
|
? mdiRestoreAlert
|
||||||
|
: entry.unavailable
|
||||||
|
? mdiAlertCircle
|
||||||
|
: entry.disabled_by
|
||||||
|
? mdiCancel
|
||||||
|
: entry.hidden_by
|
||||||
|
? mdiEyeOff
|
||||||
|
: mdiPencilOff}
|
||||||
|
></ha-svg-icon>
|
||||||
|
</ha-tooltip>
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
: "—",
|
: "—",
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import "@material/mwc-button/mwc-button";
|
import "@material/mwc-button/mwc-button";
|
||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
|
||||||
import type { CSSResultGroup, TemplateResult } from "lit";
|
import type { CSSResultGroup, TemplateResult } from "lit";
|
||||||
import { css, html, LitElement, nothing } from "lit";
|
import { css, html, LitElement, nothing } from "lit";
|
||||||
import { customElement, property, query, state } from "lit/decorators";
|
import { customElement, property, query, state } from "lit/decorators";
|
||||||
@ -10,6 +9,7 @@ import { dynamicElement } from "../../../common/dom/dynamic-element-directive";
|
|||||||
import "../../../components/ha-circular-progress";
|
import "../../../components/ha-circular-progress";
|
||||||
import { createCloseHeading } from "../../../components/ha-dialog";
|
import { createCloseHeading } from "../../../components/ha-dialog";
|
||||||
import "../../../components/ha-list-item";
|
import "../../../components/ha-list-item";
|
||||||
|
import "../../../components/ha-tooltip";
|
||||||
import { getConfigFlowHandlers } from "../../../data/config_flow";
|
import { getConfigFlowHandlers } from "../../../data/config_flow";
|
||||||
import { createCounter } from "../../../data/counter";
|
import { createCounter } from "../../../data/counter";
|
||||||
import { createInputBoolean } from "../../../data/input_boolean";
|
import { createInputBoolean } from "../../../data/input_boolean";
|
||||||
@ -210,39 +210,39 @@ export class DialogHelperDetail extends LitElement {
|
|||||||
const isLoaded =
|
const isLoaded =
|
||||||
!(domain in HELPERS) || isComponentLoaded(this.hass, domain);
|
!(domain in HELPERS) || isComponentLoaded(this.hass, domain);
|
||||||
return html`
|
return html`
|
||||||
<ha-list-item
|
<ha-tooltip
|
||||||
.disabled=${!isLoaded}
|
.disabled=${isLoaded}
|
||||||
hasmeta
|
.content=${this.hass.localize(
|
||||||
.domain=${domain}
|
"ui.dialogs.helper_settings.platform_not_loaded",
|
||||||
@request-selected=${this._domainPicked}
|
{ platform: domain }
|
||||||
graphic="icon"
|
)}
|
||||||
>
|
>
|
||||||
<img
|
<div>
|
||||||
slot="graphic"
|
<ha-list-item
|
||||||
loading="lazy"
|
.disabled=${!isLoaded}
|
||||||
alt=""
|
hasmeta
|
||||||
src=${brandsUrl({
|
.domain=${domain}
|
||||||
domain,
|
@request-selected=${this._domainPicked}
|
||||||
type: "icon",
|
graphic="icon"
|
||||||
useFallback: true,
|
>
|
||||||
darkOptimized: this.hass.themes?.darkMode,
|
<img
|
||||||
})}
|
slot="graphic"
|
||||||
crossorigin="anonymous"
|
loading="lazy"
|
||||||
referrerpolicy="no-referrer"
|
alt=""
|
||||||
/>
|
src=${brandsUrl({
|
||||||
<span class="item-text"> ${label} </span>
|
domain,
|
||||||
<ha-icon-next slot="meta"></ha-icon-next>
|
type: "icon",
|
||||||
</ha-list-item>
|
useFallback: true,
|
||||||
${!isLoaded
|
darkOptimized: this.hass.themes?.darkMode,
|
||||||
? html`
|
})}
|
||||||
<simple-tooltip animation-delay="0"
|
crossorigin="anonymous"
|
||||||
>${this.hass.localize(
|
referrerpolicy="no-referrer"
|
||||||
"ui.dialogs.helper_settings.platform_not_loaded",
|
/>
|
||||||
{ platform: domain }
|
<span class="item-text"> ${label} </span>
|
||||||
)}</simple-tooltip
|
<ha-icon-next slot="meta"></ha-icon-next>
|
||||||
>
|
</ha-list-item>
|
||||||
`
|
</div>
|
||||||
: ""}
|
</ha-tooltip>
|
||||||
`;
|
`;
|
||||||
})}
|
})}
|
||||||
</mwc-list>
|
</mwc-list>
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
import { consume } from "@lit-labs/context";
|
import { consume } from "@lit-labs/context";
|
||||||
import { ResizeController } from "@lit-labs/observers/resize-controller";
|
import { ResizeController } from "@lit-labs/observers/resize-controller";
|
||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
|
||||||
import {
|
import {
|
||||||
mdiAlertCircle,
|
mdiAlertCircle,
|
||||||
mdiCancel,
|
mdiCancel,
|
||||||
@ -52,6 +51,7 @@ import "../../../components/ha-icon-overflow-menu";
|
|||||||
import "../../../components/ha-md-divider";
|
import "../../../components/ha-md-divider";
|
||||||
import "../../../components/ha-state-icon";
|
import "../../../components/ha-state-icon";
|
||||||
import "../../../components/ha-svg-icon";
|
import "../../../components/ha-svg-icon";
|
||||||
|
import "../../../components/ha-tooltip";
|
||||||
import type { CategoryRegistryEntry } from "../../../data/category_registry";
|
import type { CategoryRegistryEntry } from "../../../data/category_registry";
|
||||||
import {
|
import {
|
||||||
createCategoryRegistryEntry,
|
createCategoryRegistryEntry,
|
||||||
@ -359,12 +359,14 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
|
|||||||
tabindex="0"
|
tabindex="0"
|
||||||
style="display:inline-block; position: relative;"
|
style="display:inline-block; position: relative;"
|
||||||
>
|
>
|
||||||
<ha-svg-icon .path=${mdiPencilOff}></ha-svg-icon>
|
<ha-tooltip
|
||||||
<simple-tooltip animation-delay="0" position="left">
|
placement="left"
|
||||||
${this.hass.localize(
|
.content=${this.hass.localize(
|
||||||
"ui.panel.config.entities.picker.status.unmanageable"
|
"ui.panel.config.entities.picker.status.unmanageable"
|
||||||
)}
|
)}
|
||||||
</simple-tooltip>
|
>
|
||||||
|
<ha-svg-icon .path=${mdiPencilOff}></ha-svg-icon>
|
||||||
|
</ha-tooltip>
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
: ""}
|
: ""}
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
|
||||||
import "@material/mwc-list/mwc-list";
|
import "@material/mwc-list/mwc-list";
|
||||||
import {
|
import {
|
||||||
mdiAlertCircle,
|
mdiAlertCircle,
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
|
||||||
import { mdiFileCodeOutline, mdiPackageVariant, mdiWeb } from "@mdi/js";
|
import { mdiFileCodeOutline, mdiPackageVariant, mdiWeb } from "@mdi/js";
|
||||||
import type { CSSResultGroup, TemplateResult } from "lit";
|
import type { CSSResultGroup, TemplateResult } from "lit";
|
||||||
import { LitElement, css, html, nothing } from "lit";
|
import { LitElement, css, html, nothing } from "lit";
|
||||||
@ -10,6 +9,7 @@ import "../../../components/ha-button";
|
|||||||
import "../../../components/ha-card";
|
import "../../../components/ha-card";
|
||||||
import "../../../components/ha-ripple";
|
import "../../../components/ha-ripple";
|
||||||
import "../../../components/ha-svg-icon";
|
import "../../../components/ha-svg-icon";
|
||||||
|
import "../../../components/ha-tooltip";
|
||||||
import type { ConfigEntry } from "../../../data/config_entries";
|
import type { ConfigEntry } from "../../../data/config_entries";
|
||||||
import { ERROR_STATES } from "../../../data/config_entries";
|
import { ERROR_STATES } from "../../../data/config_entries";
|
||||||
import type { DeviceRegistryEntry } from "../../../data/device_registry";
|
import type { DeviceRegistryEntry } from "../../../data/device_registry";
|
||||||
@ -162,43 +162,40 @@ export class HaIntegrationCard extends LitElement {
|
|||||||
? "overwrites"
|
? "overwrites"
|
||||||
: "custom"}"
|
: "custom"}"
|
||||||
>
|
>
|
||||||
<ha-svg-icon .path=${mdiPackageVariant}></ha-svg-icon>
|
<ha-tooltip
|
||||||
<simple-tooltip
|
.placement=${computeRTL(this.hass) ? "right" : "left"}
|
||||||
animation-delay="0"
|
.content=${this.hass.localize(
|
||||||
.position=${computeRTL(this.hass) ? "right" : "left"}
|
|
||||||
offset="4"
|
|
||||||
>${this.hass.localize(
|
|
||||||
this.manifest.overwrites_built_in
|
this.manifest.overwrites_built_in
|
||||||
? "ui.panel.config.integrations.config_entry.custom_overwrites_core"
|
? "ui.panel.config.integrations.config_entry.custom_overwrites_core"
|
||||||
: "ui.panel.config.integrations.config_entry.custom_integration"
|
: "ui.panel.config.integrations.config_entry.custom_integration"
|
||||||
)}</simple-tooltip
|
)}
|
||||||
>
|
>
|
||||||
|
<ha-svg-icon .path=${mdiPackageVariant}></ha-svg-icon>
|
||||||
|
</ha-tooltip>
|
||||||
</span>`
|
</span>`
|
||||||
: nothing}
|
: nothing}
|
||||||
${this.manifest && this.manifest.iot_class?.startsWith("cloud_")
|
${this.manifest && this.manifest.iot_class?.startsWith("cloud_")
|
||||||
? html`<div class="icon cloud">
|
? html`<div class="icon cloud">
|
||||||
<ha-svg-icon .path=${mdiWeb}></ha-svg-icon>
|
<ha-tooltip
|
||||||
<simple-tooltip
|
.placement=${computeRTL(this.hass) ? "right" : "left"}
|
||||||
animation-delay="0"
|
.content=${this.hass.localize(
|
||||||
.position=${computeRTL(this.hass) ? "right" : "left"}
|
|
||||||
offset="4"
|
|
||||||
>${this.hass.localize(
|
|
||||||
"ui.panel.config.integrations.config_entry.depends_on_cloud"
|
"ui.panel.config.integrations.config_entry.depends_on_cloud"
|
||||||
)}</simple-tooltip
|
)}
|
||||||
>
|
>
|
||||||
|
<ha-svg-icon .path=${mdiWeb}></ha-svg-icon>
|
||||||
|
</ha-tooltip>
|
||||||
</div>`
|
</div>`
|
||||||
: nothing}
|
: nothing}
|
||||||
${this.manifest && !this.manifest?.config_flow
|
${this.manifest && !this.manifest?.config_flow
|
||||||
? html`<div class="icon yaml">
|
? html`<div class="icon yaml">
|
||||||
<ha-svg-icon .path=${mdiFileCodeOutline}></ha-svg-icon>
|
<ha-tooltip
|
||||||
<simple-tooltip
|
.placement=${computeRTL(this.hass) ? "right" : "left"}
|
||||||
animation-delay="0"
|
.content=${this.hass.localize(
|
||||||
.position=${computeRTL(this.hass) ? "right" : "left"}
|
|
||||||
offset="4"
|
|
||||||
>${this.hass.localize(
|
|
||||||
"ui.panel.config.integrations.config_entry.no_config_flow"
|
"ui.panel.config.integrations.config_entry.no_config_flow"
|
||||||
)}</simple-tooltip
|
)}
|
||||||
>
|
>
|
||||||
|
<ha-svg-icon .path=${mdiFileCodeOutline}></ha-svg-icon
|
||||||
|
></ha-tooltip>
|
||||||
</div>`
|
</div>`
|
||||||
: nothing}
|
: nothing}
|
||||||
</div>
|
</div>
|
||||||
@ -367,9 +364,6 @@ export class HaIntegrationCard extends LitElement {
|
|||||||
height: 24px;
|
height: 24px;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
simple-tooltip {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.spacer {
|
.spacer {
|
||||||
height: 36px;
|
height: 36px;
|
||||||
}
|
}
|
||||||
|
@ -12,6 +12,7 @@ import { brandsUrl } from "../../../util/brands-url";
|
|||||||
import type { IntegrationListItem } from "./dialog-add-integration";
|
import type { IntegrationListItem } from "./dialog-add-integration";
|
||||||
import "../../../components/ha-svg-icon";
|
import "../../../components/ha-svg-icon";
|
||||||
import "../../../components/ha-icon-next";
|
import "../../../components/ha-icon-next";
|
||||||
|
import "../../../components/ha-tooltip";
|
||||||
|
|
||||||
@customElement("ha-integration-list-item")
|
@customElement("ha-integration-list-item")
|
||||||
export class HaIntegrationListItem extends ListItemBase {
|
export class HaIntegrationListItem extends ListItemBase {
|
||||||
@ -73,43 +74,45 @@ export class HaIntegrationListItem extends ListItemBase {
|
|||||||
}
|
}
|
||||||
return html`<span class="mdc-deprecated-list-item__meta material-icons">
|
return html`<span class="mdc-deprecated-list-item__meta material-icons">
|
||||||
${this.integration.cloud
|
${this.integration.cloud
|
||||||
? html`<span
|
? html`<ha-tooltip
|
||||||
|
placement="left"
|
||||||
|
.content=${this.hass.localize(
|
||||||
|
"ui.panel.config.integrations.config_entry.depends_on_cloud"
|
||||||
|
)}
|
||||||
><ha-svg-icon .path=${mdiWeb}></ha-svg-icon
|
><ha-svg-icon .path=${mdiWeb}></ha-svg-icon
|
||||||
><simple-tooltip animation-delay="0" position="left"
|
></ha-tooltip>`
|
||||||
>${this.hass.localize(
|
: nothing}
|
||||||
"ui.panel.config.integrations.config_entry.depends_on_cloud"
|
|
||||||
)}</simple-tooltip
|
|
||||||
></span
|
|
||||||
>`
|
|
||||||
: ""}
|
|
||||||
${!this.integration.is_built_in
|
${!this.integration.is_built_in
|
||||||
? html`<span
|
? html`<span
|
||||||
class=${this.integration.overwrites_built_in
|
class=${this.integration.overwrites_built_in
|
||||||
? "overwrites"
|
? "overwrites"
|
||||||
: "custom"}
|
: "custom"}
|
||||||
><ha-svg-icon .path=${mdiPackageVariant}></ha-svg-icon
|
><ha-tooltip
|
||||||
><simple-tooltip animation-delay="0" position="left"
|
placement="left"
|
||||||
>${this.hass.localize(
|
.content=${this.hass.localize(
|
||||||
this.integration.overwrites_built_in
|
this.integration.overwrites_built_in
|
||||||
? "ui.panel.config.integrations.config_entry.custom_overwrites_core"
|
? "ui.panel.config.integrations.config_entry.custom_overwrites_core"
|
||||||
: "ui.panel.config.integrations.config_entry.custom_integration"
|
: "ui.panel.config.integrations.config_entry.custom_integration"
|
||||||
)}</simple-tooltip
|
)}
|
||||||
></span
|
><ha-svg-icon
|
||||||
>`
|
.path=${mdiPackageVariant}
|
||||||
: ""}
|
></ha-svg-icon></ha-tooltip
|
||||||
|
></span>`
|
||||||
|
: nothing}
|
||||||
${!this.integration.config_flow &&
|
${!this.integration.config_flow &&
|
||||||
!this.integration.integrations &&
|
!this.integration.integrations &&
|
||||||
!this.integration.iot_standards
|
!this.integration.iot_standards
|
||||||
? html`<span
|
? html`<ha-tooltip
|
||||||
><simple-tooltip animation-delay="0" position="left"
|
placement="left"
|
||||||
>${this.hass.localize(
|
.content=${this.hass.localize(
|
||||||
"ui.panel.config.integrations.config_entry.yaml_only"
|
"ui.panel.config.integrations.config_entry.yaml_only"
|
||||||
)}</simple-tooltip
|
)}
|
||||||
><ha-svg-icon
|
>
|
||||||
|
<ha-svg-icon
|
||||||
.path=${mdiFileCodeOutline}
|
.path=${mdiFileCodeOutline}
|
||||||
class="open-in-new"
|
class="open-in-new"
|
||||||
></ha-svg-icon
|
></ha-svg-icon>
|
||||||
></span>`
|
</ha-tooltip>`
|
||||||
: html`<ha-icon-next></ha-icon-next>`}
|
: html`<ha-icon-next></ha-icon-next>`}
|
||||||
</span>`;
|
</span>`;
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import "@material/mwc-button/mwc-button";
|
import "@material/mwc-button/mwc-button";
|
||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
|
||||||
import { mdiCheckCircle, mdiCloseCircle } from "@mdi/js";
|
import { mdiCheckCircle, mdiCloseCircle } from "@mdi/js";
|
||||||
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
|
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||||
import type { CSSResultGroup } from "lit";
|
import type { CSSResultGroup } from "lit";
|
||||||
@ -9,6 +8,7 @@ import { fireEvent } from "../../../../../common/dom/fire_event";
|
|||||||
import "../../../../../components/ha-circular-progress";
|
import "../../../../../components/ha-circular-progress";
|
||||||
import { createCloseHeading } from "../../../../../components/ha-dialog";
|
import { createCloseHeading } from "../../../../../components/ha-dialog";
|
||||||
import "../../../../../components/ha-svg-icon";
|
import "../../../../../components/ha-svg-icon";
|
||||||
|
import "../../../../../components/ha-tooltip";
|
||||||
import type {
|
import type {
|
||||||
AttributeConfigurationStatus,
|
AttributeConfigurationStatus,
|
||||||
Cluster,
|
Cluster,
|
||||||
@ -295,16 +295,15 @@ class DialogZHAReconfigureDevice extends LitElement {
|
|||||||
`
|
`
|
||||||
: html`
|
: html`
|
||||||
<span class="stage">
|
<span class="stage">
|
||||||
<simple-tooltip
|
<ha-tooltip
|
||||||
animation-delay="0"
|
placement="top"
|
||||||
position="top"
|
.content=${attribute.status}
|
||||||
>
|
>
|
||||||
${attribute.status}
|
<ha-svg-icon
|
||||||
</simple-tooltip>
|
.path=${mdiCloseCircle}
|
||||||
<ha-svg-icon
|
class="failed"
|
||||||
.path=${mdiCloseCircle}
|
></ha-svg-icon>
|
||||||
class="failed"
|
</ha-tooltip>
|
||||||
></ha-svg-icon>
|
|
||||||
</span>
|
</span>
|
||||||
`}
|
`}
|
||||||
</span>
|
</span>
|
||||||
|
@ -15,7 +15,6 @@ import { classMap } from "lit/directives/class-map";
|
|||||||
import "../../../../../components/ha-card";
|
import "../../../../../components/ha-card";
|
||||||
import "../../../../../components/ha-expansion-panel";
|
import "../../../../../components/ha-expansion-panel";
|
||||||
import "../../../../../components/ha-fab";
|
import "../../../../../components/ha-fab";
|
||||||
import "../../../../../components/ha-help-tooltip";
|
|
||||||
import "../../../../../components/ha-icon-button";
|
import "../../../../../components/ha-icon-button";
|
||||||
import "../../../../../components/ha-icon-next";
|
import "../../../../../components/ha-icon-next";
|
||||||
import "../../../../../components/ha-svg-icon";
|
import "../../../../../components/ha-svg-icon";
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
|
||||||
import { mdiClose, mdiContentCopy } from "@mdi/js";
|
import { mdiClose, mdiContentCopy } from "@mdi/js";
|
||||||
import type { CSSResultGroup } from "lit";
|
import type { CSSResultGroup } from "lit";
|
||||||
import { css, html, LitElement, nothing } from "lit";
|
import { css, html, LitElement, nothing } from "lit";
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
|
||||||
import {
|
import {
|
||||||
mdiCheck,
|
mdiCheck,
|
||||||
mdiCheckCircleOutline,
|
mdiCheckCircleOutline,
|
||||||
@ -24,6 +23,7 @@ import "../../../../components/ha-fab";
|
|||||||
import "../../../../components/ha-icon";
|
import "../../../../components/ha-icon";
|
||||||
import "../../../../components/ha-icon-button";
|
import "../../../../components/ha-icon-button";
|
||||||
import "../../../../components/ha-svg-icon";
|
import "../../../../components/ha-svg-icon";
|
||||||
|
import "../../../../components/ha-tooltip";
|
||||||
import type { LovelacePanelConfig } from "../../../../data/lovelace";
|
import type { LovelacePanelConfig } from "../../../../data/lovelace";
|
||||||
import type { LovelaceRawConfig } from "../../../../data/lovelace/config/types";
|
import type { LovelaceRawConfig } from "../../../../data/lovelace/config/types";
|
||||||
import {
|
import {
|
||||||
@ -153,17 +153,19 @@ export class HaConfigLovelaceDashboards extends LitElement {
|
|||||||
${dashboard.title}
|
${dashboard.title}
|
||||||
${dashboard.default
|
${dashboard.default
|
||||||
? html`
|
? html`
|
||||||
<ha-svg-icon
|
<ha-tooltip
|
||||||
style="padding-left: 10px; padding-inline-start: 10px; direction: var(--direction);"
|
.content=${this.hass.localize(
|
||||||
.path=${mdiCheckCircleOutline}
|
|
||||||
></ha-svg-icon>
|
|
||||||
<simple-tooltip animation-delay="0">
|
|
||||||
${this.hass.localize(
|
|
||||||
`ui.panel.config.lovelace.dashboards.default_dashboard`
|
`ui.panel.config.lovelace.dashboards.default_dashboard`
|
||||||
)}
|
)}
|
||||||
</simple-tooltip>
|
placement="right"
|
||||||
|
>
|
||||||
|
<ha-svg-icon
|
||||||
|
style="padding-left: 10px; padding-inline-start: 10px; direction: var(--direction);"
|
||||||
|
.path=${mdiCheckCircleOutline}
|
||||||
|
></ha-svg-icon>
|
||||||
|
</ha-tooltip>
|
||||||
`
|
`
|
||||||
: ""}
|
: nothing}
|
||||||
`,
|
`,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
import { consume } from "@lit-labs/context";
|
import { consume } from "@lit-labs/context";
|
||||||
import { ResizeController } from "@lit-labs/observers/resize-controller";
|
import { ResizeController } from "@lit-labs/observers/resize-controller";
|
||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
|
||||||
import {
|
import {
|
||||||
mdiChevronRight,
|
mdiChevronRight,
|
||||||
mdiCog,
|
mdiCog,
|
||||||
@ -57,6 +56,7 @@ import "../../../components/ha-md-menu-item";
|
|||||||
import "../../../components/ha-state-icon";
|
import "../../../components/ha-state-icon";
|
||||||
import "../../../components/ha-sub-menu";
|
import "../../../components/ha-sub-menu";
|
||||||
import "../../../components/ha-svg-icon";
|
import "../../../components/ha-svg-icon";
|
||||||
|
import "../../../components/ha-tooltip";
|
||||||
import { createAreaRegistryEntry } from "../../../data/area_registry";
|
import { createAreaRegistryEntry } from "../../../data/area_registry";
|
||||||
import type { CategoryRegistryEntry } from "../../../data/category_registry";
|
import type { CategoryRegistryEntry } from "../../../data/category_registry";
|
||||||
import {
|
import {
|
||||||
@ -314,17 +314,19 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
|
|||||||
template: (scene) =>
|
template: (scene) =>
|
||||||
!scene.attributes.id
|
!scene.attributes.id
|
||||||
? html`
|
? html`
|
||||||
<simple-tooltip animation-delay="0" position="left">
|
<ha-tooltip
|
||||||
${this.hass.localize(
|
placement="left"
|
||||||
|
.content=${this.hass.localize(
|
||||||
"ui.panel.config.scene.picker.only_editable"
|
"ui.panel.config.scene.picker.only_editable"
|
||||||
)}
|
)}
|
||||||
</simple-tooltip>
|
>
|
||||||
<ha-svg-icon
|
<ha-svg-icon
|
||||||
.path=${mdiPencilOff}
|
.path=${mdiPencilOff}
|
||||||
style="color: var(--secondary-text-color)"
|
style="color: var(--secondary-text-color)"
|
||||||
></ha-svg-icon>
|
></ha-svg-icon>
|
||||||
|
</ha-tooltip>
|
||||||
`
|
`
|
||||||
: "",
|
: nothing,
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
title: "",
|
title: "",
|
||||||
|
@ -12,7 +12,6 @@ import type {
|
|||||||
} from "../../../components/data-table/ha-data-table";
|
} from "../../../components/data-table/ha-data-table";
|
||||||
import "../../../components/data-table/ha-data-table-icon";
|
import "../../../components/data-table/ha-data-table-icon";
|
||||||
import "../../../components/ha-fab";
|
import "../../../components/ha-fab";
|
||||||
import "../../../components/ha-help-tooltip";
|
|
||||||
import "../../../components/ha-svg-icon";
|
import "../../../components/ha-svg-icon";
|
||||||
import type { User } from "../../../data/user";
|
import type { User } from "../../../data/user";
|
||||||
import {
|
import {
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
|
||||||
import { mdiAlertCircle } from "@mdi/js";
|
import { mdiAlertCircle } from "@mdi/js";
|
||||||
import { css, html, LitElement, nothing } from "lit";
|
import { css, html, LitElement, nothing } from "lit";
|
||||||
import { customElement, property } from "lit/decorators";
|
import { customElement, property } from "lit/decorators";
|
||||||
@ -7,6 +6,7 @@ import { voiceAssistants } from "../../../../data/expose";
|
|||||||
import type { HomeAssistant } from "../../../../types";
|
import type { HomeAssistant } from "../../../../types";
|
||||||
import { brandsUrl } from "../../../../util/brands-url";
|
import { brandsUrl } from "../../../../util/brands-url";
|
||||||
import "../../../../components/ha-svg-icon";
|
import "../../../../components/ha-svg-icon";
|
||||||
|
import "../../../../components/ha-tooltip";
|
||||||
|
|
||||||
@customElement("voice-assistants-expose-assistant-icon")
|
@customElement("voice-assistants-expose-assistant-icon")
|
||||||
export class VoiceAssistantExposeAssistantIcon extends LitElement {
|
export class VoiceAssistantExposeAssistantIcon extends LitElement {
|
||||||
@ -25,53 +25,49 @@ export class VoiceAssistantExposeAssistantIcon extends LitElement {
|
|||||||
if (!this.assistant || !voiceAssistants[this.assistant]) return nothing;
|
if (!this.assistant || !voiceAssistants[this.assistant]) return nothing;
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<div class="container">
|
<ha-tooltip
|
||||||
<img
|
.disabled=${!this.unsupported && !this.manual}
|
||||||
class="logo"
|
placement="left"
|
||||||
style=${styleMap({
|
>
|
||||||
filter: this.manual ? "grayscale(100%)" : undefined,
|
<div class="container">
|
||||||
})}
|
<img
|
||||||
alt=${voiceAssistants[this.assistant].name}
|
class="logo"
|
||||||
src=${brandsUrl({
|
style=${styleMap({
|
||||||
domain: voiceAssistants[this.assistant].domain,
|
filter: this.manual ? "grayscale(100%)" : undefined,
|
||||||
type: "icon",
|
})}
|
||||||
darkOptimized: this.hass.themes?.darkMode,
|
alt=${voiceAssistants[this.assistant].name}
|
||||||
})}
|
src=${brandsUrl({
|
||||||
crossorigin="anonymous"
|
domain: voiceAssistants[this.assistant].domain,
|
||||||
referrerpolicy="no-referrer"
|
type: "icon",
|
||||||
slot="prefix"
|
darkOptimized: this.hass.themes?.darkMode,
|
||||||
/>
|
})}
|
||||||
${this.unsupported
|
crossorigin="anonymous"
|
||||||
? html`
|
referrerpolicy="no-referrer"
|
||||||
<ha-svg-icon
|
slot="prefix"
|
||||||
.path=${mdiAlertCircle}
|
/>
|
||||||
class="unsupported"
|
${this.unsupported
|
||||||
></ha-svg-icon>
|
? html`
|
||||||
`
|
<ha-svg-icon
|
||||||
: nothing}
|
.path=${mdiAlertCircle}
|
||||||
${this.manual || this.unsupported
|
class="unsupported"
|
||||||
? html`
|
></ha-svg-icon>
|
||||||
<simple-tooltip
|
`
|
||||||
animation-delay="0"
|
: nothing}
|
||||||
position="top"
|
</div>
|
||||||
offset="4"
|
<span slot="content">
|
||||||
fitToVisibleBounds
|
${this.unsupported
|
||||||
>
|
? this.hass.localize(
|
||||||
${this.unsupported
|
"ui.panel.config.voice_assistants.expose.not_supported"
|
||||||
? this.hass.localize(
|
)
|
||||||
"ui.panel.config.voice_assistants.expose.not_supported"
|
: ""}
|
||||||
)
|
${this.unsupported && this.manual ? html`<br />` : nothing}
|
||||||
: ""}
|
${this.manual
|
||||||
${this.unsupported && this.manual ? html`<br />` : nothing}
|
? this.hass.localize(
|
||||||
${this.manual
|
"ui.panel.config.voice_assistants.expose.manually_configured"
|
||||||
? this.hass.localize(
|
)
|
||||||
"ui.panel.config.voice_assistants.expose.manually_configured"
|
: nothing}
|
||||||
)
|
</span>
|
||||||
: nothing}
|
</ha-tooltip>
|
||||||
</simple-tooltip>
|
|
||||||
`
|
|
||||||
: ""}
|
|
||||||
</div>
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import { consume } from "@lit-labs/context";
|
import { consume } from "@lit-labs/context";
|
||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
|
||||||
import {
|
import {
|
||||||
mdiCloseBoxMultiple,
|
mdiCloseBoxMultiple,
|
||||||
mdiCloseCircleOutline,
|
mdiCloseCircleOutline,
|
||||||
@ -28,6 +27,7 @@ import type {
|
|||||||
SortingChangedEvent,
|
SortingChangedEvent,
|
||||||
} from "../../../components/data-table/ha-data-table";
|
} from "../../../components/data-table/ha-data-table";
|
||||||
import "../../../components/ha-fab";
|
import "../../../components/ha-fab";
|
||||||
|
import "../../../components/ha-tooltip";
|
||||||
import type { AlexaEntity } from "../../../data/alexa";
|
import type { AlexaEntity } from "../../../data/alexa";
|
||||||
import { fetchCloudAlexaEntities } from "../../../data/alexa";
|
import { fetchCloudAlexaEntities } from "../../../data/alexa";
|
||||||
import type { CloudStatus, CloudStatusLoggedIn } from "../../../data/cloud";
|
import type { CloudStatus, CloudStatusLoggedIn } from "../../../data/cloud";
|
||||||
@ -599,32 +599,34 @@ export class VoiceAssistantsExpose extends LitElement {
|
|||||||
>
|
>
|
||||||
`
|
`
|
||||||
: html`
|
: html`
|
||||||
<ha-icon-button
|
<ha-tooltip
|
||||||
id="enable-btn"
|
.content=${this.hass.localize(
|
||||||
@click=${this._exposeSelected}
|
|
||||||
.path=${mdiPlusBoxMultiple}
|
|
||||||
.label=${this.hass.localize(
|
|
||||||
"ui.panel.config.voice_assistants.expose.expose"
|
"ui.panel.config.voice_assistants.expose.expose"
|
||||||
)}
|
)}
|
||||||
></ha-icon-button>
|
placement="left"
|
||||||
<simple-tooltip animation-delay="0" for="enable-btn">
|
>
|
||||||
${this.hass.localize(
|
<ha-icon-button
|
||||||
"ui.panel.config.voice_assistants.expose.expose"
|
@click=${this._exposeSelected}
|
||||||
)}
|
.path=${mdiPlusBoxMultiple}
|
||||||
</simple-tooltip>
|
.label=${this.hass.localize(
|
||||||
<ha-icon-button
|
"ui.panel.config.voice_assistants.expose.expose"
|
||||||
id="disable-btn"
|
)}
|
||||||
@click=${this._unexposeSelected}
|
></ha-icon-button>
|
||||||
.path=${mdiCloseBoxMultiple}
|
</ha-tooltip>
|
||||||
.label=${this.hass.localize(
|
<ha-tooltip
|
||||||
|
content=${this.hass.localize(
|
||||||
"ui.panel.config.voice_assistants.expose.unexpose"
|
"ui.panel.config.voice_assistants.expose.unexpose"
|
||||||
)}
|
)}
|
||||||
></ha-icon-button>
|
placement="left"
|
||||||
<simple-tooltip animation-delay="0" for="disable-btn">
|
>
|
||||||
${this.hass.localize(
|
<ha-icon-button
|
||||||
"ui.panel.config.voice_assistants.expose.unexpose"
|
@click=${this._unexposeSelected}
|
||||||
)}
|
.path=${mdiCloseBoxMultiple}
|
||||||
</simple-tooltip>
|
.label=${this.hass.localize(
|
||||||
|
"ui.panel.config.voice_assistants.expose.unexpose"
|
||||||
|
)}
|
||||||
|
></ha-icon-button>
|
||||||
|
</ha-tooltip>
|
||||||
`}
|
`}
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
|
||||||
import "@material/mwc-list/mwc-list";
|
import "@material/mwc-list/mwc-list";
|
||||||
import { mdiPencil, mdiPencilOff, mdiPlus } from "@mdi/js";
|
import { mdiPencil, mdiPencilOff, mdiPlus } from "@mdi/js";
|
||||||
import type { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
|
import type { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||||
@ -15,6 +14,7 @@ import "../../../components/ha-fab";
|
|||||||
import "../../../components/ha-icon-button";
|
import "../../../components/ha-icon-button";
|
||||||
import "../../../components/ha-list-item";
|
import "../../../components/ha-list-item";
|
||||||
import "../../../components/ha-svg-icon";
|
import "../../../components/ha-svg-icon";
|
||||||
|
import "../../../components/ha-tooltip";
|
||||||
import "../../../components/map/ha-locations-editor";
|
import "../../../components/map/ha-locations-editor";
|
||||||
import type {
|
import type {
|
||||||
HaLocationsEditor,
|
HaLocationsEditor,
|
||||||
@ -199,7 +199,15 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
|
|||||||
stateObject.entity_id === "zone.home" &&
|
stateObject.entity_id === "zone.home" &&
|
||||||
!this._canEditCore
|
!this._canEditCore
|
||||||
? nothing
|
? nothing
|
||||||
: html`<div slot="meta">
|
: html`<ha-tooltip
|
||||||
|
slot="meta"
|
||||||
|
placement="left"
|
||||||
|
.content=${hass.localize(
|
||||||
|
"ui.panel.config.zone.configured_in_yaml"
|
||||||
|
)}
|
||||||
|
.disabled=${stateObject.entity_id === "zone.home"}
|
||||||
|
hoist
|
||||||
|
>
|
||||||
<ha-icon-button
|
<ha-icon-button
|
||||||
.id=${!this.narrow ? stateObject.entity_id : ""}
|
.id=${!this.narrow ? stateObject.entity_id : ""}
|
||||||
.entityId=${stateObject.entity_id}
|
.entityId=${stateObject.entity_id}
|
||||||
@ -214,19 +222,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
|
|||||||
: hass.localize("ui.panel.config.zone.edit_zone")}
|
: hass.localize("ui.panel.config.zone.edit_zone")}
|
||||||
@click=${this._editHomeZone}
|
@click=${this._editHomeZone}
|
||||||
></ha-icon-button>
|
></ha-icon-button>
|
||||||
${stateObject.entity_id !== "zone.home"
|
</ha-tooltip>`}
|
||||||
? html`
|
|
||||||
<simple-tooltip
|
|
||||||
animation-delay="0"
|
|
||||||
position="left"
|
|
||||||
>
|
|
||||||
${hass.localize(
|
|
||||||
"ui.panel.config.zone.configured_in_yaml"
|
|
||||||
)}
|
|
||||||
</simple-tooltip>
|
|
||||||
`
|
|
||||||
: ""}
|
|
||||||
</div>`}
|
|
||||||
</ha-list-item>
|
</ha-list-item>
|
||||||
`
|
`
|
||||||
)}
|
)}
|
||||||
@ -588,6 +584,9 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
|
|||||||
ha-card {
|
ha-card {
|
||||||
margin-bottom: 100px;
|
margin-bottom: 100px;
|
||||||
}
|
}
|
||||||
|
ha-tooltip {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import { mdiInformation } from "@mdi/js";
|
import { mdiInformation } from "@mdi/js";
|
||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
|
||||||
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
|
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||||
import type { PropertyValues } from "lit";
|
import type { PropertyValues } from "lit";
|
||||||
import { css, html, LitElement, nothing } from "lit";
|
import { css, html, LitElement, nothing } from "lit";
|
||||||
@ -9,6 +8,7 @@ import { round } from "../../../../common/number/round";
|
|||||||
import "../../../../components/ha-card";
|
import "../../../../components/ha-card";
|
||||||
import "../../../../components/ha-gauge";
|
import "../../../../components/ha-gauge";
|
||||||
import "../../../../components/ha-svg-icon";
|
import "../../../../components/ha-svg-icon";
|
||||||
|
import "../../../../components/ha-tooltip";
|
||||||
import type { EnergyData } from "../../../../data/energy";
|
import type { EnergyData } from "../../../../data/energy";
|
||||||
import {
|
import {
|
||||||
energySourcesByType,
|
energySourcesByType,
|
||||||
@ -134,14 +134,6 @@ class HuiEnergyCarbonGaugeCard
|
|||||||
<ha-card>
|
<ha-card>
|
||||||
${value !== undefined
|
${value !== undefined
|
||||||
? html`
|
? html`
|
||||||
<ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
|
|
||||||
<simple-tooltip animation-delay="0" for="info" position="left">
|
|
||||||
<span>
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.lovelace.cards.energy.carbon_consumed_gauge.card_indicates_energy_used"
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
</simple-tooltip>
|
|
||||||
<ha-gauge
|
<ha-gauge
|
||||||
min="0"
|
min="0"
|
||||||
max="100"
|
max="100"
|
||||||
@ -153,6 +145,14 @@ class HuiEnergyCarbonGaugeCard
|
|||||||
"--gauge-color": this._computeSeverity(value),
|
"--gauge-color": this._computeSeverity(value),
|
||||||
})}
|
})}
|
||||||
></ha-gauge>
|
></ha-gauge>
|
||||||
|
<ha-tooltip
|
||||||
|
.content=${this.hass.localize(
|
||||||
|
"ui.panel.lovelace.cards.energy.carbon_consumed_gauge.card_indicates_energy_used"
|
||||||
|
)}
|
||||||
|
placement="left"
|
||||||
|
>
|
||||||
|
<ha-svg-icon .path=${mdiInformation}></ha-svg-icon>
|
||||||
|
</ha-tooltip>
|
||||||
<div class="name">
|
<div class="name">
|
||||||
${this.hass.localize(
|
${this.hass.localize(
|
||||||
"ui.panel.lovelace.cards.energy.carbon_consumed_gauge.low_carbon_energy_consumed"
|
"ui.panel.lovelace.cards.energy.carbon_consumed_gauge.low_carbon_energy_consumed"
|
||||||
@ -213,14 +213,9 @@ class HuiEnergyCarbonGaugeCard
|
|||||||
top: 4px;
|
top: 4px;
|
||||||
color: var(--secondary-text-color);
|
color: var(--secondary-text-color);
|
||||||
}
|
}
|
||||||
simple-tooltip > span {
|
|
||||||
font-size: 12px;
|
ha-tooltip::part(base__popup) {
|
||||||
line-height: 12px;
|
margin-top: 4px;
|
||||||
}
|
|
||||||
simple-tooltip {
|
|
||||||
width: 80%;
|
|
||||||
max-width: 250px;
|
|
||||||
top: 8px !important;
|
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import { mdiInformation } from "@mdi/js";
|
import { mdiInformation } from "@mdi/js";
|
||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
|
||||||
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
|
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||||
import type { PropertyValues } from "lit";
|
import type { PropertyValues } from "lit";
|
||||||
import { css, html, LitElement, nothing } from "lit";
|
import { css, html, LitElement, nothing } from "lit";
|
||||||
@ -9,6 +8,7 @@ import "../../../../components/ha-card";
|
|||||||
import "../../../../components/ha-gauge";
|
import "../../../../components/ha-gauge";
|
||||||
import type { LevelDefinition } from "../../../../components/ha-gauge";
|
import type { LevelDefinition } from "../../../../components/ha-gauge";
|
||||||
import "../../../../components/ha-svg-icon";
|
import "../../../../components/ha-svg-icon";
|
||||||
|
import "../../../../components/ha-tooltip";
|
||||||
import type {
|
import type {
|
||||||
EnergyData,
|
EnergyData,
|
||||||
GridSourceTypeEnergyPreference,
|
GridSourceTypeEnergyPreference,
|
||||||
@ -31,7 +31,7 @@ class HuiEnergyGridGaugeCard
|
|||||||
extends SubscribeMixin(LitElement)
|
extends SubscribeMixin(LitElement)
|
||||||
implements LovelaceCard
|
implements LovelaceCard
|
||||||
{
|
{
|
||||||
@property({ attribute: false }) public hass?: HomeAssistant;
|
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||||
|
|
||||||
@state() private _config?: EnergyGridNeutralityGaugeCardConfig;
|
@state() private _config?: EnergyGridNeutralityGaugeCardConfig;
|
||||||
|
|
||||||
@ -111,19 +111,6 @@ class HuiEnergyGridGaugeCard
|
|||||||
<ha-card>
|
<ha-card>
|
||||||
${value !== undefined
|
${value !== undefined
|
||||||
? html`
|
? html`
|
||||||
<ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
|
|
||||||
<simple-tooltip animation-delay="0" for="info" position="left">
|
|
||||||
<span>
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.lovelace.cards.energy.grid_neutrality_gauge.energy_dependency"
|
|
||||||
)}
|
|
||||||
<br /><br />
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.lovelace.cards.energy.grid_neutrality_gauge.color_explain"
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
</simple-tooltip>
|
|
||||||
|
|
||||||
<ha-gauge
|
<ha-gauge
|
||||||
min="-1"
|
min="-1"
|
||||||
max="1"
|
max="1"
|
||||||
@ -138,6 +125,18 @@ class HuiEnergyGridGaugeCard
|
|||||||
label="kWh"
|
label="kWh"
|
||||||
needle
|
needle
|
||||||
></ha-gauge>
|
></ha-gauge>
|
||||||
|
<ha-tooltip placement="left">
|
||||||
|
<span slot="content">
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.lovelace.cards.energy.grid_neutrality_gauge.energy_dependency"
|
||||||
|
)}
|
||||||
|
<br /><br />
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.lovelace.cards.energy.grid_neutrality_gauge.color_explain"
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<ha-svg-icon .path=${mdiInformation}></ha-svg-icon>
|
||||||
|
</ha-tooltip>
|
||||||
<div class="name">
|
<div class="name">
|
||||||
${returnedToGrid! >= consumedFromGrid!
|
${returnedToGrid! >= consumedFromGrid!
|
||||||
? this.hass.localize(
|
? this.hass.localize(
|
||||||
@ -190,14 +189,9 @@ class HuiEnergyGridGaugeCard
|
|||||||
top: 4px;
|
top: 4px;
|
||||||
color: var(--secondary-text-color);
|
color: var(--secondary-text-color);
|
||||||
}
|
}
|
||||||
simple-tooltip > span {
|
|
||||||
font-size: 12px;
|
ha-tooltip::part(base__popup) {
|
||||||
line-height: 12px;
|
margin-top: 4px;
|
||||||
}
|
|
||||||
simple-tooltip {
|
|
||||||
width: 80%;
|
|
||||||
max-width: 250px;
|
|
||||||
top: 8px !important;
|
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
|
||||||
import { mdiInformation } from "@mdi/js";
|
import { mdiInformation } from "@mdi/js";
|
||||||
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
|
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||||
import type { PropertyValues } from "lit";
|
import type { PropertyValues } from "lit";
|
||||||
@ -8,6 +7,7 @@ import { styleMap } from "lit/directives/style-map";
|
|||||||
import "../../../../components/ha-card";
|
import "../../../../components/ha-card";
|
||||||
import "../../../../components/ha-gauge";
|
import "../../../../components/ha-gauge";
|
||||||
import "../../../../components/ha-svg-icon";
|
import "../../../../components/ha-svg-icon";
|
||||||
|
import "../../../../components/ha-tooltip";
|
||||||
import type { EnergyData } from "../../../../data/energy";
|
import type { EnergyData } from "../../../../data/energy";
|
||||||
import {
|
import {
|
||||||
energySourcesByType,
|
energySourcesByType,
|
||||||
@ -176,14 +176,6 @@ class HuiEnergySelfSufficiencyGaugeCard
|
|||||||
<ha-card>
|
<ha-card>
|
||||||
${value !== undefined
|
${value !== undefined
|
||||||
? html`
|
? html`
|
||||||
<ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
|
|
||||||
<simple-tooltip animation-delay="0" for="info" position="left">
|
|
||||||
<span>
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.lovelace.cards.energy.self_sufficiency_gauge.card_indicates_self_sufficiency_quota"
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
</simple-tooltip>
|
|
||||||
<ha-gauge
|
<ha-gauge
|
||||||
min="0"
|
min="0"
|
||||||
max="100"
|
max="100"
|
||||||
@ -195,6 +187,14 @@ class HuiEnergySelfSufficiencyGaugeCard
|
|||||||
"--gauge-color": this._computeSeverity(value),
|
"--gauge-color": this._computeSeverity(value),
|
||||||
})}
|
})}
|
||||||
></ha-gauge>
|
></ha-gauge>
|
||||||
|
<ha-tooltip
|
||||||
|
placement="left"
|
||||||
|
.content=${this.hass.localize(
|
||||||
|
"ui.panel.lovelace.cards.energy.self_sufficiency_gauge.card_indicates_self_sufficiency_quota"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<ha-svg-icon .path=${mdiInformation}></ha-svg-icon>
|
||||||
|
</ha-tooltip>
|
||||||
<div class="name">
|
<div class="name">
|
||||||
${this.hass.localize(
|
${this.hass.localize(
|
||||||
"ui.panel.lovelace.cards.energy.self_sufficiency_gauge.self_sufficiency_quota"
|
"ui.panel.lovelace.cards.energy.self_sufficiency_gauge.self_sufficiency_quota"
|
||||||
@ -253,14 +253,9 @@ class HuiEnergySelfSufficiencyGaugeCard
|
|||||||
top: 4px;
|
top: 4px;
|
||||||
color: var(--secondary-text-color);
|
color: var(--secondary-text-color);
|
||||||
}
|
}
|
||||||
simple-tooltip > span {
|
|
||||||
font-size: 12px;
|
ha-tooltip::part(base__popup) {
|
||||||
line-height: 12px;
|
margin-top: 4px;
|
||||||
}
|
|
||||||
simple-tooltip {
|
|
||||||
width: 80%;
|
|
||||||
max-width: 250px;
|
|
||||||
top: 8px !important;
|
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import { mdiInformation } from "@mdi/js";
|
import { mdiInformation } from "@mdi/js";
|
||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
|
||||||
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
|
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||||
import type { PropertyValues } from "lit";
|
import type { PropertyValues } from "lit";
|
||||||
import { css, html, LitElement, nothing } from "lit";
|
import { css, html, LitElement, nothing } from "lit";
|
||||||
@ -107,18 +106,6 @@ class HuiEnergySolarGaugeCard
|
|||||||
<ha-card>
|
<ha-card>
|
||||||
${value !== undefined
|
${value !== undefined
|
||||||
? html`
|
? html`
|
||||||
<ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
|
|
||||||
<simple-tooltip animation-delay="0" for="info" position="left">
|
|
||||||
<span>
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.lovelace.cards.energy.solar_consumed_gauge.card_indicates_solar_energy_used"
|
|
||||||
)}
|
|
||||||
<br /><br />
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.lovelace.cards.energy.solar_consumed_gauge.card_indicates_solar_energy_used_charge_home_bat"
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
</simple-tooltip>
|
|
||||||
<ha-gauge
|
<ha-gauge
|
||||||
min="0"
|
min="0"
|
||||||
max="100"
|
max="100"
|
||||||
@ -130,6 +117,18 @@ class HuiEnergySolarGaugeCard
|
|||||||
"--gauge-color": this._computeSeverity(value),
|
"--gauge-color": this._computeSeverity(value),
|
||||||
})}
|
})}
|
||||||
></ha-gauge>
|
></ha-gauge>
|
||||||
|
<ha-tooltip placement="left">
|
||||||
|
<span slot="content">
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.lovelace.cards.energy.solar_consumed_gauge.card_indicates_solar_energy_used"
|
||||||
|
)}
|
||||||
|
<br /><br />
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.lovelace.cards.energy.solar_consumed_gauge.card_indicates_solar_energy_used_charge_home_bat"
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<ha-svg-icon .path=${mdiInformation}></ha-svg-icon>
|
||||||
|
</ha-tooltip>
|
||||||
<div class="name">
|
<div class="name">
|
||||||
${this.hass.localize(
|
${this.hass.localize(
|
||||||
"ui.panel.lovelace.cards.energy.solar_consumed_gauge.self_consumed_solar_energy"
|
"ui.panel.lovelace.cards.energy.solar_consumed_gauge.self_consumed_solar_energy"
|
||||||
@ -192,14 +191,9 @@ class HuiEnergySolarGaugeCard
|
|||||||
top: 4px;
|
top: 4px;
|
||||||
color: var(--secondary-text-color);
|
color: var(--secondary-text-color);
|
||||||
}
|
}
|
||||||
simple-tooltip > span {
|
|
||||||
font-size: 12px;
|
ha-tooltip::part(base__popup) {
|
||||||
line-height: 12px;
|
margin-top: 4px;
|
||||||
}
|
|
||||||
simple-tooltip {
|
|
||||||
width: 80%;
|
|
||||||
max-width: 250px;
|
|
||||||
top: 8px !important;
|
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
|
||||||
import type { ActionDetail } from "@material/mwc-list";
|
import type { ActionDetail } from "@material/mwc-list";
|
||||||
import {
|
import {
|
||||||
mdiAndroid,
|
mdiAndroid,
|
||||||
|
@ -44,10 +44,7 @@
|
|||||||
// CSS
|
// CSS
|
||||||
"no-invalid-css": "off" // warning does not work
|
"no-invalid-css": "off" // warning does not work
|
||||||
},
|
},
|
||||||
"globalTags": ["google-cast-launcher"],
|
"globalTags": ["google-cast-launcher"]
|
||||||
"customHtmlData": [
|
|
||||||
"./node_modules/@lrnwebcomponents/simple-tooltip/custom-elements.json"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"paths": {
|
"paths": {
|
||||||
|
10
yarn.lock
10
yarn.lock
@ -2310,15 +2310,6 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
"@lrnwebcomponents/simple-tooltip@npm:8.0.2":
|
|
||||||
version: 8.0.2
|
|
||||||
resolution: "@lrnwebcomponents/simple-tooltip@npm:8.0.2"
|
|
||||||
dependencies:
|
|
||||||
lit: "npm:^3.1.2"
|
|
||||||
checksum: 10/cc432c516ed176f1b99a04071f500bea2c1620a2b505e60867f3464e2a9cf54b78b4c84ac3ed85ac34e3579d8671112953d085bb37c2ff7202a1639e6ae0db4e
|
|
||||||
languageName: node
|
|
||||||
linkType: hard
|
|
||||||
|
|
||||||
"@marijn/find-cluster-break@npm:^1.0.0":
|
"@marijn/find-cluster-break@npm:^1.0.0":
|
||||||
version: 1.0.2
|
version: 1.0.2
|
||||||
resolution: "@marijn/find-cluster-break@npm:1.0.2"
|
resolution: "@marijn/find-cluster-break@npm:1.0.2"
|
||||||
@ -9432,7 +9423,6 @@ __metadata:
|
|||||||
"@lit-labs/observers": "npm:2.0.5"
|
"@lit-labs/observers": "npm:2.0.5"
|
||||||
"@lit-labs/virtualizer": "npm:2.1.0"
|
"@lit-labs/virtualizer": "npm:2.1.0"
|
||||||
"@lokalise/node-api": "npm:13.2.1"
|
"@lokalise/node-api": "npm:13.2.1"
|
||||||
"@lrnwebcomponents/simple-tooltip": "npm:8.0.2"
|
|
||||||
"@material/chips": "npm:=14.0.0-canary.53b3cad2f.0"
|
"@material/chips": "npm:=14.0.0-canary.53b3cad2f.0"
|
||||||
"@material/data-table": "npm:=14.0.0-canary.53b3cad2f.0"
|
"@material/data-table": "npm:=14.0.0-canary.53b3cad2f.0"
|
||||||
"@material/mwc-base": "npm:0.27.0"
|
"@material/mwc-base": "npm:0.27.0"
|
||||||
|
Loading…
x
Reference in New Issue
Block a user