Table action buttons hidden until hover

XMLWordPrintable

    • Type: Improvement
    • Resolution: Fixed
    • Priority: Minor
    • Component/s: blueocean-plugin
    • None

      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

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

              Created:
              Updated:
              Resolved: