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

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

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.


Description From Last Updated

How would you feel about dimming out the rest of the dashboard table while this menu is visible?

daviddavid

'format_html_join' imported but unused

reviewbotreviewbot

Needs a docstring.

brenniebrennie

Needs a docstring.

brenniebrennie

Needs a docstring.

brenniebrennie

I'm guessing this change should not be here.

daviddavid

'format_html_join' imported but unused

reviewbotreviewbot

Can we either make this slightly larger or slightly darker? It's pretty subtle right now.

daviddavid

'format_html_join' imported but unused

reviewbotreviewbot
reviewbot
  1. Tool: PEP8 Style Checker
    Processed Files:
        reviewboard/admin/checks.py
        reviewboard/datagrids/columns.py
    
    Ignored Files:
        reviewboard/templates/datagrids/datagrid.html
        reviewboard/static/rb/js/dashboard/views/dashboardView.js
        reviewboard/static/rb/css/pages/base.less
        reviewboard/static/rb/css/ui/datagrids.less
        reviewboard/templates/datagrids/review_request_listview.html
        reviewboard/static/rb/css/defs.less
        reviewboard/static/rb/css/pages/dashboard.less
    
    
    
    Tool: Pyflakes
    Processed Files:
        reviewboard/admin/checks.py
        reviewboard/datagrids/columns.py
    
    Ignored Files:
        reviewboard/templates/datagrids/datagrid.html
        reviewboard/static/rb/js/dashboard/views/dashboardView.js
        reviewboard/static/rb/css/pages/base.less
        reviewboard/static/rb/css/ui/datagrids.less
        reviewboard/templates/datagrids/review_request_listview.html
        reviewboard/static/rb/css/defs.less
        reviewboard/static/rb/css/pages/dashboard.less
    
    
  2. reviewboard/datagrids/columns.py (Diff revision 1)
     
     
    Show all issues
     'format_html_join' imported but unused
    
  3. 
      
brennie
  1. 
      
  2. reviewboard/datagrids/columns.py (Diff revision 1)
     
     
    Show all issues

    Needs a docstring.

  3. reviewboard/datagrids/columns.py (Diff revision 1)
     
     
    Show all issues

    Needs a docstring.

    1. Not worth having these for __init__. If it's doing anything but basic initialization, the logic should exist in a utility function.

  4. reviewboard/datagrids/columns.py (Diff revision 1)
     
     
    Show all issues

    Needs a docstring.

  5. 
      
chipx86
reviewbot
  1. Tool: Pyflakes
    Processed Files:
        reviewboard/admin/checks.py
        reviewboard/datagrids/columns.py
    
    Ignored Files:
        reviewboard/templates/datagrids/datagrid.html
        reviewboard/static/rb/js/dashboard/views/dashboardView.js
        reviewboard/static/rb/css/pages/base.less
        reviewboard/static/rb/css/ui/datagrids.less
        reviewboard/templates/datagrids/review_request_listview.html
        reviewboard/static/rb/css/defs.less
        reviewboard/static/rb/css/pages/dashboard.less
    
    
  2. reviewboard/datagrids/columns.py (Diff revision 2)
     
     
    Show all issues
     'format_html_join' imported but unused
    
  3. 
      
reviewbot
  1. Tool: PEP8 Style Checker
    Processed Files:
        reviewboard/admin/checks.py
        reviewboard/datagrids/columns.py
    
    Ignored Files:
        reviewboard/templates/datagrids/datagrid.html
        reviewboard/static/rb/js/dashboard/views/dashboardView.js
        reviewboard/static/rb/css/pages/base.less
        reviewboard/static/rb/css/ui/datagrids.less
        reviewboard/templates/datagrids/review_request_listview.html
        reviewboard/static/rb/css/defs.less
        reviewboard/static/rb/css/pages/dashboard.less
    
    
  2. 
      
david
  1. 
      
  2. Show all issues

    How would you feel about dimming out the rest of the dashboard table while this menu is visible?

    1. Sure. Mind if I tackle that in a separate change?

    2. Sure.

  3. reviewboard/admin/checks.py (Diff revision 2)
     
     
    Show all issues

    I'm guessing this change should not be here.

    1. Totally related and obviously what we want.

  4. Show all issues

    Can we either make this slightly larger or slightly darker? It's pretty subtle right now.

    1. With the darker text, it feels like it stands out quite a bit to me, but I'll tweak it a bit.

  5. 
      
chipx86
reviewbot
  1. Tool: Pyflakes
    Processed Files:
        reviewboard/datagrids/columns.py
    
    Ignored Files:
        reviewboard/templates/datagrids/datagrid.html
        reviewboard/static/rb/js/dashboard/views/dashboardView.js
        reviewboard/static/rb/css/pages/base.less
        reviewboard/static/rb/css/ui/datagrids.less
        reviewboard/templates/datagrids/review_request_listview.html
        reviewboard/static/rb/css/defs.less
        reviewboard/static/rb/css/pages/dashboard.less
    
    
    
    Tool: PEP8 Style Checker
    Processed Files:
        reviewboard/datagrids/columns.py
    
    Ignored Files:
        reviewboard/templates/datagrids/datagrid.html
        reviewboard/static/rb/js/dashboard/views/dashboardView.js
        reviewboard/static/rb/css/pages/base.less
        reviewboard/static/rb/css/ui/datagrids.less
        reviewboard/templates/datagrids/review_request_listview.html
        reviewboard/static/rb/css/defs.less
        reviewboard/static/rb/css/pages/dashboard.less
    
    
  2. reviewboard/datagrids/columns.py (Diff revision 3)
     
     
    Show all issues
     'format_html_join' imported but unused
    
  3. 
      
david
  1. Ship It!
  2. 
      
chipx86
Review request changed
Status:
Completed
Change Summary:
Pushed to release-2.5.x (21b882f)