[JENKINS-50061] Re-styled header #3285

recena · 2018-02-10T15:04:56Z

See JENKINS-50061.

~~Update JTH to use a more recent release of HtmlUnit JENKINS-49491~~
Get a success execution of Functional tests for Jenkins core
Get a success execution of Acceptance test cases

Screenshots (before)

Firefox on Mac

Screenshots (after)

Chrome on Mac

Firefox on Mac

Proposed changelog entries

Entry 1: Issue, Human-readable Text
...

Submitter checklist

JIRA issue is well described
Changelog entry appropriate for the audience affected by the change (users or developer, depending on the change). Examples
* Use the Internal: prefix if the change has no user-visible impact (API, test frameworks, etc.)
Appropriate autotests or explanation to why this change has no tests

Desired reviewers

@jenkinsci/code-reviewers

recena · 2018-02-10T15:18:11Z

core/src/main/resources/lib/layout/layout.jelly

+            <j:set var="searchURL" value="${h.searchURL}"/>
+            <form action="${searchURL}" method="get" class="no-json" name="search">
+              <input name="q" placeholder="${%Search}" id="search-box" class="has-default-text" value="${request.getParameter('q')}" />
+              <!-- <div id="search-box-completion" /> -->


This part is still in progress. I would like to make a proposal for removing this behavior.

Wadeck · 2018-02-15T15:53:48Z

Here are screenshots under Windows

Chrome

No security

Anonymous user

Logged in as admin

Firefox

No security

Anonymous user

Logged in as admin

Edge

No security

Anonymous user

Logged in as admin

Internet Explorer 11

No security

Anonymous user

Logged in as admin

Feedback:

the new style is nice
the distinction between sign-in icon and sign-up label is quite confusing, seems there is only one possible action
the vertical align between icon + label is not consistent, but I know that's an NP-hard problem in browser compability science.
⚠️ under IE 11 the butler is broken (normally displayed in previous version)

recena · 2018-02-16T07:29:13Z

Awesome! I'm going to continue this weekend.

daniel-beck · 2018-02-16T09:39:40Z

The position of the admin monitor popup, as well as the 'arrow' between popup and button, seem off. During the animation, the are misaligned with each other as well.

daniel-beck · 2018-02-16T11:14:03Z

Also seems to remove the recently implemented admin monitor styling in the popup.

recena · 2018-02-18T13:26:13Z

@daniel-beck

Also seems to remove the recently implemented admin monitor styling in the popup.

Could you provide a screenshot? I'm not aware about it.

daniel-beck · 2018-02-18T16:14:09Z

PR build:

2.107:

recena · 2018-02-19T22:52:35Z

@daniel-beck In 2.105

Some alert box needs to be adapted in the main page.

daniel-beck · 2018-02-19T23:01:06Z

Looks like there's a systematic problem with the warning style. Or both info and danger. @recena Could you look into that?

Manage Jenkins page

Popup

recena · 2018-02-20T11:36:25Z

@daniel-beck Yes, I'm on it.

recena · 2018-03-04T15:48:53Z

@Wadeck IMHO the current implementation is a bit more robust regarding to the alignment.

recena · 2018-03-04T15:59:07Z

test/src/test/java/hudson/model/ViewTest.java

@@ -231,7 +231,7 @@
        ListView view = listView("v");
        view.description = "one";
        WebClient wc = j.createWebClient();
-        String xml = wc.goToXml("view/v/config.xml").getContent();


Deprecated.

…styled-header

recena · 2018-03-04T17:03:12Z

This piece of code is very fragile:

<script><![CDATA[
var okButton = makeButton($('ok'),null);

function updateOk(form) {
  function state() {
    if($('name').value.length==0)   return true;
    var radio = form.elements['mode'];
    if (radio.length==2)  return false; // this means we only have dummy checkboxes
    for(i=0;i<radio.length;i++)
      if(radio[i].checked)
        return false;
    return true;
  }

  okButton.set('disabled',state(),false);
}
updateOk(okButton.getForm());
]]></script>

If you use something like <img id="name" ..... /> many forms will stop of working.

Wadeck · 2018-03-05T07:52:43Z

@recena after update the look & feel is even nicer! go on!

Screenshots Windows

Chrome without any security

Chrome with security enabled

Chrome logged in

