Dashboard Updates

[jonathanadams]

Description:

Updates to the dashboard UI interface and the javascript backend.

• Light and dark grey colour scheme
• Added ESPHome logo onto login screen and dashboard
• Implemented a responsive two three column layout for nodes - Closes Consolidate ESPHome Dashboard feature-requests#465, Closes Compact/Condensed view mode for ESPHome UI feature-requests#685
• Slimmed down node card with symbols to indicate when update available
• Node cards have coloured tops to denote status (Green = Online, Red = Offline, Yellow = Not Responding, Grey = Unknown)
• Editor can now only be closed by clicking the close button. Clicking outside of the editor window will not close the editor. - Fixes Request confirmation when closing editor with changes feature-requests#561
• Editor save now functions correctly on Safari/iOS - Fixed Hass.io Dashboard edit using iOS Safari issues#781, Fixes Does not save when 'Save' is clicked issues#874
• Updated wizard - Wizard text now changes to guide first time users through adding their first node. Subsequent runs of the wizard have slimmed down text.
• Wizard board selection now fixed - Fixes 'Device Type' dropdown list is sticking out of the frame of the wizard. issues#506
• General refactorization and tidy up of HTML and JavaScript files

Submitted as draft as still some work to be done but wanted other peoples opinions.

Pull request in esphome-docs with documentation (if applicable): esphome/esphome-docs#

To be completed.

Checklist:

• The code change is tested and works locally.
• Tests have been added to verify that the new code works (under tests/ folder).

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

• Documentation added/updated in esphome-docs.

[mbo18]

Will also close this request:
https://community.home-assistant.io/t/cosmetic-esphome-addon-dash-device-workflow/147540

[holdestmade]

Looks good to me, would 3 colums fit ? there seems to be a lot of white space in the cards.

[jonathanadams]

@holdestmade I will adjust the code and post a screenshot of x3 columns later. My only fear with this is long node names spanning over two lines.

[holdestmade]

Yes, I see what you mean, but most node names are not that long. Could the path be shortened ? Not sure it really needs config/esphome/ maybe just the filename ?

[holdestmade]

Off topic but how did you get a subtitle in your first node ?

Scrap that, found it

[mbo18]

Could the number of columns be dynamic (from number of nodes and screen size)?

[jonathanadams]

Could the number of columns be dynamic (from number of nodes and screen size)?

The number of column is setup to be dynamic based upon the number of nodes present. It then responsively reduces the number of columns as the screen size gets smaller.

esphome/esphome/dashboard/static/js/esphome.js

Lines 19 to 31 in e0ca329

	/**
	* Dashboard Dynamic Grid
	*/
	const nodeGrid = () => {
	const nodeCount = $('#nodes .card').length
	const nodeGrid = $('#nodes #grid')
	if (nodeCount >= 6) {
	$(nodeGrid).addClass("grid-2-col");
	} else {
	$(nodeGrid).addClass("grid-1-col");
	}
	}

[jonathanadams]

Example of a 3 column layout. I've had to fiddle with the container size to make it work. What do you all think?

[holdestmade]

Does the webserver icon fit OK ?

[jonathanadams]

Does the webserver icon fit OK ?

Yes it does. It goes on the same line as the update icon and the 3 vertical lines. Just realised non of the images show it.

[holdestmade]

Just realised non of the images show it.

Yes thats why I asked, great work.

[jonathanadams]

I think these are enough changes to start off with.

[sauloonze]

Hi @jonathanadams Good job here. Looking forward to use it.

[jonathanadams]

@sermayoral thanks for fixing the lint issues.

[sermayoral]

@sermayoral thanks for fixing the lint issues.

@jonathanadams You are welcome :-)

[glmnet]

Awesome!

[holdestmade]

Look great, any chance of adding an option to sort by node name instead of filename ?

[theone11]

Very nice looks good and more useful than before.

Can you add an option to filter or sort by online/offline/all.

[jonathanadams]

Very nice looks good and more useful than before.

Can you add an option to filter or sort by online/offline/all.

I plan on adding filtering/search options in some further updates in the near future. I wanted to get these changes merged and see if any bugs crop up before making further updates.

[sermayoral]

@jonathanadams it's quite understandable :-)