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

Syncing styling #7152

Merged
merged 1 commit into from
Feb 10, 2017
Merged

Syncing styling #7152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion app/extensions/brave/locales/en-US/preferences.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ syncTitleMessage=Sync encrypted browser data between your devices securely and p
syncEnable=Sync this device
syncData=Sync Data
syncDataMessage=Sync the following data from this device:
syncDeviceName=Device name
syncBookmarks=Bookmarks
syncHistory=Browsing history
syncSiteSettings=Saved site settings
Expand All @@ -44,7 +45,7 @@ syncHideQR=Hide QR code
syncNewDevice3=If asks you to enter code words, type in the words below.
syncShowPassphrase=Show secret code words. (Do not share!)
syncHidePassphrase=Hide code words
syncDeviceName=Enter an optional name for this device:
syncDeviceNameInput=Enter an optional name for this device:
syncCreate=Set up sync
syncEnterPassphrase=Enter your sync code words:
accountBalance=account balance
Expand Down
78 changes: 49 additions & 29 deletions app/renderer/components/preferences/syncTab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const niceware = require('niceware')
// Components
const ModalOverlay = require('../../../../js/components/modalOverlay')
const Button = require('../../../../js/components/button')
const {DeviceNameTextbox} = require('../textbox')
const {SettingsList, SettingItem} = require('../settings')

