jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-14 21:06: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 {
CSSResultGroup,
@ -26,6 +27,15 @@ import { HumidifierCardConfig } from "./types";
@customElement("hui-humidifier-card")
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> {
await import("../editor/config-elements/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 controlMaxWidth = this._resizeController.value
? `${this._resizeController.value}px`
: undefined;
return html`
<ha-card>
<p class="title">${name}</p>
<ha-state-control-humidifier-humidity
prevent-interaction-on-scroll
.showCurrentAsPrimary=${this._config.show_current_as_primary}
show-secondary
.hass=${this.hass}
.stateObj=${stateObj}
></ha-state-control-humidifier-humidity>
<div class="container">
<ha-state-control-humidifier-humidity
style=${styleMap({
maxWidth: controlMaxWidth,
})}
prevent-interaction-on-scroll
.showCurrentAsPrimary=${this._config.show_current_as_primary}
show-secondary
.hass=${this.hass}
.stateObj=${stateObj}
></ha-state-control-humidifier-humidity>
</div>
<ha-icon-button
class="more-info"
.label=${this.hass!.localize(
@ -156,10 +175,15 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
static get styles(): CSSResultGroup {
return css`
ha-card {
height: 100%;
:host {
position: relative;
overflow: hidden;
display: block;
height: 100%;
}
ha-card {
position: relative;
height: 100%;
width: 100%;
padding: 0;
display: flex;
flex-direction: column;
@ -178,13 +202,28 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: none;
}
ha-state-control-humidifier-humidity {
width: 100%;
max-width: 344px; /* 12px + 12px + 320px */
padding: 0 12px 12px 12px;
.container {
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
max-width: 100%;
box-sizing: border-box;
flex: 1;
}
.container:before {
content: "";
display: block;
padding-top: 100%;
}
.container > * {
padding: 8px;
}
.more-info {
@ -201,6 +240,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
hui-card-features {
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 {
CSSResultGroup,
@ -18,14 +19,23 @@ 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";
@customElement("hui-thermostat-card")
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> {
await import("../editor/config-elements/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 controlMaxWidth = this._resizeController.value
? `${this._resizeController.value}px`
: undefined;
return html`
<ha-card>
<p class="title">${name}</p>
<ha-state-control-climate-temperature
prevent-interaction-on-scroll
.showCurrentAsPrimary=${this._config.show_current_as_primary}
show-secondary
.hass=${this.hass}
.stateObj=${stateObj}
></ha-state-control-climate-temperature>
<div class="container">
<ha-state-control-climate-temperature
style=${styleMap({
maxWidth: controlMaxWidth,
})}
prevent-interaction-on-scroll
.showCurrentAsPrimary=${this._config.show_current_as_primary}
show-secondary
.hass=${this.hass}
.stateObj=${stateObj}
></ha-state-control-climate-temperature>
</div>
<ha-icon-button
class="more-info"
.label=${this.hass!.localize(
@ -148,10 +167,15 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
static get styles(): CSSResultGroup {
return css`
ha-card {
height: 100%;
:host {
position: relative;
overflow: hidden;
display: block;
height: 100%;
}
ha-card {
position: relative;
height: 100%;
width: 100%;
padding: 0;
display: flex;
flex-direction: column;
@ -170,13 +194,28 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: none;
}
ha-state-control-climate-temperature {
width: 100%;
max-width: 344px; /* 12px + 12px + 320px */
padding: 0 12px 12px 12px;
.container {
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
max-width: 100%;
box-sizing: border-box;
flex: 1;
}
.container:before {
content: "";
display: block;
padding-top: 100%;
}
.container > * {
padding: 8px;
}
.more-info {
@ -193,6 +232,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
hui-card-features {
width: 100%;
flex: none;
}
`;
}