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

Fix thermostat and humidifier card rendering when off (#19281)

Browse Source 
* Fix thermostat and humidifier card rendering when off

* Fix action color
This commit is contained in:
Paul Bottein 2024-01-04 16:18:16 +01:00 committed by Bram Kragten
parent a31b9f1b4d
commit 456c011f3e
3 changed files with 71 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/state-control/climate/ha-state-control-climate-temperature.ts
View File

@ -177,11 +177,20 @@ export class HaStateControlClimateTemperature extends LitElement {
const action = this.stateObj.attributes.hvac_action;
const isTemperatureDisplayed =
(this.stateObj.attributes.current_temperature != null &&
this.showCurrentAsPrimary) ||
((this._supportsTargetTemperature ||
this._supportsTargetTemperatureRange) &&
!this.showCurrentAsPrimary);
return html`
<p class="label">
${action
${action && action !== "off"
? this.hass.formatEntityAttributeValue(this.stateObj, "hvac_action")
: this.hass.formatEntityState(this.stateObj)}
: isTemperatureDisplayed
? this.hass.formatEntityState(this.stateObj)
: nothing}
</p>
`;
}
@ -315,6 +324,14 @@ export class HaStateControlClimateTemperature extends LitElement {
`;
}
if (this.stateObj.state !== UNAVAILABLE) {
return html`
<p class="primary-state">
${this.hass.formatEntityState(this.stateObj)}
</p>
`;
}
return nothing;
}
@ -373,6 +390,14 @@ export class HaStateControlClimateTemperature extends LitElement {
return html`<p class="label"></p>`;
}
private _renderInfo() {
return html`
<div class="info">
${this._renderLabel()}${this._renderPrimary()}${this._renderSecondary()}
</div>
`;
}
get _supportsTargetTemperature() {
return (
supportsFeature(this.stateObj, ClimateEntityFeature.TARGET_TEMPERATURE) &&
@ -447,10 +472,7 @@ export class HaStateControlClimateTemperature extends LitElement {
@value-changing=${this._valueChanging}
>
</ha-control-circular-slider>
<div class="info">
${this._renderLabel()}${this._renderPrimary()}${this._renderSecondary()}
</div>
${this._renderTemperatureButtons("value")}
${this._renderInfo()} ${this._renderTemperatureButtons("value")}
</div>
`;
}
@ -484,9 +506,7 @@ export class HaStateControlClimateTemperature extends LitElement {
@high-changing=${this._valueChanging}
>
</ha-control-circular-slider>
<div class="info">
${this._renderLabel()}${this._renderPrimary()}${this._renderSecondary()}
</div>
${this._renderInfo()}
${this._renderTemperatureButtons(this._selectTargetTemperature, true)}
</div>
`;
@ -497,6 +517,7 @@ export class HaStateControlClimateTemperature extends LitElement {
class="container${containerSizeClass}"
style=${styleMap({
"--state-color": stateColor,
"--action-color": actionColor,
})}
>
<ha-control-circular-slider
@ -510,9 +531,7 @@ export class HaStateControlClimateTemperature extends LitElement {
.disabled=${!active}
>
</ha-control-circular-slider>
<div class="info">
${this._renderLabel()} ${this._renderSecondary()}
</div>
${this._renderInfo()}
</div>
`;
}

37
src/state-control/humidifier/ha-state-control-humidifier-humidity.ts
View File

@ -105,11 +105,18 @@ export class HaStateControlHumidifierHumidity extends LitElement {
const action = this.stateObj.attributes.action;
const isHumidityDisplayed =
(this.stateObj.attributes.current_humidity != null &&
this.showCurrentAsPrimary) ||
(this._targetHumidity != null && !this.showCurrentAsPrimary);
return html`
<p class="label">
${action
${action && action !== "off"
? this.hass.formatEntityAttributeValue(this.stateObj, "action")
: this.hass.formatEntityState(this.stateObj)}
: isHumidityDisplayed
? this.hass.formatEntityState(this.stateObj)
: nothing}
</p>
`;
}
@ -144,6 +151,14 @@ export class HaStateControlHumidifierHumidity extends LitElement {
return this._renderTarget(this._targetHumidity!, "big");
}
if (this.stateObj.state !== UNAVAILABLE) {
return html`
<p class="primary-state">
${this.hass.formatEntityState(this.stateObj)}
</p>
`;
}
return nothing;
}
@ -225,6 +240,14 @@ export class HaStateControlHumidifierHumidity extends LitElement {
`;
}
private _renderInfo() {
return html`
<div class="info">
${this._renderLabel()}${this._renderPrimary()}${this._renderSecondary()}
</div>
`;
}
protected render() {
const stateColor = stateColorCss(this.stateObj);
const active = stateActive(this.stateObj);
@ -272,10 +295,7 @@ export class HaStateControlHumidifierHumidity extends LitElement {
@value-changing=${this._valueChanging}
>
</ha-control-circular-slider>
<div class="info">
${this._renderLabel()}${this._renderPrimary()}${this._renderSecondary()}
</div>
${this._renderButtons()}
${this._renderInfo()} ${this._renderButtons()}
</div>
`;
}
@ -284,6 +304,7 @@ export class HaStateControlHumidifierHumidity extends LitElement {
<div
class="container${containerSizeClass}"
style=${styleMap({
"--state-color": stateColor,
"--action-color": actionColor,
})}
>
@ -296,9 +317,7 @@ export class HaStateControlHumidifierHumidity extends LitElement {
disabled
>
</ha-control-circular-slider>
<div class="info">
${this._renderLabel()} ${this._renderSecondary()}
</div>
${this._renderInfo()}
</div>
`;
}

13
src/state-control/state-control-circular-slider-style.ts
View File

@ -54,7 +54,6 @@ export const stateControlCircularSliderStyle = css`
.label.disabled {
color: var(--secondary-text-color);
}
.buttons {
position: absolute;
bottom: 10px;
@ -67,6 +66,9 @@ export const stateControlCircularSliderStyle = css`
align-items: center;
justify-content: center;
}
.primary-state {
font-size: 36px;
}
.buttons ha-outlined-icon-button {
--md-outlined-icon-button-container-width: 48px;
@ -77,6 +79,9 @@ export const stateControlCircularSliderStyle = css`
.container.md ha-big-number {
font-size: 44px;
}
.container.md .state {
font-size: 30px;
}
.container.md .info {
margin-top: 12px;
gap: 6px;
@ -91,6 +96,9 @@ export const stateControlCircularSliderStyle = css`
.container.sm ha-big-number {
font-size: 32px;
}
.container.sm .state {
font-size: 26px;
}
.container.sm .info {
margin-top: 12px;
font-size: 14px;
@ -107,6 +115,9 @@ export const stateControlCircularSliderStyle = css`
.container.xs ha-big-number {
font-size: 32px;
}
.container.xs .state {
font-size: 16px;
}
.container.xs .info {
margin-top: 12px;
}