const aboutActions = require('../../../../js/about/aboutActions')
const getSetting = require('../../../../js/settings').getSetting
Expand All @@ -35,19 +35,28 @@ class SyncTab extends ImmutableComponent {

get setupContent () {
// displayed before a sync userId has been created
return <div>
return <div className='setupContent'>
<Button l10nId='syncStart' className='primaryButton' onClick={this.props.showOverlay.bind(this, 'syncStart')} />
<Button l10nId='syncAdd' className='whiteButton' onClick={this.props.showOverlay.bind(this, 'syncAdd')} />
</div>
}

get postSetupContent () {
const {SettingCheckbox} = require('../../../../js/about/preferences')
return <div><div className='settingsList' id='syncEnableSwitch'>
<SettingCheckbox dataL10nId='syncEnable' prefKey={settings.SYNC_ENABLED} settings={this.props.settings} onChangeSetting={this.toggleSync} />
</div>
<Button l10nId='syncNewDevice' className='whiteButton syncNewDeviceButton' onClick={this.props.showOverlay.bind(this, 'syncNewDevice')} />
</div>
return <SettingsList>
<div className='device'>
<SettingCheckbox dataL10nId='syncEnable' id='syncEnableSwitch' prefKey={settings.SYNC_ENABLED} settings={this.props.settings} onChangeSetting={this.toggleSync} />
<div>
<span className='syncDeviceLabel' data-l10n-id='syncDeviceName' />
<div className='deviceName'>
{getSetting(settings.SYNC_DEVICE_NAME, this.props.settings)}
</div>
</div>
</div>
<SettingItem>
<Button l10nId='syncNewDevice' className='whiteButton' onClick={this.props.showOverlay.bind(this, 'syncNewDevice')} />
</SettingItem>
</SettingsList>
}

get qrcodeContent () {
Expand All @@ -56,7 +65,7 @@ class SyncTab extends ImmutableComponent {
}
return this.props.syncQRVisible
? <div>
<div><Button l10nId='syncHideQR' className='whiteButton syncToggleButton' onClick={this.props.hideQR} /></div>
<div><Button l10nId='syncHideQR' className='whiteButton wideButton syncToggleButton' onClick={this.props.hideQR} /></div>
Copy link
Contributor

@luixxiul luixxiul Feb 10, 2017 •
edited
Loading

Choose a reason for hiding this comment

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

Do we need wideButton for this? the min-width of the buttons has been set globally with #6387

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I applied this class as a hack to make the "button pressed / secret visible" state have a larger button. wideButton might be inappropriate so I can explicitly set a width for these buttons.

<img id='syncQR' title='Brave sync QR code' src={this.props.syncData.get('seedQr')} />
</div>
: <Button l10nId='syncShowQR' className='whiteButton syncToggleButton' onClick={this.props.showQR} />
Expand All @@ -76,7 +85,7 @@ class SyncTab extends ImmutableComponent {
]
return this.props.syncPassphraseVisible
? <div>
<Button l10nId='syncHidePassphrase' className='whiteButton syncToggleButton' onClick={this.props.hidePassphrase} />
<Button l10nId='syncHidePassphrase' className='whiteButton wideButton syncToggleButton' onClick={this.props.hidePassphrase} />
Copy link
Contributor

Choose a reason for hiding this comment

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

Ditto

<pre id='syncPassphrase'>{words.join('\n')}</pre>
</div>
: <Button l10nId='syncShowPassphrase' className='whiteButton syncToggleButton' onClick={this.props.showPassphrase} />
Expand Down Expand Up @@ -106,34 +115,45 @@ class SyncTab extends ImmutableComponent {
const placeholder = process.platform
? [(osName[process.platform] || process.platform), 'Laptop'].join(' ')
: getSetting(settings.SYNC_DEVICE_NAME, this.props.settings)
return <div>
<span data-l10n-id='syncDeviceName' />
<DeviceNameTextbox spellCheck='false'
return <SettingItem>
<span data-l10n-id='syncDeviceNameInput' />
<input className='deviceNameInput formControl' spellCheck='false'
ref={(node) => { this.deviceNameInput = node }}
data-isDeviceName
placeholder={placeholder} />
</div>
</SettingItem>
}

get addOverlayContent () {
return <div className='syncOverlay'>
<p data-l10n-id='syncEnterPassphrase' />
<textarea spellCheck='false'
ref={(node) => { this.passphraseInput = node }}
className='form-control' />
<div>{this.deviceNameInputContent}</div>
<Button l10nId='syncCreate' className='primaryButton'
onClick={this.onRestore}
disabled={!!this.passphraseInput} />
<SettingsList>
<SettingItem>
<span data-l10n-id='syncEnterPassphrase' />
<textarea spellCheck='false'
ref={(node) => { this.passphraseInput = node }}
className='form-control' />
</SettingItem>
{this.deviceNameInputContent}
</SettingsList>
</div>
}

get addOverlayFooter () {
return <Button l10nId='syncCreate' className='primaryButton'
onClick={this.onRestore}
disabled={!!this.passphraseInput} />
}

get startOverlayContent () {
return <div className='syncOverlay'>
{this.deviceNameInputContent}
<div>
<Button l10nId='syncCreate' className='primaryButton' onClick={this.onSetup} />
</div>
<SettingsList>
{this.deviceNameInputContent}
</SettingsList>
</div>
}

get startOverlayFooter () {
return <div className='panel'>
<Button l10nId='syncCreate' className='primaryButton' onClick={this.onSetup} />
</div>
}

Expand Down Expand Up @@ -173,20 +193,20 @@ class SyncTab extends ImmutableComponent {

render () {
const {SettingsList, SettingCheckbox} = require('../../../../js/about/preferences')
return <div id='syncContainer'>
return <div className='syncContainer'>
{
this.isSetup && this.props.syncNewDeviceOverlayVisible
? <ModalOverlay title={'syncNewDevice'} content={this.overlayContent} onHide={this.props.hideOverlay.bind(this, 'syncNewDevice')} />
: null
}
{
!this.isSetup && this.props.syncStartOverlayVisible
? <ModalOverlay title={'syncStart'} content={this.startOverlayContent} onHide={this.props.hideOverlay.bind(this, 'syncStart')} />
? <ModalOverlay title={'syncStart'} content={this.startOverlayContent} footer={this.startOverlayFooter} onHide={this.props.hideOverlay.bind(this, 'syncStart')} />
: null
}
{
!this.isSetup && this.props.syncAddOverlayVisible
? <ModalOverlay title={'syncAdd'} content={this.addOverlayContent} onHide={this.props.hideOverlay.bind(this, 'syncAdd')} />
? <ModalOverlay title={'syncAdd'} content={this.addOverlayContent} footer={this.addOverlayFooter} onHide={this.props.hideOverlay.bind(this, 'syncAdd')} />
: null
}
<div className='sectionTitle' data-l10n-id='syncTitle' />
Expand Down
14 changes: 1 addition & 13 deletions app/renderer/components/textbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@ class Textbox extends ImmutableComponent {
styles.textbox,
this.props['data-isSettings'] && styles.isSettings,
(this.props.readonly || this.props.readOnly) ? styles.readOnly : styles.outlineable,
this.props['data-isRecoveryKeyTextbox'] && styles.recoveryKeys,
this.props['data-isDeviceName'] && styles.deviceName
this.props['data-isRecoveryKeyTextbox'] && styles.recoveryKeys
)

return <input type='text' className={className} {...this.props} />
Expand All @@ -41,12 +40,6 @@ class RecoveryKeyTextbox extends ImmutableComponent {
}
}

class DeviceNameTextbox extends ImmutableComponent {
render () {
return <FormTextbox data-isDeviceName='true' {...this.props} />
}
}

const styles = StyleSheet.create({
'textbox': {
boxSizing: 'border-box',
Expand All @@ -70,17 +63,12 @@ const styles = StyleSheet.create({
},
'recoveryKeys': {
marginBottom: '20px'
},
'deviceName': {
marginLeft: '0px',
marginBottom: '40px'
}
})

module.exports = {
Textbox,
FormTextbox,
SettingTextbox,
DeviceNameTextbox,
RecoveryKeyTextbox
}
100 changes: 57 additions & 43 deletions less/about/preferences.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -276,10 +276,6 @@ a {
margin: 1.2em 2px 7px;
}

.syncTitleMessage {
display: inline-block;
}

.settingsList .subtext {
&.flashText {
margin-top: 0;
Expand Down Expand Up @@ -1561,56 +1557,74 @@ table.sortableTable {
}
}

.syncOverlay {
input {
margin-left: 20px;
display: inline;
.syncContainer {
.modal {
textarea {
width: 80%;
height: 100px;
font-size: 18px;
font-family: monospace;
}
li {
margin: 1em;
}
.settingsListContainer {
margin-bottom: 1.5em;
}
.dialog-body, .dialog-footer {
padding-left: 50px;
padding-right: 50px;
}
.dialog-footer {
margin-top: 1.5em;
padding-bottom: 2em;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
}
textarea {
width: 80%;
height: 100px;
font-size: 18px;
font-family: monospace;
.browserButton + .browserButton {
margin-left: 0.75em;
Copy link
Contributor

@luixxiul luixxiul Feb 10, 2017 •
edited
Loading

Choose a reason for hiding this comment

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

I think this should be already covered with

browser-laptop/less/button.less

Line 52 in 2aa39bb

& + .browserButton {

Copy link
Contributor Author

Choose a reason for hiding this comment

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

5px was insufficient :)

Copy link
Contributor

Choose a reason for hiding this comment

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

Surely!

}
padding-left: 50px;
padding-bottom: 50px;
div, input, textarea, span {
margin-top: 20px;
.setupContent {
margin: 1em 0;
}
li {
margin: 10px;
.deviceNameInput {
width: 50%;
}
.device {
background-color: @lightGray;
border-radius: @borderRadiusUIbox;
color: @mediumGray;
display: table;
line-height: 1.8em;
margin: 1em 0;
padding: 0.5em 1em;
width: 500px;
& > div, .settingItem {
display: table-cell;
vertical-align: middle;
}
#syncEnableSwitch {
width: 40%;
}
.syncDeviceLabel {
font-size: 0.9em;
margin: 0;
}
.deviceName {
margin-bottom: 0.5em;
}
}
}

#syncEnableSwitch {
display: inline-block;
margin-right: 20px;
margin-top: 20px;
}

.syncNewDeviceButton {
margin-right: 20px;
}

.syncWarning {
color: #ff0400;
margin-top: 20px;
font-weight: 500;
}

.syncToggleButton {
margin-bottom: 10px;
}

#syncPassphrase {
margin-top: 20px;
margin-left: 20px;
margin: 1em;
color: #ff0400;
font-size: 15px;
font-family: monospace;
}

#syncQR {
margin-top: 20px;
margin-left: 20px;
margin: 1em;
}
8 changes: 7 additions & 1 deletion less/button.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,9 +144,15 @@ span.buttonSeparator {
.prefBody {
.settingsList > .settingItem + button,
.settingItem > span + button,
.paymentsContainer button:not(.close) {
.paymentsContainer button:not(.close),
.syncContainer button {
font-size: 0.9rem;
padding: 8px 20px;
}

.settingsList > .settingItem + button,
.settingItem > span + button,
.paymentsContainer button:not(.close) {
margin: 0;
}

Expand Down
16 changes: 16 additions & 0 deletions less/forms.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -764,3 +764,19 @@ select {
}
}
}

// From commonStyles.js
.formControl {
background: white;
border: solid 1px @black10;
border-radius: @borderRadius;
box-shadow: inset 0 1px 1px @black10;
box-sizing: border-box;
display: block;
color: @darkGray;
font-size: 14.5px;
height: 2.25em;
outline: none;
padding: 0.4em;
width: 100%;
}
2 changes: 1 addition & 1 deletion test/lib/selectors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ module.exports = {
syncTab: '[data-l10n-id="sync"]',
doneButton: '[data-l10n-id="done"]',
homepageInput: '[data-l10n-id="homepageInput"]',
syncSwitch: '#syncContainer .switchBackground',
syncSwitch: '.syncContainer .switchBackground',
walletSwitch: '.enablePaymentsSwitch .switchBackground',
addFundsButton: '.addFunds',
advancedSettings: '.advancedSettings',
Expand Down