Skip to content

Commit

Permalink
Payments features for 1.0
Browse files Browse the repository at this point in the history 
Resolves brave#7347

Auditors: @bsclifton @bradleyrichter @mrose17

Test plan:
  • Loading branch information
@NejcZdovc
NejcZdovc committed Mar 9, 2017
1 parent b9cdefc commit 15b25b0
Show file tree
Hide file tree
Showing 7 changed files with 256 additions and 83 deletions.
14 changes: 14 additions & 0 deletions app/extensions/brave/img/ledger/icon_pin.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions app/extensions/brave/img/ledger/icon_remove.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions app/extensions/brave/locales/en-US/preferences.properties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,7 @@ site=Site
views=Views
timeSpent=Time Spent
include=Include
actions=Actions
percentage=%
remove=Remove
bravery=Bravery
Expand Down
159 changes: 123 additions & 36 deletions app/renderer/components/preferences/payment/ledgerTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ const SortableTable = require('../../../../../js/components/sortableTable')
const globalStyles = require('../../styles/global')
const verifiedGreenIcon = require('../../../../extensions/brave/img/ledger/verified_green_icon.svg')
const verifiedWhiteIcon = require('../../../../extensions/brave/img/ledger/verified_white_icon.svg')
const removeIcon = require('../../../../extensions/brave/img/ledger/icon_remove.svg')
const pinIcon = require('../../../../extensions/brave/img/ledger/icon_pin.svg')

// other
const settings = require('../../../../../js/constants/settings')
Expand Down Expand Up @@ -73,30 +75,43 @@ class LedgerTable extends ImmutableComponent {
return true
}

isPinned (synopsis) {
const hostSettings = this.props.siteSettings.get(this.getHostPattern(synopsis))
if (hostSettings) {
return !!hostSettings.get('ledgerPinned')
}
return false
}

banSite (hostPattern) {
aboutActions.changeSiteSetting(hostPattern, 'ledgerPaymentsShown', false)
}

togglePinSite (hostPattern, pinned) {
aboutActions.changeSiteSetting(hostPattern, 'ledgerPinned', pinned)
}

get columnClassNames () {
return [
css(styles.tableTd),
css(styles.tableTd, styles.alignRight),
css(styles.tableTd),
css(styles.tableTd),
css(styles.tableTd, styles.alignRight),
css(styles.tableTd, styles.alignRight),
css(styles.tableTd, styles.alignRight)
css(styles.tableTd, styles.alignRight, styles.verifiedTd), // verified
css(styles.tableTd, styles.alignRight), // sites
css(styles.tableTd), // include
css(styles.tableTd, styles.alignRight), // views
css(styles.tableTd, styles.alignRight), // time spent
css(styles.tableTd, styles.alignRight), // percentage
css(styles.tableTd, styles.alignLeft) // actions
]
}

