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

Commit 2e5220c

Browse files
luixxiulluixxiul
authored
Merge pull request #7995 from luixxiul/commonForm-refactoring
Create commonForm.js and refactor importBrowserDataPanel.js
2 parents e97495d + d8ed98d commit 2e5220c

File tree

6 files changed

+206
-88
lines changed

6 files changed

+206
-88
lines changed

‎app/renderer/components/commonForm.js

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
/* This Source Code Form is subject to the terms of the Mozilla Public
2+
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
3+
* You can obtain one at http://mozilla.org/MPL/2.0/. */
4+
5+
const React = require('react')
6+
const ImmutableComponent = require('../../../js/components/immutableComponent')
7+
8+
const {StyleSheet, css} = require('aphrodite/no-important')
9+
const globalStyles = require('./styles/global')
10+
const commonStyles = require('./styles/commonStyles')
11+
12+
const {FormDropdown} = require('./dropdown')
13+
14+
class CommonForm extends ImmutableComponent {
15+
render () {
16+
return <div className={css(commonStyles.flyoutDialog, styles.CommonForm)} {...this.props} />
17+
}
18+
}
19+
20+
class CommonFormDropdown extends ImmutableComponent {
21+
render () {
22+
return <FormDropdown data-isCommonForm='true' {...this.props} />
23+
}
24+
}
25+
26+
class CommonFormClickable extends ImmutableComponent {
27+
render () {
28+
return <div className={css(styles.CommonFormClickable)} {...this.props} />
29+
}
30+
}
31+
32+
class CommonFormSection extends ImmutableComponent {
33+
render () {
34+
return <div className={css(styles.CommonFormSection)} {...this.props} />
35+
}
36+
}
37+
38+
class CommonFormTitle extends ImmutableComponent {
39+
render () {
40+
return <div className={css(styles.CommonFormSection, styles.CommonFormTitle)} {...this.props} />
41+
}
42+
}
43+
44+
class CommonFormSubSection extends ImmutableComponent {
45+
render () {
46+
return <div className={css(styles.CommonFormSection, styles.CommonFormSubSection)} {...this.props} />
47+
}
48+
}
49+
50+
class CommonFormButtonWrapper extends ImmutableComponent {
51+
render () {
52+
return <div className={css(styles.CommonFormSection, styles.flexJustifyEnd)} {...this.props} />
53+
}
54+
}
55+
56+
class CommonFormBottomWrapper extends ImmutableComponent {
57+
render () {
58+
return <div className={css(styles.CommonFormSection, styles.CommonFormBottomWrapper)} {...this.props} />
59+
}
60+
}
61+
62+
const styles = StyleSheet.create({
63+
flexJustifyEnd: {
64+
display: 'flex',
65+
justifyContent: 'flex-end'
66+
},
67+
68+
CommonForm: {
69+
background: globalStyles.color.commonFormBackgroundColor,
70+
color: '#3b3b3b',
71+
padding: 0,
72+
top: '40px',
73+
cursor: 'default',
74+
maxWidth: '422px',
75+
WebkitUserSelect: 'none'
76+
77+
// Need a general solution
78+
// See: #7930
79+
// overflowY: 'auto',
80+
// maxHeight: '100%'
81+
},
82+
83+
CommonFormClickable: {
84+
color: '#5b5b5b',
85+
86+
':hover': {
87+
color: '#000'
88+
}
89+
},
90+
91+
CommonFormTitle: {
92+
color: globalStyles.color.braveOrange,
93+
fontSize: '1.2em'
94+
},
95+
96+
CommonFormSection: {
97+
// PR #7985
98+
margin: `${globalStyles.spacing.dialogInsideMargin} 30px`
99+
},
100+
101+
CommonFormSubSection: {
102+
margin: `0 0 0 ${globalStyles.spacing.dialogInsideMargin}`
103+
},
104+
105+
CommonFormBottomWrapper: {
106+
margin: 0,
107+
padding: `${globalStyles.spacing.dialogInsideMargin} 30px`,
108+
background: globalStyles.color.commonFormBottomWrapperBackground
109+
}
110+
})
111+
112+
module.exports = {
113+
CommonForm,
114+
CommonFormDropdown,
115+
CommonFormClickable,
116+
CommonFormSection,
117+
CommonFormTitle,
118+
CommonFormSubSection,
119+
CommonFormButtonWrapper,
120+
CommonFormBottomWrapper
121+
}

‎app/renderer/components/dropdown.js

+8-4
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
const React = require('react')
66
const ImmutableComponent = require('../../../js/components/immutableComponent')
7-
const {StyleSheet, css} = require('aphrodite')
7+
const {StyleSheet, css} = require('aphrodite/no-important')
88
const globalStyles = require('./styles/global')
99
const commonStyles = require('./styles/commonStyles')
1010

