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

Create sectionTitle.js #8237

Merged
merged 3 commits into from
Apr 22, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 121 additions & 0 deletions app/renderer/components/common/sectionTitle.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */

const React = require('react')
const ImmutableComponent = require('../immutableComponent')

const {StyleSheet, css} = require('aphrodite/no-important')
const globalStyles = require('../styles/global')
const commonStyles = require('../styles/commonStyles')

class SectionTitleWrapper extends ImmutableComponent {
render () {
return <div className={css(
commonStyles.userSelectNone,
styles.sectionTitleWrapper,
this.props['data-beta'] && sectionTitleStyles.beta
)} {...this.props} />
}
}

class SectionTitleLabelWrapper extends ImmutableComponent {
render () {
return <SectionTitleWrapper data-beta='true' {...this.props} />
}
}

class DefaultSectionTitle extends ImmutableComponent {
render () {
return <header className={css(styles.sectionTitleWrapper)}>
<h1 className={css(
commonStyles.userSelectNone,
styles.sectionTitle
)} {...this.props} />
</header>
}
}

class AboutPageSectionTitle extends ImmutableComponent {
render () {
return <div className={css(
commonStyles.userSelectNone,
styles.sectionTitle,
styles.prefSectionTitle,
styles.aboutPageSectionTitle,
this.props['data-subTitle'] && styles.aboutPageSectionSubTitle
)} {...this.props} />
}
}

class AboutPageSectionSubTitle extends ImmutableComponent {
render () {
return <AboutPageSectionTitle data-subTitle='true' {...this.props} />
}
}

class SectionLabelTitle extends ImmutableComponent {
render () {
return <sup className={css(
commonStyles.userSelectNone,
styles.sectionLabelTitle
)} {...this.props} />
}
}

const styles = StyleSheet.create({
sectionTitleWrapper: {
marginBottom: '0.7rem',
display: 'flex',
alignItems: 'flex-end'
},

sectionTitle: {
color: globalStyles.color.darkGray,
cursor: 'default',
fontSize: '1.2rem',
margin: 0,

// Copied from common.less
fontWeight: 400,
WebkitFontSmoothing: 'antialiased'
},
prefSectionTitle: {
color: globalStyles.color.braveOrange,
fontSize: '1.75rem'
},
sectionLabelTitle: {
color: '#999',
fontSize: '15px'
},

aboutPageSectionTitle: {
display: 'inline-block'
},
aboutPageSectionSubTitle: {
fontSize: '16px',
marginBottom: '12px',

// cf: .siteDetailsPage .siteDetailsPageContent
marginTop: '24px'
}
})

const sectionTitleStyles = StyleSheet.create({
beta: {
display: 'flex',
alignItems: 'flex-start'
}
})