⚠️ Little proposal: increase the space between the user context menu arrow and the log out icon since at the moment there is no pixel of space between them, it's "easy" to misclick and so to disconnect instead of going to configure page.

🐛 Bugs: signup

The signup button is lost in action. ✝️

Ho no, it was just hidden... it is a bit shy...

Screenshots Other

Firefox

Edge

Internet Explorer 11

PS: The graphical bug I saw on IE is no more there, good job 👍 .

Wadeck · 2018-03-05T10:05:21Z

For the behavior close to the context menu:

The arrow from the context menu stays during some seconds after we are out of its area, letting the user thinks it's still active.
As the logout icon clickable area is ~~too~~ (pixel perfectly) close, a miss-click is too easy. In terms of UX it's not good I think.

recena · 2018-03-05T21:28:17Z

@Wadeck What do you think?

Wadeck · 2018-03-06T09:59:09Z

@recena your screenshot looks really good. I tested with other situation, other problems arise.

If you have warnings, they are not glued with the search bar, an inexperimented admin could imagine it's a feature linked with the search input.

One logged in, as you put some space between the arrow (that is often invisible) and the log out icon, the username is not centered.

As a proposal:

To achieve this one:

add margin-right: 6px to #visible-am-container (for warnings)
add new rule #header ul#toolbar li.username a with padding-left:16px inside (for centered username without touching the breadcrumb or other link in header)

recena · 2018-03-06T10:04:45Z

@Wadeck Great feedback. I'll address it.

recena · 2018-03-08T20:44:56Z

@Wadeck Addressed. What do you think?

Wadeck

@recena thank you for the modification, that's great :)
👍

daniel-beck · 2018-03-10T23:13:15Z

The smaller resolution of the title text image makes it look much worse when the web page is zoomed in, and, I assume, on Retina Macs. What motivates changing this resource file?

recena · 2018-03-11T09:44:02Z

@daniel-beck Could you provide a screenshot?

recena · 2018-03-11T09:45:41Z

@daniel-beck General speaking, I'm working, through several PRs, on replacing several old-resources by new ones.

Re-organize style.css
Replace responsive-grid.css
Replace color.css

recena · 2018-12-09T10:47:44Z

I think I would have to finish this proposal...

oleg-nenashev · 2019-01-31T00:34:53Z

It would be nice to get it landed, but it requires a merge conflict fix

daniel-beck · 2019-04-04T13:08:32Z

@recena Could you clarify whether you're still interested in getting this change merged?

batmat · 2019-04-11T13:25:53Z

We will likely close this on next pass in the next days if nothing is done in the meantime.

If so, please feel free anytime to get back to this and tell us so. We'll be happy to reopen as/if needed.

Thanks!

recena · 2019-04-20T18:38:06Z

Ok, I will file a new PR if needed.

batmat · 2019-04-20T19:20:32Z

Great! Thanks for the feedback. Closing this one then. Thanks again

recena added 2 commits February 10, 2018 16:04

Re-styled header

8de6732

Pushing the rest of the changes

e35f05d

recena commented Feb 10, 2018

View reviewed changes

Consequences of using an old version of HtmlUnit

c19aaea

oleg-nenashev added the work-in-progress The PR is under active development, not ready to the final review label Feb 11, 2018

recena added 2 commits February 11, 2018 12:15

Fixed ViewTest#doConfigDotXml()

f231751

A new revision of JTH

68fad36

jglick changed the title ~~[WiP] Re-styled header~~ Re-styled header Feb 12, 2018

Adapted for local development

9d585c9

recena added 2 commits March 4, 2018 12:46

JTH is not ready to work with SVG resources

82d1489

Adjust until Boostrap is 100% applied

dffe09e

recena force-pushed the restyled-header branch from 87df898 to dffe09e Compare March 4, 2018 11:47

recena added 3 commits March 4, 2018 12:53

Removed SVG files

09fe8d3

Reverted upgrade. The JTH update will be addressed through JENKINS-49491

e14e067

A different approach for getting a more consistent alignment

ceb02d0

Two uploaded file by error

7119a8a

recena commented Mar 4, 2018

View reviewed changes

recena added 3 commits March 4, 2018 17:00

Polished some details

8bc5f87

Clean up

96695e9

