• 
      

    Redesign the look and feel of the dashboard and other datagrids.

    Review Request #7216 — Created April 16, 2015 and submitted — Latest diff uploaded

    Information

    Review Board
    release-2.5.x
    505e5fe...

    Reviewers

    Review Board is overdue for a visual refresh, and I'm starting out with
    the dashboard and other datagrids.
    
    The goal of this redesign is remove a lot of the lines and background
    colors, tone down the background, add some breathing room to the items
    in the dashboard, and to overall reduce the noise.
    
    The sidebar is no longer its own boxy thing, but rather lives on the
    background of the page (which itself is now slightly off-white). The
    counts on the sidebar are back to being simple text, but with a dark red
    instead of black/grey, keeping things simple but clear.
    
    There's a relationship between the selected item in the sidebar and the
    dashboard now. The highlight around the item appears as an extension of
    the datagrid, without any breaks between them.
    
    The datagrid title no longer has a box as well, but instead, it also
    sits on the background.
    
    The column headers are now a light blue (similar to the navbar), rather
    than having a sort of chrome look. The borders between the header cells
    have been removed.
    
    The Edit Columns menus is now flush with the page, and can no longer
    flow off the page. Like the sidebar and datagrid itself, it will display
    a scrollbar when needed. The boxes around the checkmarks have also been
    removed.
    
    The paginator has been simplified, removing the boxes around each click
    target. The links are all grey, and turn to black when hovering. The
    selected page stands out in black, with a thin border below it, helping
    to provide an extra visual.
    
    The User page's tabs are now a clear part of the datagrid, blending in
    with the header. This helps to provide a cleaner, more cohesive look.
    The tab code has also been pulled out of the "dashboard"-specific CSS,
    making it easier to use down the road with other plain datagrids.
    
    Going forward, some work will be done to have each datagrid take up the
    full height of the page, just like with the dashboard, helping to unify
    the experience across all pages. Some cleanup will also be done to
    remove a lot of the dashboard-specific styling, making that all a lot
    more generic.

    Tested each datagrid and all interactions on Chrome, Firefox, Safari,
    and Internet Explorer on Retina and non-Retina displays.

    This includes the Edit Columns menu, reording columns, resizing the
    windows, changing filters/tabs/dashboard groups, etc.