Redesign the look and feel of the dashboard and other datagrids.
Review Request #7216 — Created April 17, 2015 and submitted — Latest diff uploaded
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.