Merge branch 'master' of https://github.com/jenkinsci/jenkins into re…

5f8fdaf

…styled-header

recena added 2 commits March 4, 2018 17:35

Correct conditional block

b983cd2

Nothing on the UI can use the ID#name

f8f6e35

recena added 2 commits March 5, 2018 21:49

Addressed one @Wadeck's comment

39de8fb

Addressed another @Wadeck's comment

99b8ea9

Addressed another @Wadeck's comment

3b7b29e

Wadeck approved these changes Mar 9, 2018

View reviewed changes

recena changed the title ~~Re-styled header~~ [JENKINS-50061] Re-styled header Mar 10, 2018

recena mentioned this pull request Mar 11, 2018

[JENKINS-47020] - Improve job search experience #3324

Merged

3 tasks

oleg-nenashev added web-ui The PR includes WebUI changes which may need special expertise unresolved-merge-conflict There is a merge conflict with the target branch. labels Jan 31, 2019

batmat added the proposed-for-close There is no consensus about feasibility of this PR, and maintainers do not see a way forward for it label Apr 11, 2019

batmat closed this Apr 20, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[JENKINS-50061] Re-styled header #3285

[JENKINS-50061] Re-styled header #3285

recena commented Feb 10, 2018 •

edited

recena Feb 10, 2018

Wadeck commented Feb 15, 2018

recena commented Feb 16, 2018

daniel-beck commented Feb 16, 2018

daniel-beck commented Feb 16, 2018

recena commented Feb 18, 2018

daniel-beck commented Feb 18, 2018

recena commented Feb 19, 2018

daniel-beck commented Feb 19, 2018

recena commented Feb 20, 2018

recena commented Mar 4, 2018

recena Mar 4, 2018

recena commented Mar 4, 2018 •

edited

Wadeck commented Mar 5, 2018 •

edited

Wadeck commented Mar 5, 2018

recena commented Mar 5, 2018

Wadeck commented Mar 6, 2018

recena commented Mar 6, 2018

recena commented Mar 8, 2018

Wadeck left a comment

daniel-beck commented Mar 10, 2018

recena commented Mar 11, 2018

recena commented Mar 11, 2018 •

edited

recena commented Dec 9, 2018

oleg-nenashev commented Jan 31, 2019

daniel-beck commented Apr 4, 2019

batmat commented Apr 11, 2019

recena commented Apr 20, 2019

batmat commented Apr 20, 2019

[JENKINS-50061] Re-styled header #3285

[JENKINS-50061] Re-styled header #3285

Conversation

recena commented Feb 10, 2018 • edited

Screenshots (before)

Firefox on Mac

Screenshots (after)

Chrome on Mac

Firefox on Mac

Proposed changelog entries

Submitter checklist

Desired reviewers

recena Feb 10, 2018

Choose a reason for hiding this comment

Wadeck commented Feb 15, 2018

Here are screenshots under Windows

Feedback:

recena commented Feb 16, 2018

daniel-beck commented Feb 16, 2018

daniel-beck commented Feb 16, 2018

recena commented Feb 18, 2018

daniel-beck commented Feb 18, 2018

recena commented Feb 19, 2018

daniel-beck commented Feb 19, 2018

Manage Jenkins page

Popup

recena commented Feb 20, 2018

recena commented Mar 4, 2018

recena Mar 4, 2018

Choose a reason for hiding this comment

recena commented Mar 4, 2018 • edited

Wadeck commented Mar 5, 2018 • edited

Wadeck commented Mar 5, 2018

recena commented Mar 5, 2018

Wadeck commented Mar 6, 2018

recena commented Mar 6, 2018

recena commented Mar 8, 2018

Wadeck left a comment

Choose a reason for hiding this comment

daniel-beck commented Mar 10, 2018

recena commented Mar 11, 2018

recena commented Mar 11, 2018 • edited

recena commented Dec 9, 2018

oleg-nenashev commented Jan 31, 2019

daniel-beck commented Apr 4, 2019

batmat commented Apr 11, 2019

recena commented Apr 20, 2019

batmat commented Apr 20, 2019

recena commented Feb 10, 2018 •

edited

recena commented Mar 4, 2018 •

edited

Wadeck commented Mar 5, 2018 •

edited

recena commented Mar 11, 2018 •

edited