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

Use <SettingTextbox> for the textbox on the dialog of enabling Sync #7164

Merged
merged 2 commits into from
Feb 23, 2017
Merged

Use <SettingTextbox> for the textbox on the dialog of enabling Sync #7164

merged 2 commits into from
Feb 23, 2017

Conversation

luixxiul
Copy link
Contributor

@luixxiul luixxiul commented Feb 10, 2017

For #7152

Based on #6882 (comment)

Auditors: @ayumi @bsclifton

Test Plan: n/a

@luixxiul
Copy link
Contributor Author

luixxiul commented Feb 10, 2017

The change will make the input form into:

screenshot 2017-02-10 21 14 39

@luixxiul luixxiul requested review from ayumi and bsclifton February 10, 2017 13:31
@@ -1589,9 +1589,7 @@ table.sortableTable {
.setupContent {
margin: 1em 0;
}
.deviceNameInput {
width: 50%;
Copy link
Contributor Author

@luixxiul luixxiul Feb 10, 2017

Choose a reason for hiding this comment

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

Please let me know if this should not be removed. <SettingTextbox> has its own width.

@@ -117,7 +118,9 @@ class SyncTab extends ImmutableComponent {
: getSetting(settings.SYNC_DEVICE_NAME, this.props.settings)
return <SettingItem>
<span data-l10n-id='syncDeviceNameInput' />
<input className='deviceNameInput formControl' spellCheck='false'
<SettingTextbox
Copy link
Contributor

Choose a reason for hiding this comment

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

Earlier I tried to use a Textbox however I couldn't get the prop ref={} to work so the input didn't work[0]. I gave up and used a standard input.
This branch doesn't seem to set the device name either.
[0] Maybe this: https://facebook.github.io/react/docs/refs-and-the-dom.html

Test Plan:

  • Clear profile
  • Enable sync and name the device
  • Observe terminal for the device name– should not be "browser-laptop"

Also tested by: yarn test -- --grep='"^Sync Panel"'

less/forms.less Outdated
@@ -766,6 +766,7 @@ select {
}

// From commonStyles.js
// TODO: remove this after input element in addOverlayContent on syncTab.js is replaced with the new textbox control in Aphrodite
Copy link
Contributor

Choose a reason for hiding this comment

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

💯

@bsclifton bsclifton changed the base branch from feature/syncing-styling to master February 23, 2017 17:36
Copy link
Member

@bsclifton bsclifton left a comment

Choose a reason for hiding this comment

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

++!

@bsclifton bsclifton merged commit 8b5b7c1 into brave:master Feb 23, 2017
@ayumi
Copy link
Contributor

ayumi commented Feb 23, 2017

@bsclifton

Hmm, I think as per earlier #7164 (comment) this patch breaks naming devices.

The relevant failing test is:

npm run test -- --grep='"^Sync Panel sync setup sync profile"'

@ayumi
Copy link
Contributor

ayumi commented Feb 23, 2017

I've reverted this and created #7360 to track the issue.

@luixxiul luixxiul deleted the sync-styling-aphrodite branch February 23, 2017 19:33
luixxiul pushed a commit that referenced this pull request Apr 23, 2017
- 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
@luixxiul luixxiul mentioned this pull request Oct 3, 2017
8 tasks
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.

3 participants