Adjust row height in grid #21311

piitaya · 2024-07-05T15:53:45Z

Proposed change

Set row height from 66px to 56px
Adjust tile card margin/padding/size
Adjust card features margin/padding/size
Share style between features

Before

After

Type of change

Dependency upgrade
Bugfix (non-breaking change which fixes an issue)
New feature (thank you!)
Breaking change (fix/feature causing existing functionality to break)
Code quality improvements to existing code or addition of tests

Example configuration

Additional information

This PR fixes or closes issue: fixes #
This PR is related to issue or discussion:
Link to documentation pull request:

Checklist

The code change is tested and works locally.
There is no commented out code in this PR.
Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

Documentation added/updated for www.home-assistant.io

Summary by CodeRabbit

New Features
- Updated HaGridSizeEditor to default to 8 rows and adjusted the preview aspect ratio to 1:1.2.
- Introduced HuiCardFeature component for rendering Lovelace card features dynamically.
Style
- Modified icon and image sizes, border radii, and other UI elements for consistency and better appearance across various tile and card features.
- Centralized CSS styles for Lovelace card features into cardFeatureStyles, improving maintainability and organization.
Refactor
- Simplified and consolidated rendering logic for multiple Lovelace card features.
- Improved import structure and modularity for better code organization and readability.

coderabbitai · 2024-07-10T13:39:18Z

Walkthrough

The recent changes focus on multiple refactorings and visual adjustments across various components. Key updates include the centralization of CSS styles into a common file for better maintainability, resizing elements for visual consistency, and updating Home Assistant Lovelace components to use these centralized styles. Additionally, there were logic and layout improvements to enhance the user experience.

Changes

Files/Paths	Change Summary
`src/components/ha-grid-size-picker.ts`	Default rows changed to `8`, and aspect ratio to `1:1.2`.
`src/components/tile/ha-tile-icon.ts`	Icon size and border radius adjustment.
`src/components/tile/ha-tile-image.ts`	Image dimensions and border radius updated.
`src/components/tile/ha-tile-info.ts`	Changed `min-height` to `height` and adjusted from `40px` to `36px`.
`src/panels/lovelace/card-features/...`	Refactored to use centralized `cardFeatureStyles` for CSS. Removed redundant inline styles and `css` imports from several components.
`src/panels/lovelace/cards/hui-tile-card.ts`	Simplified grid rows calculation, refactored HTML elements for better structure and presentation.
`src/panels/lovelace/sections/hui-grid-section.ts`	Updated `--row-height` CSS variable to `var(--ha-section-grid-row-height, 56px)`.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant LovelaceCard
    participant CSSModule
    participant CardComponent

    User->>LovelaceCard: Interacts with UI
    LovelaceCard->>CSSModule: Requests styles
    CSSModule-->>LovelaceCard: Returns centralized styles
    LovelaceCard->>CardComponent: Applies styles
    CardComponent-->>User: Presents updated UI

Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 7edc4ef and 491cc0e.

Files selected for processing (34)

src/components/ha-grid-size-picker.ts (2 hunks)
src/components/tile/ha-tile-icon.ts (2 hunks)
src/components/tile/ha-tile-image.ts (1 hunks)
src/components/tile/ha-tile-info.ts (1 hunks)
src/panels/lovelace/card-features/common/card-feature-styles.ts (1 hunks)
src/panels/lovelace/card-features/hui-alarm-modes-card-feature.ts (3 hunks)
src/panels/lovelace/card-features/hui-card-feature.ts (1 hunks)
src/panels/lovelace/card-features/hui-card-features.ts (2 hunks)
src/panels/lovelace/card-features/hui-climate-fan-modes-card-feature.ts (3 hunks)
src/panels/lovelace/card-features/hui-climate-hvac-modes-card-feature.ts (3 hunks)
src/panels/lovelace/card-features/hui-climate-preset-modes-card-feature.ts (3 hunks)
src/panels/lovelace/card-features/hui-climate-swing-modes-card-feature.ts (3 hunks)
src/panels/lovelace/card-features/hui-cover-open-close-card-feature.ts (3 hunks)
src/panels/lovelace/card-features/hui-cover-position-card-feature.ts (4 hunks)
src/panels/lovelace/card-features/hui-cover-tilt-card-feature.ts (2 hunks)
src/panels/lovelace/card-features/hui-cover-tilt-position-card-feature.ts (3 hunks)
src/panels/lovelace/card-features/hui-fan-preset-modes-card-feature.ts (3 hunks)
src/panels/lovelace/card-features/hui-fan-speed-card-feature.ts (3 hunks)
src/panels/lovelace/card-features/hui-humidifier-modes-card-feature.ts (3 hunks)
src/panels/lovelace/card-features/hui-humidifier-toggle-card-feature.ts (3 hunks)
src/panels/lovelace/card-features/hui-lawn-mower-commands-card-feature.ts (3 hunks)
src/panels/lovelace/card-features/hui-light-brightness-card-feature.ts (4 hunks)
src/panels/lovelace/card-features/hui-light-color-temp-card-feature.ts (3 hunks)
src/panels/lovelace/card-features/hui-lock-commands-card-feature.ts (3 hunks)
src/panels/lovelace/card-features/hui-lock-open-door-card-feature.ts (2 hunks)
src/panels/lovelace/card-features/hui-numeric-input-card-feature.ts (2 hunks)
src/panels/lovelace/card-features/hui-select-options-card-feature.ts (3 hunks)
src/panels/lovelace/card-features/hui-target-humidity-card-feature.ts (2 hunks)
src/panels/lovelace/card-features/hui-target-temperature-card-feature.ts (3 hunks)
src/panels/lovelace/card-features/hui-update-actions-card-feature.ts (3 hunks)
src/panels/lovelace/card-features/hui-vacuum-commands-card-feature.ts (3 hunks)
src/panels/lovelace/card-features/hui-water-heater-operation-modes-card-feature.ts (3 hunks)
src/panels/lovelace/cards/hui-tile-card.ts (4 hunks)
src/panels/lovelace/sections/hui-grid-section.ts (1 hunks)

Files skipped from review due to trivial changes (14)

src/components/tile/ha-tile-icon.ts
src/components/tile/ha-tile-image.ts
src/components/tile/ha-tile-info.ts
src/panels/lovelace/card-features/common/card-feature-styles.ts
src/panels/lovelace/card-features/hui-alarm-modes-card-feature.ts
src/panels/lovelace/card-features/hui-climate-fan-modes-card-feature.ts
src/panels/lovelace/card-features/hui-climate-preset-modes-card-feature.ts
src/panels/lovelace/card-features/hui-climate-swing-modes-card-feature.ts
src/panels/lovelace/card-features/hui-cover-open-close-card-feature.ts
src/panels/lovelace/card-features/hui-cover-position-card-feature.ts
src/panels/lovelace/card-features/hui-cover-tilt-card-feature.ts
src/panels/lovelace/card-features/hui-light-brightness-card-feature.ts
src/panels/lovelace/card-features/hui-lock-commands-card-feature.ts
src/panels/lovelace/card-features/hui-water-heater-operation-modes-card-feature.ts

Additional comments not posted (60)

src/panels/lovelace/card-features/hui-card-feature.ts (4)

1-20: Class properties and constructor look good.

The class properties are well-defined with appropriate decorators.

22-29: Method _getFeatureElement looks good.

The method correctly creates or returns a cached card feature element.

31-44: Method render looks good.

The method correctly handles the rendering logic and assigns properties to the feature element.

47-51: Global declarations look good.

The global declarations correctly map the custom element to the class.

src/panels/lovelace/card-features/hui-card-features.ts (4)

Line range hint 1-18:
Class properties and constructor look good.

The class properties are well-defined with appropriate decorators.

20-34: Method render looks good.

The method correctly handles the rendering logic for multiple features and uses the mapped component.

36-59: Static method styles looks good.

The styles are well-defined and improve maintainability by centralizing common styles.

Line range hint 61-65:
Global declarations look good.

The global declarations correctly map the custom element to the class.

src/panels/lovelace/card-features/hui-target-humidity-card-feature.ts (6)

Line range hint 1-44:
Class properties and constructor look good.

The class properties are well-defined with appropriate decorators.

Line range hint 46-53:
Method setConfig looks good.

The method correctly validates and sets the configuration.

Line range hint 55-61:
Method willUpdate looks good.

The method correctly handles the update logic for the target humidity.

Line range hint 69-75:
Method _valueChanged looks good.

The method correctly handles the value change event and calls the service.

Line range hint 80-98:
Method render looks good.

The method correctly handles the rendering logic for the target humidity control.

103-103: Static method styles looks good.

The method correctly returns the centralized styles.

src/panels/lovelace/card-features/hui-humidifier-toggle-card-feature.ts (6)

Line range hint 1-44:
Class properties and constructor look good.

The class properties are well-defined with appropriate decorators.

Line range hint 46-53:
Method setConfig looks good.

The method correctly validates and sets the configuration.

Line range hint 55-61:
Method willUpdate looks good.

The method correctly handles the update logic for the current state.

Line range hint 63-71:
Method _valueChanged looks good.

The method correctly handles the value change event and calls the service.

Line range hint 80-109:
Method render looks good.

The method correctly handles the rendering logic for the humidifier toggle control.

115-115: Static method styles looks good.

The method correctly returns the centralized styles.

src/panels/lovelace/card-features/hui-numeric-input-card-feature.ts (3)

13-13: Importing centralized styles.

The import of cardFeatureStyles centralizes and standardizes the styles, which enhances maintainability and consistency.

85-98: Conditional rendering for numeric input styles.

The render method conditionally returns HTML based on _config.style, improving flexibility in UI rendering.

Also applies to: 100-109

114-114: Using centralized styles.

The styles method now returns cardFeatureStyles, ensuring consistent styling across card features.

src/panels/lovelace/card-features/hui-light-color-temp-card-feature.ts (3)

19-19: Importing centralized styles.

The import of cardFeatureStyles centralizes and standardizes the styles, which enhances maintainability and consistency.

77-91: Conditional rendering for light color temperature slider.

The render method conditionally returns HTML based on the stateObj attributes, ensuring proper rendering of the slider with appropriate styles.

110-121: Using centralized styles and specific slider styles.

The styles method now includes cardFeatureStyles and additional CSS for the slider, ensuring consistent and specific styling.

src/panels/lovelace/card-features/hui-cover-tilt-position-card-feature.ts (3)

16-16: Importing centralized styles.

The import of cardFeatureStyles centralizes and standardizes the styles, which enhances maintainability and consistency.

82-101: Conditional rendering for cover tilt position slider.

The render method conditionally returns HTML based on stateObj attributes, ensuring proper rendering of the slider with specific styles.

116-123: Using centralized styles and specific slider styles.

The styles method now includes cardFeatureStyles and additional CSS for the slider, ensuring consistent and specific styling.

src/panels/lovelace/card-features/hui-lock-open-door-card-feature.ts (3)

18-18: Importing centralized styles.

The import of cardFeatureStyles centralizes and standardizes the styles, which enhances maintainability and consistency.

Line range hint 71-83:
Conditional rendering for lock open door button.

The render method conditionally returns HTML based on _buttonState, ensuring proper rendering of the button state with specific styles.

116-142: Using centralized styles and specific button styles.

The styles method now includes cardFeatureStyles and additional CSS for the button, ensuring consistent and specific styling.

src/panels/lovelace/card-features/hui-select-options-card-feature.ts (3)

