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

Highlight difficult to see after clicking on stage

    • Icon: Improvement Improvement
    • Resolution: Fixed
    • Icon: Major Major
    • blueocean-plugin
    • None
    • Blue Ocean 1.6 - beta 2

      Feedback from Gitter, rodrigc:

      for the circles displayed for each stage in the pipeline
      there are 4 colors
      1. green = a stage has completed successfully
      2. red = a stage has failed
      3. blue = a stage is in progress
      4 . dark grey highlighted circle = I clicked on the stage in UI

      for color 4., I would request that the visual clue that the stage has been selected be made more clear. When I have about 15 stages displayed on the screen, the dark grey highlight is difficult to see, so I can't easily tell which stage I have clicked on to select.

      I would suggest that the UI hints that this has been selected be improved slightly.

      Possibilities include:

        1.  Make the dark grey circle thicker

        2.  Make the dark grey circle a different color than grey

        3.  Maybe add an additional UI hint that the stage is selected, such as a small arrow pointing to the selected node.

          [JENKINS-50408] Highlight difficult to see after clicking on stage

          Michael Neale added a comment -

          I think things have forked for 1.5 already, but a good candidate for 1.6 beta 1 and may be small enough to cherry-pick anyway... 

           

          rodrigc any chance you could poorly mock up what you mean by point 4? I am having a bit of trouble following it myself.

          Michael Neale added a comment - I think things have forked for 1.5 already, but a good candidate for 1.6 beta 1 and may be small enough to cherry-pick anyway...    rodrigc any chance you could poorly mock up what you mean by point 4? I am having a bit of trouble following it myself.

          michaelneale Take a look at screenshot above.

          In that screenshot, can you tell which node I clicked on to select it?

          I couldn't tell. The node which is selected in that screenshot is the red one at the bottom.

          The visual cue for this is a slightly thicker grey outline around the node.

          This is really hard to see on a smaller screen, and for a pipeline with many stages, and thus many nodes.

          Craig Rodrigues added a comment - michaelneale Take a look at screenshot above. In that screenshot, can you tell which node I clicked on to select it? I couldn't tell. The node which is selected in that screenshot is the red one at the bottom. The visual cue for this is a slightly thicker grey outline around the node. This is really hard to see on a smaller screen, and for a pipeline with many stages, and thus many nodes.

          Chad Bercea added a comment -

          nicu I am in favor of using the blue we are deploying in the system in a 2px stroke or border, roughly 2px larger than the object "selected" giving a little space. I tried red and orange but it ended up looking like an error and yellow was too low contrast. Blue feels safe and having the line not touch the object creates a visual break. I anticipate this being enough of a touch to show a "selected state" while also not distracting the user from their work.

          Chad Bercea added a comment - nicu I am in favor of using the blue we are deploying in the system in a 2px stroke or border, roughly 2px larger than the object "selected" giving a little space. I tried red and orange but it ended up looking like an error and yellow was too low contrast. Blue feels safe and having the line not touch the object creates a visual break. I anticipate this being enough of a touch to show a "selected state" while also not distracting the user from their work.

          Nicolae Pascu added a comment -

          cbercea here is a link to the PR, I've added a screen recording there with it in action: https://github.com/jenkinsci/blueocean-plugin/pull/1732

          Nicolae Pascu added a comment - cbercea here is a link to the PR, I've added a screen recording there with it in action:  https://github.com/jenkinsci/blueocean-plugin/pull/1732

            nicu Nicolae Pascu
            kzantow Keith Zantow
            Votes:
            0 Vote for this issue
            Watchers:
            6 Start watching this issue

              Created:
              Updated:
              Resolved: