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

Restructure paymentsTab with grid property #10238

Merged
merged 1 commit into from
Sep 11, 2017
Merged

Restructure paymentsTab with grid property #10238

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
2 changes: 1 addition & 1 deletion app/renderer/components/common/browserButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ const styles = StyleSheet.create({
},

browserButton_panelItem: {
minWidth: '180px'
minWidth: globalStyles.button.panel.width
},

browserButton_iconOnly: {
Expand Down
18 changes: 15 additions & 3 deletions app/renderer/components/common/dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,9 @@ class Dropdown extends ImmutableComponent {
this.props['data-isFormControl'] && commonStyles.formControl,
styles.dropdown,
this.props['data-isCommonForm'] && styles.commonForm,
this.props['data-isSettings'] && styles.settings,
this.props['data-isFullWidth'] && styles.fullWidth,
this.props['data-isSettings'] && styles.settings,
this.props['data-isPanel'] && styles.settings_panel,
this.props['data-isBraveryPanel'] && styles.braveryPanel
)

Expand All @@ -39,6 +40,12 @@ class SettingDropdown extends ImmutableComponent {
}
}

class PanelDropdown extends ImmutableComponent {
render () {
return <FormDropdown data-isPanel {...this.props} />
}
}

class BraveryPanelDropdown extends ImmutableComponent {
render () {
return <FormDropdown data-isBraveryPanel {...this.props} />
Expand Down Expand Up @@ -75,12 +82,16 @@ const styles = StyleSheet.create({
fontSize: globalStyles.fontSize.flyoutDialog
},

fullWidth: {
width: '100%'
},

settings: {
width: '280px'
},

fullWidth: {
width: '100%'
settings_panel: {
width: globalStyles.button.panel.width
},

braveryPanel: {
Expand All @@ -93,5 +104,6 @@ module.exports = {
Dropdown,
FormDropdown,
SettingDropdown,
PanelDropdown,
BraveryPanelDropdown
}
5 changes: 2 additions & 3 deletions app/renderer/components/preferences/payment/disabledContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ const ImmutableComponent = require('../../immutableComponent')
// style
const globalStyles = require('../../styles/global')
const commonStyles = require('../../styles/commonStyles')
const {paymentStyles} = require('../../styles/payment')
const PIA = require('../../../../extensions/brave/img/private_internet_access.png')
const PIA2 = require('../../../../extensions/brave/img/private_internet_access_2x.png')
const BitGo = require('../../../../extensions/brave/img/bitgo.png')
Expand Down Expand Up @@ -61,7 +60,7 @@ const styles = StyleSheet.create({
borderRadius: globalStyles.radius.borderRadiusUIbox,
boxSizing: 'border-box',
padding: '40px',
fontSize: paymentStyles.font.regular,
fontSize: globalStyles.payments.fontSize.regular,
lineHeight: '1.8em',
color: globalStyles.color.mediumGray
},
Expand Down Expand Up @@ -92,7 +91,7 @@ const styles = StyleSheet.create({

disabledContent__sidebar__text: {
opacity: 0.8,
fontSize: paymentStyles.font.regular
fontSize: globalStyles.payments.fontSize.regular
},

disabledContent__sidebar__logo: {
Expand Down
234 changes: 109 additions & 125 deletions app/renderer/components/preferences/payment/enabledContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* You can obtain one at http://mozilla.org/MPL/2.0/. */

const React = require('react')
const {StyleSheet, css} = require('aphrodite')
const {StyleSheet, css} = require('aphrodite/no-important')
const moment = require('moment')

// util
Expand All @@ -15,13 +15,12 @@ const {changeSetting} = require('../../../lib/settingsUtil')
const ImmutableComponent = require('../../immutableComponent')
const BrowserButton = require('../../common/browserButton')
const {FormTextbox} = require('../../common/textbox')
const {FormDropdown} = require('../../common/dropdown')
const {SettingsList, SettingItem} = require('../../common/settings')
const {PanelDropdown} = require('../../common/dropdown')
const LedgerTable = require('./ledgerTable')

// style
const globalStyles = require('../../styles/global')
const {paymentStyles, paymentStylesVariables} = require('../../styles/payment')
const {paymentStylesVariables} = require('../../styles/payment')
const cx = require('../../../../../js/lib/classSet')

// other
Expand Down Expand Up @@ -84,13 +83,13 @@ class EnabledContent extends ImmutableComponent {

return <section className={css(styles.balance)}>
<FormTextbox data-test-id='fundsAmount' readOnly value={btcToCurrencyString(value, ledgerData)} />
<a className={css(styles.iconLink)} href='https://brave.com/Payments_FAQ.html' rel='noopener' target='_blank'>
<span className={cx({
fa: true,
'fa-question-circle': true,
[css(styles.iconText)]: true
})} />
</a>
<a className={cx({
[globalStyles.appIcons.question]: true,
[css(styles.balance__iconLink)]: true
})}
href='https://brave.com/Payments_FAQ.html'
target='_blank' rel='noopener'
/>
</section>
}

Expand All @@ -116,7 +115,7 @@ class EnabledContent extends ImmutableComponent {
date: prevReconcileDateValue
}

return <section className={css(styles.contribution, styles.lastContribution)}>
return <section>
<div data-l10n-id='lastContribution' />
<div data-l10n-id={text} data-l10n-args={JSON.stringify(l10nDataArgs)} />
</section>
Expand Down Expand Up @@ -157,7 +156,7 @@ class EnabledContent extends ImmutableComponent {
reconcileDate: nextReconcileDateRelative
}

return <section className={css(styles.contribution, styles.nextContribution)}>
return <section>
<div data-l10n-id='nextContribution' />
<div data-l10n-args={JSON.stringify(l10nDataArgs)} data-l10n-id={l10nDataId} />
</section>
Expand All @@ -169,65 +168,46 @@ class EnabledContent extends ImmutableComponent {

return <section>
<div className={css(styles.walletBar)} data-test-id='walletBar'>
<table>
<thead>
<tr className={css(styles.tableTr)}>
<th className={css(styles.walletBar__tableTr__tableTh)} data-l10n-id='monthlyBudget' />
<th className={css(styles.walletBar__tableTr__tableTh)} data-l10n-id='accountBalance' />
<th className={css(styles.walletBar__tableTr__tableTh)} />
</tr>
</thead>
<tbody>
<tr className={css(styles.tableTr)}>
<td className={css(styles.tableTd)}>
<SettingsList className={css(styles.listContainer)}>
<SettingItem>
<FormDropdown
data-test-id='fundsSelectBox'
value={getSetting(settings.PAYMENTS_CONTRIBUTION_AMOUNT, this.props.settings)}
onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.PAYMENTS_CONTRIBUTION_AMOUNT)}>
{
[5, 10, 15, 20].map((amount) =>
<option value={amount}>{amount} {ledgerData.get('currency') || 'USD'}</option>
)
}
</FormDropdown>
</SettingItem>
<SettingItem>
{this.lastReconcileMessage()}
</SettingItem>
</SettingsList>
</td>
<td className={css(styles.tableTd)}>
{
ledgerData.get('error') && ledgerData.get('error').get('caller') === 'getWalletProperties'
? <div>
<div data-l10n-id='accountBalanceConnectionError' />
<div className={css(styles.accountBalanceError)} data-l10n-id={this.ledgerDataErrorText()} />
</div>
: <div>
<SettingsList className={css(styles.listContainer)}>
<SettingItem>
{this.fundsAmount()}
</SettingItem>
<SettingItem>
{this.nextReconcileMessage()}
</SettingItem>
</SettingsList>
</div>
}
</td>
<td className={css(styles.tableTd)}>
{this.walletButton()}
<div className={css(styles.walletStatus)}
data-test-id='walletStatus'
data-l10n-id={walletStatusText.id}
data-l10n-args={walletStatusText.args ? JSON.stringify(walletStatusText.args) : null}
/>
</td>
</tr>
</tbody>
</table>
<div className={css(gridStyles.row1col1, styles.walletBar__title)} data-l10n-id='monthlyBudget' />
<div className={css(gridStyles.row1col2, styles.walletBar__title)} data-l10n-id='accountBalance' />
<div className={css(gridStyles.row1col3)} />
Copy link
Contributor Author

@luixxiul luixxiul Aug 1, 2017 •
edited
Loading

Choose a reason for hiding this comment

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

This is the blank item.

<div className={css(gridStyles.row2col1)}>
<PanelDropdown
data-test-id='fundsSelectBox'
value={getSetting(settings.PAYMENTS_CONTRIBUTION_AMOUNT, this.props.settings)}
onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.PAYMENTS_CONTRIBUTION_AMOUNT)}>
{
[5, 10, 15, 20].map((amount) =>
<option value={amount}>{amount} {ledgerData.get('currency') || 'USD'}</option>
)
}
</PanelDropdown>
</div>
<div className={css(gridStyles.row2col2)}>
{
ledgerData.get('error') && ledgerData.get('error').get('caller') === 'getWalletProperties'
? <div data-l10n-id='accountBalanceConnectionError' />
: <div>{this.fundsAmount()}</div>
}
</div>
<div className={css(gridStyles.row2col3)}>
{this.walletButton()}
</div>
<div className={css(gridStyles.row3col1, styles.walletBar__message)}>
{this.lastReconcileMessage()}
</div>
<div className={css(gridStyles.row3col2, styles.walletBar__message)}>
{
ledgerData.get('error') && ledgerData.get('error').get('caller') === 'getWalletProperties'
? <div data-l10n-id={this.ledgerDataErrorText()} />
: <div>{this.nextReconcileMessage()}</div>
}
</div>
<div className={css(gridStyles.row3col3, styles.walletBar__message)}
data-test-id='walletStatus'
data-l10n-id={walletStatusText.id}
data-l10n-args={walletStatusText.args ? JSON.stringify(walletStatusText.args) : null}
/>
</div>
<LedgerTable ledgerData={this.props.ledgerData}
settings={this.props.settings}
Expand All @@ -237,85 +217,89 @@ class EnabledContent extends ImmutableComponent {
}
}

const styles = StyleSheet.create({
walletBar: {
background: globalStyles.color.lightGray,
borderRadius: globalStyles.radius.borderRadiusUIbox,
padding: globalStyles.spacing.panelPadding,
margin: `${globalStyles.spacing.panelMargin} 0`
const gridStyles = StyleSheet.create({
row1col1: {
gridRow: 1,
gridColumn: 1
},

listContainer: {
marginBottom: 0
row1col2: {
gridRow: 1,
gridColumn: 2
},

walletBar__tableTr__tableTh: {
color: paymentStylesVariables.tableHeader.fontColor,
fontWeight: paymentStylesVariables.tableHeader.fontWeight,
textAlign: 'left'
row1col3: {
gridRow: 1,
gridColumn: 3
},

tableTr: {
height: '1em'
row2col1: {
gridRow: 2,
gridColumn: 1
},

tableTd: {
fontSize: paymentStyles.font.regular,
padding: '10px 30px 0 0',
width: 'auto',
minWidth: paymentStyles.width.tableRow,
verticalAlign: 'top'
row2col2: {
gridRow: 2,
gridColumn: 2
},

accountBalanceError: {
marginTop: globalStyles.spacing.panelItemMargin
row2col3: {
gridRow: 2,
gridColumn: 3
},

settingsListContainer: {
marginBottom: 0
row3col1: {
gridRow: 3,
gridColumn: 1
},

balance: {
display: 'flex',
alignItems: 'center',
verticalAlign: 0,
height: '100%',
marginBottom: 0
row3col2: {
gridRow: 3,
gridColumn: 2
},

iconLink: {
textDecoration: 'none',
row3col3: {
gridRow: 3,
gridColumn: 3
}
})

':hover': {
textDecoration: 'none'
}
const styles = StyleSheet.create({
walletBar: {
display: 'grid',
Copy link
Contributor

Choose a reason for hiding this comment

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

yessssssss

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Grid rules 🦁

gridTemplateColumns: '1fr 1fr 1fr',
background: globalStyles.color.lightGray,
borderRadius: globalStyles.radius.borderRadiusUIbox,
padding: globalStyles.spacing.panelPadding,
margin: `${globalStyles.spacing.panelMargin} 0`
},

iconText: {
color: globalStyles.color.mediumGray,
margin: '0 0 0 5px',

// TODO: refactor preferences.less to remove !important
fontSize: `${globalStyles.fontSize.settingItemSubtext} !important`
walletBar__title: {
color: paymentStylesVariables.tableHeader.fontColor,
fontWeight: paymentStylesVariables.tableHeader.fontWeight,
marginBottom: `calc(${globalStyles.spacing.panelPadding} / 1.5)`
},

contribution: {
lineHeight: 1.5
walletBar__message: {
fontSize: globalStyles.payments.fontSize.regular,
lineHeight: 1.5,
marginTop: globalStyles.spacing.panelPadding
},

lastContribution: {
marginTop: '16px',
marginBottom: 0
balance: {
display: 'flex',
alignItems: 'center'
},

nextContribution: {
marginTop: '15px',
marginBottom: 0
},
balance__iconLink: {
color: globalStyles.color.mediumGray,
fontSize: globalStyles.payments.fontSize.regular,
marginLeft: '5px',
textDecoration: 'none',

walletStatus: {
marginTop: '15px',
lineHeight: 1.5
':hover': {
textDecoration: 'none !important'
}
}
})

Expand Down
Loading