From 5eaf3677b724b59af6108b65f94231048d04a9a0 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 2 Aug 2017 18:09:36 +0900 Subject: [PATCH] Restructure paymentsTab with grid property Closes #10236 Replace display:table with display:grid to align elements Also: - Update enabledContent.js to BEM style (Closes #10146) - Add PanelDropdown - Remove paymentStyles from payment for now (until conversion is done) - Add Panel Dropdown to styles.js (Closes #10245) Auditors: @cezaraugusto Test Plan 1: 1. Open `about:preferences#payments` 2. Enable payments 3. Make sure the elements are aligned equally on both rows and columns 4. Disable payments 5. Make sure the switch is placed on the same place Test Plan 2: 1. Open about:styles#dropdowns 2. Make sure PanelDropdown appears there --- .../components/common/browserButton.js | 2 +- app/renderer/components/common/dropdown.js | 18 +- .../preferences/payment/disabledContent.js | 5 +- .../preferences/payment/enabledContent.js | 234 ++++++++---------- .../preferences/payment/ledgerTable.js | 40 +-- .../components/preferences/paymentsTab.js | 145 ++++++----- app/renderer/components/styles/global.js | 11 + app/renderer/components/styles/payment.js | 11 - js/about/styles.js | 27 +- 9 files changed, 273 insertions(+), 220 deletions(-) diff --git a/app/renderer/components/common/browserButton.js b/app/renderer/components/common/browserButton.js index f200cf84c63..21e838964c7 100644 --- a/app/renderer/components/common/browserButton.js +++ b/app/renderer/components/common/browserButton.js @@ -237,7 +237,7 @@ const styles = StyleSheet.create({ }, browserButton_panelItem: { - minWidth: '180px' + minWidth: globalStyles.button.panel.width }, browserButton_iconOnly: { diff --git a/app/renderer/components/common/dropdown.js b/app/renderer/components/common/dropdown.js index 1c9ab9cd297..9669b94f0a3 100644 --- a/app/renderer/components/common/dropdown.js +++ b/app/renderer/components/common/dropdown.js @@ -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 ) @@ -39,6 +40,12 @@ class SettingDropdown extends ImmutableComponent { } } +class PanelDropdown extends ImmutableComponent { + render () { + return + } +} + class BraveryPanelDropdown extends ImmutableComponent { render () { return @@ -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: { @@ -93,5 +104,6 @@ module.exports = { Dropdown, FormDropdown, SettingDropdown, + PanelDropdown, BraveryPanelDropdown } diff --git a/app/renderer/components/preferences/payment/disabledContent.js b/app/renderer/components/preferences/payment/disabledContent.js index da82dc1cab3..0fc79671cc3 100644 --- a/app/renderer/components/preferences/payment/disabledContent.js +++ b/app/renderer/components/preferences/payment/disabledContent.js @@ -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') @@ -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 }, @@ -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: { diff --git a/app/renderer/components/preferences/payment/enabledContent.js b/app/renderer/components/preferences/payment/enabledContent.js index d78a6c4f0ab..a9fecffc22b 100644 --- a/app/renderer/components/preferences/payment/enabledContent.js +++ b/app/renderer/components/preferences/payment/enabledContent.js @@ -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 @@ -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 @@ -84,13 +83,13 @@ class EnabledContent extends ImmutableComponent { return
- - - +
} @@ -116,7 +115,7 @@ class EnabledContent extends ImmutableComponent { date: prevReconcileDateValue } - return
+ return
@@ -157,7 +156,7 @@ class EnabledContent extends ImmutableComponent { reconcileDate: nextReconcileDateRelative } - return
+ return
@@ -169,65 +168,46 @@ class EnabledContent extends ImmutableComponent { return
- - - - - - - - - - - - -
- - -
- - - - { - [5, 10, 15, 20].map((amount) => - - ) - } - - - - {this.lastReconcileMessage()} - - - - { - ledgerData.get('error') && ledgerData.get('error').get('caller') === 'getWalletProperties' - ?
-
-
-
- :
- - - {this.fundsAmount()} - - - {this.nextReconcileMessage()} - - -
- } -
- {this.walletButton()} -
-
+
+
+
+
+ + { + [5, 10, 15, 20].map((amount) => + + ) + } + +
+
+ { + ledgerData.get('error') && ledgerData.get('error').get('caller') === 'getWalletProperties' + ?
+ :
{this.fundsAmount()}
+ } +
+
+ {this.walletButton()} +
+
+ {this.lastReconcileMessage()} +
+
+ { + ledgerData.get('error') && ledgerData.get('error').get('caller') === 'getWalletProperties' + ?
+ :
{this.nextReconcileMessage()}
+ } +
+
-
-
- +
+
@@ -326,6 +329,18 @@ const verifiedBadge = (icon) => ({ background: `url(${icon}) center no-repeat` }) +const gridStyles = StyleSheet.create({ + row1col1: { + gridRow: 1, + gridColumn: 1 + }, + + row1col2: { + gridRow: 1, + gridColumn: 2 + } +}) + const styles = StyleSheet.create({ verified: verifiedBadge(verifiedGreenIcon), disabled: verifiedBadge(verifiedWhiteIcon), @@ -388,22 +403,15 @@ const styles = StyleSheet.create({ }, hideExcludedSites: { - display: 'flex', - flex: 1, + display: 'grid', alignItems: 'center', - height: '35px' + gridTemplateColumns: '2fr 1fr', + width: `calc(100% - calc(${globalStyles.spacing.panelPadding} / 2))`, + marginBottom: globalStyles.spacing.panelMargin }, - columnOffset: { - display: 'flex', - flexGrow: 8, - flexShrink: 8 - }, - - rightColumn: { - display: 'flex', - flexGrow: 1, - flexShrink: 1 + hideExcludedSites__switchWrap__switchControl: { + padding: '0 5px 0 0' }, alignRight: { diff --git a/app/renderer/components/preferences/paymentsTab.js b/app/renderer/components/preferences/paymentsTab.js index 7b8660716a1..e280a57d975 100644 --- a/app/renderer/components/preferences/paymentsTab.js +++ b/app/renderer/components/preferences/paymentsTab.js @@ -29,7 +29,7 @@ const {LedgerRecoveryContent, LedgerRecoveryFooter} = require('./payment/ledgerR // style const globalStyles = require('../styles/global') -const {paymentStyles, paymentStylesVariables} = require('../styles/payment') +const {paymentStylesVariables} = require('../styles/payment') const settingsIcon = require('../../../extensions/brave/img/ledger/icon_settings.svg') const historyIcon = require('../../../extensions/brave/img/ledger/icon_history.svg') @@ -183,24 +183,25 @@ class PaymentsTab extends ImmutableComponent { } - { /* Note: This div cannot be replaced with SectionTitleLabelWrapper */ } -
- Brave Payments - beta -
- -
{ this.enabled @@ -278,6 +280,23 @@ class PaymentsTab extends ImmutableComponent { } } +const gridStyles = StyleSheet.create({ + row1col1: { + gridRow: 1, + gridColumn: 1 + }, + + row1col2: { + gridRow: 1, + gridColumn: 2 + }, + + row1col3: { + gridRow: 1, + gridColumn: 3 + } +}) + const styles = StyleSheet.create({ flexAlignCenter: { display: 'flex', @@ -290,22 +309,26 @@ const styles = StyleSheet.create({ width: '805px', paddingBottom: '40px' // cf: padding of .prefTabContainer }, - paymentsSwitches: { - display: 'flex', - position: 'relative', - bottom: '2px', - minHeight: '29px' - }, titleWrapper: { + display: 'grid', + gridTemplateColumns: '1fr 1fr 1fr', + alignItems: 'center', + width: '100%', + padding: `0 ${globalStyles.spacing.panelPadding}` + }, + + titleWrapper__title: { position: 'relative', - marginRight: '49px', - minWidth: '240px' + right: globalStyles.spacing.panelPadding }, - switchWrap: { - width: paymentStyles.width.tableCell + titleWrapper__switchWrap: { + display: 'flex', + alignItems: 'center', + width: '100%' }, + switchWrap__switchSpan: { color: '#999', fontWeight: 'bold' @@ -315,8 +338,10 @@ const styles = StyleSheet.create({ color: globalStyles.color.braveOrange }, switchWrap__right: { + display: 'flex', + alignItems: 'center', justifyContent: 'space-between', - position: 'relative' + width: `calc(100% + ${globalStyles.spacing.panelPadding})` }, // Auto suggest switch @@ -336,6 +361,7 @@ const styles = StyleSheet.create({ position: 'relative', left: '3px', cursor: 'pointer', + fontSize: globalStyles.payments.fontSize.regular, // TODO: refactor preferences.less to remove !important ':hover': { @@ -346,7 +372,6 @@ const styles = StyleSheet.create({ // History and settings icons switchWrap__mainIconsRight: { position: 'relative', - right: '12px', top: '3.5px' }, switchWrap__mainIcons: { diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js index ba410e53cff..752fdabc990 100644 --- a/app/renderer/components/styles/global.js +++ b/app/renderer/components/styles/global.js @@ -305,6 +305,10 @@ const globalStyles = { action: { backgroundColor: '#4099FF', hoverColor: '#000' + }, + + panel: { + width: '180px' } }, @@ -329,6 +333,13 @@ const globalStyles = { background: '#ccc' } } + }, + + // TODO (Suguru): move them to payment.js after style refactoring is done + payments: { + fontSize: { + regular: '14.5px' + } } } diff --git a/app/renderer/components/styles/payment.js b/app/renderer/components/styles/payment.js index 211d53bb54a..6f39d0112f1 100644 --- a/app/renderer/components/styles/payment.js +++ b/app/renderer/components/styles/payment.js @@ -4,16 +4,6 @@ const globalStyles = require('./global') -const paymentStyles = { - font: { - regular: '14.5px' - }, - width: { - tableRow: '235px', - tableCell: '265px' // width.tableRow + 30px - } -} - const paymentStylesVariables = { spacing: { paymentHistoryTablePadding: '30px' @@ -26,6 +16,5 @@ const paymentStylesVariables = { } module.exports = { - paymentStyles, paymentStylesVariables } diff --git a/js/about/styles.js b/js/about/styles.js index d4fe67d9b78..730ae9b5ffc 100644 --- a/js/about/styles.js +++ b/js/about/styles.js @@ -11,7 +11,15 @@ require('../../node_modules/font-awesome/css/font-awesome.css') const {Textbox, FormTextbox, SettingTextbox, RecoveryKeyTextbox} = require('../../app/renderer/components/common/textbox') const {TextArea, DefaultTextArea} = require('../../app/renderer/components/common/textbox') -const {Dropdown, FormDropdown, SettingDropdown, BraveryPanelDropdown} = require('../../app/renderer/components/common/dropdown') + +const { + Dropdown, + FormDropdown, + SettingDropdown, + PanelDropdown, + BraveryPanelDropdown +} = require('../../app/renderer/components/common/dropdown') + const BrowserButton = require('../../app/renderer/components/common/browserButton') const { @@ -225,6 +233,23 @@ class AboutStyle extends ImmutableComponent { + +

Dropdown used on Brave Payments; has 180px width (same as Panel Item button below)

+ + + + + + 

+            const { '{PanelDropdown}' } = require('../../app/renderer/components/common/dropdown'){'\n'}
+            <PanelDropdown>{'\n'}
+              <option>5 USD</option>{'\n'}
+              <option>10 USD</option>{'\n'}
+              <option>15 USD</option>{'\n'}
+            </PanelDropdown>
+
+ +

Dropdown used mostly on Bravery Panel; has 100% width and 13px font size