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

Commit

Permalink
refactor payments tab to use react props, modal improvements
Browse files Browse the repository at this point in the history 
Fix #2491
Fix #3132
  • Loading branch information
@diracdeltas
diracdeltas committed Aug 12, 2016
1 parent 68d06b7 commit a58e1d8
Show file tree
Hide file tree
Showing 7 changed files with 95 additions and 75 deletions.
3 changes: 2 additions & 1 deletion docs/state.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -371,7 +371,7 @@ WindowStore
ledgerInfo: {
creating: boolean,
created: boolean,
reconcileStamp: ?,
reconcileStamp: number,
reconcileDelay: ?,
delayStamp: ?,
transactions: Array,
Expand All @@ -381,6 +381,7 @@ WindowStore
amount: number,
currency: string,
paymentURL: string,
paymentIMG: string,
buyURL: string,
bravery: {}
},
Expand Down
121 changes: 73 additions & 48 deletions js/about/preferences.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ class LedgerTableRow extends ImmutableComponent {

return <tr>
<td data-sort={this.padLeft(rank)}>{rank}</td>
<td><a href={publisherURL}><img src={faviconURL} alt={site} /><span>{site}</span></a></td>
<td><a href={publisherURL} target='_blank'><img src={faviconURL} alt={site} /><span>{site}</span></a></td>
<td data-sort={this.padLeft(views)}>{views}</td>
<td data-sort={this.padLeft(duration)}>{this.formattedTime}</td>
<td className='notImplemented'><input type='range' name='points' min='0' max='10'></input></td>
Expand Down Expand Up @@ -199,40 +199,47 @@ class LedgerTable extends ImmutableComponent {
}

class BitcoinDashboard extends ImmutableComponent {
componentWillMount () {
this.setState({ shouldShowOverlay: false })
constructor () {
super()
this.buyCompleted = false
}
get ledgerData () {
return this.props.ledgerData
}
getOverlayContent () {
get overlayContent () {
return <iframe src={this.ledgerData.get('buyURL')} />
}
copyToClipboard (text) {
console.log('Bitcoin Address: ' + text)
document.execCommand('copy')
aboutActions.setClipboard(text)
}
goToURL (url) {
return window.open(url, '_blank')
window.open(url, '_blank')
}
onMessage (event) {
if (event.type === 'message' && (!event.data || !event.data.event || event.data.event !== 'modal_closed')) {
return false
onMessage (e) {
if (!e.data || e.origin !== config.coinbaseOrigin) {
return
}
if (e.data.event === 'modal_closed') {
if (this.buyCompleted) {
this.props.hideParentOverlay()
this.buyCompleted = false
} else {
this.props.hideOverlay()
}
} else if (e.data.event === 'buy_completed') {
this.buyCompleted = true
}
this.hideOverlay()
}
hideOverlay () {
this.setState({ shouldShowOverlay: false })
}
showOverlay (event) {
this.setState({ shouldShowOverlay: true })
}
render () {
var emptyDialog = true
window.addEventListener('message', this.onMessage.bind(this), false)
var emptyDialog = true
// if someone can figure out how to get a localized title attribute (bitcoinCopyAddress) here, please do so!
return <div id='bitcoinDashboard'>
<ModalOverlay title={'bitcoinBuy'} content={this.getOverlayContent()} emptyDialog={emptyDialog} shouldShow={this.state.shouldShowOverlay} onShow={this.showOverlay.bind(this)} onHide={this.hideOverlay.bind(this)} />
{
this.props.bitcoinOverlayVisible
? <ModalOverlay title={'bitcoinBuy'} content={this.overlayContent} emptyDialog={emptyDialog} onHide={this.props.hideOverlay.bind(this)} />
: null
}
<div>{this.ledgerData.get('statusText')}</div>
<div className='board'>
<div className='panel'>
Expand All @@ -241,12 +248,12 @@ class BitcoinDashboard extends ImmutableComponent {
<img src={this.ledgerData.get('paymentIMG')} alt={'Add Bitcoin'} />
</a>
<div className='settingsListCopy alt'><span className='settingsListCopy' onClick={this.copyToClipboard.bind(this, this.ledgerData.get('address') || 'Not available')} title={'Copy Bitcoin address to clipboard'}>{this.ledgerData.get('address')}</span></div>
<button data-l10n-id='bitcoinVisitAccount' onClick={this.goToURL.bind(this, this.ledgerData.get('paymentURL'))} />
<button data-l10n-id='bitcoinVisitAccount' onClick={this.goToURL.bind(this, this.ledgerData.get('paymentURL') || 'about:blank')} />
</div>
<div className='panel'>
<div className='settingsListTitle' data-l10n-id='moneyAdd' />
<div id='coinbaseLogo' />
<button data-l10n-id='add' onClick={this.showOverlay.bind(this)} />
<button data-l10n-id='add' onClick={this.props.showOverlay.bind(this)} />
</div>
</div>
</div>
Expand Down Expand Up @@ -406,46 +413,46 @@ class TabsTab extends ImmutableComponent {
}

class PaymentsTab extends ImmutableComponent {
componentWillMount () {
this.setState({ shouldShowOverlay: false })
}

getTableContent () {
get tableContent () {
return this.props.ledgerData.get('enabled') ? <LedgerTable ledgerData={this.props.ledgerData} /> : <div className='pull-left' data-l10n-id='tableEmptyText' />
}
getButtonContent () {
get buttonContent () {
return this.props.ledgerData.get('buttonLabel') && this.props.ledgerData.get('buttonURL') ? <a className='settingsListTitle pull-right' href={this.props.ledgerData.get('buttonURL')}>{this.props.ledgerData.get('buttonLabel')}</a> : null
}
getNotificationContent () {
get notificationContent () {
return this.props.ledgerData.get('statusText') ? <div className='notificationBar'>
<div className='pull-left'>{this.props.ledgerData.get('statusText')}</div>
</div> : <div className='notificationBar'>
<div className='pull-left' data-l10n-id='notificationEmptyText' />
</div>
}
getOverlayContent () {
return <BitcoinDashboard ledgerData={this.props.ledgerData} />
get overlayContent () {
return <BitcoinDashboard ledgerData={this.props.ledgerData}
bitcoinOverlayVisible={this.props.bitcoinOverlayVisible}
showOverlay={this.props.showOverlay.bind(this, 'bitcoin')}
hideOverlay={this.props.hideOverlay.bind(this, 'bitcoin')}
hideParentOverlay={this.props.hideOverlay.bind(this, 'addFunds')} />
}
getFundingLink () {
return this.props.ledgerData.get('address') ? <div className='settingsListLink pull-right' data-l10n-id='addFundsTitle' value='addFundsTitle' onClick={this.showOverlay.bind(this)} /> : null
}
hideOverlay (event) {
this.setState({ shouldShowOverlay: false })
}
showOverlay (event) {
this.setState({ shouldShowOverlay: true })
get fundingLink () {
return this.props.ledgerData.get('address') ? <div className='settingsListLink pull-right' data-l10n-id='addFundsTitle' value='addFundsTitle' onClick={this.props.showOverlay.bind(this, 'addFunds')} /> : null
}
render () {
return this.props.ledgerData.get('enabled') ? <div id='paymentsContainer'>
<ModalOverlay title={'addFunds'} content={this.getOverlayContent()} shouldShow={this.state.shouldShowOverlay} onShow={this.showOverlay.bind(this)} onHide={this.hideOverlay.bind(this)} />
<div className='titleBar'>
<div className='settingsListTitle pull-left' data-l10n-id='publisherPaymentsTitle' value='publisherPaymentsTitle' />
{this.getButtonContent()}
{this.getFundingLink()}
return this.props.ledgerData.get('enabled')
? <div id='paymentsContainer'>
{
this.props.addFundsOverlayVisible
? <ModalOverlay title={'addFunds'} content={this.overlayContent} onHide={this.props.hideOverlay.bind(this, 'addFunds')} />
: null
}
<div className='titleBar'>
<div className='sectionTitle pull-left' data-l10n-id='publisherPaymentsTitle' value='publisherPaymentsTitle' />
{this.buttonContent}
{this.fundingLink}
</div>
{this.notificationContent}
{this.tableContent}
</div>
{this.getNotificationContent()}
{this.getTableContent()}
</div> : <div className='emptyMessage' data-l10n-id='publisherEmptyText' />
: <div><div className='emptyMessage' data-l10n-id='publisherEmptyText' /></div>
}
}

Expand Down Expand Up @@ -797,6 +804,8 @@ class AboutPreferences extends React.Component {
super()
let hash = window.location.hash ? window.location.hash.slice(1) : ''
this.state = {
bitcoinOverlayVisible: false,
addFundsOverlayVisible: false,
preferenceTab: hash.toUpperCase() in preferenceTabs ? hash : preferenceTabs.GENERAL,
hintNumber: this.getNextHintNumber(),
languageCodes: Immutable.Map(),
Expand Down Expand Up @@ -869,6 +878,16 @@ class AboutPreferences extends React.Component {
}
}

setOverlayVisible (isVisible, overlayName) {
let stateDiff = {}
stateDiff[`${overlayName}OverlayVisible`] = isVisible
if (overlayName === 'addFunds' && isVisible === false) {
// Hide the child overlay when the parent is closed
stateDiff['bitcoinOverlayVisible'] = false
}
this.setState(stateDiff)
}

render () {
let tab
const settings = this.state.settings
Expand All @@ -893,7 +912,13 @@ class AboutPreferences extends React.Component {
tab = <ShieldsTab settings={settings} siteSettings={siteSettings} braveryDefaults={braveryDefaults} onChangeSetting={this.onChangeSetting} />
break
case preferenceTabs.PUBLISHERS:
tab = <PaymentsTab settings={settings} siteSettings={siteSettings} braveryDefaults={braveryDefaults} ledgerData={ledgerData} onChangeSetting={this.onChangeSetting} />
tab = <PaymentsTab settings={settings} siteSettings={siteSettings}
braveryDefaults={braveryDefaults} ledgerData={ledgerData}
onChangeSetting={this.onChangeSetting}
bitcoinOverlayVisible={this.state.bitcoinOverlayVisible}
addFundsOverlayVisible={this.state.addFundsOverlayVisible}
showOverlay={this.setOverlayVisible.bind(this, true)}
hideOverlay={this.setOverlayVisible.bind(this, false)} />
break
case preferenceTabs.SECURITY:
tab = <SecurityTab settings={settings} siteSettings={siteSettings} braveryDefaults={braveryDefaults} flashInstalled={this.state.flashInstalled} onChangeSetting={this.onChangeSetting} />
Expand Down
18 changes: 5 additions & 13 deletions js/components/modalOverlay.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,40 +4,32 @@

const React = require('react')
const ImmutableComponent = require('./immutableComponent')
const classnames = require('classnames')

/**
* Represents a modal overlay
*/

class ModalOverlay extends ImmutableComponent {
getDialogContent () {
get dialogContent () {
var close = null
var button = null
var title = null
if (!this.props.emptyDialog) {
close = <button type='button' className='close pull-right' onClick={this.props.onHide}><span>&times;</span></button>
button = <button type='button' className='pull-right alt' onClick={this.props.onHide} data-l10n-id='done' />
title = <div className='settingsListTitle' data-l10n-id={this.props.title} />
title = <div className='sectionTitle' data-l10n-id={this.props.title} />
}
return <div className='dialog'>
{close}
{title}
{this.props.content}
{button}
</div>
}

render () {
return <div className={classnames('modal fade', { hidden: !this.props.shouldShow })} role='alert'>
{this.getDialogContent()}
return <div className='modal fade' role='alert'>
{this.dialogContent}
</div>
}
}

ModalOverlay.propTypes = {
title: React.PropTypes.string.isRequired,
onShow: React.PropTypes.func.isRequired,
onHide: React.PropTypes.func.isRequired
}

module.exports = ModalOverlay
3 changes: 2 additions & 1 deletion js/constants/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,5 +41,6 @@ module.exports = {
replacementUrl: adHost
},
braveExtensionId: 'mnojpmjdmbbfmejpflffifhffcmidifd',
PDFJSExtensionId: 'oemmndcbldboiebfnladdacbdfmadadm'
PDFJSExtensionId: 'oemmndcbldboiebfnladdacbdfmadadm',
coinbaseOrigin: 'https://buy.coinbase.com'
}
7 changes: 7 additions & 0 deletions js/state/contentSettings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const AppDispatcher = require('../dispatcher/appDispatcher')
const AppStore = require('../stores/appStore')
const AppConstants = require('../constants/appConstants')
const appConfig = require('../constants/appConfig')
const config = require('../constants/config')
const settings = require('../constants/settings')
const {passwordManagers, defaultPasswordManager} = require('../constants/passwordManagers')
const urlParse = require('url').parse
Expand Down Expand Up @@ -51,6 +52,12 @@ const getBlock3rdPartyStorage = (braveryDefaults) => {
setting: 'allow',
primaryPattern: '*',
secondaryPattern: '[firstParty]'
},
{
// Needed for coinbase widget localStorage to work in about:preferences
setting: 'allow',
primaryPattern: `chrome-extension://${config.braveExtensionId}`,
secondaryPattern: config.coinbaseOrigin
}
]
} else {
Expand Down
2 changes: 1 addition & 1 deletion less/about/preferences.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -271,7 +271,7 @@ span.settingsListCopy {
color: black;
text-decoration: underline;
}

cursor: pointer;
&:hover {
text-decoration: underline;
}
Expand Down
16 changes: 5 additions & 11 deletions less/modalOverlay.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,10 +60,9 @@
}

.dialog {
position: fixed;
width: 90%;
left: 5%;
top: 15%;
width: 700px;
margin: 0 auto;
margin-top: 100px;
background: white;
border: solid 1px @lightGray;
border-radius: @borderRadius;
Expand All @@ -76,13 +75,8 @@
transition: @transitionFast;
}

.settingsListTitle:first-of-type {
margin-bottom: 10px;
}

.settingsListLabel {
font-size: 0.75em;
margin-top: 0.5em;
.sectionTitle {
text-align: center;
}
}

Expand Down

0 comments on commit a58e1d8

Please sign in to comment.