Refactor payment/history.js

See: cropped picture of the 6th commit on #6047 (comment) Closes #8037 - Changed aphrodite to aphrodite/no-important (to speed up removing the LESS files) Aphrodite without no-important overwrites the existing code, which should have been removed from the LESS files at the same time. It will make it difficult to know which styles should be kept and removed, having confidence in that changes would not cause regressions. It might be slowing down the refactoring work. - Modified modalOverlay.js by adding customHeaderClassesStr The intent of the change is to make it possible to apply custom styles to the sectionTitle. In this case, braveMediumOrange to the title. - Introduced paymentStylesVariables and paymentHistoryTablePadding - Appied it to leftRow and paymentHistoryOverlay__title It aligns the padding-left of the sectionTitle and the most left row. - Set position:sticky to the table header It always display the table header. Sticky has been available on chromium since a couple of versions. - Set columnHeight and columnPadding - Reverted commonStyles.primaryButton to primaryButton temporarily There have been already browserButton and primaryButton available with commonStyles.js, still these styles are overwritten by ones which button.less defines. We have to work on refactoring button.less at first. Also: - Removed medium - Removed pull-left, which is no longer used Auditors: Test Plan: 1. Run npm run add-simulated-payment-history 2. Open about:preferences#payments 3. The modal dialog looks like the cropped picture of the 6th commit on #6047 (comment)
brave · Apr 8, 2017 · ae31c14 · ae31c14
1 parent 404a555
commit ae31c14
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 58 deletions.
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,6 +101,7 @@ class PaymentsTab extends ImmutableComponent {
         this.enabled && this.props.paymentHistoryOverlayVisible
           ? <ModalOverlay
             title={'paymentHistoryTitle'}
+            customHeaderClasses={css(styles.paymentHistoryOverlay__title)}
             customTitleClasses={'paymentHistory'}
             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,23 @@ class ModalOverlay extends ImmutableComponent {
     var close = null
     var button = null
     var title = null
+
+    let customHeaderClassesStr = (this.props.customHeaderClasses ? this.props.customHeaderClasses : '')
+
     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,
+        [customHeaderClassesStr]: 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,
+      [customTitleClassesStr]: true
+    })}>
       <div className='dialog-header'>
         {close}
         {title}