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

Table action buttons hidden until hover

XMLWordPrintable

    • Icon: Improvement Improvement
    • Resolution: Fixed
    • Icon: Minor Minor
    • blueocean-plugin
    • None
    • Blue Ocean 1.5 - beta 3

      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

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

              Created:
              Updated:
              Resolved: