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

Highlight difficult to see after clicking on stage

    XMLWordPrintable

Details

    • Blue Ocean 1.6 - beta 2

    Description

      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.

      Attachments

        1. a.png
          90 kB
          Craig Rodrigues
        2. Screen Shot 2018-05-03 at 9.49.49 AM.png
          64 kB
          Chad Bercea

        Issue Links

          Activity

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

             

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

            rodrigc 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.
            cbercea 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.

            cbercea 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.
            nicu 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 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

            People

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

              Dates

                Created:
                Updated:
                Resolved: