restyle preferences payments

app/extensions/brave/locales/en-US/preferences.properties

@@ -51,6 +51,7 @@ viewPaymentHistory=View Payment History
 paymentHistoryTitle=Your Payment History
 paymentHistoryFooterText=Your next payment contribution is {{reconcileDate}}.
 paymentHistoryOKText=OK
+hideExcluded=hide excluded sites
 bravePayments=Brave Payments
 beta=beta
 contributionDate=Contribution Date
@@ -111,6 +112,7 @@ views=Views
 timeSpent=Time Spent
 include=Include
 percentage=%
+remove=Remove
 bravery=Bravery
 hintsTitle=Helpful hints
 hint0=The Bravery panel allows you to turn HTTPS Everywhere on or off. HTTPS Everywhere automatically changes your HTTP traffic to HTTPS for supported sites to keep you more secure.

docs/state.md

@@ -198,6 +198,7 @@ AppStore
     'advanced.torrent-viewer-enabled': boolean, // Whether to render magnet links in the browser
     'advanced.smooth-scroll-enabled': boolean, // false if smooth scrolling should be explicitly disabled
     'advanced.send-crash-reports': boolean, // true or undefined if crash reports should be sent
+    'advanced.hide-excluded-sites': boolean, // Whether to hide excluded sites in the payments list
     'shutdown.clear-history': boolean, // true to clear history on shutdown
     'shutdown.clear-downloads': boolean, // true to clear downloads on shutdown
     'shutdown.clear-cache': boolean, // true to clear cache on shutdown

js/about/preferences.js

@@ -248,6 +248,10 @@ class LedgerTable extends ImmutableComponent {
     return true
   }
 
+  banSite (hostPattern) {
+    aboutActions.changeSiteSetting(hostPattern, 'ledgerPaymentsShown', false)
+  }
+
   getRow (synopsis) {
     if (!synopsis || !synopsis.get || !this.shouldShow(synopsis)) {
       return []
@@ -263,6 +267,10 @@ class LedgerTable extends ImmutableComponent {
     const defaultSiteSetting = true
 
     return [
+      {
+        html: <div className='neverShowSiteIcon' onClick={this.banSite.bind(this, this.getHostPattern(synopsis))}><span className='fa fa-ban' /></div>,
+        value: ''
+      },
       rank,
       {
         html: <a href={publisherURL} target='_blank'>{verified ? this.getVerifiedIcon() : null}{faviconURL ? <img src={faviconURL} alt={site} /> : <span className='fa fa-file-o' />}<span>{site}</span></a>,
@@ -286,11 +294,18 @@ class LedgerTable extends ImmutableComponent {
       return null
     }
     return <div className='ledgerTable'>
+      <div className='hideExcludedSites'>
+        <SettingCheckbox
+          dataL10nId='hideExcluded'
+          prefKey={settings.HIDE_EXCLUDED_SITES}
+          settings={this.props.settings}
+          onChangeSetting={this.props.onChangeSetting}
+        />
+      </div>
       <SortableTable
-        headings={['rank', 'publisher', 'include', 'views', 'timeSpent', 'percentage']}
+        headings={['remove', 'rank', 'publisher', 'include', 'views', 'timeSpent', 'percentage']}
         defaultHeading='rank'
-        overrideDefaultStyle
-        columnClassNames={['alignRight', '', '', 'alignRight', 'alignRight', 'alignRight']}
+        columnClassNames={['', 'alignRight', '', '', 'alignRight', 'alignRight', 'alignRight']}
         rowClassNames={
           this.synopsis.map((item) =>
             this.enabledForSite(item) ? '' : 'paymentsDisabled').toJS()
@@ -303,7 +318,12 @@ class LedgerTable extends ImmutableComponent {
             location: entry.get('publisherURL')
           }
         }).toJS()}
-        rows={this.synopsis.map((synopsis) => this.getRow(synopsis)).toJS()} />
+        rows={this.synopsis.filter((synopsis) => {
+          return !getSetting(settings.HIDE_EXCLUDED_SITES, this.props.settings) || this.enabledForSite(synopsis)
+        }).map((synopsis) => {
+          return this.getRow(synopsis)
+        }).toJS()}
+        />
     </div>
   }
 }
@@ -970,6 +990,8 @@ class PaymentsTab extends ImmutableComponent {
   get tableContent () {
     // TODO: This should be sortable. #2497
     return <LedgerTable ledgerData={this.props.ledgerData}
+      settings={this.props.settings}
+      onChangeSetting={this.props.onChangeSetting}
       siteSettings={this.props.siteSettings} />
   }
 

js/constants/appConfig.js

@@ -143,6 +143,7 @@ module.exports = {
     'advanced.smooth-scroll-enabled': false,
     'advanced.send-crash-reports': true,
     'advanced.send-usage-statistics': false,
+    'advanced.hide-excluded-sites': false,
     'advanced.minimum-visit-time': 8,
     'advanced.minimum-visits': 5,
     'shutdown.clear-history': false,

js/constants/settings.js

@@ -59,6 +59,7 @@ const settings = {
   SEND_CRASH_REPORTS: 'advanced.send-crash-reports',
   SEND_USAGE_STATISTICS: 'advanced.send-usage-statistics',
   ADBLOCK_CUSTOM_RULES: 'adblock.customRules',
+  HIDE_EXCLUDED_SITES: 'advanced.hide-excluded-sites',
   MINIMUM_VISIT_TIME: 'advanced.minimum-visit-time',
   MINIMUM_VISITS: 'advanced.minimum-visits',
 

less/about/preferences.less

@@ -490,23 +490,30 @@ table.sortableTable {
     td {
       padding: 0 15px;
     }
+  }
 
-    td {
-      position: relative;
-    }
+  .neverShowSiteIcon {
+    font-size: 20px;
+    text-align: center;
 
-    .th-inner {
-      font-weight: bold;
+    .fa {
+      visibility: hidden;
+    }
 
-      &:hover {
-        cursor: pointer;
-        text-decoration: underline;
+    &:hover {
+      .fa {
+        visibility: visible;
       }
     }
   }
 
 }
 
+.hideExcludedSites {
+  text-align: right;
+  margin: 10px 75px;
+}
+
 .modal .dialog.paymentHistory .sectionTitle {
   text-align: left;
 }
@@ -721,6 +728,7 @@ div.nextPaymentSubmission {
   }
 
   .sort {
+    width: 100%;
     text-align: left;
   }
 

less/sortableTable.less

@@ -62,10 +62,6 @@ table.sortableTable {
       -webkit-font-smoothing: antialiased;
       width: auto;
 
-      &:nth-of-type(2) {
-        width: 60%;
-      }
-
       input[type='range'] {
         background: transparent;
         -webkit-appearance: none;