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

Highlight difficult to see after clicking on stage

    XMLWordPrintable

    Details

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

      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

            kzantow Keith Zantow created issue -
            rodrigc Craig Rodrigues made changes -
            Field Original Value New Value
            Summary Highlight difficult to see for grey pipelines Highlight difficult to see after clicking on stage
            rodrigc Craig Rodrigues made changes -
            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
            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
            rodrigc Craig Rodrigues made changes -
            Link This issue is related to JENKINS-38339 [ JENKINS-38339 ]
            rodrigc Craig Rodrigues made changes -
            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
            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.
            rodrigc Craig Rodrigues made changes -
            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.
            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.
            michaelneale Michael Neale made changes -
            Priority Minor [ 4 ] Major [ 3 ]
            michaelneale Michael Neale made changes -
            Epic Link JENKINS-35761 [ 171656 ]
            michaelneale Michael Neale made changes -
            Sprint Blue Ocean 1.6 - beta 1 [ 531 ]
            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.
            rodrigc Craig Rodrigues made changes -
            Attachment a.png [ 42076 ]
            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.
            vivek Vivek Pandey made changes -
            Sprint Blue Ocean 1.6 - beta 1 [ 531 ] Blue Ocean 1.6 - beta 2 [ 546 ]
            nicu Nicolae Pascu made changes -
            Assignee Nicolae Pascu [ nicu ]
            nicu Nicolae Pascu made changes -
            Status Open [ 1 ] In Progress [ 3 ]
            cbercea Chad Bercea made changes -
            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.
            nicu Nicolae Pascu made changes -
            Status In Progress [ 3 ] In Review [ 10005 ]
            nicu Nicolae Pascu made changes -
            Remote Link This issue links to "#1732 (Web Link)" [ 20621 ]
            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
            nicu Nicolae Pascu made changes -
            Resolution Fixed [ 1 ]
            Status In Review [ 10005 ] Closed [ 6 ]

              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: