Improving Admin UI - New Styles, Dashboard, Sidebar and Branding header
Review Request #2449 — Created July 1, 2011 and submitted
Improving the Admin UI GitHub branch location (with binaries): https://github.com/vladikoff/reviewboard/tree/Improving-AdminUI2-stage Dependency: https://github.com/vladikoff/djblets/commits/cache-key-method or http://reviews.reviewboard.org/r/2515/
Cross-browser tested, Different Screen Resolutions, Python 2.4 - 2.7
Description | From | Last Updated |
---|---|---|
These changes should be pulled out into a separate review request. |
david | |
django and djblets are both 3rd-party modules and should be grouped together. |
david | |
These should be prefixed with reviewboard. |
david | |
There's some alignment issues here. It looks like several of these are indented only 3 spaces instead of 4. |
david | |
Same here re: MEDIA_URL and MEDIA_SERIAL |
david | |
Remove this line. |
david | |
Remove this line. |
david | |
These should be prefixed with the reviewboard. module. |
david | |
This should be a docstring. |
david | |
This can be made a lot more pythonic: for i in range(day_total): counter_date = start_date + timedelta(days=i) dates_in_days.append(counter_date) req_array.append([ request_objects.filter(time_added__lte=counter_date).count(), … |
david | |
Please include "TODO" in this comment. |
david | |
You can initialize these directly: requests = { 'all_requests': review_requests, 'requests_by_day': req_array, 'change_descriptions': change_desc_unique, } ... |
david | |
You can initialize this all at once. |
david | |
The items in this list would be better as tuples instead of lists: ('admin/db/auth/user/add/' _('Add New')), also, add a space … |
david | |
This can be initialized in place. I see more below. Can you go through and change everywhere that you're creating … |
david | |
Space between // and the comment text. Same below. |
david | |
Indentation is kind of funky here. |
david | |
Is this always going to be seconds? That seems like a kind of crummy unit to use for uptime. |
david | |
These should all have ?{{MEDIA_SERIAL}} at the end. |
david | |
Please change this to be "Review Request Status" |
david | |
Can you include an explanation for why this is commented out? |
david | |
These need to be placed in alphabetical ordering. django.contrib... should be before django.core... |
mike_conley | |
Should be in alphabetical ordering - ie, at the top of the from imports. |
mike_conley | |
Straight imports like this should be put before from imports. Also, are you sure you need to import all of … |
mike_conley | |
I believe this needs to be indented four spaces. |
mike_conley | |
I believe this should go with the group of "from" imports below this block. |
mike_conley | |
one space after = |
mike_conley | |
No linebreak here |
mike_conley | |
A linebreak before this if block |
mike_conley | |
This might look better with the line break after "(activity_data),", as opposed to after "HttpResponse(" |
mike_conley | |
Like above, I think this from import should join the group of from imports below. |
mike_conley | |
I believe each import should be on it's own and in alphabetical, like: import datetime import time |
mike_conley | |
Need to be put in alphabetical ordering. |
mike_conley | |
I believe we tend to format imports so that the imported objects are tabbed to the same point - see … |
mike_conley | |
Another linebreak before the start of this function. |
mike_conley | |
This is a little difficult to read. Is it possible to indent in a way that makes it easier to … |
mike_conley | |
Should be 4 spaces indentation, and spaces after the commas. |
mike_conley | |
space before the + |
mike_conley | |
Another linebreak before this function definition |
mike_conley | |
Space before the + |
mike_conley | |
Another linebreak before this function definition. |
mike_conley | |
No linebreak required here. |
mike_conley | |
A space before the + |
mike_conley | |
Another linebreak before this function definition. |
mike_conley | |
No linebreak required here. |
mike_conley | |
Another linebreak before this function definition. |
mike_conley | |
Space after the commas. |
mike_conley | |
Another linebreak before this function definition. Same applies to the rest of this review request, so I won't mention it … |
mike_conley | |
Space before + sign |
mike_conley | |
Should this be a constant declared somewhere? |
mike_conley | |
no linebreak here. |
mike_conley | |
Only need a single linebreak here |
mike_conley | |
No linebreak here |
mike_conley | |
Space after # |
mike_conley | |
Is this line <= 80 chars? |
mike_conley | |
Only one space before "in", and there should be a linebreak before this for block. |
mike_conley | |
Hm, instead of all this "idx" work, I'd prefer: for unique_desc in change_desc_unique: unique_desc_array = [] unique_desc_array.append(...) unique_desc_array.append(...) change_desc_array.append(unique_desc_array). Or, … |
mike_conley | |
Only one space before in, and a linebreak before the for block. Same for below. |
mike_conley | |
Space after # |
mike_conley | |
Spaces after commas. |
mike_conley | |
The CSS params should be in alphabetical order, so: display: inline; padding: 0; position: relative; vertical-align: middle; Same applies below. |
mike_conley | |
Two space indentation here. |
mike_conley | |
Two space indentation. |
mike_conley | |
Two space indentation |
mike_conley | |
Two space indentation. Other instances below. |
mike_conley | |
Four space indentation. |
mike_conley | |
Space after , |
mike_conley | |
var before widgetBoxId |
mike_conley | |
Maybe we can move the {% if widget_icon %} just above , and the {% endif %} right below, just … |
mike_conley | |
No space before this tag. |
mike_conley | |
Needs to be in alphabetical order. |
mike_conley | |
No space just before this |
mike_conley | |
No linebreak required here. |
mike_conley | |
Alphabetical order, please |
mike_conley | |
Proper indentation for the and tags please. More instances below. |
mike_conley | |
Can these if / else / endifs in this section get formatted to make it clearer what's within the code … |
mike_conley | |
Is that four spaces for indenting? Not sure, but it seems like it's a bit more. |
mike_conley | |
This line could probably be made clearer: {% trans... %} |
mike_conley | |
Four spaces for indentation. |
mike_conley | |
No spaces on either side of 'reload' |
mike_conley | |
No linebreak between these. |
mike_conley | |
Can this be split up into more than 1 line for clarity? |
mike_conley | |
No space before the {% |
mike_conley | |
I think this block of HTML can be un-indented a few spaces... |
mike_conley | |
Two spaces, not one before these tags. |
mike_conley | |
Needs to be properly indented. |
mike_conley | |
No space before the { |
mike_conley | |
Should be "var y..." |
mike_conley | |
Should be "var input_range_end", and the code in this function needs to be properly indented. |
mike_conley | |
"Comments", "Reviews", etc, should be in translate functions. |
mike_conley | |
Imports must be alphabetical. |
chipx86 | |
This must be inside the function, in the form of: def foo(): """One-line summary Further multi-line description. """ code |
chipx86 | |
delete_widget_cache. We don't use CamelCase for functions. |
chipx86 | |
This should probably be a constant defined outside the function. In this case, you'd call it CACHED_WIDGETS. |
chipx86 | |
Space between parameters, after the comma. |
chipx86 | |
Space between parameters, after the comma. Overriding the function is bad. It would need a new name or it'll be … |
chipx86 | |
request is already defined above. |
chipx86 | |
Blank line between these. |
chipx86 | |
request is already defined above. |
chipx86 | |
if ('_popup' not in request.REQUEST or 'pop' not in request.REQUEST): |
chipx86 | |
Indentation is off, and you don't need the \ Why not just provide current_site_config in there? You shouldn't need to … |
chipx86 | |
request is already defined above. |
chipx86 | |
This is sort of weird. Maybe pull this out above and pass in as a var. |
chipx86 | |
request is used above. |
chipx86 | |
Alphabetical order. Can you go through the rest of your change and make sure imports are in alphabetical order? |
chipx86 | |
Two blank lines. |
chipx86 | |
So I'm not sure we should have this here. Instead, these should be webapi resources. |
chipx86 | |
Follow the doc format outlined above. Same with all other instances in your change. |
chipx86 | |
I'd suggest: state = request.GET.get('collapse', None) widget = ... if state and widget: |
chipx86 | |
widget_sets. Can you go through your diff and make sure all variables and functions are in this_style instead? |
chipx86 | |
Two blank lines. Can you go through and make sure that's the case in other files? This applies to anything … |
chipx86 | |
Must be reviewboard.attachments.models, and be grouped with the rest of the imports. Go through the rest of your change and … |
chipx86 | |
No need for the \ on these. It's covered by being in the {} |
chipx86 | |
4 space indentation. |
chipx86 | |
Should tack onto the same var list, instead of adding a new "var" statement. Maybe just "width"? |
chipx86 | |
This can be: $(".admin-extras") .width(widSpace) .masonry("reload"); |
chipx86 | |
Can you explicitly do $(document).ready(..) ? |
chipx86 | |
space indentation. |
chipx86 | |
No spaces inside the () |
chipx86 | |
GETs that modify state are dangerous. Should always be a POST. Ideally, this should use a proper webapi resource class, … |
chipx86 | |
Indentation is off. No need for that empty function. |
chipx86 | |
There's an extra space at the beginning. |
chipx86 | |
Space after "if" |
chipx86 | |
No blank line. |
chipx86 | |
Group this with the CSS above. |
chipx86 | |
Indentation is inconsistent. Make sure your HTML in this change is using 1 space indentation. |
chipx86 | |
You shouldn't embed styles. Instead, use a class and define the rule. |
chipx86 | |
Same here about the style. |
chipx86 | |
$(document).ready() |
chipx86 | |
No space before xaxis. |
chipx86 | |
Only one blank line needed. Indentation is inconsistent. |
chipx86 | |
Really should define #tooltip once so we don't have to fetch it each time. |
chipx86 | |
No blank line. |
chipx86 | |
Indentation is wrong. |
chipx86 | |
Shouldn't embed style. Instead, define a CSS rule. |
chipx86 |
-
This is a pretty great start. After playing with it a bit, I have a few requests: - For the "Server Cache" link, if there's no cache backend configured (or no cache stats), it should link to the page to turn on caching. - It would be nice to have some kind of blank-slate state for when there are no repositories or groups set up. - Some of the links on the left-hand side are broken.
-
-
-
-
{{MEDIA_URL}} and {{MEDIA_SERIAL}} are already injected into template contexts via middleware. You shouldn't need to pass them in yourself.
-
There's some alignment issues here. It looks like several of these are indented only 3 spaces instead of 4.
-
-
-
-
-
-
This can be made a lot more pythonic: for i in range(day_total): counter_date = start_date + timedelta(days=i) dates_in_days.append(counter_date) req_array.append([ request_objects.filter(time_added__lte=counter_date).count(), counter_date, ]) It might also be nice to fill req_array with dicts instead of with lists, so that you can address the data by name instead of [0] and [1].
-
-
You can initialize these directly: requests = { 'all_requests': review_requests, 'requests_by_day': req_array, 'change_descriptions': change_desc_unique, } ...
-
-
The items in this list would be better as tuples instead of lists: ('admin/db/auth/user/add/' _('Add New')), also, add a space after the comma and / at the end of the URLs.
-
This can be initialized in place. I see more below. Can you go through and change everywhere that you're creating a dict like this?
-
-
-
Here's where it might be nice to use a dict: <a href="{{action.url}" class="{{action.class}}">{{action.text}}</a>
-
-
-
-
- Change Summary:
-
Updated based on feedback, this branch is work in progress...
- Diff:
-
Revision 2 (+2419 -110)
- Description:
-
New Dashboard Widgets and Styles
Some stuff is not final, but wanted to post this to get feedback.
You can pull this diff and test it on your local development installation. Included:
Dashboard Resizing New Sidebar Major TODOs:
Fix the header and make it look like the core app Add caching Enhance the 'Review Request' view + + + + GitHub branch location (with binaries): https://github.com/vladikoff/reviewboard/tree/dashboard-june25
- Change Summary:
-
Updated with a new header and more...
- Summary:
-
New Dashboard UpdatesNew Admin Interface (Work in Progress)
- Description:
-
~ New Dashboard Widgets and Styles
~ New Admin styles
~ Some stuff is not final, but wanted to post this to get feedback.
~ - You can pull this diff and test it on your local development installation. - - Included:
- Dashboard Resizing - New Sidebar Major TODOs:
- Fix the header and make it look like the core app Add caching ~ Enhance the 'Review Request' view ~ Improve the 'large-stats' widget. GitHub branch location (with binaries): https://github.com/vladikoff/reviewboard/tree/dashboard-june25
- Testing Done:
-
~ Visual/CSS Testing on Windows, Ubuntu and iOS.
~ Visual/CSS Testing on Windows, Ubuntu and iOS. Some IE Testing, found a few bugs, but overall looks pretty good.
- Diff:
-
Revision 3 (+2683 -247)
- Screenshots:
-
- Change Summary:
-
Updated with the progress
- Diff:
-
Revision 4 (+2903 -251)
- Change Summary:
-
Added fixes and new screenshots.
- Diff:
-
Revision 5 (+2919 -251)
- Screenshots:
-
-
Vlad: Thanks for your work! A few notes before - mostly stylistic. All the best, -Mike
-
-
-
Straight imports like this should be put before from imports. Also, are you sure you need to import all of reviewboard? Or can you from import the individual functions that you need?
-
-
-
-
-
-
This might look better with the line break after "(activity_data),", as opposed to after "HttpResponse("
-
-
-
-
I believe we tend to format imports so that the imported objects are tabbed to the same point - see https://github.com/reviewboard/reviewboard/blob/94e5004b28d4e10d4d774822026b1756ec5e067d/reviewboard/webapi/resources.py#L44 for example.
-
-
This is a little difficult to read. Is it possible to indent in a way that makes it easier to tell that "(now -datetime.timedelta(days=7)..." belongs within users.filter( for "now"?
-
-
-
-
-
-
-
-
-
-
-
-
Another linebreak before this function definition. Same applies to the rest of this review request, so I won't mention it anymore.
-
-
-
-
-
-
-
-
-
Hm, instead of all this "idx" work, I'd prefer: for unique_desc in change_desc_unique: unique_desc_array = [] unique_desc_array.append(...) unique_desc_array.append(...) change_desc_array.append(unique_desc_array). Or, even better, that unique_desc_array maybe should be a tuple. Same applies below.
-
-
-
-
-
The CSS params should be in alphabetical order, so: display: inline; padding: 0; position: relative; vertical-align: middle; Same applies below.
-
-
-
-
-
-
-
-
-
Maybe we can move the {% if widget_icon %} just above <img src...>, and the {% endif %} right below, just to make things a little clearer.
-
-
-
-
-
-
-
Can these if / else / endifs in this section get formatted to make it clearer what's within the code blocks? Like {% if something %} [Block] {% else %} [Block] {% endif %}
-
-
This line could probably be made clearer: <p class="no-result"> {% trans... %} <br /> <a href... </p>
-
-
-
-
-
-
-
-
-
-
-
-
- Change Summary:
-
Updated based on feedback and a couple more fixes.
- Description:
-
New Admin styles
Major TODOs:
Add caching Improve the 'large-stats' widget. ~ GitHub branch location (with binaries): https://github.com/vladikoff/reviewboard/tree/dashboard-june25
~ GitHub branch location (with binaries): https://github.com/vladikoff/reviewboard/tree/dashboard-june25
+ Dependency: https://github.com/vladikoff/djblets/commits/cache-key-method or http://reviews.reviewboard.org/r/2515/ - Diff:
-
Revision 6 (+2947 -267)
- Change Summary:
-
Updates and fixes, space fixes.
- Diff:
-
Revision 7 (+2947 -267)
- Change Summary:
-
Added new branch link with a squashed commit. Cleaned up some formatting and added bug fixes.
- Summary:
-
New Admin Interface (Work in Progress)Improving Admin UI - New Styles, Dashboard, Sidebar and Branding header
- Description:
-
~ New Admin styles
~ Improving the Admin UI
~ Major TODOs:
~ GitHub branch location (with binaries): https://github.com/vladikoff/reviewboard/tree/Improving-AdminUI2-stage
- Add caching - Improve the 'large-stats' widget. - - - - GitHub branch location (with binaries): https://github.com/vladikoff/reviewboard/tree/dashboard-june25
Dependency: https://github.com/vladikoff/djblets/commits/cache-key-method or http://reviews.reviewboard.org/r/2515/ - Testing Done:
-
~ Visual/CSS Testing on Windows, Ubuntu and iOS. Some IE Testing, found a few bugs, but overall looks pretty good.
~ Cross-browser tested,
+ Different Screen Resolutions, + Python 2.4 - 2.7 - Diff:
-
Revision 8 (+3028 -268)
-
So there's a fair bit to fix up still. I'm focusing mostly on the styling, but we're going to have to get some webapi work in for the toggles and stuff, because doing an HTTP GET is unsafe, and we want a standard way of doing all this. There's a lot of style stuff. It boils down to: * Indentation fixes (it's really inconsistent in most files) * Import order/grouping * Variable/function naming (in Python, always use foo_bar instead of fooBar -- note that JavaScript is going to be in fooBar style) * Other various PEP8 style issues. I'll do another pass once this is updated.
-
-
This must be inside the function, in the form of: def foo(): """One-line summary Further multi-line description. """ code
-
-
This should probably be a constant defined outside the function. In this case, you'd call it CACHED_WIDGETS.
-
-
Space between parameters, after the comma. Overriding the function is bad. It would need a new name or it'll be overwritten. If we're really just tying delete_widget_cache to a signal, let's just do that directly.
-
-
-
-
-
Indentation is off, and you don't need the \ Why not just provide current_site_config in there? You shouldn't need to pull these out specifically.
-
-
-
-
Alphabetical order. Can you go through the rest of your change and make sure imports are in alphabetical order?
-
-
-
-
-
widget_sets. Can you go through your diff and make sure all variables and functions are in this_style instead?
-
Two blank lines. Can you go through and make sure that's the case in other files? This applies to anything at indentation level 0.
-
Must be reviewboard.attachments.models, and be grouped with the rest of the imports. Go through the rest of your change and make sure all imports are correct. They should also be grouped into three groups: Python built-in modules, 3rd-party models, and project models. Each with a blank line between.
-
-
-
-
-
-
-
-
GETs that modify state are dangerous. Should always be a POST. Ideally, this should use a proper webapi resource class, and go through datastore.js. The API work I talk about can be done in another change. Let's get the other fixes taken care of.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-