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

Commit

Permalink
new dialog design for adding funds
Browse files Browse the repository at this point in the history
  • Loading branch information
@jkup
jkup committed Sep 9, 2016
1 parent 0303926 commit 7855ff3
Show file tree
Hide file tree
Showing 7 changed files with 224 additions and 49 deletions.
17 changes: 12 additions & 5 deletions app/extensions/brave/locales/en-US/preferences.properties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,14 +38,15 @@ tableEmptyText=No table data.
notificationEmptyText=Top publisher visits
syncEmptyText=Sync settings coming soon.
bitcoin=Bitcoin
bitcoinAdd=Use an existing Bitcoin wallet
bitcoinAdd=Use your existing Bitcoin wallet/account
bitcoinAddDescription=Use any BTC wallet that can transfer Bitcoin to your Brave wallet.
bitcoinBuy=Buy Bitcoin
viewPaymentHistory=View Payment History
paymentHistoryTitle=Your Payment History
paymentHistoryFooterText=Your next payment submission is {{reconcileDate}}.
paymentHistoryOKText=OK
bitcoinAddress=Your Brave wallet address is:
bitcoinPaymentURL=Scan the QR code or transfer {{amount}} to:
bitcoinPaymentURL=Your Brave wallet address
bitcoinQR=Brave wallet QR code:
paymentHistoryTitle=Your Payment History
bitcoinCopyAddress=Copy Bitcoin address to clipboard
Expand All @@ -57,11 +58,17 @@ done=Done
off=off
on=on
notifications=notifications
moneyAdd=Use your debit or credit card
moneyAdd=Use your debit/credit card
moneyAddSubTitle=No Bitcoin needed!
coinbaseNotAvailable=Sorry! Adding funds with a credit/debit card is only available for contributions of $5/month at the moment.
add=Buy with Coinbase
add=Fund with debit/credit
transferTime=Transfer may take up to 40 minutes
addFundsTitle=Add funds...
addFunds=Add funds to your Brave Payments Account
addFunds=Three ways to add funds to your Brave Wallet
copyToClipboard=Copy to clipboard
smartphoneTitle=Use your smartphone app to transfer Bitcoin
displayQRCode=Display QR code
coinbaseMessage=debit/credit funding powered by coinbase
date=Date
totalAmount=Total Amount
receiptLink=Receipt Link
Expand Down
3 changes: 3 additions & 0 deletions app/locale.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,9 @@ var rendererIdentifiers = function () {
'topSiteSuggestionTitle',
'addFundsNotification',
'addFunds',
'copyToClipboard',
'smartphoneTitle',
'displayQRCode',
'updateLater',
'updateHello',
'notificationPasswordWithUserName',
Expand Down
90 changes: 75 additions & 15 deletions js/about/preferences.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,9 +260,19 @@ class BitcoinDashboard extends ImmutableComponent {
get ledgerData () {
return this.props.ledgerData
}
get overlayContent () {
get bitcoinOverlayContent () {
return <iframe src={this.ledgerData.get('buyURL')} />
}
get qrcodeOverlayContent () {
return <div>
<img src={this.ledgerData.get('paymentIMG')} title='Brave wallet QR code' />
</div>
}
get qrcodeOverlayFooter () {
return <div>
<div id='coinbaseLogo' />
</div>
}
get currency () {
return this.props.ledgerData.get('currency') || 'USD'
}
Expand All @@ -275,17 +285,47 @@ class BitcoinDashboard extends ImmutableComponent {
get coinbasePanel () {
if (this.canUseCoinbase) {
return <div className='panel'>
<div className='settingsListTitle' data-l10n-id='moneyAdd' />
<div id='coinbaseLogo' />
<Button l10nId='add' className='primaryButton' onClick={this.props.showOverlay.bind(this)} />
<div className='settingsPanelDivider'>
<span className='fa fa-credit-card' />
<div className='settingsListTitle' data-l10n-id='moneyAdd' />
<div className='settingsListSubTitle' data-l10n-id='moneyAddSubTitle' />
</div>
<div className='settingsPanelDivider'>
<Button l10nId='add' className='primaryButton' onClick={this.props.showOverlay.bind(this)} />
<div className='settingsListSubTitle' data-l10n-id='transferTime' />
</div>
</div>
} else {
return <div className='panel disabledPanel'>
<div className='settingsListTitle' data-l10n-id='moneyAdd' />
<div data-l10n-id='coinbaseNotAvailable' />
<div className='settingsPanelDivider'>
<span className='fa fa-credit-card' />
<div className='settingsListTitle' data-l10n-id='moneyAdd' />
<div className='settingsListSubTitle' data-l10n-id='moneyAddSubTitle' />
</div>
<div className='settingsPanelDivider'>
<div data-l10n-id='coinbaseNotAvailable' />
</div>
</div>
}
}
get smartphonePanel () {
return <div className='panel'>
<div className='settingsPanelDivider'>
<span className='fa fa-mobile' />
<div className='settingsListTitle' data-l10n-id='smartphoneTitle' />
</div>
<div className='settingsPanelDivider'>
<Button l10nId='displayQRCode' className='primaryButton' onClick={this.props.showQRcode.bind(this)} />
</div>
</div>
}
get panelFooter () {
return <div className='panelFooter'>
<div id='coinbaseLogo' />
<span data-l10n-id='coinbaseMessage' />
<Button l10nId='done' className='pull-right whiteButton' onClick={this.props.hideParentOverlay} />
</div>
}
copyToClipboard (text) {
aboutActions.setClipboard(text)
}
Expand All @@ -310,17 +350,28 @@ class BitcoinDashboard extends ImmutableComponent {
return <div id='bitcoinDashboard'>
{
this.props.bitcoinOverlayVisible
? <ModalOverlay title={'bitcoinBuy'} content={this.overlayContent} emptyDialog={emptyDialog} onHide={this.props.hideOverlay.bind(this)} />
? <ModalOverlay title={'bitcoinBuy'} content={this.bitcoinOverlayContent} emptyDialog={emptyDialog} onHide={this.props.hideOverlay.bind(this)} />
: null
}
{
this.props.qrcodeOverlayVisible
? <ModalOverlay content={this.qrcodeOverlayContent} customTitleClasses={'qrcodeOverlay'} footer={this.qrcodeOverlayFooter} onHide={this.props.hideQRcode.bind(this)} />
: null
}
<div className='board'>
{this.coinbasePanel}
<div className='panel'>
<div className='settingsListTitle' data-l10n-id='bitcoinAdd' />
<div className='settingsPanelDivider'>
<span className='bitcoinIcon fa-stack fa-lg'>
<span className='fa fa-circle fa-stack-2x' />
<span className='fa fa-bitcoin fa-stack-1x' />
</span>
<div className='settingsListTitle' data-l10n-id='bitcoinAdd' />
<div className='settingsListSubtitle' data-l10n-id='bitcoinAddDescription' />
</div>
{
this.ledgerData.get('address')
? <div>
<img src={this.ledgerData.get('paymentIMG')} title='Brave wallet QR code' />
? <div className='settingsPanelDivider'>
{
this.ledgerData.get('hasBitcoinHandler') && this.ledgerData.get('paymentURL')
? <div>
Expand All @@ -330,16 +381,19 @@ class BitcoinDashboard extends ImmutableComponent {
<div data-l10n-id='bitcoinAddress' className='labelText' />
</div>
: <div>
<div data-l10n-id='bitcoinPaymentURL'
data-l10n-args={JSON.stringify({amount: `${this.amount} ${this.currency}`})} className='labelText' />
<div data-l10n-id='bitcoinPaymentURL' className='labelText' />
</div>
}
<span className='fa fa-clipboard settingsListCopy alt' title='Copy to clipboard' onClick={this.copyToClipboard.bind(this, this.ledgerData.get('address'))} />
<span className='smallText'>{this.ledgerData.get('address')}</span>
<Button className='primaryButton' l10nId='copyToClipboard' onClick={this.copyToClipboard.bind(this, this.ledgerData.get('address'))} />
</div>
: <div data-l10n-id='bitcoinWalletNotAvailable' />
: <div className='settingsPanelDivider'>
<div data-l10n-id='bitcoinWalletNotAvailable' />
</div>
}
</div>
{this.smartphonePanel}
{this.panelFooter}
</div>
</div>
}
Expand Down Expand Up @@ -641,8 +695,11 @@ class PaymentsTab extends ImmutableComponent {
return <BitcoinDashboard ledgerData={this.props.ledgerData}
settings={this.props.settings}
bitcoinOverlayVisible={this.props.bitcoinOverlayVisible}
qrcodeOverlayVisible={this.props.qrcodeOverlayVisible}
showOverlay={this.props.showOverlay.bind(this, 'bitcoin')}
hideOverlay={this.props.hideOverlay.bind(this, 'bitcoin')}
showQRcode={this.props.showOverlay.bind(this, 'qrcode')}
hideQRcode={this.props.hideOverlay.bind(this, 'qrcode')}
hideParentOverlay={this.props.hideOverlay.bind(this, 'addFunds')} />
}

Expand Down Expand Up @@ -1144,6 +1201,7 @@ class AboutPreferences extends React.Component {
let hash = window.location.hash ? window.location.hash.slice(1) : ''
this.state = {
bitcoinOverlayVisible: false,
qrcodeOverlayVisible: false,
paymentHistoryOverlayVisible: false,
addFundsOverlayVisible: false,
preferenceTab: hash.toUpperCase() in preferenceTabs ? hash : preferenceTabs.GENERAL,
Expand Down Expand Up @@ -1224,8 +1282,9 @@ class AboutPreferences extends React.Component {
let stateDiff = {}
stateDiff[`${overlayName}OverlayVisible`] = isVisible
if (overlayName === 'addFunds' && isVisible === false) {
// Hide the child overlay when the parent is closed
// Hide the child overlays when the parent is closed
stateDiff['bitcoinOverlayVisible'] = false
stateDiff['qrcodeOverlayVisible'] = false
}
this.setState(stateDiff)
}
Expand Down Expand Up @@ -1258,6 +1317,7 @@ class AboutPreferences extends React.Component {
braveryDefaults={braveryDefaults} ledgerData={ledgerData}
onChangeSetting={this.onChangeSetting}
bitcoinOverlayVisible={this.state.bitcoinOverlayVisible}
qrcodeOverlayVisible={this.state.qrcodeOverlayVisible}
paymentHistoryOverlayVisible={this.state.paymentHistoryOverlayVisible}
addFundsOverlayVisible={this.state.addFundsOverlayVisible}
showOverlay={this.setOverlayVisible.bind(this, true)}
Expand Down
95 changes: 71 additions & 24 deletions less/about/preferences.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,13 @@ body {
}
}

#coinbaseLogo {
width: 40px;
height: 40px;
display: inline-block;
margin-right: 10px;
}

#fundsAmount {
margin-right: 10px;

Expand Down Expand Up @@ -713,22 +720,46 @@ div.nextPaymentSubmission {
.board {
overflow-x: hidden;
clear: both;
display: flex;

.panel {
flex: 1;
background: #FFFFFF;
position: relative;
margin-top: 40px;
margin-bottom: 40px;
margin-top: 8px;
margin-bottom: 8px;
padding: 20px 20px 20px 100px;

* {
display: block;
text-align: center;
margin: 0 auto;
.settingsPanelDivider {
width: 50%;
position: relative;
float: left;

&:nth-child(1) {
text-align: left;
}

&:nth-child(2) {
text-align: right;
}
.fa {
position: absolute;
left: -45px;
top: 20px;

&.fa-credit-card {
font-size: 30px;
}
&.fa-mobile {
font-size: 50px;
}
}
.bitcoinIcon {
position: absolute;
left: -5px;
top: 0;
}
}
#bitcoinPaymentURL {
cursor: pointer;
text-align: left;
background-color: @lightGray;
&:hover {
background-color: @gray;
Expand All @@ -739,40 +770,56 @@ div.nextPaymentSubmission {
font-size: 0.9em;
}
.settingsListTitle {
font-weight: 600;
font-size: 1em;
color: @darkGray;
font-weight: bold;
font-size: 15px;
margin-bottom: 15px;
}
.settingsListSubTitle {
color: @darkGray;
clear: both;
font-weight: normal;
font-size: 13px;
font-style: italic;
}
span {
display: inline-block;
}
a {
text-decoration: none;
}
img,
#coinbaseLogo {
width: 150px;
height: 150px;
margin: 8px auto;
background-color: @lightGray;
border: none;
}
.labelText {
font-size: 1em;
color: @braveOrange;
text-align: left;
margin-bottom: 5px;
}
.fa {
font-size: 1.1em;
margin: 5px;
.bitcoinIcon {
.fa-circle {
color: @bitcoinOrange;
}
.fa-bitcoin {
color: white;
transform: rotate(12deg);
}
}
.primaryButton {
margin: 1.5em auto;
display: block;
float: right;
width: 180px;
padding: 4px 0px;
}

&:after {
content:" ";
display:block;
clear:both;
}
}
.panelFooter {
color: @darkGray;
font-size: 13px;
font-style: italic;
padding: 20px 20px 20px 50px;
}
&.contrast {
background: @highlightBlue;
Expand Down
Loading

0 comments on commit 7855ff3

Please sign in to comment.