Line range hint 2-15: Import statement for cardFeatureStyles looks good.

The cardFeatureStyles import has been added correctly.

123-141: Render method looks good.

The HTML structure and logic within the render method are correct.

146-146: Styles method implementation looks good.

The styles method correctly returns cardFeatureStyles.

src/panels/lovelace/card-features/hui-update-actions-card-feature.ts (3)

Line range hint 3-19: Import statement for cardFeatureStyles looks good.

The cardFeatureStyles import has been added correctly.

Line range hint 64-89: Render method looks good.

The HTML structure and logic within the render method are correct.

153-153: Styles method implementation looks good.

The styles method correctly returns cardFeatureStyles.

src/panels/lovelace/card-features/hui-lawn-mower-commands-card-feature.ts (3)

Line range hint 3-17: Import statement for cardFeatureStyles looks good.

The cardFeatureStyles import has been added correctly.

Line range hint 108-140: Render method looks good.

The HTML structure and logic within the render method are correct.

175-175: Styles method implementation looks good.

The styles method correctly returns cardFeatureStyles.

src/panels/lovelace/card-features/hui-fan-speed-card-feature.ts (3)

27-27: Import statement for cardFeatureStyles looks good.

The cardFeatureStyles import has been added correctly.

92-127: Render method looks good.

The HTML structure and logic within the render method are correct.

153-162: Styles method implementation looks good.

The styles method correctly returns cardFeatureStyles and includes additional CSS customizations for ha-control-select.

src/panels/lovelace/card-features/hui-vacuum-commands-card-feature.ts (2)

11-11: LGTM! Import statement for cardFeatureStyles is correct.

The import statement aligns with the objective of centralizing styles.

214-214: LGTM! The styles method change is correct.

The change aligns with the objective of centralizing styles.

src/panels/lovelace/card-features/hui-humidifier-modes-card-feature.ts (2)

20-20: LGTM! Import statement for cardFeatureStyles is correct.

The import statement aligns with the objective of centralizing styles.

195-195: LGTM! The styles method change is correct.

The change aligns with the objective of centralizing styles.

src/panels/lovelace/card-features/hui-climate-hvac-modes-card-feature.ts (2)

22-22: LGTM! Import statement for cardFeatureStyles is correct.

The import statement aligns with the objective of centralizing styles.

192-192: LGTM! The styles method change is correct.

The change aligns with the objective of centralizing styles.

src/panels/lovelace/card-features/hui-fan-preset-modes-card-feature.ts (2)

17-17: LGTM! Import statement for cardFeatureStyles is correct.

The import statement aligns with the objective of centralizing styles.

193-193: LGTM! The styles method change is correct.

The change aligns with the objective of centralizing styles.

src/components/ha-grid-size-picker.ts (2)

208-208: Adjust the aspect ratio to 1:1.2.

The aspect ratio has been updated to 1:1.2. This change should be visually verified to ensure it meets the design specifications.

23-23: Update the default number of rows to 8.

The default number of rows has been changed from 6 to 8. Ensure that this change is consistent with the design requirements and does not impact other parts of the codebase.

src/panels/lovelace/sections/hui-grid-section.ts (1)

217-217: Update the --row-height CSS variable to a dynamic value.

The --row-height CSS variable has been updated to use a dynamic value var(--ha-section-grid-row-height, 56px). Ensure that this change is consistent with the design requirements and does not impact other parts of the codebase.
src/panels/lovelace/card-features/hui-target-temperature-card-feature.ts (3)
21-21: Add import for cardFeatureStyles.

The cardFeatureStyles import has been added for centralized styling. Ensure that it is correctly used in the component.

287-287: Use cardFeatureStyles for component styles.

The component styles have been updated to use cardFeatureStyles. Ensure that this change is consistent with the design requirements and other components.

2-2: Update imports to remove css.

The css import from lit has been removed. Ensure that there are no remaining references to css in the file.

Verification successful

No remaining references to css found.

