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

Highlight difficult to see after clicking on stage

    XMLWordPrintable

    Details

    • Epic Link:
    • Sprint:
      Blue Ocean 1.6 - beta 2
    • Similar Issues:

      Description

      Feedback from Gitter, Craig Rodrigues:

      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.

        Attachments

          Issue Links

            Activity

            Hide
            michaelneale 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... 

             

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

            Show
            michaelneale 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...    Craig Rodrigues any chance you could poorly mock up what you mean by point 4? I am having a bit of trouble following it myself.
            Hide
            rodrigc Craig Rodrigues added a comment -

            Show
            rodrigc Craig Rodrigues added a comment -
            Hide
            rodrigc Craig Rodrigues added a comment -

            Michael Neale 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.

            Show
            rodrigc Craig Rodrigues added a comment - Michael Neale 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.
            Hide
            cbercea Chad Bercea added a comment -

            Nicolae Pascu 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.

            Show
            cbercea Chad Bercea added a comment - Nicolae Pascu 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.
            Hide
            nicu Nicolae Pascu added a comment -

            Chad Bercea 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

            Show
            nicu Nicolae Pascu added a comment - Chad Bercea 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

              People

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

                Dates

                • Created:
                  Updated:
                  Resolved: