Redesign the look and feel of the dashboard and other datagrids.
Review Request #7216 — Created April 16, 2015 and submitted
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? |
 david
|
|
|
'format_html_join' imported but unused |
 reviewbot
|
|
|
Needs a docstring. |
 brennie
|
|
|
Needs a docstring. |
brennie
|
|
|
Needs a docstring. |
brennie
|
|
|
I'm guessing this change should not be here. |
david
|
|
|
'format_html_join' imported but unused |
reviewbot
|
|
|
Can we either make this slightly larger or slightly darker? It's pretty subtle right now. |
david
|
|
|
'format_html_join' imported but unused |
reviewbot
|
Change Summary:
Added missing docstrings.
Commit: |
|
||||
|---|---|---|---|---|---|
Diff: |
Revision 2 (+397 -114) |
-
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 -
-
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
-
-
-
-
reviewboard/static/rb/css/ui/datagrids.less (Diff revision 2) Can we either make this slightly larger or slightly darker? It's pretty subtle right now.
Change Summary:
- Removed a conditional that shouldn't have been there, probably.
- Made the border for the current page in the paginator stand out more.
- Fixed borders between the Last Updated cells.
Commit: |
|
||||
|---|---|---|---|---|---|
Diff: |
Revision 3 (+394 -114) |
-
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 -
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