Merge pull request #8038 from luixxiul/paymentHistory-refactoring

Refactor payment/history.js
brave · Apr 16, 2017 · 24fafe1 · 24fafe1
2 parents c9f8bec + 101de8f
commit 24fafe1
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 63 deletions.
diff --git a/app/renderer/components/preferences/payment/bitcoinDashboard.js b/app/renderer/components/preferences/payment/bitcoinDashboard.js
@@ -284,7 +284,7 @@ class BitcoinDashboard extends ImmutableComponent {
           ? <ModalOverlay
             title={'bitcoinBuy'}
             content={this.bitcoinOverlayContent()}
-            customTitleClasses={'coinbaseOverlay'}
+            customDialogClasses={'coinbaseOverlay'}
             emptyDialog
             onHide={this.props.hideOverlay.bind(this)}
           />
@@ -294,7 +294,7 @@ class BitcoinDashboard extends ImmutableComponent {
         this.props.qrcodeOverlayVisible
           ? <ModalOverlay
             content={this.qrcodeOverlayContent()}
-            customTitleClasses={'qrcodeOverlay'}
+            customDialogClasses={'qrcodeOverlay'}
             footer={this.qrcodeOverlayFooter()}
             onHide={this.props.hideQRcode.bind(this)}
           />

diff --git a/app/renderer/components/preferences/payment/history.js b/app/renderer/components/preferences/payment/history.js
@@ -4,7 +4,7 @@
 
 const React = require('react')
 const Immutable = require('immutable')
-const {StyleSheet, css} = require('aphrodite')
+const {StyleSheet, css} = require('aphrodite/no-important')
 
 // util
 const {addExportFilenamePrefixToTransactions} = require('../../../../common/lib/ledgerExportUtil')
@@ -17,7 +17,7 @@ const ImmutableComponent = require('../../../../../js/components/immutableCompon
 
 // style
 const globalStyles = require('../../styles/global')
-const commonStyles = require('../../styles/commonStyles')
+const {paymentStylesVariables} = require('../../styles/payment')
 
 // other
 const aboutUrls = appUrlUtil.aboutUrls
@@ -32,11 +32,11 @@ class HistoryContent extends ImmutableComponent {
     )
 
     return <table className={css(styles.paymentHistoryTable)}>
-      <thead>
-        <tr className={css(styles.rowContainer, styles.headerContainer)}>
-          <th className={css(styles.header, styles.narrow)} data-l10n-id='date' />
-          <th className={css(styles.header, styles.medium)} data-l10n-id='totalAmount' />
-          <th className={css(styles.header, styles.wide)} data-l10n-id='receiptLink' />
+      <thead className={css(styles.headerContainer__wrapper)}>
+        <tr className={css(styles.flex, styles.headerContainer)}>
+          <th className={css(styles.header, styles.column, styles.leftRow, styles.column__narrow)} data-l10n-id='date' />
+          <th className={css(styles.header, styles.column, styles.column__narrow)} data-l10n-id='totalAmount' />
+          <th className={css(styles.header, styles.column, styles.column__wide)} data-l10n-id='receiptLink' />
         </tr>
       </thead>
       <tbody>
@@ -84,10 +84,10 @@ class HistoryRow extends ImmutableComponent {
   }
 
   render () {
-    return <tr className={css(styles.rowContainer, styles.rowData)}>
-      <td className={css(styles.column, styles.narrow)} data-sort={this.timestamp}>{this.formattedDate}</td>
-      <td className={css(styles.column, styles.medium)} data-sort={this.satoshis}>{this.totalAmountStr}</td>
-      <td className={css(styles.column, styles.wide)}>
+    return <tr className={css(styles.flex, styles.rowData)}>
+      <td className={css(styles.flexAlignCenter, styles.column, styles.leftRow, styles.column__narrow)} data-sort={this.timestamp}>{this.formattedDate}</td>
+      <td className={css(styles.flexAlignCenter, styles.column, styles.column__amount, styles.column__narrow)} data-sort={this.satoshis}>{this.totalAmountStr}</td>
+      <td className={css(styles.flexAlignCenter, styles.column, styles.column__wide)}>
         <a href={`${aboutContributionsUrl}#${this.viewingId}`} target='_blank'>{this.receiptFileName}</a>
       </td>
     </tr>
@@ -113,44 +113,84 @@ class HistoryFooter extends ImmutableComponent {
       reconcileDate: formattedTimeFromNow(timestamp)
     }
 
-    return <div className={css(styles.historyFooter)}>
-      <div className={css(styles.nextPayment)}>
+    return <div className={css(styles.flexAlignCenter, styles.historyFooter)}>
+      <div className={css(styles.historyFooter__nextPayment)}>
         <span data-l10n-id={l10nDataId} data-l10n-args={JSON.stringify(l10nDataArgs)} />
       </div>
-      <Button l10nId='paymentHistoryOKText'
-        className={css(commonStyles.primaryButton)}
+      {/* TODO: refactor button.less */}
+      <Button className='primaryButton'
+        l10nId='paymentHistoryOKText'
+        testId='paymentHistoryOKText'
         onClick={this.props.hideOverlay.bind(this, 'paymentHistory')}
       />
     </div>
   }
 }
 
+const columnHeight = '1.5rem'
+const columnPadding = '.25rem'
+const headerBorderWidth = '2px'
+
 const styles = StyleSheet.create({
+  flex: {
+    display: 'flex'
+  },
+  flexAlignCenter: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  // TODO: refactor modalOverlay and preferences.less
+  // See: .paymentsContainer .modal .dialog.paymentHistory .dialog-footer in preferences.less
+  leftRow: {
+    paddingLeft: paymentStylesVariables.spacing.paymentHistoryTablePadding
+  },
+
   paymentHistoryTable: {
     display: 'flex',
-    flexDirection: 'column',
-    flex: '1',
-    borderSpacing: '0',
-    margin: '1em 0'
+    flexFlow: 'column nowrap',
+    borderSpacing: '0'
   },
 
+  headerContainer__wrapper: {
+    position: 'sticky',
+    top: 0,
+    background: paymentStylesVariables.color.paymentHistoryTableBackgroundColor
+  },
   headerContainer: {
-    borderBottom: `2px solid ${globalStyles.color.lightGray}`
+    paddingTop: columnPadding,
+    paddingBottom: columnPadding,
+    borderBottom: `${headerBorderWidth} solid ${globalStyles.color.lightGray}`,
+    height: columnHeight,
+    alignItems: 'center',
+    cursor: 'default',
+    userSelect: 'none'
   },
-
   header: {
-    display: 'flex',
     color: globalStyles.color.darkGray,
     fontWeight: '500',
-    paddingBottom: '.25em'
+    textAlign: 'left',
+
+    // cancel border-bottom of headerContainer
+    position: 'relative',
+    top: headerBorderWidth
   },
 
-  rowContainer: {
-    display: 'flex',
+  column: {
+    height: columnHeight
+  },
+  column__narrow: {
     flex: '1'
   },
+  column__amount: {
+    color: globalStyles.color.mediumGray
+  },
+  column__wide: {
+    flex: '2'
+  },
 
   rowData: {
+    padding: `${columnPadding} 0`,
+
     ':nth-child(even)': {
       backgroundColor: globalStyles.color.veryLightGray
     },
@@ -159,36 +199,14 @@ const styles = StyleSheet.create({
     }
   },
 
-  column: {
-    display: 'flex',
-    alignItems: 'center',
-    whiteSpace: 'nowrap',
-    height: '1.5em',
-    padding: '.125em 0'
-  },
-
-  narrow: {
-    color: globalStyles.color.darkGray,
-    justifyContent: 'center',
-    flex: '2'
-  },
-
-  medium: {
-    color: globalStyles.color.darkGray,
-    flex: '3'
-  },
-
-  wide: {
-    color: '#777',
-    flex: '4'
-  },
   historyFooter: {
-    display: 'flex',
     justifyContent: 'space-between',
-    alignItems: 'center'
+    cursor: 'default',
+    userSelect: 'none'
   },
-  nextPayment: {
-    fontSize: '14px'
+  historyFooter__nextPayment: {
+    // 16px * 0.875 = 14px
+    fontSize: '0.875rem'
   }
 })
 

diff --git a/app/renderer/components/preferences/paymentsTab.js b/app/renderer/components/preferences/paymentsTab.js
@@ -7,6 +7,7 @@ const React = require('react')
 const {StyleSheet, css} = require('aphrodite/no-important')
 
 // Components
+const cx = require('../../../../js/lib/classSet')
 const ImmutableComponent = require('../../../../js/components/immutableComponent')
 const ModalOverlay = require('../../../../js/components/modalOverlay')
 const {SettingCheckbox} = require('../settings')
@@ -19,9 +20,8 @@ const {LedgerBackupContent, LedgerBackupFooter} = require('./payment/ledgerBacku
 const {LedgerRecoveryContent, LedgerRecoveryFooter} = require('./payment/ledgerRecovery')
 
 // style
-const cx = require('../../../../js/lib/classSet')
 const globalStyles = require('../styles/global')
-const {paymentStyles} = require('../styles/payment')
+const {paymentStyles, paymentStylesVariables} = require('../styles/payment')
 const settingIcon = require('../../../extensions/brave/img/ledger/icon_settings.svg')
 const historyIcon = require('../../../extensions/brave/img/ledger/icon_history.svg')
 
@@ -101,7 +101,8 @@ class PaymentsTab extends ImmutableComponent {
         this.enabled && this.props.paymentHistoryOverlayVisible
           ? <ModalOverlay
             title={'paymentHistoryTitle'}
-            customTitleClasses={'paymentHistory'}
+            customDialogClasses={'paymentHistory'}
+            customTitleClasses={css(styles.paymentHistoryOverlay__title)}
             content={<HistoryContent
               ledgerData={this.props.ledgerData}
             />}
@@ -364,6 +365,15 @@ const styles = StyleSheet.create({
     ':hover': {
       backgroundColor: globalStyles.color.chromeTertiary
     }
+  },
+
+  paymentHistoryOverlay__title: {
+    // TODO: refactor preferences.less to remove !important
+    // See: .paymentsContainer .modal .dialog .dialog-header .sectionTitle and .modal .dialog .sectionTitle
+
+    color: `${globalStyles.color.braveMediumOrange} !important`,
+    padding: `25px 0 25px ${paymentStylesVariables.spacing.paymentHistoryTablePadding} !important`,
+    textIndent: '0 !important'
   }
 })
 

diff --git a/app/renderer/components/styles/payment.js b/app/renderer/components/styles/payment.js
@@ -28,7 +28,7 @@ const paymentCommon = StyleSheet.create({
     clear: 'both'
   },
   panel: {
-    background: '#FFFFFF',
+    background: '#fff',
     position: 'relative',
     marginTop: '8px',
     marginBottom: '8px',
@@ -51,7 +51,18 @@ const paymentCommon = StyleSheet.create({
   }
 })
 
+const paymentStylesVariables = {
+  color: {
+    // See: .paymentsContainer .modal .dialog.paymentHistory .dialog-body
+    paymentHistoryTableBackgroundColor: '#fff'
+  },
+  spacing: {
+    paymentHistoryTablePadding: '30px'
+  }
+}
+
 module.exports = {
   paymentStyles,
-  paymentCommon
+  paymentCommon,
+  paymentStylesVariables
 }
diff --git a/js/components/modalOverlay.js b/js/components/modalOverlay.js
@@ -4,6 +4,7 @@
 
 const React = require('react')
 const ImmutableComponent = require('./immutableComponent')
+const cx = require('../lib/classSet')
 
 /**
  * Represents a modal overlay
@@ -45,13 +46,22 @@ class ModalOverlay extends ImmutableComponent {
     var close = null
     var button = null
     var title = null
+
+    let customTitleClassesStr = (this.props.customTitleClasses ? this.props.customTitleClasses : '')
+    let customDialogClassesStr = (this.props.customDialogClasses ? this.props.customDialogClasses : '')
+
     if (!this.props.emptyDialog) {
       close = (this.props.onHide ? <button type='button' className='close' onClick={this.props.onHide} /> : null)
-      title = (this.props.title ? <div className='sectionTitle' data-l10n-id={this.props.title} /> : null)
+      title = (this.props.title ? <div className={cx({
+        sectionTitle: true,
+        [customTitleClassesStr]: true
+      })} data-l10n-id={this.props.title} /> : null)
     }
-    let customTitleClassesStr = (this.props.customTitleClasses ? this.props.customTitleClasses : '')
 
-    return <div className={'dialog ' + customTitleClassesStr}>
+    return <div className={cx({
+      dialog: true,
+      [customDialogClassesStr]: true
+    })}>
       <div className='dialog-header'>
         {close}
         {title}
@@ -66,7 +76,12 @@ class ModalOverlay extends ImmutableComponent {
   }
 
   render () {
-    return <div className={'modal fade' + (this.state.last ? ' last' : '') + (this.props.transparentBackground ? ' transparentBackground' : '')} role='alert'>
+    return <div className={cx({
+      modal: true,
+      fade: true,
+      last: this.state.last,
+      transparentBackground: this.props.transparentBackground
+    })} role='alert'>
       {this.dialogContent}
     </div>
   }