Summary

Rename the admin widget classes.

Review Request #10414 — Created Feb. 18, 2019 and submitted March 22, 2019, 3:39 p.m.

Information

Owner

david

Repository

Review Board

Branch

release-4.0.x

Bugs

Depends On

Reviewers

Groups

reviewboard

People

Description

This change renames the admin widget classes to conform to our new
standard for CSS, and reorganizes a lot of the CSS to match. There's
only one small visual change, switching the background of the "Add Small
Widgets" button to be white to match the appearance of the "Add Large
Widgets" button.

Testing Done

Verified the appearance of the admin dashboard.

Commits

Summary	ID
Rename the admin widget classes. This change renames the admin widget classes to conform to our new standard for CSS, and reorganizes a lot of the CSS to match. There's only one small visual change, switching the background of the "Add Small Widgets" button to be white to match the appearance of the "Add Large Widgets" button. Testing done: Verified the appearance of the admin dashboard.	50b306ebf1f18ccf1cf0ac35271f27e504cf6088

Issues

Description	From	Last Updated
Typo in the description: "teh"	chipx86	Feb. 18, 2019, 2:22 p.m.
Can you document these and the other elements, the way I did with the new CSS I've added? I want …	chipx86	Feb. 18, 2019, 4:11 p.m.
If this is meant to be a fully-namespaced modifier, it should be &--is-large.	chipx86	Feb. 18, 2019, 2:21 p.m.
Modifiers should have a - prefix, so -is-collapsable	chipx86	Feb. 18, 2019, 2:20 p.m.
Same here.	chipx86	Feb. 18, 2019, 2:20 p.m.
&.-has-actions	chipx86	Feb. 18, 2019, 2:20 p.m.
-is-hidden	chipx86	Feb. 18, 2019, 2:20 p.m.
-is-hidden Can you fix up the quoting style of affected lines while you're in here?	chipx86	Feb. 18, 2019, 2:20 p.m.
Missing second backtick on the end of -is-small.	chipx86	March 22, 2019, 10:33 a.m.
These should be defined in a Modifiers section, like: /** * ... * * Modifiers: * -is-collapsable: * description... * …	chipx86	March 20, 2019, 12:10 p.m.
Modifiers are standalone classes. They should be -is-large, rather than rb-c-admin-widget--is-large. Original BEM uses the latter form, but we're not …	chipx86	March 20, 2019, 12:10 p.m.

flake8 passed.

JSHint passed.

Summary:

-	Renaming the admin widget classes.
+	Rename the admin widget classes.

The issue has been resolved. Show all issues
```
Typo in the description: "teh"
```

reviewboard/static/rb/css/pages/admin-dashboard.less (Diff revision 1)

The issue has been resolved. Show all issues

Can you document these and the other elements, the way I did with the new CSS I've added? I want to attempt to have a consistently-document set of stylesheets going forward.

david Feb. 18, 2019, 2:22 p.m.

I figure there's going to be a fair amount of surgery here when we do the actual redesign so I'd prefer to wait on that.

chipx86 Feb. 18, 2019, 2:23 p.m.

There might be, but it's still helpful for that, so it's more clear when doing the work what things were used for and how they were structured before, and seeing how that changes.

reviewboard/static/rb/css/pages/admin-dashboard.less (Diff revision 1)
The issue has been resolved. Show all issues
```
If this is meant to be a fully-namespaced modifier, it should be &--is-large.
```
reviewboard/static/rb/css/pages/admin-dashboard.less (Diff revision 1)
The issue has been resolved. Show all issues
```
Modifiers should have a - prefix, so -is-collapsable
```
reviewboard/static/rb/css/pages/admin-dashboard.less (Diff revision 1)
The issue has been resolved. Show all issues
```
Same here.
```
reviewboard/static/rb/css/pages/admin-dashboard.less (Diff revision 1)
The issue has been resolved. Show all issues
```
&.-has-actions
```
reviewboard/static/rb/js/admin/admin.js (Diff revision 1)
The issue has been resolved. Show all issues
```
-is-hidden
```
reviewboard/static/rb/js/admin/admin.js (Diff revision 1)
The issue has been resolved. Show all issues
```
-is-hidden
Can you fix up the quoting style of affected lines while you're in here?
```

Description:

		This change renames the admin widget classes to conform to our new
		standard for CSS, and reorganizes a lot of the CSS to match. There's
		only one small visual change, switching the background of the "Add Small
~		Widgets" button to be white to match the appearance of teh "Add Large
	~	Widgets" button to be white to match the appearance of the "Add Large
		Widgets" button.

Commits:

	Summary	ID
	Renaming the admin widget classes. This change renames the admin widget classes to conform to our new standard for CSS, and reorganizes a lot of the CSS to match. There's only one small visual change, switching the background of the "Add Small Widgets" button to be white to match the appearance of teh "Add Large Widgets" button. Testing done: Verified the appearance of the admin dashboard.	8c4c222fe133d334fe0c2167222adf9756212b14
	Rename the admin widget classes. This change renames the admin widget classes to conform to our new standard for CSS, and reorganizes a lot of the CSS to match. There's only one small visual change, switching the background of the "Add Small Widgets" button to be white to match the appearance of the "Add Large Widgets" button. Testing done: Verified the appearance of the admin dashboard.	7f0a0270f75ff878283f73453f5d1a7d8ef8c39f

Diff:

Revision 2 (+456 -462)

Show changes

	reviewboard/static/rb/css/pages/admin-dashboard.less
	reviewboard/static/rb/js/admin/admin.js
	reviewboard/templates/admin/admin_widget.html
	reviewboard/templates/admin/dashboard.html

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Commits:

	Summary	ID
	Rename the admin widget classes. This change renames the admin widget classes to conform to our new standard for CSS, and reorganizes a lot of the CSS to match. There's only one small visual change, switching the background of the "Add Small Widgets" button to be white to match the appearance of the "Add Large Widgets" button. Testing done: Verified the appearance of the admin dashboard.	7f0a0270f75ff878283f73453f5d1a7d8ef8c39f
	Rename the admin widget classes. This change renames the admin widget classes to conform to our new standard for CSS, and reorganizes a lot of the CSS to match. There's only one small visual change, switching the background of the "Add Small Widgets" button to be white to match the appearance of the "Add Large Widgets" button. Testing done: Verified the appearance of the admin dashboard.	b5fe6c96d6521f5108e4ae00ec23bf6068b39ab3

Diff:

Revision 3 (+492 -462)

Show changes

	reviewboard/static/rb/css/pages/admin-dashboard.less
	reviewboard/static/rb/js/admin/admin.js
	reviewboard/templates/admin/admin_widget.html
	reviewboard/templates/admin/dashboard.html

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

reviewboard/static/rb/css/pages/admin-dashboard.less (Diff revision 3)

The issue has been resolved. Show all issues

These should be defined in a Modifiers section, like:

/**
 * ...
 *
 * Modifiers:
 *     -is-collapsable:
 *         description...
 *
 *     -is-hidden:
 *         description...
 */

reviewboard/static/rb/css/pages/admin-dashboard.less (Diff revision 3)

The issue has been resolved. Show all issues

Modifiers are standalone classes. They should be -is-large, rather than rb-c-admin-widget--is-large. Original BEM uses the latter form, but we're not (many other projects also don't, as it's not often necessary to be that strict).

This applies to other modifier classes and the docs as well.

Commits:

	Summary	ID
	Rename the admin widget classes. This change renames the admin widget classes to conform to our new standard for CSS, and reorganizes a lot of the CSS to match. There's only one small visual change, switching the background of the "Add Small Widgets" button to be white to match the appearance of the "Add Large Widgets" button. Testing done: Verified the appearance of the admin dashboard.	b5fe6c96d6521f5108e4ae00ec23bf6068b39ab3
	Rename the admin widget classes. This change renames the admin widget classes to conform to our new standard for CSS, and reorganizes a lot of the CSS to match. There's only one small visual change, switching the background of the "Add Small Widgets" button to be white to match the appearance of the "Add Large Widgets" button. Testing done: Verified the appearance of the admin dashboard.	50b306ebf1f18ccf1cf0ac35271f27e504cf6088

Diff:

Revision 4 (+510 -462)

Show changes

	reviewboard/static/rb/css/pages/admin-dashboard.less
	reviewboard/static/rb/js/admin/admin.js
	reviewboard/templates/admin/admin_widget.html
	reviewboard/templates/admin/dashboard.html

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Ship it!

reviewboard/static/rb/css/pages/admin-dashboard.less (Diff revisions 3 - 4)
The issue has been resolved. Show all issues
```
Missing second backtick on the end of -is-small.
```

Status: Closed (submitted)

Change Summary:

Pushed to release-4.0.x (d037d8f)