Skip to content
This repository was archived by the owner on Jun 6, 2019. It is now read-only.

Commit 244c14a

Browse files
cezaraugustocezaraugusto
authored
Merge pull request #34 from brave/brave-ui/v0.10.5
Update brave-ui to v0.10.6 + Tests
2 parents 43d3943 + f74d944 commit 244c14a

15 files changed

+966
-300
lines changed

‎app/components/braveShields/braveShields.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import BraveShieldsFooter from './braveShieldsFooter'
1010
import * as shieldActions from '../../types/actions/shieldsPanelActions'
1111
import { Tab } from '../../types/state/shieldsPannelState'
1212

13-
interface Props {
13+
interface BraveShieldsProps {
1414
actions: {
1515
shieldsToggled: shieldActions.ShieldsToggled
1616
blockAdsTrackers: shieldActions.BlockAdsTrackers
@@ -25,7 +25,7 @@ interface Props {
2525
shieldsPanelTabData: Tab
2626
}
2727

28-
export default class BraveShields extends React.Component<Props, object> {
28+
export default class BraveShields extends React.Component<BraveShieldsProps, {}> {
2929
render () {
3030
const { shieldsPanelTabData, actions } = this.props
3131

‎app/components/braveShields/braveShieldsControls.tsx

+80-76
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,19 @@
33
* You can obtain one at http://mozilla.org/MPL/2.0/. */
44

55
import * as React from 'react'
6-
import { Grid, Column, SwitchButton, BrowserSelect, ContentToggle } from 'brave-ui'
6+
import { Grid, Column } from 'brave-ui/gridSystem'
7+
import SwitchButton from 'brave-ui/switchButton'
8+
import SelectOption from 'brave-ui/selectOption'
9+
import ContentToggleArrow from 'brave-ui/contentToggleArrow'
10+
import BoxedContent from 'brave-ui/boxedContent'
711
import * as shieldActions from '../../types/actions/shieldsPanelActions'
812
import { BlockOptions, BlockFPOptions, BlockCookiesOptions } from '../../types/other/blockTypes'
913
import { getMessage } from '../../background/api/localeAPI'
1014
import { NoScriptInfo } from '../../types/other/noScriptInfo'
1115
import NoScript from '../noScript/noScript'
16+
import theme from '../../theme'
1217

13-
export interface Props {
18+
export interface BraveShieldsControlsProps {
1419
controlsOpen: boolean
1520
braveShields: BlockOptions
1621
httpUpgradableResources: BlockOptions
@@ -30,8 +35,8 @@ export interface Props {
3035
changeNoScriptSettings: shieldActions.ChangeNoScriptSettings
3136
}
3237

33-
export default class BraveShieldsControls extends React.Component<Props, Object> {
34-
constructor (props: Props) {
38+
export default class BraveShieldsControls extends React.Component<BraveShieldsControlsProps, {}> {
39+
constructor (props: BraveShieldsControlsProps) {
3540
super(props)
3641
this.onChangeAdControl = this.onChangeAdControl.bind(this)
3742
this.onToggleControls = this.onToggleControls.bind(this)
@@ -78,92 +83,91 @@ export default class BraveShieldsControls extends React.Component<Props, Object>
7883
render () {
7984
const { braveShields, ads, trackers, controlsOpen, httpUpgradableResources, javascript, fingerprinting, cookies, noScriptInfo } = this.props
8085
return (
81-
<Grid
82-
id='braveShieldsControls'
83-
background='#eee'
84-
padding='10px 10px 0'
85-
gap='10px 5px'
86-
>
86+
<Grid id='braveShieldsControls' theme={theme.braveShieldsControls}>
8787
<Column>
88-
<ContentToggle
88+
<ContentToggleArrow
89+
id='advancedControlsToggle'
8990
withSeparator={true}
9091
open={controlsOpen}
9192
summary={getMessage('shieldsControlsAdvancedControls')}
9293
onClick={this.onToggleControls}
9394
>
94-
<BrowserSelect
95-
disabled={braveShields === 'block'}
96-
titleName={getMessage('shieldsControlsAdControl')}
97-
value={braveShields !== 'block' && ads !== 'allow' && trackers !== 'allow' ? 'allow' : 'block'}
98-
onChange={this.onChangeAdControl}
99-
>
100-
{/* TODO needs "show brave ads" */}
101-
<option value='allow'>{getMessage('shieldsControlsAdControlOptionBlockAds')}</option>
102-
<option value='block'>{getMessage('shieldsControlsAdControlOptionAllowAdsTracking')}</option>
103-
</BrowserSelect>
95+
<BoxedContent theme={theme.braveShieldsControlsContent}>
96+
<SelectOption
97+
id='shieldsControlsAdControl'
98+
disabled={braveShields === 'block'}
99+
titleName={getMessage('shieldsControlsAdControl')}
100+
value={braveShields !== 'block' && ads !== 'allow' && trackers !== 'allow' ? 'allow' : 'block'}
101+
onChange={this.onChangeAdControl}
102+
>
103+
{/* TODO needs "show brave ads" */}
104+
<option value='allow'>{getMessage('shieldsControlsAdControlOptionBlockAds')}</option>
105+
<option value='block'>{getMessage('shieldsControlsAdControlOptionAllowAdsTracking')}</option>
106+
</SelectOption>
104107

105-
<BrowserSelect
106-
disabled={braveShields === 'block'}
107-
titleName={getMessage('shieldsControlsCookieControl')}
108-
value={braveShields !== 'block' ? cookies : 'allow'}
109-
onChange={this.onChangeCookiesProtection}
110-
>
111-
<option value='block_third_party'>{getMessage('shieldsControlsCookieOptionBlock3p')}</option>
112-
<option value='block'>{getMessage('shieldsControlsCookieOptionBlockAll')}</option>
113-
<option value='allow'>{getMessage('shieldsControlsCookieOptionAllowAll')}</option>
114-
</BrowserSelect>
108+
<SelectOption
109+
id='shieldsControlsCookieControl'
110+
disabled={braveShields === 'block'}
111+
titleName={getMessage('shieldsControlsCookieControl')}
112+
value={braveShields !== 'block' ? cookies : 'allow'}
113+
onChange={this.onChangeCookiesProtection}
114+
>
115+
<option value='block_third_party'>{getMessage('shieldsControlsCookieOptionBlock3p')}</option>
116+
<option value='block'>{getMessage('shieldsControlsCookieOptionBlockAll')}</option>
117+
<option value='allow'>{getMessage('shieldsControlsCookieOptionAllowAll')}</option>
118+
</SelectOption>
115119

116-
<BrowserSelect
117-
disabled={braveShields === 'block'}
118-
titleName={getMessage('shieldsControlsFingerprintingProtection')}
119-
value={braveShields !== 'block' ? fingerprinting : 'allow'}
120-
onChange={this.onChangeFingerprintingProtection}
121-
>
122-
<option value='block_third_party'>{getMessage('shieldsControlsFingerprintingOptionBlock3p')}</option>
123-
<option value='block'>{getMessage('shieldsControlsFingerprintingOptionBlockAll')}</option>
124-
<option value='allow'>{getMessage('shieldsControlsFingerprintingOptionAllowAll')}</option>
125-
</BrowserSelect>
126-
<Grid
127-
gap='10px 5px'
128-
padding='5px 0'
129-
>
130-
<Column>
131-
{/* TODO @cezaraugusto */}
132-
<SwitchButton
133-
id='httpsEverywhere'
134-
disabled={braveShields === 'block'}
135-
rightText={getMessage('shieldsControlsHttpsEverywhereSwitch')}
136-
checked={braveShields !== 'block' && httpUpgradableResources !== 'allow'}
137-
onChange={this.onToggleHTTPSEverywhere}
138-
/>
139-
</Column>
140-
<Column>
141-
{/* TODO @cezaraugusto */}
142-
<SwitchButton
143-
id='blockScripts'
144-
disabled={braveShields === 'block'}
145-
rightText={getMessage('shieldsControlsBlockScriptsSwitch')}
146-
checked={braveShields !== 'block' && javascript !== 'allow'}
147-
onChange={this.onToggleJavaScript}
148-
/>
149-
</Column>
150-
<Column>
151-
{/* TODO @cezaraugusto */}
152-
<SwitchButton
153-
id='blockPhishingMalware'
154-
checked={false}
155-
disabled={braveShields === 'block'}
156-
rightText={getMessage('shieldsControlsBlockPhishingMalwareSwitch')}
157-
/>
158-
</Column>
159-
</Grid>
120+
<SelectOption
121+
id='shieldsControlsFingerprintingProtection'
122+
disabled={braveShields === 'block'}
123+
titleName={getMessage('shieldsControlsFingerprintingProtection')}
124+
value={braveShields !== 'block' ? fingerprinting : 'allow'}
125+
onChange={this.onChangeFingerprintingProtection}
126+
>
127+
<option value='block_third_party'>{getMessage('shieldsControlsFingerprintingOptionBlock3p')}</option>
128+
<option value='block'>{getMessage('shieldsControlsFingerprintingOptionBlockAll')}</option>
129+
<option value='allow'>{getMessage('shieldsControlsFingerprintingOptionAllowAll')}</option>
130+
</SelectOption>
131+
132+
<Grid theme={theme.braveShieldsControlsSwitches}>
133+
<Column>
134+
{/* TODO @cezaraugusto */}
135+
<SwitchButton
136+
id='httpsEverywhere'
137+
disabled={braveShields === 'block'}
138+
rightText={getMessage('shieldsControlsHttpsEverywhereSwitch')}
139+
checked={braveShields !== 'block' && httpUpgradableResources !== 'allow'}
140+
onChange={this.onToggleHTTPSEverywhere}
141+
/>
142+
</Column>
143+
<Column>
144+
{/* TODO @cezaraugusto */}
145+
<SwitchButton
146+
id='blockScripts'
147+
disabled={braveShields === 'block'}
148+
rightText={getMessage('shieldsControlsBlockScriptsSwitch')}
149+
checked={braveShields !== 'block' && javascript !== 'allow'}
150+
onChange={this.onToggleJavaScript}
151+
/>
152+
</Column>
153+
<Column>
154+
{/* TODO @cezaraugusto */}
155+
<SwitchButton
156+
id='blockPhishingMalware'
157+
checked={false}
158+
disabled={braveShields === 'block'}
159+
rightText={getMessage('shieldsControlsBlockPhishingMalwareSwitch')}
160+
/>
161+
</Column>
162+
</Grid>
160163
<NoScript
161164
blocked={javascript !== 'allow'}
162165
noScriptInfo={noScriptInfo}
163166
onSubmit={this.onAllowScriptOriginsOnce}
164167
onChangeNoScriptSettings={this.onChangeNoScriptSettings}
165168
/>
166-
</ContentToggle>
169+
</BoxedContent>
170+
</ContentToggleArrow>
167171
</Column>
168172
</Grid>
169173
)

‎app/components/braveShields/braveShieldsFooter.tsx

+10-12
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,26 @@
33
* You can obtain one at http://mozilla.org/MPL/2.0/. */
44

55
import * as React from 'react'
6-
import { Grid, Column, ActionButton, Anchor } from 'brave-ui'
6+
import { Grid, Column } from 'brave-ui/gridSystem'
7+
import Anchor from 'brave-ui/anchor'
8+
import UnstyledButton from 'brave-ui/unstyledButton'
79
import { getMessage } from '../../background/api/localeAPI'
10+
import theme from '../../theme'
811

9-
export default class BraveShieldsFooter extends React.Component<{}, object> {
12+
export default class BraveShieldsFooter extends React.PureComponent<{}, {}> {
1013
render () {
1114
return (
12-
<Grid
13-
id='braveShieldsFooter'
14-
gap='10px'
15-
padding='0 10px 10px'
16-
background='#eee'
17-
>
18-
<Column align='flex-start' size={9}>
15+
<Grid id='braveShieldsFooter' theme={theme.braveShieldsFooter}>
16+
<Column size={9} theme={theme.columnStart}>
1917
<Anchor
20-
noStyle={true}
18+
theme={theme.editLink}
2119
href='chrome://settings'
2220
target='_blank'
2321
text={getMessage('shieldsFooterEditDefault')}
2422
/>
2523
</Column>
26-
<Column align='flex-end' size={3}>
27-
<ActionButton text={getMessage('shieldsFooterReload')} />
24+
<Column size={3} theme={theme.columnEnd}>
25+
<UnstyledButton text={getMessage('shieldsFooterReload')} />
2826
</Column>
2927
</Grid>
3028
)

‎app/components/braveShields/braveShieldsHeader.tsx

+19-14
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,24 @@
33
* You can obtain one at http://mozilla.org/MPL/2.0/. */
44

55
import * as React from 'react'
6-
import { Grid, Column, Separator, SwitchButton, ActionButton, BrowserText } from 'brave-ui'
6+
import { Grid, Column } from 'brave-ui/gridSystem'
7+
import Separator from 'brave-ui/separator'
8+
import SwitchButton from 'brave-ui/switchButton'
9+
import UnstyledButton from 'brave-ui/unstyledButton'
10+
import TextLabel from 'brave-ui/textLabel'
711
import * as shieldActions from '../../types/actions/shieldsPanelActions'
812
import { BlockOptions } from '../../types/other/blockTypes'
913
import { getMessage } from '../../background/api/localeAPI'
14+
import theme from '../../theme'
1015

11-
export interface Props {
16+
export interface BraveShieldsHeaderProps {
1217
shieldsToggled: shieldActions.ShieldsToggled
1318
hostname: string
1419
braveShields: BlockOptions
1520
}
1621

17-
export default class BraveShieldsHeader extends React.Component<Props, object> {
18-
constructor (props: Props) {
22+
export default class BraveShieldsHeader extends React.PureComponent<BraveShieldsHeaderProps, {}> {
23+
constructor (props: BraveShieldsHeaderProps) {
1924
super(props)
2025
this.onToggleShields = this.onToggleShields.bind(this)
2126
this.onClosePopup = this.onClosePopup.bind(this)
@@ -33,11 +38,11 @@ export default class BraveShieldsHeader extends React.Component<Props, object> {
3338
render () {
3439
const { braveShields, hostname } = this.props
3540
return (
36-
<Grid id='braveShieldsHeader' background='#808080' padding='10px' gap='0' textColor='#fafafa'>
37-
<Column size={4} verticalAlign='center'>
38-
<BrowserText noSelect={true} fontSize='14px' text={getMessage('shieldsHeaderShieldsToggle')} />
41+
<Grid id='braveShieldsHeader' theme={theme.braveShieldsHeader}>
42+
<Column size={4} theme={theme.columnVerticalCenter}>
43+
<TextLabel theme={theme.title} text={getMessage('shieldsHeaderShieldsToggle')} />
3944
</Column>
40-
<Column size={6} verticalAlign='center'>
45+
<Column size={6} theme={theme.columnVerticalCenter}>
4146
<SwitchButton
4247
id='shieldsToggle'
4348
leftText={getMessage('shieldsHeaderToggleLeftPosition')}
@@ -46,19 +51,19 @@ export default class BraveShieldsHeader extends React.Component<Props, object> {
4651
onChange={this.onToggleShields}
4752
/>
4853
</Column>
49-
<Column size={2} align='flex-end' verticalAlign='center'>
50-
<ActionButton
51-
fontSize='20px'
54+
<Column size={2} theme={theme.columnVerticalCenterEnd}>
55+
<UnstyledButton
56+
theme={theme.closeButton}
5257
text='&times;'
5358
onClick={this.onClosePopup}
5459
/>
5560
</Column>
5661
<Column>
5762
<Separator />
58-
<BrowserText noSelect={true} text={getMessage('shieldsHeaderForSite')} />
5963
</Column>
60-
<Column verticalAlign='center'>
61-
<BrowserText noSelect={true} fontSize='20px' text={hostname} />
64+
<Column theme={theme.hostnameContent}>
65+
<TextLabel text={getMessage('shieldsHeaderForSite')} />
66+
<TextLabel id='hostname' theme={theme.hostname} text={hostname} />
6267
</Column>
6368
</Grid>
6469
)

0 commit comments

Comments
 (0)