Summary

Update the My Account page to work with modern configforms styling.

Review Request #11332 — Created Dec. 16, 2020 and submitted Dec. 16, 2020, 3:54 p.m.

Information

Owner

chipx86

Repository

Review Board

Branch

release-4.0.x

Bugs

Depends On

Reviewers

Groups

reviewboard

People

Description

Djblets 2.0 switches configform pages over to a cleaner, more modern CSS
Component structure, with improved styling and layout. This definitely
breaks a lot of the My Account page, which this change fixes by
utilizing the new layout constructs and stripping away old hacks.

For the most part, this includes wrapping some elements in a
djblets-l-config-forms-container container element, switching to newer
class names, and removing unwanted styling to allow some of the fixes in
the core classes to work correctly.

There are a couple cases where we've had to alter some CSS to work
correctly in modern configforms. For instance, rb-c-search-input and
rb-c-form-field__errors needed to work around configforms taking
precedence and overriding some styling. These are unfortunate hacks,
currently. The plan, a bit further down the road, is to centralize our
styling in a more common component, but for now this is a necessary
evil.

Testing Done

Unit tests pass.

Tested every subpage and form in the My Account page.

Commits

Summary	ID
Update the My Account page to work with modern configforms styling. The My Account page was written with legacy configforms styling in mind. We worked around layout issues with custom styling, dynamically altering some classes, and trying to make some parts of the UI line up and blend together in somewhat hacky ways. Djblets 2.0 switches configform pages over to a cleaner, more modern CSS Component structure, with improved styling and layout. This definitely breaks a lot of the My Account page, which this change fixes by utilizing the new layout constructs and stripping away old hacks. For the most part, this includes wrapping some elements in a `djblets-l-config-forms-container` container element, switching to newer class names, and removing unwanted styling to allow some of the fixes in the core classes to work correctly. There are a couple cases where we've had to alter some CSS to work correctly in modern configforms. For instance, `rb-c-search-input` and `rb-c-form-field__errors` needed to work around configforms taking precedence and overriding some styling. These are unfortunate hacks, currently. The plan, a bit further down the road, is to centralize our styling in a more common component, but for now this is a necessary evil.	4f136482fec919c7e84d7e2057124e0bccff15db

Summary

Update the My Account page to work with modern configforms styling.

The My Account page was written with legacy configforms styling in mind. We worked around layout issues with custom styling, dynamically altering some classes, and trying to make some parts of the UI line up and blend together in somewhat hacky ways. Djblets 2.0 switches configform pages over to a cleaner, more modern CSS Component structure, with improved styling and layout. This definitely breaks a lot of the My Account page, which this change fixes by utilizing the new layout constructs and stripping away old hacks. For the most part, this includes wrapping some elements in a `djblets-l-config-forms-container` container element, switching to newer class names, and removing unwanted styling to allow some of the fixes in the core classes to work correctly. There are a couple cases where we've had to alter some CSS to work correctly in modern configforms. For instance, `rb-c-search-input` and `rb-c-form-field__errors` needed to work around configforms taking precedence and overriding some styling. These are unfortunate hacks, currently. The plan, a bit further down the road, is to centralize our styling in a more common component, but for now this is a necessary evil.

4f136482fec919c7e84d7e2057124e0bccff15db

Files

Issues

Description	From	Last Updated
<input> is an empty element that doesn't need any kind of closing tag	david	Dec. 16, 2020, 2:39 p.m.
I've had issues with using <div /> outside of XHTML, and using <div></div> would be more consistent with the <span> …	david	Dec. 16, 2020, 2:40 p.m.
Trailing comma?	david	Dec. 16, 2020, 2:40 p.m.

flake8 passed.

JSHint passed.

reviewboard/static/rb/js/accountPrefsPage/views/joinedGroupsView.es6.js (Diff revision 1)
The issue has been resolved. Show all issues
```
<input> is an empty element that doesn't need any kind of closing tag
```
1. chipx86 Dec. 16, 2020, 2:39 p.m.
  Old habits.

reviewboard/static/rb/js/accountPrefsPage/views/joinedGroupsView.es6.js (Diff revision 1)

The issue has been resolved. Show all issues

I've had issues with using <div /> outside of XHTML, and using <div></div> would be more consistent with the <span> tag above.

chipx86 Dec. 16, 2020, 2:39 p.m.

Agreed. It was just there before so I didn't change it.

I think the template/jQuery stuff handles this correctly, but I'll change it.

reviewboard/static/rb/js/accountPrefsPage/views/joinedGroupsView.es6.js (Diff revision 1)
The issue has been resolved. Show all issues
```
Trailing comma?
```

Change Summary:


Cleaned up a couple templates in the Groups page.
Added a missing trailing comma.

Commits:

	Summary	ID
	Update the My Account page to work with modern configforms styling. The My Account page was written with legacy configforms styling in mind. We worked around layout issues with custom styling, dynamically altering some classes, and trying to make some parts of the UI line up and blend together in somewhat hacky ways. Djblets 2.0 switches configform pages over to a cleaner, more modern CSS Component structure, with improved styling and layout. This definitely breaks a lot of the My Account page, which this change fixes by utilizing the new layout constructs and stripping away old hacks. For the most part, this includes wrapping some elements in a `djblets-l-config-forms-container` container element, switching to newer class names, and removing unwanted styling to allow some of the fixes in the core classes to work correctly. There are a couple cases where we've had to alter some CSS to work correctly in modern configforms. For instance, `rb-c-search-input` and `rb-c-form-field__errors` needed to work around configforms taking precedence and overriding some styling. These are unfortunate hacks, currently. The plan, a bit further down the road, is to centralize our styling in a more common component, but for now this is a necessary evil.	07c499c0dda339ec2b3bfe8c6eb45b6bf895bdd9
	Update the My Account page to work with modern configforms styling. The My Account page was written with legacy configforms styling in mind. We worked around layout issues with custom styling, dynamically altering some classes, and trying to make some parts of the UI line up and blend together in somewhat hacky ways. Djblets 2.0 switches configform pages over to a cleaner, more modern CSS Component structure, with improved styling and layout. This definitely breaks a lot of the My Account page, which this change fixes by utilizing the new layout constructs and stripping away old hacks. For the most part, this includes wrapping some elements in a `djblets-l-config-forms-container` container element, switching to newer class names, and removing unwanted styling to allow some of the fixes in the core classes to work correctly. There are a couple cases where we've had to alter some CSS to work correctly in modern configforms. For instance, `rb-c-search-input` and `rb-c-form-field__errors` needed to work around configforms taking precedence and overriding some styling. These are unfortunate hacks, currently. The plan, a bit further down the road, is to centralize our styling in a more common component, but for now this is a necessary evil.	4f136482fec919c7e84d7e2057124e0bccff15db

Branch:

master

release-4.0.x

Diff:

Revision 2 (+142 -282)

Show changes

	reviewboard/static/rb/css/pages/my-account.less
	reviewboard/static/rb/css/ui/forms.less
	reviewboard/static/rb/css/ui/search-field.less
	reviewboard/static/rb/js/accountPrefsPage/views/apiTokensView.es6.js
	reviewboard/static/rb/js/accountPrefsPage/views/joinedGroupsView.es6.js
	reviewboard/static/rb/js/accountPrefsPage/views/oauthApplicationsView.es6.js
	reviewboard/static/rb/js/accountPrefsPage/views/oauthTokensView.es6.js
	reviewboard/templates/accounts/edit_oauth_app.html

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Ship it!

```
Ship It!
```

Status:: Completed
Change Summary:: Pushed to release-4.0.x (a1cff21)