Normalize the tables on about:preferences

Addresses #10263 Addresses #10788 Closes #10356 - Polish action icons - Polish verified icon placement - Remove alignRight from the sites column (it should be aligned to the left as default) - Align the include switches to the center - Align the action buttons to the center Test Plan: 1. Visit https://www.youtube.com/user/latenight 2. Open about:preferences#payments 3. Make sure the channel title is aligned to the left
brave · Nov 21, 2017 · 5d1919f · 5d1919f
1 parent 8675459
commit 5d1919f
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 69 deletions.
diff --git a/app/renderer/components/common/sortableTable.js b/app/renderer/components/common/sortableTable.js
@@ -429,7 +429,7 @@ class SortableTable extends React.Component {
           data-test-id={this.stateOwner.state.selection.includes(this.getGlobalIndex(currentIndex)) ? 'selected' : null}
           data-row-index={`${currentIndex}`}
           className={cx({
-            [css(styles.table__tbody__tr, this.props.largeRow && styles.table__tbody__tr_largeRow)]: true,
+            [css(styles.table__tbody__tr, this.props.smallRow && styles.table__tbody__tr_smallRow, this.props.largeRow && styles.table__tbody__tr_largeRow)]: true,
             [classes.join(' ')]: classes
           })}>{entry}</tr>
         : null
@@ -482,7 +482,7 @@ class SortableTable extends React.Component {
             const headerClasses = {
               'sort-header': true,
               'sort-default': this.sortingDisabled || heading === this.props.defaultHeading,
-              [css(styles.table__th)]: true
+              [css(styles.table__th, this.props.smallRow && styles.table__th_smallRow)]: true
             }
             const isString = typeof heading === 'string'
             const sortMethod = this.sortingDisabled ? 'none' : (dataType === 'number' ? 'number' : undefined)
@@ -532,12 +532,13 @@ const styles = StyleSheet.create({
   },
 
   table__th: {
+    boxSizing: 'border-box',
     background: `linear-gradient(to bottom, ${globalStyles.color.lightGray}, ${globalStyles.color.veryLightGray})`,
     borderTop: `1px solid ${globalStyles.color.gray}`,
     borderLeft: `1px solid ${globalStyles.color.braveOrange}`,
     textAlign: 'left',
     fontWeight: 300,
-    padding: '1ch',
+    padding: globalStyles.sortableTable.cell.normal.padding,
     whiteSpace: 'nowrap',
 
     // Up/down arrow
@@ -554,6 +555,10 @@ const styles = StyleSheet.create({
     }
   },
 
+  table__th_smallRow: {
+    padding: globalStyles.sortableTable.cell.small.padding
+  },
+
   table__th__inner: {
     display: 'inline-block',
     userSelect: 'none'
@@ -565,7 +570,12 @@ const styles = StyleSheet.create({
   },
 
   table__tbody__tr: {
-    height: '1rem'
+    boxSizing: 'border-box',
+    height: '1.75rem'
+  },
+
+  table__tbody__tr_smallRow: {
+    height: '1.5rem'
   },
 
   // Add 'largeRow' to SortableTable to increase the height of tr.
@@ -574,13 +584,14 @@ const styles = StyleSheet.create({
   },
 
   table__tbody__tr__td: {
-    padding: '.5ch 1ch'
+    boxSizing: 'border-box',
+    padding: `calc(${globalStyles.sortableTable.cell.normal.padding} / 2.25) ${globalStyles.sortableTable.cell.normal.padding}`
   },
 
-  // Add 'smallRow' to SortableTable to decrease padding-top and padding-bottom of td.
+  // Add 'smallRow' to SortableTable to decrease padding values.
   table__tbody__tr_smallRow__td: {
-    paddingTop: '.3ch',
-    paddingBottom: '.3ch'
+    padding: `calc(${globalStyles.sortableTable.cell.small.padding} / 2.25) ${globalStyles.sortableTable.cell.small.padding}`,
+    height: '1.5rem'
   }
 })
 

diff --git a/app/renderer/components/preferences/payment/ledgerTable.js b/app/renderer/components/preferences/payment/ledgerTable.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')
 
 // components
 const ImmutableComponent = require('../../immutableComponent')
@@ -115,12 +115,12 @@ class LedgerTable extends ImmutableComponent {
   get columnClassNames () {
     return [
       css(styles.alignRight, styles.verifiedTd), // verified
-      css(styles.alignRight), // sites
-      css(styles.alignLeft),  // include
+      css(styles.column_sites), // sites
+      css(styles.alignCenter),  // include
       css(styles.alignRight), // views
       css(styles.alignRight), // time spent
-      css(styles.alignRight, styles.percTd), // percentage
-      css(styles.alignLeft)   // actions
+      css(styles.alignRight, styles.column_percentage), // percentage
+      css(styles.alignCenter)   // actions
     ]
   }
 
@@ -203,7 +203,7 @@ class LedgerTable extends ImmutableComponent {
         value: duration
       },
       {
-        html: <span data-test-id='percentageValue'>
+        html: <span className={css(styles.percentageValue)} data-test-id='percentageValue'>
           {
             pinned
             ? <PinnedInput
@@ -216,15 +216,22 @@ class LedgerTable extends ImmutableComponent {
         value: percentage
       },
       {
-        html: <span>
-          <span className={css(styles.mainIcon, styles.pinIcon, pinned && styles.pinnedIcon)}
+        html: <div className={css(styles.actionIcons)}>
+          <span className={css(
+            styles.actionIcons__icon,
+            styles.actionIcons__icon_pin,
+            pinned && styles.actionIcons__icon_pin_isPinned
+          )}
             onClick={this.togglePinSite.bind(this, this.getHostPattern(synopsis), !pinned, percentage)}
             data-test-pinned={pinned}
           />
-          <span className={css(styles.mainIcon, styles.removeIcon)}
+          <span className={css(
+            styles.actionIcons__icon,
+            styles.actionIcons__icon_remove
+          )}
             onClick={this.banSite.bind(this, this.getHostPattern(synopsis))}
           />
-        </span>,
+        </div>,
         value: ''
       }
     ]
@@ -326,9 +333,9 @@ class LedgerTable extends ImmutableComponent {
 const verifiedBadge = (icon) => ({
   height: '20px',
   width: '20px',
-  marginRight: '-10px',
   display: 'block',
-  background: `url(${icon}) center no-repeat`
+  background: `url(${icon}) center no-repeat`,
+  margin: 'auto'
 })
 
 const gridStyles = StyleSheet.create({
@@ -367,11 +374,18 @@ const styles = StyleSheet.create({
   },
 
   verifiedTd: {
-    padding: '0 0 0 15px'
+    // Set the same padding with the padding-top and padding-bottom
+    paddingRight: `calc(${globalStyles.sortableTable.cell.small.padding} / 2) !important`,
+    paddingLeft: `calc(${globalStyles.sortableTable.cell.small.padding} / 2) !important`
+  },
+
+  column_sites: {
+    // TODO: Refactor sortableTable.less to remove !important
+    width: '100% !important'
   },
 
-  percTd: {
-    width: '45px'
+  column_percentage: {
+    minWidth: '3ch'
   },
 
   hideTd: {
@@ -425,36 +439,52 @@ const styles = StyleSheet.create({
     textAlign: 'left'
   },
 
+  alignCenter: {
+    display: 'flex',
+    justifyContent: 'center'
+  },
+
   paymentsDisabled: {
     opacity: 0.6
   },
 
-  mainIcon: {
+  percentageValue: {
+    // To cancel the global color setting
+    color: '#656565'
+  },
+
+  actionIcons: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    width: '50px',
+    margin: 'auto'
+  },
+
+  actionIcons__icon: {
     backgroundColor: '#c4c5c5',
-    width: '15px',
-    height: '16px',
+    width: '1rem',
+    height: '1rem',
     display: 'inline-block',
-    marginRight: '10px',
-    marginTop: '6px',
 
     ':hover': {
       backgroundColor: globalStyles.color.buttonColor
     }
   },
 
-  pinIcon: {
+  actionIcons__icon_pin: {
     '-webkit-mask-image': `url(${pinIcon})`
   },
 
-  pinnedIcon: {
+  actionIcons__icon_pin_isPinned: {
     backgroundColor: globalStyles.color.braveOrange,
 
     ':hover': {
       backgroundColor: globalStyles.color.braveDarkOrange
     }
   },
 
-  removeIcon: {
+  actionIcons__icon_remove: {
     '-webkit-mask-image': `url(${removeIcon})`
   },
 

diff --git a/app/renderer/components/preferences/payment/pinnedInput.js b/app/renderer/components/preferences/payment/pinnedInput.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')
 
 // components
 const ImmutableComponent = require('../../immutableComponent')
@@ -43,26 +43,28 @@ class PinnedInput extends ImmutableComponent {
       defaultValue={this.props.defaultValue}
       onBlur={this.pinPercentage.bind(this, this.props.patern)}
       onKeyPress={this.keyPress.bind(this)}
-      className={css(styles.percInput)}
+      className={css(styles.pinnedInput)}
     />
   }
 }
 
 const styles = StyleSheet.create({
-  percInput: {
-    height: '22px',
-    width: '50px',
+  // Ref: tableTd_percentage on ledgetTable.js
+  pinnedInput: {
+    width: '5ch',
+    border: `1px solid #c4c5c5`,
     borderRadius: globalStyles.radius.borderRadius,
     textAlign: 'right',
-    backgroundColor: 'transparent',
+    background: 'transparent',
     outline: 'none',
-    border: `1px solid #c4c5c5`,
-    padding: '0 9px',
+    padding: '0 1ch',
     fontSize: '16px',
-    marginRight: '-10px',
+
+    // To cancel the global color setting
+    color: '#656565',
 
     ':focus': {
-      backgroundColor: '#fff',
+      background: '#fff',
       borderColor: globalStyles.color.highlightBlue
     }
   }

diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
@@ -349,6 +349,18 @@ const globalStyles = {
     fontSize: {
       regular: '14.5px'
     }
+  },
+
+  sortableTable: {
+    cell: {
+      normal: {
+        padding: '.6rem'
+      },
+
+      small: {
+        padding: '.5rem'
+      }
+    }
   }
 }
 

diff --git a/js/about/preferences.js b/js/about/preferences.js
@@ -251,36 +251,29 @@ class SearchSelectEntry extends ImmutableComponent {
 
 class SearchEntry extends ImmutableComponent {
   render () {
-    return <div>
-      <span style={this.props.iconStyle} />
-      <span style={{paddingLeft: '5px', verticalAlign: 'middle'}}>{this.props.name}</span>
+    return <div className={css(styles.searchEntry)}>
+      <span className={css(styles.searchEntry__icon)} style={this.props.iconStyle} />
+      <span className={css(styles.searchEntry__name)}>{this.props.name}</span>
     </div>
   }
 }
 
 class SearchShortcutEntry extends ImmutableComponent {
   render () {
-    return <div style={{paddingLeft: '5px', verticalAlign: 'middle'}}>
+    return <span className={css(styles.searchShortcutEntry)}>
       {this.props.shortcut}
-    </div>
+    </span>
   }
 }
 
 class SearchTab extends ImmutableComponent {
   get searchProviders () {
     let entries = searchProviders.providers
     let array = []
-    const iconSize = 16
+
     entries.forEach((entry) => {
-      let iconStyle = {
-        backgroundImage: `url(${entry.image})`,
-        minWidth: iconSize,
-        width: iconSize,
-        backgroundSize: iconSize,
-        height: iconSize,
-        display: 'inline-block',
-        verticalAlign: 'middle'
-      }
+      let iconStyle = {backgroundImage: `url(${entry.image})`}
+
       array.push([
         {
           html: <SearchSelectEntry name={entry.name} settings={this.props.settings} />,
@@ -311,7 +304,6 @@ class SearchTab extends ImmutableComponent {
         addHoverClass
         onClick={this.hoverCallback.bind(this)}
         tableClassNames={css(styles.sortableTable_searchTab)}
-        columnClassNames={['default', 'searchEngine', 'engineGoKey']}
       />
       <DefaultSectionTitle data-l10n-id='locationBarSettings' />
       <SettingsList>
@@ -1038,6 +1030,28 @@ const styles = StyleSheet.create({
   sortableTable_searchTab: {
     width: '704px',
     marginBottom: globalStyles.spacing.settingsListContainerMargin // See syncTab.js for use cases
+  },
+
+  searchEntry: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+
+  searchEntry__icon: {
+    height: '1rem',
+    width: '1rem',
+    backgroundSize: '1rem',
+
+    // See table__tbody__tr__td on sortableTable.js
+    marginRight: globalStyles.sortableTable.cell.normal.padding
+  },
+
+  searchEntry__name: {
+    fontSize: '1rem'
+  },
+
+  searchShortcutEntry: {
+    fontSize: '1rem'
   }
 })