|
| 1 | +const ImmutableComponent = require('../../../../js/components/immutableComponent') |
| 2 | +const preferenceTabs = require('../../../../js/constants/preferenceTabs') |
| 3 | +const PreferenceNavigationButton = require('./preferenceNavigationButton') |
| 4 | +const HelpfulHints = require('./helpfulHints') |
| 5 | + |
| 6 | +const {StyleSheet, css} = require('aphrodite') |
| 7 | +const globalStyles = require('../styles/global') |
| 8 | + |
| 9 | +// Icons |
| 10 | +const iconGeneral = require('../../../extensions/brave/img/preferences/browser_prefs_general.svg') |
| 11 | +const iconSearch = require('../../../extensions/brave/img/preferences/browser_prefs_search.svg') |
| 12 | +const iconTabs = require('../../../extensions/brave/img/preferences/browser_prefs_tabs.svg') |
| 13 | +// const iconExtensions = require('../../../extensions/brave/img/preferences/browser_prefs_extensions.svg') |
| 14 | +const iconPlugins = require('../../../extensions/brave/img/preferences/browser_prefs_plugins.svg') |
| 15 | +const iconSecurity = require('../../../extensions/brave/img/preferences/browser_prefs_security.svg') |
| 16 | +const iconShields = require('../../../extensions/brave/img/preferences/browser_prefs_shields.svg') |
| 17 | +const iconPayments = require('../../../extensions/brave/img/preferences/browser_prefs_payments.svg') |
| 18 | +// sync TBD |
| 19 | +const iconSync = require('../../../extensions/brave/img/preferences/browser_prefs_sync.svg') |
| 20 | +const iconAdvanced = require('../../../extensions/brave/img/preferences/browser_prefs_advanced.svg') |
| 21 | + |
| 22 | +class PreferenceNavigation extends ImmutableComponent { |
| 23 | + render () { |
| 24 | + return <div className={css(styles.prefAside)}> |
| 25 | + <div className={css(styles.prefNav)}> |
| 26 | + <PreferenceNavigationButton icon={styles.general} |
| 27 | + dataL10nId='general' |
| 28 | + onClick={this.props.changeTab.bind(null, preferenceTabs.GENERAL)} |
| 29 | + selected={this.props.preferenceTab === preferenceTabs.GENERAL} |
| 30 | + /> |
| 31 | + <PreferenceNavigationButton icon={styles.search} |
| 32 | + dataL10nId='search' |
| 33 | + onClick={this.props.changeTab.bind(null, preferenceTabs.SEARCH)} |
| 34 | + selected={this.props.preferenceTab === preferenceTabs.SEARCH} |
| 35 | + /> |
| 36 | + <PreferenceNavigationButton icon={styles.tabs} |
| 37 | + dataL10nId='tabs' |
| 38 | + onClick={this.props.changeTab.bind(null, preferenceTabs.TABS)} |
| 39 | + selected={this.props.preferenceTab === preferenceTabs.TABS} |
| 40 | + /> |
| 41 | + <PreferenceNavigationButton icon={styles.security} |
| 42 | + dataL10nId='security' |
| 43 | + onClick={this.props.changeTab.bind(null, preferenceTabs.SECURITY)} |
| 44 | + selected={this.props.preferenceTab === preferenceTabs.SECURITY} |
| 45 | + /> |
| 46 | + <PreferenceNavigationButton notImplemented icon={styles.sync} |
| 47 | + dataL10nId='sync' |
| 48 | + onClick={this.props.changeTab.bind(null, preferenceTabs.SYNC)} |
| 49 | + selected={this.props.preferenceTab === preferenceTabs.SYNC} |
| 50 | + /> |
| 51 | + <PreferenceNavigationButton icon={styles.payments} |
| 52 | + dataL10nId='payments' |
| 53 | + onClick={this.props.changeTab.bind(null, preferenceTabs.PAYMENTS)} |
| 54 | + selected={this.props.preferenceTab === preferenceTabs.PAYMENTS} |
| 55 | + /> |
| 56 | + { |
| 57 | + /* TODO @cezaraugusto add extensions panel */ |
| 58 | + } |
| 59 | + <PreferenceNavigationButton icon={styles.plugins} |
| 60 | + dataL10nId='plugins' |
| 61 | + onClick={this.props.changeTab.bind(null, preferenceTabs.PLUGINS)} |
| 62 | + selected={this.props.preferenceTab === preferenceTabs.PLUGINS} |
| 63 | + /> |
| 64 | + <PreferenceNavigationButton icon={styles.shields} |
| 65 | + dataL10nId='shields' |
| 66 | + onClick={this.props.changeTab.bind(null, preferenceTabs.SHIELDS)} |
| 67 | + selected={this.props.preferenceTab === preferenceTabs.SHIELDS} |
| 68 | + /> |
| 69 | + <PreferenceNavigationButton icon={styles.advanced} |
| 70 | + dataL10nId='advanced' |
| 71 | + onClick={this.props.changeTab.bind(null, preferenceTabs.ADVANCED)} |
| 72 | + selected={this.props.preferenceTab === preferenceTabs.ADVANCED} |
| 73 | + /> |
| 74 | + </div> |
| 75 | + <HelpfulHints hintNumber={this.props.hintNumber} refreshHint={this.props.refreshHint} /> |
| 76 | + </div> |
| 77 | + } |
| 78 | +} |
| 79 | + |
| 80 | +const navIcon = icon => ({WebkitMask: `url(${icon}) no-repeat 0 0`}) |
| 81 | +const styles = StyleSheet.create({ |
| 82 | + prefAside: { |
| 83 | + background: `linear-gradient(${globalStyles.color.gray}, ${globalStyles.color.mediumGray})`, |
| 84 | + boxShadow: globalStyles.shadow.insetShadow, |
| 85 | + position: 'fixed', |
| 86 | + zIndex: '600', |
| 87 | + width: globalStyles.spacing.sideBarWidth, |
| 88 | + height: '100%', |
| 89 | + display: 'flex', |
| 90 | + flexFlow: 'column nowrap', |
| 91 | + fontSize: '16px' |
| 92 | + }, |
| 93 | + |
| 94 | + prefNav: { |
| 95 | + display: 'flex', |
| 96 | + flexFlow: 'column nowrap', |
| 97 | + flex: '1 0 auto', |
| 98 | + width: '100%', |
| 99 | + marginTop: '30px' |
| 100 | + }, |
| 101 | + |
| 102 | + general: navIcon(iconGeneral), |
| 103 | + search: navIcon(iconSearch), |
| 104 | + tabs: navIcon(iconTabs), |
| 105 | + plugins: navIcon(iconPlugins), |
| 106 | + security: navIcon(iconSecurity), |
| 107 | + shields: navIcon(iconShields), |
| 108 | + payments: navIcon(iconPayments), |
| 109 | + sync: navIcon(iconSync), |
| 110 | + advanced: navIcon(iconAdvanced) |
| 111 | +}) |
| 112 | + |
| 113 | +module.exports = PreferenceNavigation |
0 commit comments