diff --git a/app/extensions/brave/img/caret_down_grey.svg b/app/extensions/brave/img/caret_down_grey.svg new file mode 100644 index 00000000000..c3dd80fe5a5 --- /dev/null +++ b/app/extensions/brave/img/caret_down_grey.svg @@ -0,0 +1 @@ +caret_down_grey \ No newline at end of file diff --git a/app/renderer/components/dropdown.js b/app/renderer/components/dropdown.js new file mode 100644 index 00000000000..63e35d2c03e --- /dev/null +++ b/app/renderer/components/dropdown.js @@ -0,0 +1,82 @@ +/* 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('../../../js/components/immutableComponent') +const {StyleSheet, css} = require('aphrodite') +const globalStyles = require('./styles/global') +const caretDownGrey = require('../../extensions/brave/img/caret_down_grey.svg') + +class Dropdown extends ImmutableComponent { + render () { + const className = css( + this.props['data-isFormControl'] && styles.formControl, + styles.dropdown, + this.props['data-isSettings'] && styles.settings + ) + + return + } +} + +class FormDropdown extends ImmutableComponent { + render () { + return + } +} + +class SettingDropdown extends ImmutableComponent { + render () { + return + } +} + +const selectPadding = '0.4em' + +const styles = StyleSheet.create({ + 'formControl': { + background: 'white', + border: `solid 1px ${globalStyles.color.black20}`, + borderRadius: globalStyles.radius.borderRadius, + boxShadow: `inset 0 1px 1px ${globalStyles.color.black10}`, + boxSizing: 'border-box', + display: 'block', + color: globalStyles.color.darkGray, + fontSize: '14.5px', + height: '2.25em', + outline: 'none', + padding: '0.4em', + width: '100%' + }, + 'dropdown': { + background: `url(${caretDownGrey}) calc(100% - ${selectPadding}) 50% / contain no-repeat`, + backgroundColor: '#fefefe', + backgroundSize: '12px 12px', + boxShadow: `-1px 1px 3px -1px ${globalStyles.color.mediumGray}`, + height: '2rem', + outline: 'none', + padding: selectPadding, + '-webkit-appearance': 'none', + width: 'auto' + }, + 'outlineable': { + ':focus': { + outlineColor: globalStyles.color.statsBlue, + outlineOffset: '-4px', + outlineStyle: 'solid', + outlineWidth: '1px' + } + }, + 'settings': { + width: '280px' + } +}) + +module.exports = { + Dropdown, + FormDropdown, + SettingDropdown +} diff --git a/app/renderer/components/settings.js b/app/renderer/components/settings.js new file mode 100644 index 00000000000..b4a77caefa6 --- /dev/null +++ b/app/renderer/components/settings.js @@ -0,0 +1,39 @@ +/* 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('../../../js/components/immutableComponent') + +class SettingsList extends ImmutableComponent { + render () { + return
+ { + this.props.dataL10nId + ?
+ : null + } +
+ {this.props.children} +
+
+ } +} + +class SettingItem extends ImmutableComponent { + render () { + return
+ { + this.props.dataL10nId + ? + : null + } + {this.props.children} +
+ } +} + +module.exports = { + SettingsList, + SettingItem +} diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js index 6a28d81c039..18d7d62d524 100644 --- a/app/renderer/components/styles/global.js +++ b/app/renderer/components/styles/global.js @@ -46,6 +46,7 @@ const globalStyles = { gray25: 'rgba(116, 116, 130, 0.25)', gray50: 'rgba(116, 116, 130, 0.5)', black10: 'rgba(0, 0, 0, 0.1)', + black20: 'rgba(0, 0, 0, 0.2)', black25: 'rgba(0, 0, 0, 0.25)', black50: 'rgba(0, 0, 0, 0.5)', black75: 'rgba(0, 0, 0, 0.75)', diff --git a/app/renderer/components/textbox.js b/app/renderer/components/textbox.js new file mode 100644 index 00000000000..b9cf0bfe386 --- /dev/null +++ b/app/renderer/components/textbox.js @@ -0,0 +1,87 @@ +/* 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('../../../js/components/immutableComponent') +const {StyleSheet, css} = require('aphrodite') +const globalStyles = require('./styles/global') + +class Textbox extends ImmutableComponent { + render () { + const className = css( + this.props['data-isFormControl'] && styles.formControl, + styles.textbox, + this.props['data-isSettings'] && styles.isSettings, + (this.props.readonly || this.props.readOnly) ? styles.readOnly : styles.outlineable, + this.props['data-isRecoveryKeyTextbox'] && styles.recoveryKeys + ) + + return + } +} + +class FormTextbox extends ImmutableComponent { + render () { + return + } +} + +class SettingTextbox extends ImmutableComponent { + render () { + return + } +} + +class RecoveryKeyTextbox extends ImmutableComponent { + render () { + return + } +} + +const styles = StyleSheet.create({ + 'formControl': { + background: 'white', + border: `solid 1px ${globalStyles.color.black20}`, + borderRadius: globalStyles.radius.borderRadius, + boxShadow: `inset 0 1px 1px ${globalStyles.color.black10}`, + boxSizing: 'border-box', + display: 'block', + color: globalStyles.color.darkGray, + fontSize: '14.5px', + height: '2.25em', + outline: 'none', + padding: '0.4em', + width: '100%' + }, + 'textbox': { + boxSizing: 'border-box', + width: 'auto' + }, + 'outlineable': { + ':focus': { + outlineColor: globalStyles.color.statsBlue, + outlineOffset: '-4px', + outlineStyle: 'solid', + outlineWidth: '1px' + } + }, + 'isSettings': { + width: '280px' + }, + 'readOnly': { + background: globalStyles.color.veryLightGray, + boxShadow: 'none', + outline: 'none' + }, + 'recoveryKeys': { + marginBottom: '20px' + } +}) + +module.exports = { + Textbox, + FormTextbox, + SettingTextbox, + RecoveryKeyTextbox +} diff --git a/js/about/preferences.js b/js/about/preferences.js index ed7d12e9804..33a8618e115 100644 --- a/js/about/preferences.js +++ b/js/about/preferences.js @@ -8,6 +8,10 @@ const ImmutableComponent = require('../components/immutableComponent') const Immutable = require('immutable') const SwitchControl = require('../components/switchControl') const ModalOverlay = require('../components/modalOverlay') +const {SettingsList, SettingItem} = require('../../app/renderer/components/settings') +const {FormTextbox, SettingTextbox, RecoveryKeyTextbox} = require('../../app/renderer/components/textbox') +const {FormDropdown, SettingDropdown} = require('../../app/renderer/components/dropdown') +const Button = require('../components/button') const cx = require('../lib/classSet') const ledgerExportUtil = require('../../app/common/lib/ledgerExportUtil') const addExportFilenamePrefixToTransactions = ledgerExportUtil.addExportFilenamePrefixToTransactions @@ -31,7 +35,6 @@ const WidevineInfo = require('../../app/renderer/components/widevineInfo') const aboutActions = require('./aboutActions') const getSetting = require('../settings').getSetting const SortableTable = require('../components/sortableTable') -const Button = require('../components/button') const searchProviders = require('../data/searchProviders') const punycode = require('punycode') const moment = require('moment') @@ -109,34 +112,6 @@ const changeSetting = (cb, key, e) => { } } -class SettingsList extends ImmutableComponent { - render () { - return
- { - this.props.dataL10nId - ?
- : null - } -
- {this.props.children} -
-
- } -} - -class SettingItem extends ImmutableComponent { - render () { - return
- { - this.props.dataL10nId - ? - : null - } - {this.props.children} -
- } -} - class SettingCheckbox extends ImmutableComponent { constructor () { super() @@ -686,25 +661,25 @@ class GeneralTab extends ImmutableComponent {
- + - + - @@ -717,25 +692,24 @@ class GeneralTab extends ImmutableComponent { } - + - + - +