Better resizing support for thermostat card #21120
Conversation
WalkthroughWalkthroughThe updates introduce Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Browser
participant HuiHumidifierCard
participant ResizeController
User->>+Browser: Load hui-humidifier-card
Browser->>+HuiHumidifierCard: Initialize Component
HuiHumidifierCard->>+ResizeController: Create ResizeController Instance
ResizeController->>HuiHumidifierCard: Trigger Callback on Resize
HuiHumidifierCard-->>Browser: Adjust Component Height
Browser-->>User: Display updated hui-humidifier-card
participant User
participant Browser
participant HuiThermostatCard
participant ResizeController
User->>+Browser: Load hui-thermostat-card
Browser->>+HuiThermostatCard: Initialize Component
HuiThermostatCard->>+ResizeController: Create ResizeController Instance
ResizeController->>HuiThermostatCard: Trigger Callback on Resize
HuiThermostatCard-->>Browser: Adjust Component Height
Browser-->>User: Display updated hui-thermostat-card
Recent review detailsConfiguration used: CodeRabbit UI Files selected for processing (2)
Additional context usedBiome
Additional comments not posted (6)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
piitaya
force-pushed
the
thermostat-humidifier-card-resizing
branch
from
68591a1 to
4aa5bc1
Compare
| @@ -26,6 +26,39 @@ import { HumidifierCardConfig } from "./types"; | |||
|
|
|||
| @customElement("hui-humidifier-card") | |||
| export class HuiHumidifierCard extends LitElement implements LovelaceCard { | |||
| private _resizeObserver?: ResizeObserver; | |||
There was a problem hiding this comment.
Can we use the ResizeController from lit-labs instead?
There was a problem hiding this comment.
I tried without success but now I succeeded 😅
piitaya
force-pushed
the
thermostat-humidifier-card-resizing
branch
from
11cf3cf to
c6b885e
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Outside diff range comments (2)
src/panels/lovelace/cards/hui-thermostat-card.ts (1)
Line range hint
165-204: Optimize CSS for better maintainability and performance.The CSS styles for the
.containerand host elements can be optimized to reduce redundancy and improve performance, especially during resizing.- position: relative; - display: block; - height: 100%; - width: 100%; - padding: 0; - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-between; + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + height: 100%; + width: 100%; + padding: 0;src/panels/lovelace/cards/hui-humidifier-card.ts (1)
Line range hint
173-212: Optimize CSS for better maintainability and performance.The CSS styles for the
.containerand host elements can be optimized to reduce redundancy and improve performance, especially during resizing.- position: relative; - display: block; - height: 100%; - width: 100%; - padding: 0; - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-between; + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + height: 100%; + width: 100%; + padding: 0;
| @@ -7,7 +8,7 @@ | |||
| html, | |||
| nothing, | |||
| } from "lit"; | |||
| import { customElement, property, state } from "lit/decorators"; | |||
| import { customElement, property, query, state } from "lit/decorators"; | |||
There was a problem hiding this comment.
Consider removing unused imports to clean up the code.
While reviewing the imports, ensure that all are necessary for this file. Redundant imports can lead to unnecessary bloat and confusion.
| @@ -26,6 +27,18 @@ import { HumidifierCardConfig } from "./types"; | |||
|
|
|||
| @customElement("hui-humidifier-card") | |||
| export class HuiHumidifierCard extends LitElement implements LovelaceCard { | |||
| // @ts-ignore | |||
There was a problem hiding this comment.
Because the property is not used. We already have this pattern in other components.
| ) as HTMLElement | undefined; | ||
| if (!container) return; | ||
| const height = container.clientHeight; | ||
| container.style.setProperty("--height", `${height}px`); |
There was a problem hiding this comment.
Why don't we do this inside render instead? We should avoid having side effects here, we should just store clientHeight as the state of the _resizeController
There was a problem hiding this comment.
I did that do avoid re-render but yeah I will update it to avoid side effect 🙂
Proposed change
Thermostat card now better supports resizing in a grid.
Before
CleanShot_2024-06-20_at_16.08.04.mp4
After
CleanShot_2024-06-20_at_16.08.36.mp4
Type of change
Example configuration
Additional information
Checklist
If user exposed functionality or configuration variables are added/changed:
Summary by CodeRabbit
New Features
Style