From 304469a2d4620b8ede5dfdc9731a6d68bd342c06 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 10 Apr 2017 12:24:10 +0900 Subject: [PATCH 1/2] Refactor payment/history.js See: cropped picture of the 6th commit on https://github.com/brave/browser-laptop/pull/6047#issue-193827878 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 https://github.com/brave/browser-laptop/pull/6047#issue-193827878 --- .../components/preferences/payment/history.js | 122 ++++++++++-------- .../components/preferences/paymentsTab.js | 14 +- app/renderer/components/styles/payment.js | 15 ++- js/components/modalOverlay.js | 15 ++- 4 files changed, 108 insertions(+), 58 deletions(-) diff --git a/app/renderer/components/preferences/payment/history.js b/app/renderer/components/preferences/payment/history.js index b7ec820a16b..62fd5a52b7a 100644 --- 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 - - - + + @@ -84,10 +84,10 @@ class HistoryRow extends ImmutableComponent { } render () { - return - - - + + + @@ -113,44 +113,84 @@ class HistoryFooter extends ImmutableComponent { reconcileDate: formattedTimeFromNow(timestamp) } - return
-
+ return
+
-
} } +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 index 1143c2e148f..061e515dbff 100644 --- 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 ? : null) - title = (this.props.title ?
: null) + title = (this.props.title ?
: null) } + let customTitleClassesStr = (this.props.customTitleClasses ? this.props.customTitleClasses : '') - return
+ return
{close} {title} From 101de8f4b9207315da05863100adaa0634d0c0e5 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 10 Apr 2017 12:24:29 +0900 Subject: [PATCH 2/2] Partial refactoring of modalOverlay Addresses #8054 - Renamed customTitleClasses to customDialogClasses - Renamed customHeaderClasses to customTitleClasses customeDialogClasses |-- customTitleClasses Auditors: Test Plan: 1. Open about:preferences#payments 2. Enable payments 3. Click "Add funds" 4. Make sure the style of modal overlay dialog is not broken 5. Click "Display QR" 6. Make sure the QR overlay is displayed 7. Close those overlay dialogs 8. Click payment history icon 9. Make sure the style of the modal dialog is not broken 10. Close the dialog 11. Click advanced options icon 12. Click "Backup your wallet" 13. Make sure background color of the dialog is not changed --- .../preferences/payment/bitcoinDashboard.js | 4 ++-- .../components/preferences/paymentsTab.js | 4 ++-- js/components/modalOverlay.js | 16 ++++++++++------ 3 files changed, 14 insertions(+), 10 deletions(-) diff --git a/app/renderer/components/preferences/payment/bitcoinDashboard.js b/app/renderer/components/preferences/payment/bitcoinDashboard.js index 6f25977683e..1339dece65a 100644 --- a/app/renderer/components/preferences/payment/bitcoinDashboard.js +++ b/app/renderer/components/preferences/payment/bitcoinDashboard.js @@ -284,7 +284,7 @@ class BitcoinDashboard extends ImmutableComponent { ? @@ -294,7 +294,7 @@ class BitcoinDashboard extends ImmutableComponent { this.props.qrcodeOverlayVisible ? diff --git a/app/renderer/components/preferences/paymentsTab.js b/app/renderer/components/preferences/paymentsTab.js index 061e515dbff..c83d26ee817 100644 --- a/app/renderer/components/preferences/paymentsTab.js +++ b/app/renderer/components/preferences/paymentsTab.js @@ -101,8 +101,8 @@ class PaymentsTab extends ImmutableComponent { this.enabled && this.props.paymentHistoryOverlayVisible ? } diff --git a/js/components/modalOverlay.js b/js/components/modalOverlay.js index 411eaa02a67..c1ff44c4a03 100644 --- a/js/components/modalOverlay.js +++ b/js/components/modalOverlay.js @@ -47,21 +47,20 @@ class ModalOverlay extends ImmutableComponent { var button = null var title = null - let customHeaderClassesStr = (this.props.customHeaderClasses ? this.props.customHeaderClasses : '') + let customTitleClassesStr = (this.props.customTitleClasses ? this.props.customTitleClasses : '') + let customDialogClassesStr = (this.props.customDialogClasses ? this.props.customDialogClasses : '') if (!this.props.emptyDialog) { close = (this.props.onHide ?
- - +
+ +
{this.formattedDate}{this.totalAmountStr} + return
{this.formattedDate}{this.totalAmountStr} {this.receiptFileName}