module.exports = {
sectionTitleStyles,

SectionTitleWrapper,
SectionTitleLabelWrapper,

DefaultSectionTitle,
SectionLabelTitle,
AboutPageSectionTitle,
AboutPageSectionSubTitle
}
2 changes: 1 addition & 1 deletion app/renderer/components/commonForm.js
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ const styles = StyleSheet.create({
},

CommonFormSubSection: {
margin: `0 0 0 ${globalStyles.spacing.dialogInsideMargin}`
margin: `0 0 ${globalStyles.spacing.dialogInsideMargin} ${globalStyles.spacing.dialogInsideMargin}`
},

CommonFormBottomWrapper: {
Expand Down
8 changes: 5 additions & 3 deletions app/renderer/components/importBrowserDataPanel.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ const {
CommonFormDropdown,
CommonFormSection,
CommonFormTitle,
CommonFormSubSection,
CommonFormButtonWrapper,
CommonFormBottomWrapper
} = require('./commonForm')
Expand Down Expand Up @@ -150,14 +149,14 @@ class ImportBrowserDataPanel extends ImmutableComponent {
onClick={this.onToggleFavorites}
disabled={!this.supportFavorites}
/>
<CommonFormSubSection data-test-id='importBrowserSubDataOptions'>
<div className={css(styles.subSectionMargin)} data-test-id='importBrowserSubDataOptions'>
<SwitchControl
rightl10nId='mergeIntoBookmarksToolbar'
checkedOn={this.props.importBrowserDataSelected.get('mergeFavorites')}
onClick={this.onToggleMergeFavorites}
disabled={!this.props.importBrowserDataSelected.get('favorites')}
/>
</CommonFormSubSection>
</div>
<SwitchControl
rightl10nId='cookies'
checkedOn={this.props.importBrowserDataSelected.get('cookies')}
Expand All @@ -183,6 +182,9 @@ class ImportBrowserDataPanel extends ImmutableComponent {
const styles = StyleSheet.create({
dropdownWrapper: {
marginBottom: `calc(${globalStyles.spacing.dialogInsideMargin} / 2)`
},
subSectionMargin: {
marginLeft: globalStyles.spacing.dialogInsideMargin
}
})

Expand Down
6 changes: 3 additions & 3 deletions app/renderer/components/preferences/extensionsTab.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ const {getSetting} = require('../../../../js/settings')
const {SettingCheckbox} = require('../settings')
const {isPasswordManager, getExtensionKey, isBuiltInExtension, bravifyText} = require('../../lib/extensionsUtil')

const {DefaultSectionTitle} = require('../common/sectionTitle')

const HelpfulText = require('../helpfulText')
const SortableTable = require('../../../../js/components/sortableTable')

Expand Down Expand Up @@ -104,9 +106,7 @@ class ExtensionsTab extends ImmutableComponent {
}
return <div className={css(styles.extensionsContainer)}>
<main className={css(styles.extensionsMain)}>
<header className={css(styles.extensionsOption)}>
<h1 className={css(styles.extensionsHeading)} data-l10n-id='extensions' />
</header>
<DefaultSectionTitle data-l10n-id='extensions' />
<SortableTable
sortingDisabled
tableClassNames={css(styles.extensionsTable)}
Expand Down
31 changes: 24 additions & 7 deletions app/renderer/components/preferences/paymentsTab.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,15 @@ const {StyleSheet, css} = require('aphrodite/no-important')
const cx = require('../../../../js/lib/classSet')
const ImmutableComponent = require('../immutableComponent')
const ModalOverlay = require('../../../../js/components/modalOverlay')

const {SettingCheckbox} = require('../settings')
const {
sectionTitleStyles,
SectionTitleWrapper,
AboutPageSectionTitle,
SectionLabelTitle
} = require('../common/sectionTitle')

const DisabledContent = require('./payment/disabledContent')
const EnabledContent = require('./payment/enabledContent')
const BitcoinDashboard = require('./payment/bitcoinDashboard')
Expand Down Expand Up @@ -162,10 +170,14 @@ class PaymentsTab extends ImmutableComponent {
: null
}

<div className={css(styles.flexAlignEnd)}>
<div className='sectionTitleWrapper'>
<span className='sectionTitle'>Brave Payments</span>
<span className='sectionSubTitle'>beta</span>
<SectionTitleWrapper>
{ /* Note: This div cannot be replaced with SectionTitleLabelWrapper */ }
<div className={cx({
[css(styles.titleWrapper)]: true,
[css(sectionTitleStyles.beta)]: true
})}>
<AboutPageSectionTitle>Brave Payments</AboutPageSectionTitle>
<SectionLabelTitle>beta</SectionLabelTitle>
</div>

<div className={css(
Expand Down Expand Up @@ -236,7 +248,7 @@ class PaymentsTab extends ImmutableComponent {
: null
}
</div>
</div>
</SectionTitleWrapper>
{
this.enabled
? <EnabledContent settings={this.props.settings}
Expand Down Expand Up @@ -264,8 +276,7 @@ const styles = StyleSheet.create({
paymentsContainer: {
position: 'relative',
overflowX: 'hidden',
width: '805px',
marginTop: '15px'
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To make the header of payments and sync appear on the same height.

width: '805px'
},
paymentsSwitches: {
display: 'flex',
Expand All @@ -274,6 +285,12 @@ const styles = StyleSheet.create({
minHeight: '29px'
},

titleWrapper: {
position: 'relative',
marginRight: '49px',
minWidth: '240px'
},

switchWrap: {
width: paymentStyles.width.tableCell
},
Expand Down
9 changes: 6 additions & 3 deletions app/renderer/components/preferences/pluginsTab.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,14 @@ const getSetting = require('../../../../js/settings').getSetting
const settings = require('../../../../js/constants/settings')
const appConfig = require('../../../../js/constants/appConfig')
const {isWindows, isDarwin, isLinux} = require('../../../common/lib/platformUtil')
const {SettingsList, SettingCheckbox} = require('../../components/settings')

const WidevineInfo = require('../../components/widevineInfo')
const flash = appConfig.resourceNames.FLASH
const widevine = appConfig.resourceNames.WIDEVINE

const {SettingsList, SettingCheckbox} = require('../../components/settings')
const {DefaultSectionTitle} = require('../common/sectionTitle')

class PluginsTab extends ImmutableComponent {
get flashInstalled () {
return getSetting(settings.FLASH_INSTALLED, this.props.settings)
Expand Down Expand Up @@ -47,7 +50,7 @@ class PluginsTab extends ImmutableComponent {
const braveWikiLink = 'https://github.com/brave/browser-laptop/wiki'
const flashInfoLink = `${braveWikiLink}/Flash-Support-Deprecation-Proposal#troubleshooting-flash-issues`
return <div>
<div className='sectionTitle' data-l10n-id='pluginSettings' />
<DefaultSectionTitle data-l10n-id='pluginSettings' />
<SettingsList>
<SettingCheckbox checked={this.flashInstalled ? this.props.braveryDefaults.get('flash') : false} dataL10nId='enableFlash' onChange={this.onToggleFlash} disabled={!this.flashInstalled} />
<div className='subtext flashText'>
Expand Down Expand Up @@ -80,7 +83,7 @@ class PluginsTab extends ImmutableComponent {
{
!isLinux()
? <div>
<div className='sectionTitle' data-l10n-id='widevineSection' />
<DefaultSectionTitle data-l10n-id='widevineSection' />
<SettingsList>
<WidevineInfo createTabRequestedAction={aboutActions.createTabRequested} />
<SettingCheckbox checked={this.props.braveryDefaults.get('widevine')} dataL10nId='enableWidevine' onChange={this.onToggleWidevine} />
Expand Down
22 changes: 15 additions & 7 deletions app/renderer/components/preferences/syncTab.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,13 @@ const Button = require('../../../../js/components/button')
const {SettingsList, SettingItem, SettingCheckbox} = require('../settings')
const SortableTable = require('../../../../js/components/sortableTable')

const {
SectionTitleLabelWrapper,
AboutPageSectionTitle,
DefaultSectionTitle,
SectionLabelTitle
} = require('../common/sectionTitle')

const aboutActions = require('../../../../js/about/aboutActions')
const getSetting = require('../../../../js/settings').getSetting
const settings = require('../../../../js/constants/settings')
Expand Down Expand Up @@ -49,7 +56,7 @@ class SyncTab extends ImmutableComponent {

get clearDataContent () {
return <div className='syncClearData'>
<div className='sectionTitle' data-l10n-id='syncClearData' />
<DefaultSectionTitle data-l10n-id='syncClearData' />
{
this.enabled
? <button data-l10n-id='syncResetButton' className='linkButton' onClick={this.props.showOverlay.bind(this, 'syncReset')} />
Expand Down Expand Up @@ -111,7 +118,7 @@ class SyncTab extends ImmutableComponent {

get devicesContent () {
return <div className='devices'>
<div className='sectionTitle' data-l10n-id='syncDevices' data-test-id='syncDevices' />
<DefaultSectionTitle data-l10n-id='syncDevices' data-test-id='syncDevices' />
<SortableTable
headings={['id', 'syncDeviceName', 'syncDeviceLastActive']}
defaultHeading='syncDeviceLastActive'
Expand Down Expand Up @@ -318,10 +325,10 @@ class SyncTab extends ImmutableComponent {
? <ModalOverlay title={'syncReset'} content={this.resetOverlayContent} footer={this.resetOverlayFooter} onHide={this.props.hideOverlay.bind(this, 'syncReset')} />
: null
}
<div className='sectionTitleWrapper'>
<span className='sectionTitle' data-l10n-id='syncTitle' />
<span className='sectionSubTitle'>beta</span>
</div>
<SectionTitleLabelWrapper>
<AboutPageSectionTitle data-l10n-id='syncTitle' />
<SectionLabelTitle>beta</SectionLabelTitle>
</SectionTitleLabelWrapper>
<div className='settingsListContainer'>
<span className='settingsListTitle syncTitleMessage' data-l10n-id='syncTitleMessage' />
<a href='https://github.com/brave/sync/wiki/Design' target='_blank'>
Expand All @@ -338,7 +345,8 @@ class SyncTab extends ImmutableComponent {
</div>
{
this.isSetup && this.enabled
? <div id='syncData'><div className='sectionTitle' data-l10n-id='syncData' />
? <div id='syncData'>
<DefaultSectionTitle data-l10n-id='syncData' />
<SettingsList dataL10nId='syncDataMessage'>
<SettingCheckbox dataL10nId='syncBookmarks' prefKey={settings.SYNC_TYPE_BOOKMARK} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
<SettingCheckbox dataL10nId='syncSiteSettings' prefKey={settings.SYNC_TYPE_SITE_SETTING} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
Expand Down
6 changes: 6 additions & 0 deletions app/renderer/components/styles/commonStyles.js
Original file line number Diff line number Diff line change
Expand Up @@ -221,6 +221,12 @@ const styles = StyleSheet.create({
padding: '2px 15px',
textTransform: 'capitalize',
width: 'auto'
},

siteDetailsPageContent: {
/* TODO: refactor siteDetails.less */
marginTop: '0 !important',
marginLeft: globalStyles.spacing.aboutPageSectionPadding
}
})

Expand Down
Loading