Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-72282

[Active Choices] HTML Input elements miss Jenkins CSS classes

      The generated HTML div, input & select elements lack their Jenkins CSS classes. This results in the ugly look of the generated input fields (see attachment, parameter BRANCH_SELECTOR).

      • Text fields should have class "jenkins-input"
      • Single-select fields should have classes "jenkins-select__input" & "dropdownList"
      • Single-select div-containers should have class "jenkins-select"
      • Other types of inputs probably also miss appropriate CSS classes
      • (Optional) Filter fields for single-select should be aligned in line, to the right of the select field.

          [JENKINS-72282] [Active Choices] HTML Input elements miss Jenkins CSS classes

          That'd be a great visual improvement. I have little time to work on the plug-in, and looks like there are some bugs that need fixing first, but if you or anyone have time to send a pull request it should be easy to review and merge (no tests needed for this one, just screenshots before/after). Thanks for the detailed report and the list of classes that can be used to update it.

          Bruno P. Kinoshita added a comment - That'd be a great visual improvement. I have little time to work on the plug-in, and looks like there are some bugs that need fixing first, but if you or anyone have time to send a pull request it should be easy to review and merge (no tests needed for this one, just screenshots before/after). Thanks for the detailed report and the list of classes that can be used to update it.

          Peter added a comment - - edited

          I will be looking into this, since I am also interested.

          When configuring/building a pipeline job the select fields and their filter are displayed under each other (I'm assuming since the big UI overhaul on Jenkins?) contrary to the images on the plugin's page: https://plugins.jenkins.io/uno-choice/
          I've managed to make the single select field stretch the screen by adding the "jenkins-select__input" class and also the filter with "jenkins-input" class using the inspector inside my browser (and also put it in code afterwards), but I'm not enough of a frontend wizard to test the original functionality from the documentation that says such custom rendering can also be possible, like on the images. Does the plugin still support that (in freestyle jobs?), or will it go away from the custom rendering and "just" focus on running groovy code for the parameters (which I am currently using it for)?

          Let me know if my question isn't clear, thank you for the awesome plugin!

          Peter added a comment - - edited I will be looking into this, since I am also interested. When configuring/building a pipeline job the select fields and their filter are displayed under each other (I'm assuming since the big UI overhaul on Jenkins?) contrary to the images on the plugin's page: https://plugins.jenkins.io/uno-choice/ I've managed to make the single select field stretch the screen by adding the "jenkins-select__input" class and also the filter with "jenkins-input" class using the inspector inside my browser (and also put it in code afterwards), but I'm not enough of a frontend wizard to test the original functionality from the documentation that says such custom rendering can also be possible, like on the images. Does the plugin still support that (in freestyle jobs?), or will it go away from the custom rendering and "just" focus on running groovy code for the parameters (which I am currently using it for)? Let me know if my question isn't clear, thank you for the awesome plugin!

          Peter added a comment -

          Did the changes on my branch, for the non-reactive parameter for now: https://github.com/Avalancs/uno-choice-plugin/tree/72282-jenkins-css-classes
          Without my branch it looks like:

          With my branch it looks like

          Peter added a comment - Did the changes on my branch, for the non-reactive parameter for now: https://github.com/Avalancs/uno-choice-plugin/tree/72282-jenkins-css-classes Without my branch it looks like: With my branch it looks like

          Looking a lot better! Did you have to create CSS or did you use the existing CSS classes from Jenkins?

          Bruno P. Kinoshita added a comment - Looking a lot better! Did you have to create CSS or did you use the existing CSS classes from Jenkins?

          Peter added a comment -

          The select fields use "jenkins-select_input" and the input field uses "jenkins-input". The only css class I had to create was "select-field-arrow", because the jenkins class "jenkins-select_input" hides the arrow at the end of the select field (visually only, you can still drop it down by clicking on it).

          The arrow would normally be shown by a div surrounding the select with the class "jenkins-select", but if I add that then the JS breaks. If I add the filter field inside that div then it works functionally but the arrow is halfway between the select and the input field So I thought adding a single css class to restore the arrow at the end of the select box would be the best way to not break anything.

          Peter added a comment - The select fields use "jenkins-select_ input" and the input field uses "jenkins-input". The only css class I had to create was "select-field-arrow", because the jenkins class "jenkins-select _input" hides the arrow at the end of the select field (visually only, you can still drop it down by clicking on it). The arrow would normally be shown by a div surrounding the select with the class "jenkins-select", but if I add that then the JS breaks. If I add the filter field inside that div then it works functionally but the arrow is halfway between the select and the input field So I thought adding a single css class to restore the arrow at the end of the select box would be the best way to not break anything.

          Peter added a comment -

          ```
          jenkins-select__input

          ```

          Sorry, Jira keeps turning the double underscore into italicized text

          Peter added a comment - ``` jenkins-select__input ``` Sorry, Jira keeps turning the double underscore into italicized text

          Michel Zanini added a comment -

          Can we move ahead with a PR for this? It looks WAYYYY better.

          Right now the UI looks really bad. It would look native to Jenkins if the CSS is matching.

           

          Michel Zanini added a comment - Can we move ahead with a PR for this? It looks WAYYYY better. Right now the UI looks really bad. It would look native to Jenkins if the CSS is matching.  

          szydlak added a comment - - edited

          Bump, can we merge proposed changes and release new plugin version? Currently UI generated by this plugin looks really bad

          avalancs any chances to create Pull Request?
          kinow any chances to accept proposed changes and release new version?

          szydlak added a comment - - edited Bump, can we merge proposed changes and release new plugin version? Currently UI generated by this plugin looks really bad avalancs any chances to create Pull Request? kinow any chances to accept proposed changes and release new version?

          Hi, this shouldn't be hard to review, and we have many dependency updates from dependabot. Will try to review this pull request, and then cut a release with just that and the dependabot updates over next days (there's a long weekend here coming up, so I might have some time). Sorry the delay.

          Bruno P. Kinoshita added a comment - Hi, this shouldn't be hard to review, and we have many dependency updates from dependabot. Will try to review this pull request, and then cut a release with just that and the dependabot updates over next days (there's a long weekend here coming up, so I might have some time). Sorry the delay.

          (Assuming there's a pull request to review, just checked and I think the work is still on a branch but with no pull request...)

          Bruno P. Kinoshita added a comment - (Assuming there's a pull request to review, just checked and I think the work is still on a branch but with no pull request...)

            kinow Bruno P. Kinoshita
            hares Zaitcev Peter
            Votes:
            0 Vote for this issue
            Watchers:
            5 Start watching this issue

              Created:
              Updated: