UI renovation

[mawinter69]

• remove all style attributes and replace with classes
• use only standard jenkins variables and color so everything looks good with dark theme as well
• do all styling via an explicit css file
• use jenkins-table where appropriate
• use a grid layout instead of tables to arrange the portlets
• wrap the portlet in a div instead of a table
• use new weather icons for job statistics
• use ionicons for portlet collapse, expand, fullscreen
• sort jobs by full name for job grid

fixes: #326
fixes: #294
fixes: #254
fixes: #202
fixes: #233
fixes: #230

Screenshots

normal theme:

Testing done

Interactive testing

Submitter checklist

Preview Give feedback

1. Make sure you are opening from a topic/feature/bugfix branch (right side) and not your main branch!
2. Ensure that the pull request title represents the desired changelog entry
3. Please describe what you did
4. Link to relevant issues in GitHub or Jira
5. Link to relevant pull requests, esp. upstream and downstream changes
6. Ensure you have provided tests - that demonstrates feature works or fixes the issue

[TobiX]

Looks awesome so far. Still need to test myself and would like to get some feedback from downstream (do they still exist?) plugin authors...

[TobiX]

Pinging downstream plugin developers for tests: @tyanai @dalvizu @centic9 @JayDVector @uhafner

[uhafner]

On my screen the widgets are too wide:

[uhafner]

It somehow looks strange that the new title has rounded corners and the table as well:

I prefer integrated styles in the form similar to:

[mawinter69]

How about this?

The problem is that a jenkins-table defines a margin at the bottom
Also the inner table still has rounded corners (default jenkins style)

[mawinter69]

On my screen the widgets are too wide:

That behaviour can also be seen on the old dashboard

[uhafner]

How about this?

This looks better, yes.

The problem is that a jenkins-table defines a margin at the bottom Also the inner table still has rounded corners (default jenkins style)

Why don't you create a new class that does work inside of a widget: this class can be based on the properties of the jenkins-table? I think it would look even better if there is no gap at the bottom (and no additional corners).

Maybe it would also make sense to get in touch with @timja and @janfaracik as well as they might plan something similar for the main pages (without an extra plugin). Maybe they have some styles for these widgets already.

[mawinter69]

Updated look:

Jenkins style adjusted so upper corners of the table are no longer rounded, margin a bottom is removed.

[uhafner]

Jenkins style adjusted so upper corners of the table are no longer rounded, margin a bottom is removed.

Yes, that looks good now!

I still would increase the header height but this is a matter of taste. Then it would better match:

[uhafner]

On my screen the widgets are too wide:

That behaviour can also be seen on the old dashboard

I see, then this is another regression that has been introduced by the UI changes in core

[TobiX]

On my screen the widgets are too wide

Interesting, this is something I noticed in the "Next Executions" Widget also (if browser window is between 900px & 1170px wide): jenkinsci/next-executions-plugin#78

[uhafner]

Before you are merging this we need to make a plan how to update the affected plugins.

[mawinter69]

Before you are merging this we need to make a plan how to update the affected plugins.

plugins implementing the portlet are not broken with this change. It's just that when they use inner tables it becomes more obvious that they use the old styling. Some plugins show images (graphs), that should work without issues.

[uhafner]

UI tests are broken in my plugin now. I am not sure if others have UI tests though...

[TobiX]

I would really like to merge this, but also don't want to break @uhafner's UI tests 😉 - Any progress on that front?

(I assume this is fine with other plugins, since we haven't received any feedback from their authors so far...)

[uhafner]

I am currently preparing a bigger release that breaks UI tests as well. So feel free to merge, I will take care of it when the changes will be visible in the BOM.

[uhafner]

UI tests are broken in my plugin now. I am not sure if others have UI tests though...

This PR probably also caused all the failures in https://ci.jenkins.io/job/Core/job/acceptance-test-harness/job/master/lastCompletedBuild/testReport/