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

Refactor about:preferences#payments #6009

Merged
merged 3 commits into from
Dec 6, 2016
Merged

Refactor about:preferences#payments #6009

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
21ece29
Refactor about:preferences#payments (part 1)
Dec 3, 2016
9bdb37a
Fix broken tests (selector related)
bsclifton Dec 5, 2016
95c6ddc
Replaced ids with className (for more consistency)
Dec 6, 2016
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
30 changes: 16 additions & 14 deletions js/about/preferences.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -285,7 +285,7 @@ class LedgerTable extends ImmutableComponent {
if (!this.synopsis || !this.synopsis.size) {
return null
}
return <div id='ledgerTable'>
return <div className='ledgerTable'>
<SortableTable
headings={['rank', 'publisher', 'include', 'views', 'timeSpent', 'percentage']}
defaultHeading='rank'
Expand Down Expand Up @@ -339,7 +339,7 @@ class BitcoinDashboard extends ImmutableComponent {
}
get qrcodeOverlayFooter () {
if (coinbaseCountries.indexOf(this.props.ledgerData.get('countryCode')) > -1) {
return <div>
return <div className='qrcodeOverlayFooter'>
<div id='coinbaseLogo' />
<a href='https://itunes.apple.com/us/app/coinbase-bitcoin-wallet/id886427730?mt=8' target='_blank' id='appstoreLogo' />
<a href='https://play.google.com/store/apps/details?id=com.coinbase.android' target='_blank' id='playstoreLogo' />
Expand Down Expand Up @@ -384,19 +384,19 @@ class BitcoinDashboard extends ImmutableComponent {
<div className='settingsPanelDivider'>
<span className='fa fa-credit-card' />
<div className='settingsListTitle' data-l10n-id='moneyAdd' />
<div className='settingsListSubTitle' data-l10n-id='moneyAddSubTitle' />
<div className='settingsListTitle subTitle' data-l10n-id='moneyAddSubTitle' />
</div>
<div className='settingsPanelDivider'>
{this.bitcoinPurchaseButton}
<div className='settingsListSubTitle' data-l10n-id='transferTime' />
<div className='settingsListTitle subTitle' data-l10n-id='transferTime' />
</div>
</div>
} else {
return <div className='panel disabledPanel'>
<div className='settingsPanelDivider'>
<span className='fa fa-credit-card' />
<div className='settingsListTitle' data-l10n-id='moneyAdd' />
<div className='settingsListSubTitle' data-l10n-id='moneyAddSubTitle' />
<div className='settingsListTitle subTitle' data-l10n-id='moneyAddSubTitle' />
</div>
<div className='settingsPanelDivider'>
<div data-l10n-id='coinbaseNotAvailable' />
Expand Down Expand Up @@ -473,7 +473,7 @@ class BitcoinDashboard extends ImmutableComponent {
render () {
window.addEventListener('message', this.onMessage.bind(this), false)
var emptyDialog = true
return <div id='bitcoinDashboard'>
return <div className='bitcoinDashboard'>
{
this.props.bitcoinOverlayVisible
? <ModalOverlay title={'bitcoinBuy'} content={this.bitcoinOverlayContent} customTitleClasses={'coinbaseOverlay'} emptyDialog={emptyDialog} onHide={this.props.hideOverlay.bind(this)} />
Expand All @@ -497,7 +497,7 @@ class BitcoinDashboard extends ImmutableComponent {
<span className='fa fa-bitcoin fa-stack-1x' />
</span>
<div className='settingsListTitle' data-l10n-id='bitcoinAdd' />
<div className='settingsListSubTitle' data-l10n-id='bitcoinAddDescription' />
<div className='settingsListTitle subTitle' data-l10n-id='bitcoinAddDescription' />
</div>
{
this.ledgerData.get('address')
Expand Down Expand Up @@ -908,7 +908,7 @@ class PaymentsTab extends ImmutableComponent {
return null
}

return <div>
return <div className='balance'>
{
!(this.props.ledgerData.get('balance') === undefined || this.props.ledgerData.get('balance') === null)
? <input className='form-control fundsAmount' readOnly value={this.btcToCurrencyString(this.props.ledgerData.get('balance'))} />
Expand All @@ -927,7 +927,7 @@ class PaymentsTab extends ImmutableComponent {
const onButtonClick = this.props.ledgerData.get('created')
? this.props.showOverlay.bind(this, 'addFunds')
: (this.props.ledgerData.get('creating') ? () => {} : this.createWallet)
return <Button l10nId={buttonText} className='primaryButton wideButton' onClick={onButtonClick.bind(this)} disabled={this.props.ledgerData.get('creating')} />
return <Button l10nId={buttonText} className='primaryButton wideButton addFunds' onClick={onButtonClick.bind(this)} disabled={this.props.ledgerData.get('creating')} />
}

get paymentHistoryButton () {
Expand Down Expand Up @@ -1224,7 +1224,7 @@ class PaymentsTab extends ImmutableComponent {
<td>
<SettingsList>
<SettingItem>
<select className='form-control' id='fundsSelectBox'
<select className='form-control fundsSelectBox'
value={getSetting(settings.PAYMENTS_CONTRIBUTION_AMOUNT,
this.props.settings)}
onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.PAYMENTS_CONTRIBUTION_AMOUNT)} >
Expand All @@ -1235,6 +1235,9 @@ class PaymentsTab extends ImmutableComponent {
}
</select>
</SettingItem>
<SettingItem>
{this.paymentHistoryButton}
</SettingItem>
</SettingsList>
</td>
<td>
Expand All @@ -1249,14 +1252,13 @@ class PaymentsTab extends ImmutableComponent {
<SettingItem>
{this.fundsAmount}
{this.walletButton}
{this.paymentHistoryButton}
</SettingItem>
</SettingsList>
</div>
}
</td>
<td>
<div id='walletStatus' data-l10n-id={this.walletStatus.id} data-l10n-args={this.walletStatus.args ? JSON.stringify(this.walletStatus.args) : null} />
<div className='walletStatus' data-l10n-id={this.walletStatus.id} data-l10n-args={this.walletStatus.args ? JSON.stringify(this.walletStatus.args) : null} />
{this.nextReconcileDate}
</td>
</tr>
Expand All @@ -1268,7 +1270,7 @@ class PaymentsTab extends ImmutableComponent {
}

render () {
return <div id='paymentsContainer'>
return <div className='paymentsContainer'>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Note: this change does not affect the UI test.

{
this.enabled && this.props.addFundsOverlayVisible
? <ModalOverlay title={this.overlayTitle} content={this.overlayContent} onHide={this.props.hideOverlay.bind(this, 'addFunds')} />
Expand Down Expand Up @@ -1299,7 +1301,7 @@ class PaymentsTab extends ImmutableComponent {
<span className='sectionTitle'>Brave Payments</span>
<span className='sectionSubTitle'>beta</span>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Removed pull-left as flexbox model was applied.

</div>
<div className='pull-left' id='paymentsSwitches'>
<div className='paymentsSwitches'>
<div className='enablePaymentsSwitch'>
<span data-l10n-id='off' />
<SettingCheckbox dataL10nId='on' prefKey={settings.PAYMENTS_ENABLED} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
Expand Down
2 changes: 1 addition & 1 deletion js/components/modalOverlay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ class ModalOverlay extends ImmutableComponent {
var button = null
var title = null
if (!this.props.emptyDialog) {
close = (this.props.onHide ? <button type='button' className='close pull-right' onClick={this.props.onHide}><span>&times;</span></button> : null)
close = (this.props.onHide ? <button type='button' className='close pull-right' onClick={this.props.onHide} /> : null)
title = (this.props.title ? <div className='sectionTitle' data-l10n-id={this.props.title} /> : null)
}
let customTitleClassesStr = (this.props.customTitleClasses ? this.props.customTitleClasses : '')
Expand Down
Loading