mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 17:26:42 +00:00
Add title
property to elements showing entity names (#9264)
This commit is contained in:
parent
8e010618bb
commit
fb1deb838c
@ -86,6 +86,7 @@ export default class HaChartBase extends LitElement {
|
||||
class=${classMap({
|
||||
hidden: this._hiddenDatasets.has(index),
|
||||
})}
|
||||
.title=${dataset.label}
|
||||
>
|
||||
<div
|
||||
class="bullet"
|
||||
|
@ -88,7 +88,7 @@ export class HaStateLabelBadge extends LitElement {
|
||||
entityState,
|
||||
this._timerTimeRemaining
|
||||
)}
|
||||
.description=${this.name ? this.name : computeStateName(entityState)}
|
||||
.description=${this.name ?? computeStateName(entityState)}
|
||||
></ha-label-badge>
|
||||
`;
|
||||
}
|
||||
|
@ -24,13 +24,15 @@ class StateInfo extends LitElement {
|
||||
return html``;
|
||||
}
|
||||
|
||||
const name = computeStateName(this.stateObj);
|
||||
|
||||
return html`<state-badge
|
||||
.stateObj=${this.stateObj}
|
||||
.stateColor=${true}
|
||||
></state-badge>
|
||||
<div class="info">
|
||||
<div class="name" .inDialog=${this.inDialog}>
|
||||
${computeStateName(this.stateObj)}
|
||||
<div class="name" .title=${name} .inDialog=${this.inDialog}>
|
||||
${name}
|
||||
</div>
|
||||
${this.inDialog
|
||||
? html`<div class="time-ago">
|
||||
|
@ -94,12 +94,14 @@ export class MoreInfoDialog extends LitElement {
|
||||
}
|
||||
const entityId = this._entityId;
|
||||
const stateObj = this.hass.states[entityId];
|
||||
const domain = computeDomain(entityId);
|
||||
|
||||
if (!stateObj) {
|
||||
return html``;
|
||||
}
|
||||
|
||||
const domain = computeDomain(entityId);
|
||||
const name = computeStateName(stateObj);
|
||||
|
||||
return html`
|
||||
<ha-dialog
|
||||
open
|
||||
@ -119,8 +121,13 @@ export class MoreInfoDialog extends LitElement {
|
||||
>
|
||||
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<div slot="title" class="main-title" @click=${this._enlarge}>
|
||||
${computeStateName(stateObj)}
|
||||
<div
|
||||
slot="title"
|
||||
class="main-title"
|
||||
.title=${name}
|
||||
@click=${this._enlarge}
|
||||
>
|
||||
${name}
|
||||
</div>
|
||||
${this.hass.user!.is_admin
|
||||
? html`
|
||||
|
@ -143,6 +143,10 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
|
||||
`;
|
||||
}
|
||||
|
||||
const name = this._config.show_name
|
||||
? this._config.name || (stateObj ? computeStateName(stateObj) : "")
|
||||
: "";
|
||||
|
||||
return html`
|
||||
<ha-card
|
||||
@action=${this._handleAction}
|
||||
@ -186,12 +190,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
|
||||
`
|
||||
: ""}
|
||||
${this._config.show_name
|
||||
? html`
|
||||
<span tabindex="-1">
|
||||
${this._config.name ||
|
||||
(stateObj ? computeStateName(stateObj) : "")}
|
||||
</span>
|
||||
`
|
||||
? html`<span tabindex="-1" .title=${name}>${name}</span>`
|
||||
: ""}
|
||||
${this._config.show_state && stateObj
|
||||
? html`<span class="state">
|
||||
|
@ -115,12 +115,12 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
|
||||
? this._config.attribute in stateObj.attributes
|
||||
: !UNAVAILABLE_STATES.includes(stateObj.state);
|
||||
|
||||
const name = this._config.name || computeStateName(stateObj);
|
||||
|
||||
return html`
|
||||
<ha-card @click=${this._handleClick} tabindex="0">
|
||||
<div class="header">
|
||||
<div class="name">
|
||||
${this._config.name || computeStateName(stateObj)}
|
||||
</div>
|
||||
<div class="name" .title=${name}>${name}</div>
|
||||
<div class="icon">
|
||||
<ha-icon
|
||||
.icon=${this._config.icon || stateIcon(stateObj)}
|
||||
|
@ -119,6 +119,8 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
|
||||
`;
|
||||
}
|
||||
|
||||
const name = this._config.name ?? computeStateName(stateObj);
|
||||
|
||||
// Use `stateObj.state` as value to keep formatting (e.g trailing zeros)
|
||||
// for consistent value display across gauge, entity, entity-row, etc.
|
||||
return html`
|
||||
@ -138,9 +140,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
|
||||
.needle=${this._config!.needle}
|
||||
.levels=${this._config!.needle ? this._severityLevels() : undefined}
|
||||
></ha-gauge>
|
||||
<div class="name">
|
||||
${this._config.name || computeStateName(stateObj)}
|
||||
</div>
|
||||
<div class="name" .title=${name}>${name}</div>
|
||||
</ha-card>
|
||||
`;
|
||||
}
|
||||
|
@ -278,6 +278,8 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
|
||||
</div>`;
|
||||
}
|
||||
|
||||
const name = entityConf.name ?? computeStateName(stateObj);
|
||||
|
||||
return html`
|
||||
<div
|
||||
class="entity"
|
||||
@ -292,13 +294,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
|
||||
)}
|
||||
>
|
||||
${this._config!.show_name
|
||||
? html`
|
||||
<div class="name">
|
||||
${"name" in entityConf
|
||||
? entityConf.name
|
||||
: computeStateName(stateObj)}
|
||||
</div>
|
||||
`
|
||||
? html` <div class="name" .title=${name}>${name}</div> `
|
||||
: ""}
|
||||
${this._config!.show_icon
|
||||
? html`
|
||||
|
@ -173,7 +173,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="info">${name}</div>
|
||||
<div id="info" .title=${name}>${name}</div>
|
||||
</div>
|
||||
</ha-card>
|
||||
`;
|
||||
|
@ -96,6 +96,8 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
|
||||
const brightness =
|
||||
Math.round((stateObj.attributes.brightness / 255) * 100) || 0;
|
||||
|
||||
const name = this._config.name ?? computeStateName(stateObj);
|
||||
|
||||
return html`
|
||||
<ha-card>
|
||||
<mwc-icon-button
|
||||
@ -145,7 +147,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="info">
|
||||
<div id="info" .title=${name}>
|
||||
${UNAVAILABLE_STATES.includes(stateObj.state)
|
||||
? html`
|
||||
<div>
|
||||
@ -157,7 +159,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
|
||||
</div>
|
||||
`
|
||||
: html` <div class="brightness">%</div> `}
|
||||
${this._config.name || computeStateName(stateObj)}
|
||||
${name}
|
||||
</div>
|
||||
</div>
|
||||
</ha-card>
|
||||
|
@ -251,7 +251,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="info">
|
||||
<div id="info" .title=${name}>
|
||||
<div id="modes">
|
||||
${(stateObj.attributes.hvac_modes || [])
|
||||
.concat()
|
||||
|
@ -190,6 +190,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
|
||||
}
|
||||
|
||||
const weatherStateIcon = getWeatherStateIcon(stateObj.state, this);
|
||||
const name = this._config.name ?? computeStateName(stateObj);
|
||||
|
||||
return html`
|
||||
<ha-card
|
||||
@ -221,9 +222,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
|
||||
this.hass.locale
|
||||
)}
|
||||
</div>
|
||||
<div class="name">
|
||||
${this._config.name || computeStateName(stateObj)}
|
||||
</div>
|
||||
<div class="name" .title=${name}>${name}</div>
|
||||
</div>
|
||||
<div class="temp-attribute">
|
||||
<div class="temp">
|
||||
|
@ -54,6 +54,7 @@ class HuiGenericEntityRow extends LitElement {
|
||||
!DOMAINS_HIDE_MORE_INFO.includes(computeDomain(this.config.entity)));
|
||||
|
||||
const hasSecondary = this.secondaryText || this.config.secondary_info;
|
||||
const name = this.config.name ?? computeStateName(stateObj);
|
||||
|
||||
return html`
|
||||
<state-badge
|
||||
@ -82,8 +83,9 @@ class HuiGenericEntityRow extends LitElement {
|
||||
hasHold: hasAction(this.config!.hold_action),
|
||||
hasDoubleClick: hasAction(this.config!.double_tap_action),
|
||||
})}
|
||||
.title=${name}
|
||||
>
|
||||
${this.config.name || computeStateName(stateObj)}
|
||||
${name}
|
||||
${hasSecondary
|
||||
? html`
|
||||
<div class="secondary">
|
||||
|
@ -50,6 +50,9 @@ export class HuiButtonRow extends LitElement implements LovelaceRow {
|
||||
? this.hass.states[this._config.entity]
|
||||
: undefined;
|
||||
|
||||
const name =
|
||||
this._config.name ?? (stateObj ? computeStateName(stateObj) : "");
|
||||
|
||||
return html`
|
||||
<ha-icon
|
||||
.icon=${this._config.icon ||
|
||||
@ -57,9 +60,7 @@ export class HuiButtonRow extends LitElement implements LovelaceRow {
|
||||
>
|
||||
</ha-icon>
|
||||
<div class="flex">
|
||||
<div>
|
||||
${this._config.name || (stateObj ? computeStateName(stateObj) : "")}
|
||||
</div>
|
||||
<div .title=${name}>${name}</div>
|
||||
<mwc-button
|
||||
@action=${this._handleAction}
|
||||
.actionHandler=${actionHandler({
|
||||
|
@ -26,7 +26,11 @@ class HuiSectionRow extends LitElement implements LovelaceRow {
|
||||
return html`
|
||||
<div class="divider"></div>
|
||||
${this._config.label
|
||||
? html` <div class="label">${this._config.label}</div> `
|
||||
? html`
|
||||
<div class="label" .title=${this._config.label}>
|
||||
${this._config.label}
|
||||
</div>
|
||||
`
|
||||
: html``}
|
||||
`;
|
||||
}
|
||||
|
@ -22,8 +22,8 @@ class HuiTextRow extends LitElement implements LovelaceRow {
|
||||
|
||||
return html`
|
||||
<ha-icon .icon=${this._config.icon}></ha-icon>
|
||||
<div class="name">${this._config.name}</div>
|
||||
<div class="text">${this._config.text}</div>
|
||||
<div class="name" .title=${this._config.name}>${this._config.name}</div>
|
||||
<div class="text" .title=${this._config.text}>${this._config.text}</div>
|
||||
`;
|
||||
}
|
||||
|
||||
|
@ -36,7 +36,7 @@ class HuiWeblinkRow extends LitElement implements LovelaceRow {
|
||||
?download=${this._config.download}
|
||||
>
|
||||
<ha-icon .icon=${this._config.icon}></ha-icon>
|
||||
<div>${this._config.name}</div>
|
||||
<div .title=${this._config.name}>${this._config.name}</div>
|
||||
</a>
|
||||
`;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user