jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-30 20:56:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make the thermostat card and humidifier card title clickable

Browse Source
This commit is contained in:
Paul Bottein 2023-12-18 15:41:16 +01:00
parent 325ad6f721
commit 9eb88e7fce
No known key found for this signature in database
2 changed files with 51 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,3 @@
import { mdiDotsVertical } from "@mdi/js";
import {
CSSResultGroup,
LitElement,
@ -73,7 +72,15 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
this._config = config;
}
private _handleMoreInfo() {
private _handleMoreInfo(ev) {
if (ev.defaultPrevented) {
return;
}
if (ev.type === "keydown" && ev.key !== "Enter" && ev.key !== " ") {
return;
}
ev.preventDefault();
ev.stopPropagation();
fireEvent(this, "hass-more-info", {
entityId: this._config!.entity,
});
@ -125,22 +132,21 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
return html`
<ha-card>
<p class="title">${name}</p>
<p
class="title"
role="button"
tabindex="0"
@click=${this._handleMoreInfo}
@keydown=${this._handleMoreInfo}
>
${name}
</p>
<ha-state-control-humidifier-humidity
prevent-interaction-on-scroll
show-current
.hass=${this.hass}
.stateObj=${stateObj}
></ha-state-control-humidifier-humidity>
<ha-icon-button
class="more-info"
.label=${this.hass!.localize(
"ui.panel.lovelace.cards.show_more_info"
)}
.path=${mdiDotsVertical}
@click=${this._handleMoreInfo}
tabindex="0"
></ha-icon-button>
<hui-card-features
style=${styleMap({
"--feature-color": color,
@ -170,13 +176,19 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
width: 100%;
font-size: 18px;
line-height: 36px;
padding: 8px 30px 8px 30px;
padding: 8px;
margin: 0;
text-align: center;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.title:focus-visible {
outline: none;
background: rgba(var(--rgb-primary-text-color), 0.04);
}
ha-state-control-humidifier-humidity {

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

@ -1,4 +1,3 @@
import { mdiDotsVertical } from "@mdi/js";
import {
CSSResultGroup,
LitElement,
@ -18,9 +17,9 @@ import "../../../components/ha-icon-button";
import { ClimateEntity } from "../../../data/climate";
import "../../../state-control/climate/ha-state-control-climate-temperature";
import { HomeAssistant } from "../../../types";
import "../card-features/hui-card-features";
import { findEntities } from "../common/find-entities";
import { createEntityNotFoundWarning } from "../components/hui-warning";
import "../card-features/hui-card-features";
import { LovelaceCard, LovelaceCardEditor } from "../types";
import { ThermostatCardConfig } from "./types";
@ -65,7 +64,15 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
this._config = config;
}
private _handleMoreInfo() {
private _handleMoreInfo(ev) {
if (ev.defaultPrevented) {
return;
}
if (ev.type === "keydown" && ev.key !== "Enter" && ev.key !== " ") {
return;
}
ev.preventDefault();
ev.stopPropagation();
fireEvent(this, "hass-more-info", {
entityId: this._config!.entity,
});
@ -117,22 +124,21 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
return html`
<ha-card>
<p class="title">${name}</p>
<p
class="title"
role="button"
tabindex="0"
@click=${this._handleMoreInfo}
@keydown=${this._handleMoreInfo}
>
${name}
</p>
<ha-state-control-climate-temperature
prevent-interaction-on-scroll
show-current
.hass=${this.hass}
.stateObj=${stateObj}
></ha-state-control-climate-temperature>
<ha-icon-button
class="more-info"
.label=${this.hass!.localize(
"ui.panel.lovelace.cards.show_more_info"
)}
.path=${mdiDotsVertical}
@click=${this._handleMoreInfo}
tabindex="0"
></ha-icon-button>
<hui-card-features
style=${styleMap({
"--feature-color": color,
@ -162,13 +168,19 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
width: 100%;
font-size: 18px;
line-height: 36px;
padding: 8px 30px 8px 30px;
padding: 8px;
margin: 0;
text-align: center;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.title:focus-visible {
outline: none;
background: rgba(var(--rgb-primary-text-color), 0.04);
}
ha-state-control-climate-temperature {
@ -178,18 +190,6 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
box-sizing: border-box;
}
.more-info {
position: absolute;
cursor: pointer;
top: 0;
right: 0;
inset-inline-end: 0px;
inset-inline-start: initial;
border-radius: 100%;
color: var(--secondary-text-color);
direction: var(--direction);
}
hui-card-features {
width: 100%;
}