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

Table action buttons hidden until hover

    XMLWordPrintable

Details

    • Blue Ocean 1.5 - beta 3

    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

            jamesdumay James Dumay added a comment -

            brody thanks for this

            jamesdumay James Dumay added a comment - brody thanks for this
            jamesdumay James Dumay added a comment -

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

            jamesdumay James Dumay added a comment - michaelneale 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.
            michaelneale Michael Neale added a comment -

            you can tell how excited I am

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

            brody this is beut

            jamesdumay James Dumay added a comment - brody this is beut

            People

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

              Dates

                Created:
                Updated:
                Resolved: