Summary

Refactor config forms LESS to use variables, support empty item lists

Review Request #9074 — Created July 13, 2017 and submitted July 24, 2017, 4:08 p.m.

Information

Owner

brennie

Repository

Djblets

Branch

release-0.10.x

Bugs

Depends On

Blocks

9083

Commit

c19f466...

Reviewers

Groups

djblets

People

Description

This patch refactors the config forms LESS to use defined variables for
colours. These colours were being used in Review Board's account pages
and this change will allow the colours to be imported (instead of the
current hardcoding that occurs).

The CSS for config forms lists has been slightly tweaked so that they
have the same top and bottom border. Previously, there was no bottom
border on the list -- it was just the border-bottom from the last
element in the list, which uses a different colour from the border-top
of the entire list.

Additionally, support has been added for a new
.config-forms-list-empty element that is intended to be a sibling of
the .config-forms-list. It will only be shown when the list has n
children. This is a generally useful pattern for supporting
placeholders that don't have to be dynamically added and removed from
the page. This is a refactor from a pattern I was using in Review
Board.

Testing Done

Tested with an upcoming change for Review Board.

Files

Issues

Description	From	Last Updated
First sentence in the description is a bit confusing. There's also a typo: "improted"	chipx86	July 20, 2017, 1:17 p.m.
Can you add screenshots of how this will look in Review Board, before and after?	chipx86	July 20, 2017, 1:21 p.m.
Alphabetize?	david	July 17, 2017, 2:14 p.m.
Alphabetize?	david	July 17, 2017, 2:14 p.m.
Two border-bottom lines?	david	July 17, 2017, 2:14 p.m.
Alphabetize?	david	July 17, 2017, 2:14 p.m.

flake8 passed.

JSHint passed.

Diff:

Revision 2 (+38 -9)

Show changes

djblets/static/djblets/css/config-forms.less

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Summary:

-	Refactor config forms LESS to use variables for colours
+	Refactor config forms LESS to use variables, support empty item lists

djblets/static/djblets/css/config-forms.less (Diff revision 2)
The issue has been resolved. Show all issues
```
Alphabetize?
```
djblets/static/djblets/css/config-forms.less (Diff revision 2)
The issue has been resolved. Show all issues
```
Alphabetize?
```
djblets/static/djblets/css/config-forms.less (Diff revision 2)
The issue has been resolved. Show all issues
```
Two border-bottom lines?
```
djblets/static/djblets/css/config-forms.less (Diff revision 2)
The issue has been resolved. Show all issues
```
Alphabetize?
```

Change Summary:

Addressed David's issues

Commit:

+	c19f466af3859e8c1574a0c1c4848df651a628dd

Diff:

Revision 3 (+38 -10)

Show changes

djblets/static/djblets/css/config-forms.less

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Ship it!

```
Ship It!
```

The issue has been resolved. Show all issues

First sentence in the description is a bit confusing. There's also a typo: "improted"

The issue has been resolved. Show all issues

Can you add screenshots of how this will look in Review Board, before and after?

Description:

		This patch refactors the config forms LESS to use defined variables for
~		colours that are being used in Review Board's account pages so they
~		can be improted directly. It also slightly tweaks the CSS so that the
~		config forms lists will have the same top and bottom border.
	~	colours. These colours were being used in Review Board's account pages
	~	and this change will allow the colours to be imported (instead of the
	~	current hardcoding that occurs).

~		It also adds supports for a new `.config-forms-list-empty` element that
~		is intended to be a sibling of the `.config-forms-list`. It will only be
~		shown when the list has no children. This is a generally useful pattern
~		for supporting placeholders that don't have to be dynamically added and
~		removed from the page. This is a refactor from a pattern I was using in
~		Review Board.
	~	The CSS for config forms lists has been slightly tweaked so that they
	~	have the same top and bottom border. Previously, there was no bottom
	~	border on the list -- it was just the `border-bottom` from the last
	~	element in the list, which uses a different colour from the `border-top`
	~	of the entire list.
	~
	+	Additionally, support has been added for a new
	+	`.config-forms-list-empty` element that is intended to be a sibling of
	+	the `.config-forms-list`. It will only be shown when the list has n
	+	children. This is a generally useful pattern for supporting
	+	placeholders that don't have to be dynamically added and removed from
	+	the page. This is a refactor from a pattern I was using in Review
	+	Board.

Added Files:

Ship it!

```
Ship It!
```

Status: Closed (submitted)

Change Summary:

Pushed to release-0.10.x (5d29895)