jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-23 17:26:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add title property to elements showing entity names (#9264)

Browse Source
This commit is contained in:
Philip Allgaier 2021-10-06 17:41:37 +02:00 committed by GitHub
parent 8e010618bb
commit fb1deb838c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 53 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/chart/ha-chart-base.ts
View File

@ -86,6 +86,7 @@ export default class HaChartBase extends LitElement {
class=${classMap({
hidden: this._hiddenDatasets.has(index),
})}
.title=${dataset.label}
>
<div
class="bullet"

2
src/components/entity/ha-state-label-badge.ts
View File

@ -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>
`;
}

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

@ -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">

13
src/dialogs/more-info/ha-more-info-dialog.ts
View File

@ -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`

11
src/panels/lovelace/cards/hui-button-card.ts
View File

@ -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">

6
src/panels/lovelace/cards/hui-entity-card.ts
View File

@ -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)}

6
src/panels/lovelace/cards/hui-gauge-card.ts
View File

@ -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>
`;
}

10
src/panels/lovelace/cards/hui-glance-card.ts
View File

@ -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`

2
src/panels/lovelace/cards/hui-humidifier-card.ts
View File

@ -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>
`;

6
src/panels/lovelace/cards/hui-light-card.ts
View File

@ -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>

2
src/panels/lovelace/cards/hui-thermostat-card.ts
View File

@ -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()

5
src/panels/lovelace/cards/hui-weather-forecast-card.ts
View File

@ -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">

4
src/panels/lovelace/components/hui-generic-entity-row.ts
View File

@ -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">

7
src/panels/lovelace/special-rows/hui-button-row.ts
View File

@ -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({

6
src/panels/lovelace/special-rows/hui-section-row.ts
View File

@ -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``}
`;
}

4
src/panels/lovelace/special-rows/hui-text-row.ts
View File

@ -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>
`;
}

2
src/panels/lovelace/special-rows/hui-weblink-row.ts
View File

@ -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>
`;
}