Add modern icons following new Jenkins UI style

[DuMaM]

I'm using latest Jenkins weekly release. It starts to hurt my eyes when i see those old style icons.
I'm not a graphic designer, but I created them by combining some already made form those sites:
https://github.com/jenkinsci/jenkins/tree/master/war/src/main/resources/images/symbols
https://www.svgrepo.com/

I'm not sure about buildbadge.svg and confighistory.svg, but others I think are ok.

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

[NotMyFault]

I agree, the Tango icons are by far no longer up to date. Jenkins core uses ionicons as modern symbols, we probably should do the same here too.

Can you move these icons over to use the symbol API?
Otherwise symbol don't adapt other themes and retain their original color:

[DuMaM]

@NotMyFault could you take a look for it now?
I'm still checking but i do not have experience with jelly so im not sure if those changes are legit.
I also updated all icons to use only ones form ionicons

[NotMyFault]

Looks promising so far, I'll give it a practical test later.

[DuMaM]

Ok, your suggestion probably fix loading config and badge. 😉
I stuck there for some time.
I also change background document symbol to match All configs one.
There is also strange issue, with overflowing two groups. I don't know why 😕
In preview there is no overlapping for filter.svg symbol.

[DuMaM]

Ok it seems to work 🎉, but icons require some tweaks 😭
Also this PR have many breaking changes so until next lts release (with pom.xml upgrade to it), it can't be merged 😢

[DuMaM]

BTW do you know why mouse actions do not work?

                          <l:icon src="symbol-info plugin-jobConfigHistory" onmouseOver="showTooltip(${configNr})" onmouseLeave="hideTooltip(${configNr})"  alt="${%Info}" />

[NotMyFault]

Not too sure about that one, but the oversized icons need a fixed viewbox in these locations, because Jenkins doesn't attempt to resize oversized icons here.

[DuMaM]

I will try this one
https://stackoverflow.com/questions/31291633/onclick-in-jelly-is-not-working-jenkins-plugin

[DuMaM]

@NotMyFault I think i fixed all issues ;)

[DuMaM]

Nice catch. I didn't noticed that hyperlinks do not work.

[DuMaM]

@NotMyFault I know why this wont work.
It's do to new symbol api. It do not allow for href and tooltips...

https://github.com/jenkinsci/jenkins/blob/2d62032ca422c332b8324ff8925444bd4c9562f9/core/src/main/resources/lib/layout/icon.jelly#L67

[DuMaM]

Everything now is working fine 😉
At first i didn't noticed some functionality. Thanks @NotMyFault for suggestions.

I'm only wondering why i got an underscore before badge😕

[NotMyFault]

It looks like core itself adds a nbsp there, which the a href makes visible, because it's now a clickable URL.

[DuMaM]

Are you aware of any href style I should use to remove this underline?

[NotMyFault]

That'll work for now.

[DuMaM]

@NotMyFault Should we also add this to 'restore' buttons. They are now highlighted with blue.

[NotMyFault]

@NotMyFault Should we also add this to 'restore' buttons. They are now highlighted with blue.

Yeah, possibly.