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

          Zaitcev Peter created issue -
          Zaitcev Peter made changes -
          Description Original: 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).

          * 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"
          * (Optional) Filter fields for single-select should be aligned in line, to the right of the select field.
          New: 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).

          * 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"
          * _(Optional)_ Filter fields for single-select should be aligned in line, to the right of the select field.
          Zaitcev Peter made changes -
          Description Original: 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).

          * 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"
          * _(Optional)_ Filter fields for single-select should be aligned in line, to the right of the select field.
          New: 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"
          * _(Optional)_ Filter fields for single-select should be aligned in line, to the right of the select field.
          Zaitcev Peter made changes -
          Description Original: 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"
          * _(Optional)_ Filter fields for single-select should be aligned in line, to the right of the select field.
          New: 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"
          * _(Optional)_ Filter fields for single-select should be aligned in line, to the right of the select field.
          Zaitcev Peter made changes -
          Description Original: 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"
          * _(Optional)_ Filter fields for single-select should be aligned in line, to the right of the select field.
          New: 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.

          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 made changes -
          Attachment New: current.jpg [ 62449 ]
          Attachment New: w_jenkins_css.jpg [ 62450 ]

          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?

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

              Created:
              Updated: