Add experimental sections view #19846

piitaya · 2024-02-21T11:16:43Z

Proposed change

This feature is tagged as experimental because some API or features can change. Also, there may be some bugs and optimization to be done.

An new view type is added and allows user to use sections in dashboards views.
"Sections" view lets you to group cards within multiple section without using vertical stack card, horizontal stack card or grid card. For now, only grid section is added and lets you organize your card on section using a 4 column grid. Other type of section may arrived in the future.

A new key is added in YAML : sections. Each section can have a title and a list of cards.

Example of configuration

views:
  - type: sections
    sections:
      - type: grid
        title: Living room
        cards:
          - type: sensor
            entity: sensor.living_room_temperature
            graph: line
          - type: tile
            entity: climate.living_room
      - type: grid
        title: Bedroom
        cards:
          - type: tile
            entity: sensor.bedroom_temperature
          - type: tile
            entity: light.bed_light

Only few cards has been adapted to sections : tile, sensor and buttons. API to let the card provide its size on the grid is not finalized yet.

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

silamon

I've tested the new experimental dashboard layout and I couldn't find any bugs. Well done on the user interface.

src/panels/lovelace/editor/card-editor/hui-card-picker.ts

bramkragten

Very nice! 🎉

bramkragten · 2024-02-22T14:53:50Z

src/components/ha-sortable.ts

-
-  @property({ type: Number, attribute: "swap-threshold" })
-  public swapThreshold?: number;
+  @property({ type: String })


Should we keep this an attribute now it can also be something else than a string?

If we remove the attribute, we won't be able to do group="card" right?

src/panels/lovelace/cards/hui-stack-card.ts

bramkragten · 2024-02-22T14:58:33Z

src/panels/lovelace/cards/hui-tile-card.ts

@@ -469,6 +481,9 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
        transition:
          box-shadow 180ms ease-in-out,
          border-color 180ms ease-in-out;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;


From my POC, I needed to render hui-card-features only when this._config.features was actually set (which would save some resources anyway), is that not needed here, will it not add space between the items?

I removed the component from the render if no features.

src/panels/lovelace/components/hui-card-edit-mode.ts

bramkragten · 2024-02-22T15:07:11Z

src/panels/lovelace/editor/card-editor/hui-card-picker.ts

+    const suggestedCards = this._suggestedCards(this._cards);
+    const othersCards = this._otherCards(this._cards);
+    const customCardsItems = this._customCards(this._cards);


Why not have _loadCards do this?

Personally I would make _loadCards a memoized function passing lokalize and suggestedCards.

Then for _filterCards you just combine the 3 arrays.

I will refactor that is another PR 👍

bramkragten · 2024-02-22T15:13:12Z

src/panels/lovelace/sections/hui-error-section.ts

+      return nothing;
+    }
+
+    // Todo improve


Is that for a new PR?

Yes I will push another PR for this one

src/panels/lovelace/strategies/get-strategy.ts

bramkragten · 2024-02-22T15:17:10Z

src/panels/lovelace/types.ts

  getCardSize(): number | Promise<number>;
+  getSize?(): [number, number];


We need to think about these names 😅 confusing... first should now be getHeight or something...

I agree, I will include experimental in the name so custom card doesn't use it

let's mention in the name what the size is for. Like getGridSize.

Also, should this also be able to be a promise or not? (can always be added later too ofc)

I would try to avoid having a card defining it's size async because it will shift the grid during the loading.

It will need to be asynchronous for a card that wraps another custom card, as that card can be lazy loaded

bramkragten · 2024-02-22T15:18:22Z

src/panels/lovelace/views/hui-sections-view.ts

