mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
Better resizing support for thermostat card (#21120)
* 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
GitHub
parent
57d8544dbf
commit
128dbbcfef
@ -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;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user