Skip to content

Commit

Permalink
Better resizing support for thermostat card
Browse files Browse the repository at this point in the history
  • Loading branch information
@piitaya
piitaya committed Jun 20, 2024
1 parent 8272bef commit 4aa5bc1
Show file tree
Hide file tree
Showing 2 changed files with 148 additions and 29 deletions.
87 changes: 73 additions & 14 deletions src/panels/lovelace/cards/hui-humidifier-card.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
html,
nothing,
} from "lit";
import { customElement, property, state } from "lit/decorators";
import { customElement, property, query, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
import { fireEvent } from "../../../common/dom/fire_event";
Expand All @@ -26,6 +26,39 @@ import { HumidifierCardConfig } from "./types";

@customElement("hui-humidifier-card")
export class HuiHumidifierCard extends LitElement implements LovelaceCard {
private _resizeObserver?: ResizeObserver;

public connectedCallback(): void {
super.connectedCallback();
this._attachObserver();
}

public disconnectedCallback(): void {
super.disconnectedCallback();
this._detachObserver();
}

@query(".container") private _container!: HTMLElement;

private _attachObserver(): void {
if (!this._resizeObserver && this._container) {
this._resizeObserver = new ResizeObserver(() => {
this._container.style.setProperty(
"--height",
`${this._container.clientHeight}px`
);
});
this._resizeObserver.observe(this._container);
}
}

private _detachObserver(): void {
if (this._resizeObserver) {
this._resizeObserver.disconnect();
this._resizeObserver = undefined;
}
}

public static async getConfigElement(): Promise<LovelaceCardEditor> {
await import("../editor/config-elements/hui-humidifier-card-editor");
return document.createElement("hui-humidifier-card-editor");
Expand Down Expand Up @@ -82,6 +115,8 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
protected updated(changedProps: PropertyValues): void {
super.updated(changedProps);

this._attachObserver();

if (
!this._config ||
!this.hass ||
Expand Down Expand Up @@ -126,13 +161,15 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
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
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(
Expand All @@ -156,10 +193,15 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {

static get styles(): CSSResultGroup {
return css`
ha-card {
:host {
position: relative;
display: block;
height: 100%;
}
ha-card {
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
padding: 0;
display: flex;
flex-direction: column;
Expand All @@ -178,15 +220,31 @@ 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;
}
.container:before {
content: "";
display: block;
padding-top: 100%;
}
.container > * {
padding: 8px;
max-width: var(--height, 100%);
height: 100%;
}
.more-info {
position: absolute;
cursor: pointer;
Expand All @@ -201,6 +259,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
hui-card-features {
width: 100%;
flex: none;
}
`;
}
Expand Down
90 changes: 75 additions & 15 deletions src/panels/lovelace/cards/hui-thermostat-card.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
html,
nothing,
} from "lit";
import { customElement, property, state } from "lit/decorators";
import { customElement, property, query, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
import { fireEvent } from "../../../common/dom/fire_event";
Expand All @@ -18,14 +18,47 @@ 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 _resizeObserver?: ResizeObserver;

public connectedCallback(): void {
super.connectedCallback();
this._attachObserver();
}

public disconnectedCallback(): void {
super.disconnectedCallback();
this._detachObserver();
}

@query(".container") private _container!: HTMLElement;

private _attachObserver(): void {
if (!this._resizeObserver && this._container) {
this._resizeObserver = new ResizeObserver(() => {
this._container.style.setProperty(
"--height",
`${this._container.clientHeight}px`
);
});
this._resizeObserver.observe(this._container);
}
}

private _detachObserver(): void {
if (this._resizeObserver) {
this._resizeObserver.disconnect();
this._resizeObserver = undefined;
}
}

public static async getConfigElement(): Promise<LovelaceCardEditor> {
await import("../editor/config-elements/hui-thermostat-card-editor");
return document.createElement("hui-thermostat-card-editor");
Expand Down Expand Up @@ -74,6 +107,8 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
protected updated(changedProps: PropertyValues): void {
super.updated(changedProps);

this._attachObserver();

if (
!this._config ||
!this.hass ||
Expand Down Expand Up @@ -118,13 +153,15 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
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
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(
Expand All @@ -148,10 +185,15 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {

static get styles(): CSSResultGroup {
return css`
ha-card {
:host {
position: relative;
display: block;
height: 100%;
}
ha-card {
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
padding: 0;
display: flex;
flex-direction: column;
Expand All @@ -170,15 +212,32 @@ 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;
}
.container:before {
content: "";
display: block;
padding-top: 100%;
}
.container > * {
padding: 8px;
max-width: var(--height, 100%);
height: 100%;
aspect-ratio: 1 / 1;
}
.more-info {
position: absolute;
cursor: pointer;
Expand All @@ -193,6 +252,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
hui-card-features {
width: 100%;
flex: none;
}
`;
}
Expand Down

0 comments on commit 4aa5bc1

Please sign in to comment.