+    `;
+  }
+
+  private _addSection(): void {


I would love to move the editor code out of here in a future PR, so it will not slow down none edit usage

Me too! I had some issue with sortable when trying to move it out but it should be solvable!

bramkragten · 2024-02-22T15:21:16Z

src/panels/lovelace/views/hui-view.ts

+
+    this._sections = config.sections.map((sectionConfig, index) => {
+      const element = this.createSectionElement(sectionConfig);
+      element.index = index;


Shouldn't we set hass here?

It's already set inside createSectionElement

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

home-assistant bot added the cla-signed label Feb 21, 2024

piitaya marked this pull request as ready for review February 21, 2024 11:40

silamon reviewed Feb 21, 2024

View reviewed changes

src/panels/lovelace/editor/card-editor/hui-card-picker.ts Outdated Show resolved Hide resolved

piitaya added 27 commits February 22, 2024 09:05

Add grid layout with DnD

a74f029

Add section card with DnD

210cfd3

Separate cards and sections

be58e5a

Rename to section

fa5bdb6

Add card size

10b9e06

Fix dragging style

92384ef

WIP: Add sections

7b6a870

WIP: Add grid section

0a7eb8f

WIP: Display sections

16e289c

Simplify grid section

f70a64f

Improve lovelace card events

d002c6b

Clean array move

979bc23

Fix hover state

b47a621

Refactor card and container path

0ff7487

Create lovelace path file

11908a8

Add support for sections to config util

cd3b965

Add create/edit/delete card in section

c0fa1ed

Remove size for entities card

c3a6d56

Remove size for map card

35f0906

Update button card size

4819d9b

Add and delete section

afeafc5

Delete section card

65def40

Add drag and drop for cards

b1b8635

Add drag and drop for sections

b0b7538

Add title edit to section

df4cdd6

Improve overlay

1c69c8e

Improve overlay

7e79e17

piitaya added 14 commits February 22, 2024 09:05

Add padding to icon

f2b2e5b

Add focus style to card and section

15af226

Add style for unnamed section

335c13f

Add confirmation when deleting section

0c115e4

Fix overlay for some cards

f8341f8

Improve drag and drop interaction with big cards

e4c263c

Add suggested card

047f4cd

Adjust margins

6284db1

Add translations to section editor

c0f33ed

Add translations and improve style

494a0b0

rename to sections

9996e27

Add headers to card picker

56092b3

only suggest tile

2b6073a

Refactor header conditions

86b8744

piitaya force-pushed the improved-dashboard-view branch from 6745968 to 86b8744 Compare February 22, 2024 08:05

Fix suggest card dialog types

6a0a5b7

bramkragten reviewed Feb 22, 2024

View reviewed changes

piitaya and others added 7 commits February 22, 2024 17:30

Add section support to suggest dialog

e03014b

Update src/panels/lovelace/strategies/get-strategy.ts

9f9429b

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

Update src/panels/lovelace/components/hui-card-edit-mode.ts

c92870c

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

Feedbacks

5739435

Rename getSize to getGridSize

75d5f8a

remove unused hass

27ac384

Only render hui card features when it exist

1591016

bramkragten approved these changes Feb 22, 2024

View reviewed changes

piitaya merged commit d95bf64 into dev Feb 22, 2024
13 checks passed

piitaya deleted the improved-dashboard-view branch February 22, 2024 19:51

This was referenced Feb 29, 2024

Views intro page: update home-assistant/home-assistant.io#31674

Merged

Dashboards: add page on sections view home-assistant/home-assistant.io#31691

Merged

Views: add illustration of layout strategies home-assistant/home-assistant.io#31745

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add experimental sections view #19846

Add experimental sections view #19846

piitaya commented Feb 21, 2024

silamon left a comment

bramkragten left a comment

bramkragten Feb 22, 2024

piitaya Feb 22, 2024

bramkragten Feb 22, 2024

bramkragten Feb 22, 2024

piitaya Feb 22, 2024

bramkragten Feb 22, 2024

piitaya Feb 22, 2024

bramkragten Feb 22, 2024

piitaya Feb 22, 2024

bramkragten Feb 22, 2024

piitaya Feb 22, 2024

balloob Feb 22, 2024 •

edited

Loading

piitaya Feb 22, 2024

bramkragten Feb 22, 2024

bramkragten Feb 22, 2024

piitaya Feb 22, 2024

bramkragten Feb 22, 2024

piitaya Feb 22, 2024

		getCardSize(): number \| Promise<number>;
		getSize?(): [number, number];

Add experimental sections view #19846

Add experimental sections view #19846

Conversation

piitaya commented Feb 21, 2024

Proposed change

Type of change

Example configuration

Additional information

Checklist

silamon left a comment

Choose a reason for hiding this comment

bramkragten left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

balloob Feb 22, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

balloob Feb 22, 2024 •

edited

Loading