-
${this._renderHvacAction()}
+
${this._renderLabel()}
`;
}
static get styles(): CSSResultGroup {
- return css`
- /* Layout */
- .container {
- position: relative;
- }
- .info {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- pointer-events: none;
- font-size: 16px;
- line-height: 24px;
- letter-spacing: 0.1px;
- }
- .info * {
- margin: 0;
- pointer-events: auto;
- }
- /* Elements */
- .temperature-container {
- margin-bottom: 30px;
- }
- .temperature {
- display: inline-flex;
- font-size: 58px;
- line-height: 64px;
- letter-spacing: -0.25px;
- margin: 0;
- }
- .temperature span {
- display: inline-flex;
- }
- .temperature .unit {
- font-size: 24px;
- line-height: 40px;
- }
- .temperature .decimal {
- font-size: 24px;
- line-height: 40px;
- align-self: flex-end;
- margin-right: -18px;
- }
- .action-container {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- width: 200px;
- height: 48px;
- margin-bottom: 6px;
- }
- .action {
- font-weight: 500;
- text-align: center;
- color: var(--action-color, inherit);
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- overflow: hidden;
- }
- .dual {
- display: flex;
- flex-direction: row;
- gap: 24px;
- margin-bottom: 40px;
- }
+ return [
+ moreInfoControlCircularSliderStyle,
+ css`
+ /* Elements */
+ .temperature-container {
+ margin-bottom: 30px;
+ }
+ .temperature {
+ display: inline-flex;
+ font-size: 58px;
+ line-height: 64px;
+ letter-spacing: -0.25px;
+ margin: 0;
+ }
+ .temperature span {
+ display: inline-flex;
+ }
+ .temperature .decimal {
+ font-size: 24px;
+ line-height: 32px;
+ align-self: flex-end;
+ width: 20px;
+ margin-bottom: 4px;
+ }
+ .temperature .unit {
+ font-size: 20px;
+ line-height: 24px;
+ align-self: flex-start;
+ margin-left: -20px;
+ width: 20px;
+ margin-top: 4px;
+ }
- .dual button {
- outline: none;
- background: none;
- color: inherit;
- font-family: inherit;
- -webkit-tap-highlight-color: transparent;
- border: none;
- opacity: 0.5;
- padding: 0;
- transition:
- opacity 180ms ease-in-out,
- transform 180ms ease-in-out;
- cursor: pointer;
- }
- .dual button:focus-visible {
- transform: scale(1.1);
- }
- .dual button.selected {
- opacity: 1;
- }
- .buttons {
- position: absolute;
- bottom: 10px;
- left: 0;
- right: 0;
- margin: 0 auto;
- width: 120px;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
- }
- .buttons ha-outlined-icon-button {
- --md-outlined-icon-button-container-size: 48px;
- --md-outlined-icon-button-icon-size: 24px;
- }
- /* Accessibility */
- .visually-hidden {
- position: absolute;
- overflow: hidden;
- clip: rect(0 0 0 0);
- height: 1px;
- width: 1px;
- margin: -1px;
- padding: 0;
- border: 0;
- }
- /* Slider */
- ha-control-circular-slider {
- --control-circular-slider-color: var(
- --main-color,
- var(--disabled-color)
- );
- --control-circular-slider-low-color: var(
- --low-color,
- var(--disabled-color)
- );
- --control-circular-slider-high-color: var(
- --high-color,
- var(--disabled-color)
- );
- }
- ha-control-circular-slider::after {
- display: block;
- content: "";
- position: absolute;
- top: -10%;
- left: -10%;
- right: -10%;
- bottom: -10%;
- background: radial-gradient(
- 50% 50% at 50% 50%,
- var(--action-color, transparent) 0%,
- transparent 100%
- );
- opacity: 0.15;
- pointer-events: none;
- }
- `;
+ .dual {
+ display: flex;
+ flex-direction: row;
+ gap: 24px;
+ margin-bottom: 40px;
+ }
+
+ .dual button {
+ outline: none;
+ background: none;
+ color: inherit;
+ font-family: inherit;
+ -webkit-tap-highlight-color: transparent;
+ border: none;
+ opacity: 0.5;
+ padding: 0;
+ transition:
+ opacity 180ms ease-in-out,
+ transform 180ms ease-in-out;
+ cursor: pointer;
+ }
+ .dual button:focus-visible {
+ transform: scale(1.1);
+ }
+ .dual button.selected {
+ opacity: 1;
+ }
+ /* Slider */
+ ha-control-circular-slider {
+ --control-circular-slider-low-color: var(
+ --low-color,
+ var(--disabled-color)
+ );
+ --control-circular-slider-high-color: var(
+ --high-color,
+ var(--disabled-color)
+ );
+ }
+ `,
+ ];
}
}
diff --git a/src/dialogs/more-info/components/ha-more-info-control-circular-slider-style.ts b/src/dialogs/more-info/components/ha-more-info-control-circular-slider-style.ts
new file mode 100644
index 0000000000..0e9d64c2d0
--- /dev/null
+++ b/src/dialogs/more-info/components/ha-more-info-control-circular-slider-style.ts
@@ -0,0 +1,97 @@
+import { css } from "lit";
+
+export const moreInfoControlCircularSliderStyle = css`
+ /* Layout elements */
+ .container {
+ position: relative;
+ }
+ .info {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ pointer-events: none;
+ font-size: 16px;
+ line-height: 24px;
+ letter-spacing: 0.1px;
+ }
+ .info * {
+ margin: 0;
+ pointer-events: auto;
+ }
+ /* Info elements */
+ .label-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 200px;
+ height: 48px;
+ margin-bottom: 6px;
+ }
+ .label {
+ font-weight: 500;
+ text-align: center;
+ color: var(--action-color, inherit);
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ }
+ .label.disabled {
+ color: var(--secondary-text-color);
+ }
+
+ .buttons {
+ position: absolute;
+ bottom: 10px;
+ left: 0;
+ right: 0;
+ margin: 0 auto;
+ width: 120px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ }
+ .buttons ha-outlined-icon-button {
+ --md-outlined-icon-button-container-size: 48px;
+ --md-outlined-icon-button-icon-size: 24px;
+ }
+ /* Accessibility */
+ .visually-hidden {
+ position: absolute;
+ overflow: hidden;
+ clip: rect(0 0 0 0);
+ height: 1px;
+ width: 1px;
+ margin: -1px;
+ padding: 0;
+ border: 0;
+ }
+ /* Slider */
+ ha-control-circular-slider {
+ --control-circular-slider-color: var(--state-color, var(--disabled-color));
+ }
+ ha-control-circular-slider::after {
+ display: block;
+ content: "";
+ position: absolute;
+ top: -10%;
+ left: -10%;
+ right: -10%;
+ bottom: -10%;
+ background: radial-gradient(
+ 50% 50% at 50% 50%,
+ var(--action-color, transparent) 0%,
+ transparent 100%
+ );
+ opacity: 0.15;
+ pointer-events: none;
+ }
+`;
diff --git a/src/dialogs/more-info/components/humidifier/ha-more-info-humidifier-humidity.ts b/src/dialogs/more-info/components/humidifier/ha-more-info-humidifier-humidity.ts
index 3f9bfaefb7..53ea757fa5 100644
--- a/src/dialogs/more-info/components/humidifier/ha-more-info-humidifier-humidity.ts
+++ b/src/dialogs/more-info/components/humidifier/ha-more-info-humidifier-humidity.ts
@@ -19,6 +19,7 @@ import {
HumidifierEntityDeviceClass,
} from "../../../../data/humidifier";
import { HomeAssistant } from "../../../../types";
+import { moreInfoControlCircularSliderStyle } from "../ha-more-info-control-circular-slider-style";
@customElement("ha-more-info-humidifier-humidity")
export class HaMoreInfoHumidifierHumidity extends LitElement {
@@ -80,7 +81,15 @@ export class HaMoreInfoHumidifierHumidity extends LitElement {
this._debouncedCallService();
}
- private _renderAction() {
+ private _renderLabel() {
+ if (this.stateObj.state === UNAVAILABLE) {
+ return html`
+
+ ${this.hass.formatEntityState(this.stateObj, UNAVAILABLE)}
+
+ `;
+ }
+
const action = this.stateObj.attributes.action;
const actionLabel = computeAttributeValueDisplay(
@@ -93,7 +102,7 @@ export class HaMoreInfoHumidifierHumidity extends LitElement {
) as string;
return html`
-
+
${action && ["drying", "humidifying"].includes(action)
? this.hass.localize(
"ui.dialogs.more_info_control.humidifier.target_label",
@@ -145,7 +154,7 @@ export class HaMoreInfoHumidifierHumidity extends LitElement {
}
protected render() {
- const mainColor = stateColorCss(this.stateObj);
+ const stateColor = stateColorCss(this.stateObj);
const active = stateActive(this.stateObj);
const action = this.stateObj.attributes.action;
@@ -161,7 +170,7 @@ export class HaMoreInfoHumidifierHumidity extends LitElement {
const targetHumidity = this._targetHumidity;
const currentHumidity = this.stateObj.attributes.current_humidity;
- if (targetHumidity != null) {
+ if (targetHumidity != null && this.stateObj.state !== UNAVAILABLE) {
const inverted =
this.stateObj.attributes.device_class ===
HumidifierEntityDeviceClass.DEHUMIDIFIER;
@@ -170,7 +179,7 @@ export class HaMoreInfoHumidifierHumidity extends LitElement {
@@ -181,13 +190,12 @@ export class HaMoreInfoHumidifierHumidity extends LitElement {
.max=${this._max}
.step=${this._step}
.current=${currentHumidity}
- .disabled=${this.stateObj.state === UNAVAILABLE}
@value-changed=${this._valueChanged}
@value-changing=${this._valueChanging}
>
-
${this._renderAction()}
+
${this._renderLabel()}
${this._renderTarget(targetHumidity)}
@@ -212,118 +220,33 @@ export class HaMoreInfoHumidifierHumidity extends LitElement {
disabled
>
+
+
${this._renderLabel()}
+
`;
}
static get styles(): CSSResultGroup {
- return css`
- /* Layout */
- .container {
- position: relative;
- }
- .info {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- pointer-events: none;
- font-size: 16px;
- line-height: 24px;
- letter-spacing: 0.1px;
- }
- .info * {
- margin: 0;
- pointer-events: auto;
- }
- /* Elements */
- .target-container {
- margin-bottom: 30px;
- }
- .target .value {
- font-size: 56px;
- line-height: 1;
- letter-spacing: -0.25px;
- }
- .target .value .unit {
- font-size: 0.4em;
- line-height: 1;
- margin-left: 2px;
- }
- .action-container {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- width: 200px;
- height: 48px;
- margin-bottom: 6px;
- }
- .action {
- font-weight: 500;
- text-align: center;
- color: var(--action-color, inherit);
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- overflow: hidden;
- }
- .buttons {
- position: absolute;
- bottom: 10px;
- left: 0;
- right: 0;
- margin: 0 auto;
- width: 120px;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
- }
- .buttons ha-outlined-icon-button {
- --md-outlined-icon-button-container-size: 48px;
- --md-outlined-icon-button-icon-size: 24px;
- }
- /* Accessibility */
- .visually-hidden {
- position: absolute;
- overflow: hidden;
- clip: rect(0 0 0 0);
- height: 1px;
- width: 1px;
- margin: -1px;
- padding: 0;
- border: 0;
- }
- /* Slider */
- ha-control-circular-slider {
- --control-circular-slider-color: var(
- --main-color,
- var(--disabled-color)
- );
- }
- ha-control-circular-slider::after {
- display: block;
- content: "";
- position: absolute;
- top: -10%;
- left: -10%;
- right: -10%;
- bottom: -10%;
- background: radial-gradient(
- 50% 50% at 50% 50%,
- var(--action-color, transparent) 0%,
- transparent 100%
- );
- opacity: 0.15;
- pointer-events: none;
- }
- `;
+ return [
+ moreInfoControlCircularSliderStyle,
+ css`
+ /* Elements */
+ .target-container {
+ margin-bottom: 30px;
+ }
+ .target .value {
+ font-size: 58px;
+ line-height: 1;
+ letter-spacing: -0.25px;
+ }
+ .target .value .unit {
+ font-size: 0.4em;
+ line-height: 1;
+ margin-left: 2px;
+ }
+ `,
+ ];
}
}
diff --git a/src/dialogs/more-info/components/water_heater/ha-more-info-water_heater-temperature.ts b/src/dialogs/more-info/components/water_heater/ha-more-info-water_heater-temperature.ts
index 29a40a23f4..a23d89fc79 100644
--- a/src/dialogs/more-info/components/water_heater/ha-more-info-water_heater-temperature.ts
+++ b/src/dialogs/more-info/components/water_heater/ha-more-info-water_heater-temperature.ts
@@ -23,6 +23,7 @@ import {
WaterHeaterEntityFeature,
} from "../../../../data/water_heater";
import { HomeAssistant } from "../../../../types";
+import { moreInfoControlCircularSliderStyle } from "../ha-more-info-control-circular-slider-style";
@customElement("ha-more-info-water_heater-temperature")
export class HaMoreInfoWaterHeaterTemperature extends LitElement {
@@ -88,8 +89,16 @@ export class HaMoreInfoWaterHeaterTemperature extends LitElement {
}
private _renderLabel() {
+ if (this.stateObj.state === UNAVAILABLE) {
+ return html`
+
+ ${this.hass.formatEntityState(this.stateObj, UNAVAILABLE)}
+
+ `;
+ }
+
return html`
-
+
${this.hass.localize(
"ui.dialogs.more_info_control.water_heater.target"
)}
@@ -153,14 +162,18 @@ export class HaMoreInfoWaterHeaterTemperature extends LitElement {
WaterHeaterEntityFeature.TARGET_TEMPERATURE
);
- const mainColor = stateColorCss(this.stateObj);
+ const stateColor = stateColorCss(this.stateObj);
- if (supportsTargetTemperature && this._targetTemperature != null) {
+ if (
+ supportsTargetTemperature &&
+ this._targetTemperature != null &&
+ this.stateObj.state !== UNAVAILABLE
+ ) {
return html`
-
${this._renderLabel()}
+
${this._renderLabel()}
${this._renderTargetTemperature(this._targetTemperature)}
@@ -195,128 +207,48 @@ export class HaMoreInfoWaterHeaterTemperature extends LitElement {
disabled
>
+
+
${this._renderLabel()}
+
`;
}
static get styles(): CSSResultGroup {
- return css`
- /* Layout */
- .container {
- position: relative;
- }
- .info {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- pointer-events: none;
- font-size: 16px;
- line-height: 24px;
- letter-spacing: 0.1px;
- }
- .info * {
- margin: 0;
- pointer-events: auto;
- }
- /* Elements */
- .temperature-container {
- margin-bottom: 30px;
- }
- .temperature {
- display: inline-flex;
- font-size: 58px;
- line-height: 64px;
- letter-spacing: -0.25px;
- margin: 0;
- }
- .temperature span {
- display: inline-flex;
- }
- .temperature .unit {
- font-size: 24px;
- line-height: 40px;
- }
- .temperature .decimal {
- font-size: 24px;
- line-height: 40px;
- align-self: flex-end;
- margin-right: -18px;
- }
- .action-container {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- width: 200px;
- height: 48px;
- margin-bottom: 6px;
- }
- .action {
- font-weight: 500;
- text-align: center;
- color: var(--action-color, inherit);
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- overflow: hidden;
- }
- .buttons {
- position: absolute;
- bottom: 10px;
- left: 0;
- right: 0;
- margin: 0 auto;
- width: 120px;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
- }
- .buttons ha-outlined-icon-button {
- --md-outlined-icon-button-container-size: 48px;
- --md-outlined-icon-button-icon-size: 24px;
- }
- /* Accessibility */
- .visually-hidden {
- position: absolute;
- overflow: hidden;
- clip: rect(0 0 0 0);
- height: 1px;
- width: 1px;
- margin: -1px;
- padding: 0;
- border: 0;
- }
- /* Slider */
- ha-control-circular-slider {
- --control-circular-slider-color: var(
- --main-color,
- var(--disabled-color)
- );
- }
- ha-control-circular-slider::after {
- display: block;
- content: "";
- position: absolute;
- top: -10%;
- left: -10%;
- right: -10%;
- bottom: -10%;
- background: radial-gradient(
- 50% 50% at 50% 50%,
- var(--action-color, transparent) 0%,
- transparent 100%
- );
- opacity: 0.15;
- pointer-events: none;
- }
- `;
+ return [
+ moreInfoControlCircularSliderStyle,
+ css`
+ /* Elements */
+ .temperature-container {
+ margin-bottom: 30px;
+ }
+ .temperature {
+ display: inline-flex;
+ font-size: 58px;
+ line-height: 64px;
+ letter-spacing: -0.25px;
+ margin: 0;
+ }
+ .temperature span {
+ display: inline-flex;
+ }
+ .temperature .decimal {
+ font-size: 24px;
+ line-height: 32px;
+ align-self: flex-end;
+ width: 20px;
+ margin-bottom: 4px;
+ }
+ .temperature .unit {
+ font-size: 20px;
+ line-height: 24px;
+ align-self: flex-start;
+ margin-left: -20px;
+ width: 20px;
+ margin-top: 4px;
+ }
+ `,
+ ];
}
}
diff --git a/src/dialogs/more-info/controls/more-info-climate.ts b/src/dialogs/more-info/controls/more-info-climate.ts
index 05323b45c8..9be1110210 100644
--- a/src/dialogs/more-info/controls/more-info-climate.ts
+++ b/src/dialogs/more-info/controls/more-info-climate.ts
@@ -170,6 +170,7 @@ class MoreInfoClimate extends LitElement {
-
+
-
+
-
+
${this.hass.localize("state.default.on")}
-
+
-
+
${computeStateDisplay(
this.hass.localize,
this.stateObj,
@@ -110,8 +113,8 @@ class MoreInfoHumidifier extends LitElement {
this.hass.entities,
"off"
)}
-
-
+
+
${computeStateDisplay(
this.hass.localize,
this.stateObj,
@@ -120,7 +123,7 @@ class MoreInfoHumidifier extends LitElement {
this.hass.entities,
"on"
)}
-
+
${supportModes
@@ -128,6 +131,7 @@ class MoreInfoHumidifier extends LitElement {
-
+
${this.hass.localize("state.default.on")}
-
+