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

Better resizing support for thermostat card (#21120)

Browse Source 
* Better resizing support for thermostat card

* Use resize controller

* Fix typings

* Don't use query

* Use render to set style
This commit is contained in:
Paul Bottein 2024-06-26 10:03:10 +02:00 committed by GitHub
parent 57d8544dbf
commit 128dbbcfef
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 109 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,4 @@
import { ResizeController } from "@lit-labs/observers/resize-controller";
import { mdiDotsVertical } from "@mdi/js"; import { mdiDotsVertical } from "@mdi/js";
import { import {
CSSResultGroup, CSSResultGroup,
@ -26,6 +27,15 @@ import { HumidifierCardConfig } from "./types";
@customElement("hui-humidifier-card") @customElement("hui-humidifier-card")
export class HuiHumidifierCard extends LitElement implements LovelaceCard { export class HuiHumidifierCard extends LitElement implements LovelaceCard {
private _resizeController = new ResizeController(this, {
callback: (entries) => {
const container = entries[0]?.target.shadowRoot?.querySelector(
".container"
) as HTMLElement | undefined;
return container?.clientHeight;
},
});
public static async getConfigElement(): Promise<LovelaceCardEditor> { public static async getConfigElement(): Promise<LovelaceCardEditor> {
await import("../editor/config-elements/hui-humidifier-card-editor"); await import("../editor/config-elements/hui-humidifier-card-editor");
return document.createElement("hui-humidifier-card-editor"); return document.createElement("hui-humidifier-card-editor");
@ -123,16 +133,25 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
const color = stateColorCss(stateObj); const color = stateColorCss(stateObj);
const controlMaxWidth = this._resizeController.value
? `${this._resizeController.value}px`
: undefined;
return html` return html`
<ha-card> <ha-card>
<p class="title">${name}</p> <p class="title">${name}</p>
<ha-state-control-humidifier-humidity <div class="container">
prevent-interaction-on-scroll <ha-state-control-humidifier-humidity
.showCurrentAsPrimary=${this._config.show_current_as_primary} style=${styleMap({
show-secondary maxWidth: controlMaxWidth,
.hass=${this.hass} })}
.stateObj=${stateObj} prevent-interaction-on-scroll
></ha-state-control-humidifier-humidity> .showCurrentAsPrimary=${this._config.show_current_as_primary}
show-secondary
.hass=${this.hass}
.stateObj=${stateObj}
></ha-state-control-humidifier-humidity>
</div>
<ha-icon-button <ha-icon-button
class="more-info" class="more-info"
.label=${this.hass!.localize( .label=${this.hass!.localize(
@ -156,10 +175,15 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return css` return css`
ha-card { :host {
height: 100%;
position: relative; position: relative;
overflow: hidden; display: block;
height: 100%;
}
ha-card {
position: relative;
height: 100%;
width: 100%;
padding: 0; padding: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -178,13 +202,28 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
flex: none;
} }
ha-state-control-humidifier-humidity { .container {
width: 100%; display: flex;
max-width: 344px; /* 12px + 12px + 320px */ align-items: center;
padding: 0 12px 12px 12px; justify-content: center;
position: relative;
overflow: hidden;
max-width: 100%;
box-sizing: border-box; box-sizing: border-box;
flex: 1;
}
.container:before {
content: "";
display: block;
padding-top: 100%;
}
.container > * {
padding: 8px;
} }
.more-info { .more-info {
@ -201,6 +240,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
hui-card-features { hui-card-features {
width: 100%; width: 100%;
flex: none;
} }
`; `;
} }

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

@ -1,3 +1,4 @@
import { ResizeController } from "@lit-labs/observers/resize-controller";
import { mdiDotsVertical } from "@mdi/js"; import { mdiDotsVertical } from "@mdi/js";
import { import {
CSSResultGroup, CSSResultGroup,
@ -18,14 +19,23 @@ import "../../../components/ha-icon-button";
import { ClimateEntity } from "../../../data/climate"; import { ClimateEntity } from "../../../data/climate";
import "../../../state-control/climate/ha-state-control-climate-temperature"; import "../../../state-control/climate/ha-state-control-climate-temperature";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import "../card-features/hui-card-features";
import { findEntities } from "../common/find-entities"; import { findEntities } from "../common/find-entities";
import { createEntityNotFoundWarning } from "../components/hui-warning"; import { createEntityNotFoundWarning } from "../components/hui-warning";
import "../card-features/hui-card-features";
import { LovelaceCard, LovelaceCardEditor } from "../types"; import { LovelaceCard, LovelaceCardEditor } from "../types";
import { ThermostatCardConfig } from "./types"; import { ThermostatCardConfig } from "./types";
@customElement("hui-thermostat-card") @customElement("hui-thermostat-card")
export class HuiThermostatCard extends LitElement implements LovelaceCard { export class HuiThermostatCard extends LitElement implements LovelaceCard {
private _resizeController = new ResizeController(this, {
callback: (entries) => {
const container = entries[0]?.target.shadowRoot?.querySelector(
".container"
) as HTMLElement | undefined;
return container?.clientHeight;
},
});
public static async getConfigElement(): Promise<LovelaceCardEditor> { public static async getConfigElement(): Promise<LovelaceCardEditor> {
await import("../editor/config-elements/hui-thermostat-card-editor"); await import("../editor/config-elements/hui-thermostat-card-editor");
return document.createElement("hui-thermostat-card-editor"); return document.createElement("hui-thermostat-card-editor");
@ -115,16 +125,25 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
const color = stateColorCss(stateObj); const color = stateColorCss(stateObj);
const controlMaxWidth = this._resizeController.value
? `${this._resizeController.value}px`
: undefined;
return html` return html`
<ha-card> <ha-card>
<p class="title">${name}</p> <p class="title">${name}</p>
<ha-state-control-climate-temperature <div class="container">
prevent-interaction-on-scroll <ha-state-control-climate-temperature
.showCurrentAsPrimary=${this._config.show_current_as_primary} style=${styleMap({
show-secondary maxWidth: controlMaxWidth,
.hass=${this.hass} })}
.stateObj=${stateObj} prevent-interaction-on-scroll
></ha-state-control-climate-temperature> .showCurrentAsPrimary=${this._config.show_current_as_primary}
show-secondary
.hass=${this.hass}
.stateObj=${stateObj}
></ha-state-control-climate-temperature>
</div>
<ha-icon-button <ha-icon-button
class="more-info" class="more-info"
.label=${this.hass!.localize( .label=${this.hass!.localize(
@ -148,10 +167,15 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return css` return css`
ha-card { :host {
height: 100%;
position: relative; position: relative;
overflow: hidden; display: block;
height: 100%;
}
ha-card {
position: relative;
height: 100%;
width: 100%;
padding: 0; padding: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -170,13 +194,28 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
flex: none;
} }
ha-state-control-climate-temperature { .container {
width: 100%; display: flex;
max-width: 344px; /* 12px + 12px + 320px */ align-items: center;
padding: 0 12px 12px 12px; justify-content: center;
position: relative;
overflow: hidden;
max-width: 100%;
box-sizing: border-box; box-sizing: border-box;
flex: 1;
}
.container:before {
content: "";
display: block;
padding-top: 100%;
}
.container > * {
padding: 8px;
} }
.more-info { .more-info {
@ -193,6 +232,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
hui-card-features { hui-card-features {
width: 100%; width: 100%;
flex: none;
} }
`; `;
} }