The css import has been successfully removed, and there are no remaining references to css in the file.

src/panels/lovelace/card-features/hui-target-temperature-card-feature.ts
Scripts executed

The following scripts were executed for the analysis:

Script:
#!/bin/bash
# Description: Verify that there are no remaining references to `css` in the file.

# Test: Search for the `css` keyword in the file. Expect: No occurrences should be found.
rg --type typescript -A 3 $'css' src/panels/lovelace/card-features/hui-target-temperature-card-feature.ts
Length of output: 139

Script:
#!/bin/bash
# Description: Verify that there are no remaining references to `css` in the file.

# Test: Search for the `css` keyword in the file. Expect: No occurrences should be found.
rg 'css' src/panels/lovelace/card-features/hui-target-temperature-card-feature.ts
Length of output: 81
src/panels/lovelace/cards/hui-tile-card.ts (2)

129-129: Update grid rows calculation based on feature length.

The grid rows calculation has been updated to include the length of the features array. Ensure that this change is consistent with the design requirements and does not impact other parts of the codebase.

402-447: Restructure HTML elements for better organization.

The HTML elements have been restructured for better organization. Ensure that this change is consistent with the design requirements and improves readability.

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?

Share

Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai generate interesting stats about this repository and render them as a table.
- @coderabbitai show all the console.log statements in this repository.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

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)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

piitaya · 2024-07-11T09:11:42Z

src/components/ha-grid-size-picker.ts

@@ -20,7 +20,7 @@ export class HaGridSizeEditor extends LitElement {

  @property({ attribute: false }) public value?: GridSizeValue;

-  @property({ attribute: false }) public rows = 6;
+  @property({ attribute: false }) public rows = 8;


Set it to 8 as rows are smaller now.

piitaya added the Demo Related to frontend demo content label Jul 5, 2024

home-assistant bot added the cla-signed label Jul 5, 2024

github-actions bot removed the Demo Related to frontend demo content label Jul 5, 2024

piitaya force-pushed the grid-row-height branch from 8a547c6 to 67f43f4 Compare July 8, 2024 08:57

piitaya added 4 commits July 10, 2024 11:24

Set row height to 56px

477ec4a

Adjust padding and sizes

cf252b6

Adjust margin

d37c720

Fix pointer-events

ac41bc7

piitaya force-pushed the grid-row-height branch from 692db0e to ac41bc7 Compare July 10, 2024 09:24

piitaya added 2 commits July 10, 2024 11:29

Fix image size

abaca7d

Clean code

491cc0e

piitaya marked this pull request as ready for review July 10, 2024 13:38

piitaya commented Jul 11, 2024

View reviewed changes

piitaya requested a review from bramkragten July 11, 2024 09:18

bramkragten approved these changes Jul 15, 2024

View reviewed changes

piitaya merged commit f70126e into dev Jul 15, 2024
13 checks passed

piitaya deleted the grid-row-height branch July 15, 2024 12:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adjust row height in grid #21311

Adjust row height in grid #21311

piitaya commented Jul 5, 2024 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jul 10, 2024 •

edited

Loading

Walkthrough

Changes

Sequence Diagram(s)

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (`.coderabbit.yaml`)

Documentation and Community

piitaya Jul 11, 2024

Adjust row height in grid #21311

Adjust row height in grid #21311

Conversation

piitaya commented Jul 5, 2024 • edited by coderabbitai bot Loading

Proposed change

Before

After

Type of change

Example configuration

Additional information

Checklist

Summary by CodeRabbit

coderabbitai bot commented Jul 10, 2024 • edited Loading

Walkthrough

Changes

Sequence Diagram(s)

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (.coderabbit.yaml)

Documentation and Community

piitaya Jul 11, 2024

Choose a reason for hiding this comment

piitaya commented Jul 5, 2024 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jul 10, 2024 •

edited

Loading

CodeRabbit Configration File (`.coderabbit.yaml`)