getRow (synopsis) {
if (!synopsis || !synopsis.get || !this.shouldShow(synopsis)) {
return []
}

const faviconURL = synopsis.get('faviconURL')
const rank = synopsis.get('rank')
const views = synopsis.get('views')
const verified = synopsis.get('verified')
const pinned = this.isPinned(synopsis)
const duration = synopsis.get('duration')
const publisherURL = synopsis.get('publisherURL')
const percentage = synopsis.get('percentage')
Expand All @@ -105,18 +120,11 @@ class LedgerTable extends ImmutableComponent {

return [
{
html: <div className={css(styles.neverShowSiteIcon)}
onClick={this.banSite.bind(this, this.getHostPattern(synopsis))}>
<span className={globalStyles.appIcons.exclude} />
</div>,
html: verified && this.getVerifiedIcon(synopsis),
value: ''
},
rank,
{
html: <div>
{
verified && this.getVerifiedIcon(synopsis)
}
<a className={css(styles.siteData)} href={publisherURL} target='_blank'>
{
faviconURL
Expand All @@ -142,14 +150,36 @@ class LedgerTable extends ImmutableComponent {
html: this.getFormattedTime(synopsis),
value: duration
},
percentage
percentage,
{
html: <span>
<span className={css(styles.mainIcon, styles.pinIcon, pinned && styles.pinnedIcon)}
onClick={this.togglePinSite.bind(this, this.getHostPattern(synopsis), !pinned)}
/>
<span className={css(styles.mainIcon, styles.removeIcon)}
onClick={this.banSite.bind(this, this.getHostPattern(synopsis))}
/>
</span>,
value: ''
}
]
}

render () {
if (!this.synopsis || !this.synopsis.size) {
return null
}

const allRows = this.synopsis.filter(synopsis => {
return !getSetting(settings.HIDE_EXCLUDED_SITES, this.props.settings) || this.enabledForSite(synopsis)
})
const pinnedRows = allRows.filter(synopsis => {
return this.isPinned(synopsis)
})
const unPinnedRows = allRows.filter(synopsis => {
return !this.isPinned(synopsis)
})

return <div data-test-id='ledgerTable'>
<div className={css(styles.hideExcludedSites)}>
<div className={css(styles.columnOffset)} />
Expand All @@ -164,36 +194,50 @@ class LedgerTable extends ImmutableComponent {
</div>
<SortableTable
tableClassNames={css(styles.tableClass)}
headings={['remove', 'rank', 'publisher', 'include', 'views', 'timeSpent', 'percentage']}
defaultHeading='rank'
headings={['', 'publisher', 'include', 'views', 'timeSpent', 'percentage', 'actions']}
defaultHeading='views'
defaultHeadingSortOrder='desc'
headerClassNames={css(styles.tableTh)}
columnClassNames={this.columnClassNames}
rowClassNames={this.synopsis.map(item => this.enabledForSite(item)
? css(styles.tableTr)
: css(styles.tableTr, styles.paymentsDisabled)
).toJS()}
rowClassNames={[
pinnedRows.map(item => this.enabledForSite(item)
? css(styles.tableTr)
: css(styles.tableTr, styles.paymentsDisabled)
).toJS(),
unPinnedRows.map(item => this.enabledForSite(item)
? css(styles.tableTr)
: css(styles.tableTr, styles.paymentsDisabled)
).toJS()
]}
bodyClassNames={[css(styles.pinnedBody), '']}
onContextMenu={aboutActions.contextMenu}
contextMenuName='synopsis'
rowObjects={this.synopsis.map(entry => {
return {
hostPattern: this.getHostPattern(entry),
location: entry.get('publisherURL')
}
}).toJS()}
rows={this.synopsis.filter(synopsis => {
return !getSetting(settings.HIDE_EXCLUDED_SITES, this.props.settings) || this.enabledForSite(synopsis)
}).map((synopsis) => this.getRow(synopsis)).toJS()}
rowObjects={[
pinnedRows.map(entry => {
return {
hostPattern: this.getHostPattern(entry),
location: entry.get('publisherURL')
}
}).toJS(),
unPinnedRows.map(item => this.enabledForSite(item)
? css(styles.tableTr)
: css(styles.tableTr, styles.paymentsDisabled)
).toJS()
]}
rows={[
pinnedRows.map((synopsis) => this.getRow(synopsis)).toJS(),
unPinnedRows.map((synopsis) => this.getRow(synopsis)).toJS()
]}
/>
</div>
}
}

const verifiedBadge = (icon) => ({
position: 'absolute',
height: '20px',
width: '20px',
left: '-10px',
top: '3px',
marginRight: '-10px',
display: 'block',
background: `url(${icon}) center no-repeat`
})

Expand All @@ -213,7 +257,8 @@ const styles = StyleSheet.create({

tableClass: {
width: '100%',
textAlign: 'left'
textAlign: 'left',
borderCollapse: 'collapse'
},

tableTh: {
Expand All @@ -234,6 +279,15 @@ const styles = StyleSheet.create({
padding: '0 15px'
},

verifiedTd: {
padding: '0 0 0 15px'
},

pinnedBody: {
borderBottom: `1px solid ${globalStyles.color.braveOrange}`,
borderCollapse: 'collapse'
},

siteData: {
display: 'flex',
flex: '1',
Expand Down Expand Up @@ -278,8 +332,41 @@ const styles = StyleSheet.create({
textAlign: 'right'
},

alignLeft: {
textAlign: 'left'
},

paymentsDisabled: {
opacity: 0.6
},

mainIcon: {
backgroundColor: globalStyles.color.gray,
width: '15px',
height: '16px',
display: 'inline-block',
marginRight: '10px',
marginTop: '6px',

':hover': {
backgroundColor: globalStyles.color.buttonColor
}
},

pinIcon: {
'-webkit-mask-image': `url(${pinIcon})`
},

pinnedIcon: {
backgroundColor: globalStyles.color.braveOrange,

':hover': {
backgroundColor: globalStyles.color.braveDarkOrange
}
},

removeIcon: {
'-webkit-mask-image': `url(${removeIcon})`
}
})

Expand Down
1 change: 1 addition & 0 deletions docs/state.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,6 +244,7 @@ AppStore
httpsEverywhere: boolean,
ledgerPayments: boolean, // false if site should not be paid by the ledger. Defaults to true.
ledgerPaymentsShown: boolean, // false if site should not be paid by the ledger and should not be shown in the UI. Defaults to true.
ledgerPinned: boolean, // false if site should not be pinned. Defaults to false
mediaPermission: boolean,
midiSysexPermission: boolean,
notificationsPermission: boolean,
Expand Down
Loading

0 comments on commit 15b25b0

Please sign in to comment.