@@ -15,6 +15,7 @@ class Dropdown extends ImmutableComponent {
1515
const className = css(
1616
this.props['data-isFormControl'] && commonStyles.formControl,
1717
styles.dropdown,
18+
this.props['data-isCommonForm'] && styles.commonForm,
1819
this.props['data-isSettings'] && styles.settings
1920
)
2021

@@ -39,7 +40,7 @@ class SettingDropdown extends ImmutableComponent {
3940
const selectPadding = '0.4em'
4041

4142
const styles = StyleSheet.create({
42-
'dropdown': {
43+
dropdown: {
4344
background: `url(${caretDownGrey}) calc(100% - ${selectPadding}) 50% / contain no-repeat`,
4445
backgroundColor: '#fbfbfb',
4546
backgroundSize: '12px 12px',
@@ -51,15 +52,18 @@ const styles = StyleSheet.create({
5152
'-webkit-appearance': 'none',
5253
width: 'auto'
5354
},
54-
'outlineable': {
55+
outlineable: {
5556
':focus': {
5657
outlineColor: globalStyles.color.statsBlue,
5758
outlineOffset: '-4px',
5859
outlineStyle: 'solid',
5960
outlineWidth: '1px'
6061
}
6162
},
62-
'settings': {
63+
commonForm: {
64+
fontSize: globalStyles.fontSize.flyoutDialog
65+
},
66+
settings: {
6367
width: '280px'
6468
}
6569
})

‎app/renderer/components/importBrowserDataPanel.js

+66-26
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,19 @@ const SwitchControl = require('../../../js/components/switchControl')
1010
const windowActions = require('../../../js/actions/windowActions')
1111
const appActions = require('../../../js/actions/appActions')
1212

13+
const {StyleSheet, css} = require('aphrodite/no-important')
14+
const globalStyles = require('./styles/global')
15+
16+
const {
17+
CommonForm,
18+
CommonFormDropdown,
19+
CommonFormSection,
20+
CommonFormTitle,
21+
CommonFormSubSection,
22+
CommonFormButtonWrapper,
23+
CommonFormBottomWrapper
24+
} = require('./commonForm')
25+
1326
class ImportBrowserDataPanel extends ImmutableComponent {
1427
constructor () {
1528
super()
@@ -111,39 +124,66 @@ class ImportBrowserDataPanel extends ImmutableComponent {
111124
browsers.push(<option value={browser.index}>{browser.name}</option>)
112125
})
113126
}
114-
return <Dialog onHide={this.props.onHide} className='importBrowserDataPanel' isClickDismiss>
115-
<div className='importBrowserData' onClick={(e) => e.stopPropagation()}>
116-
<div className='formSection importBrowserDataTitle' data-l10n-id='importBrowserData' />
117-
<div className='formSection importBrowserDataOptions'>
118-
<select value={this.selectedBrowser}
119-
onChange={this.onChange} >
120-
{browsers}
121-
</select>
122-
<SwitchControl rightl10nId='browserHistory' checkedOn={this.props.importBrowserDataSelected.get('history')}
123-
onClick={this.onToggleHistory} disabled={!this.supportHistory} />
124-
<SwitchControl rightl10nId='favoritesOrBookmarks' checkedOn={this.props.importBrowserDataSelected.get('favorites')}
125-
onClick={this.onToggleFavorites} disabled={!this.supportFavorites} />
126-
<div className='formSection importBrowserSubDataOptions'>
127-
<SwitchControl rightl10nId='mergeIntoBookmarksToolbar'
128-
checkedOn={this.props.importBrowserDataSelected.get('mergeFavorites')}
129-
onClick={this.onToggleMergeFavorites} disabled={!this.props.importBrowserDataSelected.get('favorites')} />
127+
return <Dialog onHide={this.props.onHide} data-test-id='importBrowserDataPanel' isClickDismiss>
128+
<CommonForm data-test-id='importBrowserData' onClick={(e) => e.stopPropagation()}>
129+
<CommonFormTitle
130+
data-test-id='importBrowserDataTitle'
131+
data-l10n-id='importBrowserData'
132+
/>
133+
<CommonFormSection data-test-id='importBrowserDataOptions'>
134+
<div className={css(styles.dropdownWrapper)}>
135+
<CommonFormDropdown
136+
value={this.selectedBrowser}
137+
onChange={this.onChange} >
138+
{browsers}
139+
</CommonFormDropdown>
130140
</div>
131-
<SwitchControl rightl10nId='cookies' checkedOn={this.props.importBrowserDataSelected.get('cookies')}
132-
onClick={this.onToggleCookies} disabled={!this.supportCookies} />
133-
</div>
134-
<div className='formSection'>
141+
<SwitchControl
142+
rightl10nId='browserHistory'
143+
checkedOn={this.props.importBrowserDataSelected.get('history')}
144+
onClick={this.onToggleHistory}
145+
disabled={!this.supportHistory}
146+
/>
147+
<SwitchControl
148+
rightl10nId='favoritesOrBookmarks'
149+
checkedOn={this.props.importBrowserDataSelected.get('favorites')}
150+
onClick={this.onToggleFavorites}
151+
disabled={!this.supportFavorites}
152+
/>
153+
<CommonFormSubSection data-test-id='importBrowserSubDataOptions'>
154+
<SwitchControl
155+
rightl10nId='mergeIntoBookmarksToolbar'
156+
checkedOn={this.props.importBrowserDataSelected.get('mergeFavorites')}
157+
onClick={this.onToggleMergeFavorites}
158+
disabled={!this.props.importBrowserDataSelected.get('favorites')}
159+
/>
160+
</CommonFormSubSection>
161+
<SwitchControl
162+
rightl10nId='cookies'
163+
checkedOn={this.props.importBrowserDataSelected.get('cookies')}
164+
onClick={this.onToggleCookies}
165+
disabled={!this.supportCookies}
166+
/>
167+
</CommonFormSection>
168+
<CommonFormSection>
135169
<div data-l10n-id='importDataCloseBrowserWarning' />
136-
</div>
137-
<div className='formSection importBrowserDataButtons'>
170+
</CommonFormSection>
171+
<CommonFormButtonWrapper data-test-id='importBrowserDataButtons'>
138172
<Button l10nId='cancel' className='whiteButton' onClick={this.props.onHide} />
139173
<Button l10nId='import' className='primaryButton' onClick={this.onImport} />
140-
</div>
141-
<div className='formSection importBrowserDataWarning'>
174+
</CommonFormButtonWrapper>
175+
<CommonFormBottomWrapper data-test-id='importBrowserDataWarning'>
142176
<div data-l10n-id='importDataWarning' />
143-
</div>
144-
</div>
177+
</CommonFormBottomWrapper>
178+
</CommonForm>
145179
</Dialog>
146180
}
147181
}
148182

183+
const styles = StyleSheet.create({
184+
dropdownWrapper: {
185+
marginBottom: `calc(${globalStyles.spacing.dialogInsideMargin} / 2)`
186+
}
187+
})
188+
149189
module.exports = ImportBrowserDataPanel

‎app/renderer/components/styles/commonStyles.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const globalStyles = require('./global')
77

88
const styles = StyleSheet.create({
99
formControl: {
10-
background: 'white',
10+
background: '#fff',
1111
border: `solid 1px ${globalStyles.color.black20}`,
1212
borderRadius: globalStyles.radius.borderRadius,
1313
boxShadow: `inset 0 1px 1px ${globalStyles.color.black10}`,
@@ -21,14 +21,13 @@ const styles = StyleSheet.create({
2121
width: '100%'
2222
},
2323
flyoutDialog: {
24-
backgroundColor: globalStyles.color.toolbarBackground,
24+
background: globalStyles.color.toolbarBackground,
2525
borderRadius: globalStyles.radius.borderRadius,
2626
boxShadow: '2px 2px 8px #3b3b3b',
2727
color: '#000',
2828
fontSize: '13px',
2929
padding: '10px 30px',
3030
position: 'absolute',
31-
textAlign: 'left',
3231
top: globalStyles.spacing.dialogTopOffset
3332
},
3433

‎app/renderer/components/styles/global.js

+8-4
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,14 @@ const globalStyles = {
2626
chromeSecondary: '#d3d3d3',
2727
chromeTertiary: '#c7c7c7',
2828
chromeText: '#555555',
29-
tabsBackground: '#ddd',
30-
tabsBackgroundInactive: '#ddd',
31-
tabsToolbarBorderColor: '#bbb',
3229
navigationBarBackground: 'white',
3330
chromeControlsBackground: '#bbb',
3431
chromeControlsBackground2: 'white',
32+
tabsToolbarBorderColor: '#bbb',
33+
tabsBackground: '#ddd',
34+
tabsBackgroundInactive: '#ddd',
35+
commonFormBottomWrapperBackground: '#ddd',
36+
commonFormBackgroundColor: '#f7f7f7',
3537
toolbarBackground: '#eee',
3638
toolbarBorderColor: '#ccc',
3739
menuSelectionColor: '#2F7AFB',
@@ -122,6 +124,7 @@ const globalStyles = {
122124
closeIconSize: '13px',
123125
narrowIconSize: '12px',
124126
dialogTopOffset: '30px',
127+
dialogInsideMargin: '18px',
125128
paymentsMargin: '20px',
126129
modalPanelHeaderMarginBottom: '.5em',
127130
paddingHorizontal: '30px'
@@ -170,7 +173,8 @@ const globalStyles = {
170173
fontSize: {
171174
tabIcon: '14px',
172175
tabTitle: '12px',
173-
settingItemSubtext: '.95rem'
176+
settingItemSubtext: '.95rem',
177+
flyoutDialog: '13px'
174178
},
175179
appIcons: {
176180
clipboard: 'fa fa-clipboard',

0 commit comments

Comments
 (0)