Dashboard - Flexible layout: ability to mix 1, 2, and 3 column lines

[pierre-gilles]

@Will_71

The width in Edit mode and in normal mode are not the same on my display.

Indeed, I’ll check! Thanks

@Will_71

Dashboard in normal mode

By the way, I don’t know if you’ve tested the « Full width » width, with such a wide screen, it would be magnificent at your place You can even put a column or double width to display, for example, the view of your house, and up to 6 columns, it would be too beautiful!

In any case, we will have to adapt our dashboards to fully take advantage of all these possibilities

@Will_71

The widget is too tall

I’ll check!

@Will_71

How do we delete them if we want to?

The idea would be to migrate the icons you had put in the name to the dedicated icons of the dashboard. They will thus be homogeneous on all platforms. The emojis were rendered differently depending on the system (iOS, macOS, Windows…), and those of Windows are, let’s say… really not great

@Chris75

• Is the old dropdown menu of the dashboards still kept in addition to the direct access buttons?

No!

[b3n.0]

A rollercoaster of emotions reading this thread…
It’s completely insane,
enormous,

I can’t wait…

[Will_71]

@pierre-gilles

if you have tested the « Full width » width, with such a wide screen

I tested it but I find it a bit too big in full width

[pierre-gilles]

@Will_71

I tried it but I find it a bit too wide in full width

If it’s to put 4 widgets, it’s sure that it’s too wide, the idea of full width is to better use the space: more columns, or put some columns in double width, to display a view of your house for example

[Will_71]

Here with 6 columns, it’s certain that we’ll have to revisit to redesign the dashboards with this beautiful theme. And it’s true that going back is strange.

However, my dashboard can be viewed on my large screen and on a tablet. But if I reduce the size, there’s a point where the widgets don’t follow. I’ve put the resolution at the top so you can see

[pierre-gilles]

@Will_71

But if I reduce the size, there is a part where the widgets don’t follow. I set the resolution at the top so you can see

Oh yes, indeed I’ll take a look!

[Chris75]

@Will_71

However, I can view my dashboard on my large screen and on a tablet. But when I reduce the size, there is a point where the widgets don’t follow. I set the resolution at the top so you can see what I mean

how about on a phone?

[pierre-gilles]

@Will_71

But if I reduce the size, there is a part where the widgets do not follow.

This is fixed on master

[Will_71]

I’ll test again later, I’ll keep you posted.

[Will_71]

@pierre-gilles What bothers me about the icons is that it’s marked as optional but in fact it’s not, because there’s a default icon (the house)

And I’d really like not to use one

[Will_71]

I still have a difference between edit mode and normal mode

When I reduce the width, it gets better, but it’s still not right

It flips above 990 pixels in width

[cicoub13]

Two mobile feedbacks for the Scenes

• there is no space between the scenes
• The title is very hard to read

[cicoub13]

The time picker for Scheduled Trigger is below

[cicoub13]

And three fix PRs

Scenes: restore the spacing between mobile scene rows (#2984)

Scene editor: portal the date/time picker popup and restyle it (#2985)

Scene editor: stop truncating the scene name on mobile (#2986)

[pierre-gilles]

Thanks for all the fixes @cicoub13, it’s good for me, everything is in the merge queue

[guim31]

Can’t wait !!!

[pierre-gilles]

@Will_71

@pierre-gilles The thing that bothers me about the icons is that it’s indicated as optional but in fact it’s not, because there is a default icon (the house)

Since the new tab bar, on mobile and in tablet mode (wall panel), the tabs are reduced to their icon alone, which is what allows you to display many without a menu to open.

The icon is not a decorative detail in these modes, it’s the identity of the tab.

What’s changing

When creating a dashboard, you now need to choose an icon, just like the name. This applies only to creation: nothing is imposed on existing dashboards, and the field remains optional on the API side.

And the current dashboards?

This is where it gets interesting. Many of you already put an emoji as a prefix to the name: « Cinema », « Living Room », « Temperatures »…

Gladys now detects the emoji at the beginning of the name and translates it into the corresponding icon: → sofa, → clap, → thermometer, → car, → light bulb, → bed, → cat… 388 emojis are covered (houses and rooms, kitchen, appliances, multimedia, energy and light, security, tools, health, weather, garden, animals, transportation, flags…). The emoji is removed from the tab label to avoid having the mark in duplicate.

This is a temporary solution so that the dashboards look good right away, but I strongly encourage you to migrate your dashboards once it’s in production

[Will_71]

Okay, your explanation works perfectly for me.

I just tried it, the conversion worked except for some cases where there shouldn’t have been an equivalent. I’ll do it manually because I’m going to review all my dashboards anyway!

[Will_71]

Here are my feedback regarding the display:

Bug in the widget settings: when you open a select, if you scroll the selection window moves with the scroll
In the image below, I am on Device Functionality and the window has moved up

In the Quick Actions widget, if the name is long it overflows (the name is just for example ), if I add spaces it wraps correctly. For info, in my section I have 6 columns.

The temperature/humidity widget that doesn’t have the same size in Edit mode as in normal mode

I love the binary graph across the full width of my screen

[cursor-bot]

Hi everyone!

This topic is now in development.

A PR has been opened to fix the select menu that detaches when scrolling the edit panel, and the action names that are too long and overflow the widget:

Dashboard: fix edit-panel select detaching on scroll and long action names overflowing (#2994)

Feel free to follow the PR, test (optional, especially for small requests) and give your feedback here if needed.