Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

Refactor loginRequired.js with Aphrodite and commonForm #8011

Merged
merged 2 commits into from
Apr 7, 2017
Merged

Refactor loginRequired.js with Aphrodite and commonForm #8011

merged 2 commits into from
Apr 7, 2017

Conversation

luixxiul
Copy link
Contributor

@luixxiul luixxiul commented Mar 31, 2017

Refactor loginRequired.js with Aphrodite and commonForm

  • textbox and textbox__outlineable were copied from textbox.js to commonStyles.js

Since FormTextbox cannot be used for the input elements (because the prop ref={} cannot be got), I copied the styles applied for that element and applied to them. See: #7164 (comment)

The labels and input forms were grouped and placed with display:flex and justify-content:space-between. Also the elements inside each wrapper were aligned equally to make the length of the input forms always equal (l10n friendly).

Also colons in the label were removed to make the style consistent.

Closes #8009
Addresses #8010

Auditors:

Test Plan:

  1. Visit http://browserspy.dk/password.php
  2. Click "password-ok.php" link
  3. Make sure you can log in successfully with the given credential
  4. Change the lang setting on about:preferences
  5. Try the same steps above and make sure the length of the input forms is equal
  • Submitted a ticket for my issue if one did not already exist.
  • Used Github auto-closing keywords in the commit message.
  • Added/updated tests for this change (for new code or code which already has tests).
  • Ran git rebase -i to squash commits (if needed).

@luixxiul
Copy link
Contributor Author

luixxiul commented Mar 31, 2017

From:
screenshot 2017-04-01 2 48 10

To:
screenshot 2017-04-01 4 17 53

- textbox and textbox__outlineable were copied from textbox.js to commonStyles.js

Since FormTextbox cannot be used for the input elements, I copied the styles applied for that element and applied to them. See: #7164 (comment)

The labels and input forms were grouped and placed with display:flex and justify-content:space-between. Also the elements inside each wrapper were aligned equally to make the length of the input forms always equal (l10n friendly).

Also colons in the label were removed to make the style consistent.

Closes #8009
Addresses #8010

Auditors:

Test Plan:
1. Visit http://browserspy.dk/password.php
2. Click "password-ok.php" link
3. Make sure you can log in successfully with the given credential
4. Change the lang setting on about:preferences
5. Try the same steps above and make sure the length of the input forms is equal
Also:
- Replaced aphrodite with aphrodite/no-important on textbox.js
- Moved the styles from loginRequired.js to commonForm.js

Auditors:

Test Plan: n/a
@luixxiul luixxiul changed the base branch from master to refactoring-aphrodite April 6, 2017 09:19
@luixxiul luixxiul requested a review from NejcZdovc April 6, 2017 15:30
@luixxiul
Copy link
Contributor Author

luixxiul commented Apr 7, 2017

@NejcZdovc would you mind reviewing the PR when you have some time? There are several PRs dependent on this one.

As I will push the PR once again to the master once everything which should include commonForm is refactored (to avoid style inconsistency over the releases), you would not need to be so strict. Thanks!

@NejcZdovc
Copy link
Contributor

@luixxiul sure, will review it in couple of hours

Copy link
Contributor

@NejcZdovc NejcZdovc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

<Button l10nId='ok' className='primaryButton' onClick={this.onSave.bind(this)} />
{
!this.isFolder
? <div id='loginInput' className={css(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need this ID?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not quite sure. We could remove them later if we would.

@bsclifton
Copy link
Member

This looks great! Awesome job, @luixxiul! すごい!!! 😄

@luixxiul
Copy link
Contributor Author

luixxiul commented Apr 8, 2017

@bsclifton Arigato!!

@luixxiul
Copy link
Contributor Author

luixxiul commented Apr 8, 2017

Note: this change is not yet available on master. I will push a PR to the master once every change which commonForm requires are made on refactoring-aphrodite (to avoid style inconsistency over the releases).

@luixxiul luixxiul deleted the loginRequired-refactoring branch April 8, 2017 04:22
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants