From 7284b6089e2dcdfe124cc573e6146f974d5e077a Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 3 Aug 2017 21:53:35 +0900 Subject: [PATCH] Refactor table.sortableTable Addresses #10263 Auditors: Test Plan: 1. Open about:preferences#search 2. Make sure the custom width is applied to the table 3. Open about:preferences#sync 4. Make sure the custom width is applied to the table 5. Open about:preferences#extensions 6. Make sure '-webkit-fill-available' is applied to the table --- .../components/common/sortableTable.js | 25 +++++++++++++-- .../components/preferences/extensionsTab.js | 32 ++++++++----------- .../preferences/payment/ledgerTable.js | 9 +----- .../components/preferences/syncTab.js | 8 ++--- js/about/preferences.js | 17 ++++++++-- less/about/preferences.less | 2 -- less/sortableTable.less | 5 --- 7 files changed, 54 insertions(+), 44 deletions(-) diff --git a/app/renderer/components/common/sortableTable.js b/app/renderer/components/common/sortableTable.js index 6a40605c320..18200117af8 100644 --- a/app/renderer/components/common/sortableTable.js +++ b/app/renderer/components/common/sortableTable.js @@ -6,6 +6,8 @@ const React = require('react') const Immutable = require('immutable') const tableSort = require('tablesort') +const {StyleSheet, css} = require('aphrodite/no-important') + // Utils const cx = require('../../../../js/lib/classSet') const eventUtil = require('../../../../js/lib/eventUtil') @@ -418,16 +420,19 @@ class SortableTable extends React.Component { return {this.generateTableRows(this.props.rows)} } } + render () { if (!this.props.headings || !this.props.rows) { return false } + return { this.table = node }}> @@ -469,4 +474,20 @@ class SortableTable extends React.Component { } } +const styles = StyleSheet.create({ + // By default the width and margin are not specified. + // It can be specified by setting css to tableClassNames. + // See 'styles.devices__devicesList' on syncTab.js for example. + table: { + boxSizing: 'border-box', + cursor: 'default', + borderSpacing: 0 + }, + + // Setting 'fillAvailable' maximizes the width of the table. + table_fillAvailable: { + width: '-webkit-fill-available' + } +}) + module.exports = SortableTable diff --git a/app/renderer/components/preferences/extensionsTab.js b/app/renderer/components/preferences/extensionsTab.js index b097d2fa31f..bc556b0bc0f 100644 --- a/app/renderer/components/preferences/extensionsTab.js +++ b/app/renderer/components/preferences/extensionsTab.js @@ -56,7 +56,7 @@ class ExtensionsTab extends ImmutableComponent { return [ { // Icon - html: + html: }, { // Name html: css(styles.table__row)).toJS() + this.props.extensions.map(entry => css(styles.tableRow)).toJS() } rows={this.props.extensions.map(entry => this.getRow(entry))} />
@@ -129,13 +129,7 @@ class ExtensionsTab extends ImmutableComponent { } const styles = StyleSheet.create({ - table: { - // TODO (Suguru): refactor sortableTable.js to remove !important - width: '100% !important', - marginBottom: '0 !important' - }, - - table__row: { + tableRow: { fontSize: '15px', background: '#fff', @@ -151,15 +145,15 @@ const styles = StyleSheet.create({ } }, - table__row__column: { + tableRow__column: { padding: '0 8px' }, - table__row__column_center: { + tableRow__column_center: { textAlign: 'center' }, - table__row__column__icon: { + tableRow__column__icon: { display: 'flex', margin: 'auto', width: '32px', diff --git a/app/renderer/components/preferences/payment/ledgerTable.js b/app/renderer/components/preferences/payment/ledgerTable.js index 58076e93c6b..190b9f14918 100644 --- a/app/renderer/components/preferences/payment/ledgerTable.js +++ b/app/renderer/components/preferences/payment/ledgerTable.js @@ -273,7 +273,7 @@ class LedgerTable extends ImmutableComponent { } @@ -590,10 +590,8 @@ const styles = StyleSheet.create({ }, devices__devicesList: { - // TODO: refactor sortableTable to remove !important - marginBottom: `${globalStyles.spacing.dialogInsideMargin} !important`, - boxSizing: 'border-box', - width: '600px !important' + marginBottom: globalStyles.spacing.dialogInsideMargin, + width: '600px' }, devices__devicesListCell: { padding: '4px 8px' diff --git a/js/about/preferences.js b/js/about/preferences.js index f3ea271653f..3d77a1cf8bc 100644 --- a/js/about/preferences.js +++ b/js/about/preferences.js @@ -7,7 +7,8 @@ const React = require('react') const ImmutableComponent = require('../../app/renderer/components/immutableComponent') const Immutable = require('immutable') const UrlUtil = require('../lib/urlutil') -const {css} = require('aphrodite/no-important') +const {StyleSheet, css} = require('aphrodite/no-important') +const globalStyles = require('../../app/renderer/components/styles/global') const commonStyles = require('../../app/renderer/components/styles/commonStyles') // Components @@ -323,8 +324,11 @@ class SearchTab extends ImmutableComponent { + addHoverClass + onClick={this.hoverCallback.bind(this)} + tableClassNames={css(styles.sortableTable_searchTab)} + columnClassNames={['default', 'searchEngine', 'engineGoKey']} + /> @@ -941,6 +945,13 @@ class AboutPreferences extends React.Component { } } +const styles = StyleSheet.create({ + sortableTable_searchTab: { + width: '704px', + marginBottom: globalStyles.spacing.settingsListContainerMargin // See syncTab.js for use cases + } +}) + module.exports = { AboutPreferences: } diff --git a/less/about/preferences.less b/less/about/preferences.less index 62e294452d0..f03510da67a 100644 --- a/less/about/preferences.less +++ b/less/about/preferences.less @@ -247,8 +247,6 @@ input[type="checkbox"][disabled] { } table.sortableTable { - width: 704px; - tbody td:first-of-type { text-align: center; color: @braveOrange; diff --git a/less/sortableTable.less b/less/sortableTable.less index 3036f6936b2..3ee2acb5193 100644 --- a/less/sortableTable.less +++ b/less/sortableTable.less @@ -15,11 +15,6 @@ table.sort { } table.sortableTable { - width: 100%; - margin-bottom: 40px; - cursor: default; - border-spacing: 0; - tr { height: 1.7em; padding: 5px 20px;