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

Table action buttons hidden until hover

    XMLWordPrintable

    Details

    • Sprint:
      Blue Ocean 1.5 - beta 3
    • Similar Issues:

      Description

      With more action buttons being needed in the table, it starts cluttering the table, so I've created a more elegant solution.

      Things to keep in mind

      • Some tables will and some won't need the overflow "more" button and dropdown
      • Pull SVGs from https://material.io/icons/ and keep bounding box !important
      • Icons ares 24px x 24px
      • Use padding on <a>'s so entire height and width is clickable
      • I used a :before pseudo-element to the right of the action buttons to fade out background. Theres probably a better way of doing this.
      • Ignore new weather icons for the moment
      • Add titles to anchors for accessibility

      Don't look too closely at the code , more so the spacing, interactions, timing, full height target area, etc.

      Codepen – https://codepen.io/brody/pen/rwEVKZ

        Attachments

          Issue Links

            Activity

            Hide
            jamesdumay James Dumay added a comment -

            Brody Maclean thanks for this

            Show
            jamesdumay James Dumay added a comment - Brody Maclean thanks for this
            Hide
            jamesdumay James Dumay added a comment -

            Michael Neale this fixes the "racing stripe" of icons on each row (lots of visual noise) and adds proper spacing between items.

            Might want to use this as an opportunity to re-do the styles here as I believe the editor hacks the Edit action button in here in a crappy way.

            Show
            jamesdumay James Dumay added a comment - Michael Neale this fixes the "racing stripe" of icons on each row (lots of visual noise) and adds proper spacing between items. Might want to use this as an opportunity to re-do the styles here as I believe the editor hacks the Edit action button in here in a crappy way.
            Hide
            michaelneale Michael Neale added a comment -

            you can tell how excited I am

            Show
            michaelneale Michael Neale added a comment - you can tell how excited I am
            Hide
            jamesdumay James Dumay added a comment -

            Brody Maclean this is beut

            Show
            jamesdumay James Dumay added a comment - Brody Maclean this is beut

              People

              • Assignee:
                nicu Nicolae Pascu
                Reporter:
                brody Brody Maclean
              • Votes:
                0 Vote for this issue
                Watchers:
                3 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: