diff --git a/js/src/shell/Requests/requests.js b/js/src/shell/Requests/requests.js index 984be5241..026fd3f9b 100644 --- a/js/src/shell/Requests/requests.js +++ b/js/src/shell/Requests/requests.js @@ -101,8 +101,12 @@ class Requests extends Component { : ( ) } diff --git a/js/src/ui/Actionbar/Sort/sort.css b/js/src/ui/Actionbar/Sort/sort.css deleted file mode 100644 index c0046bc4e..000000000 --- a/js/src/ui/Actionbar/Sort/sort.css +++ /dev/null @@ -1,20 +0,0 @@ -/* Copyright 2015-2017 Parity Technologies (UK) Ltd. -/* This file is part of Parity. -/* -/* Parity is free software: you can redistribute it and/or modify -/* it under the terms of the GNU General Public License as published by -/* the Free Software Foundation, either version 3 of the License, or -/* (at your option) any later version. -/* -/* Parity is distributed in the hope that it will be useful, -/* but WITHOUT ANY WARRANTY; without even the implied warranty of -/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -/* GNU General Public License for more details. -/* -/* You should have received a copy of the GNU General Public License -/* along with Parity. If not, see . -*/ - -.sortButton { - min-width: 50px !important; -} diff --git a/js/src/ui/Actionbar/Sort/sort.js b/js/src/ui/Actionbar/Sort/sort.js index 9cfc57c12..7e3edc222 100644 --- a/js/src/ui/Actionbar/Sort/sort.js +++ b/js/src/ui/Actionbar/Sort/sort.js @@ -18,14 +18,12 @@ import React, { Component, PropTypes } from 'react'; import { FormattedMessage } from 'react-intl'; import { observer } from 'mobx-react'; -import IconMenu from 'material-ui/IconMenu'; -import MenuItem from 'material-ui/MenuItem'; - import Button from '~/ui/Button'; import { SortIcon } from '~/ui/Icons'; +import List from '~/ui/List'; +import Popup from '~/ui/Popup'; import SortStore from './sortStore'; -import styles from './sort.css'; @observer export default class ActionbarSort extends Component { @@ -53,102 +51,73 @@ export default class ActionbarSort extends Component { const { showDefault } = this.props; return ( - } onClick={ this.store.handleMenuOpen } /> } - open={ this.store.menuOpen } - onRequestChange={ this.store.handleMenuChange } - onItemTouchTap={ this.store.handleSortChange } - targetOrigin={ { horizontal: 'right', vertical: 'top' } } - anchorOrigin={ { horizontal: 'right', vertical: 'top' } } - touchTapCloseDelay={ 0 } > - { - showDefault - ? this.renderMenuItem('', ( + + )), + this.renderMenuItem('tags', ( + + )), + this.renderMenuItem('name', ( + + )), + this.renderMenuItem('eth', ( + )) - : null - } - { - this.renderMenuItem('tags', ( - - )) - } - { - this.renderMenuItem('name', ( - - )) - } - { - this.renderMenuItem('eth', ( - - )) - } - - { this.renderSortByMetas() } - + ].concat(this.renderSortByMetas()) } + onClick={ this.store.handleSortChange } + /> + ); } renderSortByMetas () { const { metas } = this.props; - return metas - .map((meta, index) => { - const label = ( - - ); + return metas.map((meta) => { + const label = ( + + ); - return this.renderMenuItem(meta.key, label, index); - }); + return this.renderMenuItem(meta.key, label); + }); } - renderMenuItem (value, label, key = null) { + renderMenuItem (key, label) { const { order } = this.props; - const props = {}; - - if (key !== null) { - props.key = key; - } - - const checked = order === value; - - return ( - - ); + return { + isActive: order === key, + key, + label + }; } } diff --git a/js/src/ui/Actionbar/Sort/sortStore.js b/js/src/ui/Actionbar/Sort/sortStore.js index ae02a34cb..aa712fddb 100644 --- a/js/src/ui/Actionbar/Sort/sortStore.js +++ b/js/src/ui/Actionbar/Sort/sortStore.js @@ -37,9 +37,8 @@ export default class SortStore { this.menuOpen = open; } - @action handleSortChange = (event, child) => { - const order = child.props.value; - + @action handleSortChange = (event, order) => { + this.handleMenuChange(false); this.onChange(order); this.saveOrder(order); } diff --git a/js/src/ui/Actionbar/actionbar.js b/js/src/ui/Actionbar/actionbar.js index cfec3cf2f..dc9d8eded 100644 --- a/js/src/ui/Actionbar/actionbar.js +++ b/js/src/ui/Actionbar/actionbar.js @@ -21,6 +21,10 @@ import { nodeOrStringProptype } from '@parity/shared/util/proptypes'; import styles from './actionbar.css'; export default function Actionbar ({ buttons, children, className, title }) { + if (!buttons && !title) { + return null; + } + return (

diff --git a/js/src/ui/Actionbar/actionbar.spec.js b/js/src/ui/Actionbar/actionbar.spec.js index 1129f06a1..610765992 100644 --- a/js/src/ui/Actionbar/actionbar.spec.js +++ b/js/src/ui/Actionbar/actionbar.spec.js @@ -21,7 +21,10 @@ import Actionbar from './actionbar'; function renderShallow (props) { return shallow( - + ); } diff --git a/js/src/ui/Features/features.js b/js/src/ui/Features/features.js index de81426e2..d17958862 100644 --- a/js/src/ui/Features/features.js +++ b/js/src/ui/Features/features.js @@ -15,10 +15,10 @@ // along with Parity. If not, see . import { observer } from 'mobx-react'; -import { List, ListItem } from 'material-ui/List'; import React, { Component } from 'react'; import Checkbox from '~/ui/Form/Checkbox'; +import List from '~/ui/List'; import defaults, { MODES } from './defaults'; import Store from './store'; @@ -34,14 +34,14 @@ export default class Features extends Component { } return ( - - { + defaults[key].mode !== MODES.PRODUCTION) .map(this.renderItem) } - + /> ); } @@ -49,22 +49,22 @@ export default class Features extends Component { const feature = defaults[key]; const onCheck = () => this.store.toggleActive(key); - return ( - + { feature.description } +

+ ), + key, + label: ( +
- } - primaryText={ feature.name } - secondaryText={ -
- { feature.description } -
- } - /> - ); + { feature.name } +
+ ) + }; } } diff --git a/js/src/ui/Features/features.spec.js b/js/src/ui/Features/features.spec.js index de1cbdb0a..3049fb79b 100644 --- a/js/src/ui/Features/features.spec.js +++ b/js/src/ui/Features/features.spec.js @@ -33,7 +33,7 @@ function render (props = { visible: true }) { return component; } -describe('views/Settings/Features', () => { +describe('ui/Features', () => { beforeEach(() => { render(); }); @@ -80,10 +80,6 @@ describe('views/Settings/Features', () => { it('renders an item', () => { expect(item).not.to.be.null; }); - - it('displays the correct name', () => { - expect(item.props.primaryText).to.equal(defaults[key].name); - }); }); }); }); diff --git a/js/src/ui/Form/AddressSelect/addressSelect.js b/js/src/ui/Form/AddressSelect/addressSelect.js index b4bbc3ce3..8f1a6e9ee 100644 --- a/js/src/ui/Form/AddressSelect/addressSelect.js +++ b/js/src/ui/Form/AddressSelect/addressSelect.js @@ -20,7 +20,6 @@ import { connect } from 'react-redux'; import keycode, { codes } from 'keycode'; import { FormattedMessage } from 'react-intl'; import { observer } from 'mobx-react'; -import TextFieldUnderline from 'material-ui/TextField/TextFieldUnderline'; import apiutil from '@parity/api/util'; import { nodeOrStringProptype } from '@parity/shared/util/proptypes'; @@ -36,8 +35,6 @@ import Portal from '~/ui/Portal'; import AddressSelectStore from './addressSelectStore'; import styles from './addressSelect.css'; -const BOTTOM_BORDER_STYLE = { borderBottom: 'solid 3px' }; - // Current Form ID let currentId = 1; @@ -178,9 +175,8 @@ class AddressSelect extends Component { } renderContent () { - const { muiTheme } = this.context; const { hint, disabled, label, readOnly } = this.props; - const { expanded, inputFocused } = this.state; + const { expanded } = this.state; if (disabled || readOnly) { return null; @@ -213,16 +209,14 @@ class AddressSelect extends Component { onChange={ this.handleChange } ref={ this.setInputRef } /> - { this.renderLoader() } - - -
- + { + this.store.loading && ( + + ) + }
} @@ -234,19 +228,6 @@ class AddressSelect extends Component { ); } - renderLoader () { - if (!this.store.loading) { - return null; - } - - return ( - - ); - } - renderCurrentInput () { const { inputValue } = this.state; diff --git a/js/src/ui/Form/AutoComplete/autocomplete.css b/js/src/ui/Form/AutoComplete/autocomplete.css deleted file mode 100644 index 56be9eb63..000000000 --- a/js/src/ui/Form/AutoComplete/autocomplete.css +++ /dev/null @@ -1,24 +0,0 @@ -/* Copyright 2015-2017 Parity Technologies (UK) Ltd. -/* This file is part of Parity. -/* -/* Parity is free software: you can redistribute it and/or modify -/* it under the terms of the GNU General Public License as published by -/* the Free Software Foundation, either version 3 of the License, or -/* (at your option) any later version. -/* -/* Parity is distributed in the hope that it will be useful, -/* but WITHOUT ANY WARRANTY; without even the implied warranty of -/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -/* GNU General Public License for more details. -/* -/* You should have received a copy of the GNU General Public License -/* along with Parity. If not, see . -*/ - -.item { - &:last-child { - &.divider { - display: none; - } - } -} diff --git a/js/src/ui/Form/AutoComplete/autocomplete.js b/js/src/ui/Form/AutoComplete/autocomplete.js deleted file mode 100644 index 0e5667398..000000000 --- a/js/src/ui/Form/AutoComplete/autocomplete.js +++ /dev/null @@ -1,268 +0,0 @@ -// Copyright 2015-2017 Parity Technologies (UK) Ltd. -// This file is part of Parity. - -// Parity is free software: you can redistribute it and/or modify -// it under the terms of the GNU General Public License as published by -// the Free Software Foundation, either version 3 of the License, or -// (at your option) any later version. - -// Parity is distributed in the hope that it will be useful, -// but WITHOUT ANY WARRANTY; without even the implied warranty of -// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -// GNU General Public License for more details. - -// You should have received a copy of the GNU General Public License -// along with Parity. If not, see . - -import keycode from 'keycode'; -import { isEqual } from 'lodash'; -import { MenuItem, AutoComplete as MUIAutoComplete, Divider as MUIDivider } from 'material-ui'; -import { PopoverAnimationVertical } from 'material-ui/Popover'; -import React, { Component, PropTypes } from 'react'; - -import { nodeOrStringProptype } from '@parity/shared/util/proptypes'; - -import styles from './autocomplete.css'; - -// Hack to prevent "Unknown prop `disableFocusRipple` on
tag" error -class Divider extends Component { - static muiName = MUIDivider.muiName; - - render () { - return ( -
- -
- ); - } -} - -export default class AutoComplete extends Component { - static propTypes = { - className: PropTypes.string, - disabled: PropTypes.bool, - entry: PropTypes.object, - entries: PropTypes.oneOfType([ - PropTypes.array, - PropTypes.object - ]), - error: nodeOrStringProptype(), - filter: PropTypes.func, - hint: nodeOrStringProptype(), - label: nodeOrStringProptype(), - onChange: PropTypes.func.isRequired, - onUpdateInput: PropTypes.func, - renderItem: PropTypes.func, - value: PropTypes.string - }; - - state = { - lastChangedValue: undefined, - entry: null, - open: false, - dataSource: [], - dividerBreaks: [] - }; - - dividersVisibility = {}; - - componentWillMount () { - const dataSource = this.getDataSource(); - - this.setState({ dataSource }); - } - - componentWillReceiveProps (nextProps) { - const prevEntries = Object.keys(this.props.entries || {}).sort(); - const nextEntries = Object.keys(nextProps.entries || {}).sort(); - - if (!isEqual(prevEntries, nextEntries)) { - const dataSource = this.getDataSource(nextProps); - - this.setState({ dataSource }); - } - } - - render () { - const { disabled, error, hint, label, value, className, onUpdateInput } = this.props; - const { open, dataSource } = this.state; - - return ( - - ); - } - - getDataSource (props = this.props) { - const { renderItem, entries } = props; - const entriesArray = (entries instanceof Array) - ? entries - : Object.values(entries); - - let currentDivider = 0; - let firstSet = false; - - const dataSource = entriesArray.map((entry, index) => { - // Render divider - if (typeof entry === 'string' && entry.toLowerCase() === 'divider') { - // Don't add divider if nothing before - if (!firstSet) { - return undefined; - } - - const item = { - text: '', - divider: currentDivider, - isDivider: true, - value: ( - - ) - }; - - currentDivider++; - return item; - } - - let item; - - if (renderItem && typeof renderItem === 'function') { - item = renderItem(entry); - - // Add the item class to the entry - const classNames = [ styles.item ].concat(item.value.props.className); - - item.value = React.cloneElement(item.value, { className: classNames.join(' ') }); - } else { - item = { - text: entry, - value: ( - - ) - }; - } - - if (!firstSet) { - item.first = true; - firstSet = true; - } - - item.divider = currentDivider; - item.entry = entry; - - return item; - }).filter((item) => item !== undefined); - - return dataSource; - } - - handleFilter = (searchText, name, item) => { - if (item.isDivider) { - return this.dividersVisibility[item.divider]; - } - - if (item.first) { - this.dividersVisibility = {}; - } - - const { filter } = this.props; - const show = filter(searchText, name, item); - - // Show the related divider - if (show) { - this.dividersVisibility[item.divider] = true; - } - - return show; - } - - onKeyDown = (event) => { - const { muiAutocomplete } = this.refs; - - switch (keycode(event)) { - case 'down': - const { menu } = muiAutocomplete.refs; - - menu && menu.handleKeyDown(event); - break; - - case 'enter': - case 'tab': - event.preventDefault(); - event.stopPropagation(); - event.which = 'useless'; - - const e = new CustomEvent('down'); - - e.which = 40; - - muiAutocomplete && muiAutocomplete.handleKeyDown(e); - break; - } - } - - onChange = (item, idx) => { - if (idx === -1) { - return; - } - - const { dataSource } = this.state; - const { entry } = dataSource[idx]; - - this.handleOnChange(entry); - this.setState({ entry, open: false }); - } - - onClose = (event) => { - const { onUpdateInput } = this.props; - - if (!onUpdateInput) { - const { entry } = this.state; - - this.handleOnChange(entry); - } - } - - onFocus = () => { - const { entry } = this.props; - - this.setState({ entry, open: true }, () => { - this.handleOnChange(null, true); - }); - } - - handleOnChange = (value, empty) => { - const { lastChangedValue } = this.state; - - if (value !== lastChangedValue) { - this.setState({ lastChangedValue: value }); - this.props.onChange(value, empty); - } - } -} diff --git a/js/src/ui/Form/Dropdown/dropdown.js b/js/src/ui/Form/Dropdown/dropdown.js index dd73e754a..ce59f6482 100644 --- a/js/src/ui/Form/Dropdown/dropdown.js +++ b/js/src/ui/Form/Dropdown/dropdown.js @@ -26,7 +26,7 @@ import styles from './dropdown.css'; const NAME_ID = ' '; // FIXME: Currently does not display the selected icon alongside -export default function Dropdown ({ className, disabled = false, error, fullWidth = true, hint, label, onBlur, onChange, onKeyDown, options, text, value }, { intl }) { +export default function Dropdown ({ className, disabled = false, error, fullWidth = true, hint, label, onBlur, onChange, onKeyDown, options, text, value }, context) { const _onChange = (event, { value }) => onChange(event, value); return ( diff --git a/js/src/ui/Form/InputChip/inputChip.js b/js/src/ui/Form/InputChip/inputChip.js index 72896a628..ed039f4bc 100644 --- a/js/src/ui/Form/InputChip/inputChip.js +++ b/js/src/ui/Form/InputChip/inputChip.js @@ -53,8 +53,6 @@ export default class InputChip extends Component { const { clearOnBlur, className, hint, label, tokens } = this.props; const { focused } = this.state; - const classes = `${className}`; - const textFieldStyle = { height: 55 }; @@ -65,7 +63,7 @@ export default class InputChip extends Component { return (
{ this.renderFeedback(feedback) } @@ -111,8 +101,10 @@ export default class PasswordStrength extends Component { getStrengthBarColor (score) { switch (score) { case 4: + return 'green'; + case 3: - return 'lightgreen'; + return 'blue'; case 2: return 'yellow'; diff --git a/js/src/ui/Form/TypedInput/typedInput.js b/js/src/ui/Form/TypedInput/typedInput.js index e744e37f7..fecefa2d0 100644 --- a/js/src/ui/Form/TypedInput/typedInput.js +++ b/js/src/ui/Form/TypedInput/typedInput.js @@ -18,13 +18,12 @@ import React, { Component, PropTypes } from 'react'; import { range } from 'lodash'; import BigNumber from 'bignumber.js'; -import IconButton from 'material-ui/IconButton'; - import { fromWei, toWei } from '@parity/api/util/wei'; import { bytesToHex } from '@parity/api/util/format'; import { ABI_TYPES, parseAbiType } from '@parity/shared/util/abi'; import { nodeOrStringProptype } from '@parity/shared/util/proptypes'; +import Button from '~/ui/Button'; import Dropdown from '~/ui/Form/Dropdown'; import Input from '~/ui/Form/Input'; import InputAddressSelect from '~/ui/Form/InputAddressSelect'; @@ -142,40 +141,16 @@ export default class TypedInput extends Component { } renderLength () { - const iconStyle = { - width: 16, - height: 16 - }; - - const style = { - width: 24, - height: 24, - padding: 0 - }; - - const plusStyle = { - ...style, - backgroundColor: 'rgba(255, 255, 255, 0.25)', - borderRadius: '50%' - }; - return (
- - - - - - - +
); } diff --git a/js/src/ui/List/Item/item.css b/js/src/ui/List/Item/item.css index 2ea329f1a..88ae7b53c 100644 --- a/js/src/ui/List/Item/item.css +++ b/js/src/ui/List/Item/item.css @@ -16,6 +16,13 @@ */ .item { + &.active { + background: rgba(0, 0, 255, 0.25); + } + + &.inactive { + } + .description { } diff --git a/js/src/ui/List/Item/item.js b/js/src/ui/List/Item/item.js index 1b48d74ff..d9549e4b7 100644 --- a/js/src/ui/List/Item/item.js +++ b/js/src/ui/List/Item/item.js @@ -19,10 +19,10 @@ import { List as SemanticList } from 'semantic-ui-react'; import styles from './item.css'; -export default function Item ({ buttons, className, description, icon, label, onClick, style }) { +export default function Item ({ buttons, className, description, icon, isActive, label, onClick, style }) { return ( @@ -52,8 +52,8 @@ Item.propTypes = { buttons: PropTypes.any, className: PropTypes.string, description: PropTypes.node, - key: PropTypes.any, icon: PropTypes.node, + isActive: PropTypes.bool, label: PropTypes.node, onClick: PropTypes.func, style: PropTypes.object diff --git a/js/src/ui/List/list.js b/js/src/ui/List/list.js index dec5b49bf..5441c543e 100644 --- a/js/src/ui/List/list.js +++ b/js/src/ui/List/list.js @@ -31,11 +31,12 @@ export default function List ({ className, items, label, onClick, style }) { { - items.map(({ buttons, description, icon, key, label }, index) => ( + items.filter((item) => item).map(({ buttons, description, icon, isActive, key, label }, index) => ( . import React, { PropTypes } from 'react'; -import CircularProgress from 'material-ui/CircularProgress'; +import { Loader as SemanticLoader } from 'semantic-ui-react'; import styles from './loading.css'; -export default function Loading ({ className, size, thickness }) { +export default function Loading ({ className, size = 'medium' }) { return ( -
- +
+
); } Loading.propTypes = { className: PropTypes.string, - size: PropTypes.number, - thickness: PropTypes.number -}; - -Loading.defaultProps = { - className: '', - size: 2, - thickness: 3.5 + size: PropTypes.string }; diff --git a/js/src/ui/MethodDecoding/methodDecoding.js b/js/src/ui/MethodDecoding/methodDecoding.js index ea3f39cb6..2d0c722b1 100644 --- a/js/src/ui/MethodDecoding/methodDecoding.js +++ b/js/src/ui/MethodDecoding/methodDecoding.js @@ -100,7 +100,7 @@ class MethodDecoding extends Component { if (isLoading) { return (
- +
); } diff --git a/js/src/ui/Modal/Busy/busy.js b/js/src/ui/Modal/Busy/busy.js index cbf191197..027472971 100644 --- a/js/src/ui/Modal/Busy/busy.js +++ b/js/src/ui/Modal/Busy/busy.js @@ -23,8 +23,12 @@ import styles from './busy.css'; export default function Busy ({ children, state, title }) { return (
-
{ title }
-
{ state }
+
+ { title } +
+
+ { state } +
{ children }
); diff --git a/js/src/ui/ModalBox/modalBox.js b/js/src/ui/ModalBox/modalBox.js index 58f942ced..5134f89fe 100644 --- a/js/src/ui/ModalBox/modalBox.js +++ b/js/src/ui/ModalBox/modalBox.js @@ -18,8 +18,6 @@ import React, { PropTypes } from 'react'; import { nodeOrStringProptype } from '@parity/shared/util/proptypes'; -import Body from './body'; -import Summary from './summary'; import styles from './modalBox.css'; export default function ModalBox ({ children, icon, summary }) { @@ -29,8 +27,20 @@ export default function ModalBox ({ children, icon, summary }) { { icon }
- - + { + summary && ( +
+ { summary } +
+ ) + } + { + children && ( +
+ { children } +
+ ) + }
); diff --git a/js/src/ui/ModalBox/modalBox.spec.js b/js/src/ui/ModalBox/modalBox.spec.js index ad890be5f..e12debeb8 100644 --- a/js/src/ui/ModalBox/modalBox.spec.js +++ b/js/src/ui/ModalBox/modalBox.spec.js @@ -52,11 +52,11 @@ describe('ui/ModalBox', () => { describe('components', () => { it('adds the Body as supplied', () => { - expect(component.find('Body').props().children).to.deep.equal(CHILDREN); + expect(component.find('#testChild').text()).to.equal('testChild'); }); it('adds the Summary as supplied', () => { - expect(component.find('Summary').props().summary).to.deep.equal(SUMMARY); + expect(component.find('#testSummary').text()).to.equal('testSummary'); }); }); }); diff --git a/js/src/ui/ModalBox/summary.js b/js/src/ui/ModalBox/summary.js deleted file mode 100644 index 4adbf914c..000000000 --- a/js/src/ui/ModalBox/summary.js +++ /dev/null @@ -1,37 +0,0 @@ -// Copyright 2015-2017 Parity Technologies (UK) Ltd. -// This file is part of Parity. - -// Parity is free software: you can redistribute it and/or modify -// it under the terms of the GNU General Public License as published by -// the Free Software Foundation, either version 3 of the License, or -// (at your option) any later version. - -// Parity is distributed in the hope that it will be useful, -// but WITHOUT ANY WARRANTY; without even the implied warranty of -// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -// GNU General Public License for more details. - -// You should have received a copy of the GNU General Public License -// along with Parity. If not, see . - -import React from 'react'; - -import { nodeOrStringProptype } from '@parity/shared/util/proptypes'; - -import styles from './modalBox.css'; - -export default function Summary ({ summary }) { - if (!summary) { - return null; - } - - return ( -
- { summary } -
- ); -} - -Summary.propTypes = { - summary: nodeOrStringProptype() -}; diff --git a/js/src/ui/Page/page.js b/js/src/ui/Page/page.js index 9fe276154..6234e1084 100644 --- a/js/src/ui/Page/page.js +++ b/js/src/ui/Page/page.js @@ -24,16 +24,10 @@ import styles from './page.css'; export default function Page ({ buttons, className, children, padded, title }) { return (
- { - title || buttons - ? ( - - ) - : null - } +
. -export default from './autocomplete'; +export default from './popup'; diff --git a/js/src/ui/ModalBox/body.js b/js/src/ui/Popup/popup.js similarity index 63% rename from js/src/ui/ModalBox/body.js rename to js/src/ui/Popup/popup.js index 464270093..663fe4dd8 100644 --- a/js/src/ui/ModalBox/body.js +++ b/js/src/ui/Popup/popup.js @@ -15,21 +15,25 @@ // along with Parity. If not, see . import React, { PropTypes } from 'react'; +import { Popup as SemanticPopup } from 'semantic-ui-react'; -import styles from './modalBox.css'; - -export default function Body ({ children }) { - if (!children) { - return null; - } - +export default function Popup ({ children, className, isOpen, trigger, triggerOn }) { return ( -
+ { children } -
+ ); } -Body.propTypes = { - children: PropTypes.node +Popup.propTypes = { + children: PropTypes.node.isRequired, + className: PropTypes.string, + isOpen: PropTypes.bool, + trigger: PropTypes.node, + triggerOn: PropTypes.string }; diff --git a/js/src/ui/Progress/progress.js b/js/src/ui/Progress/progress.js index 3768ff791..5c1bf6b9f 100644 --- a/js/src/ui/Progress/progress.js +++ b/js/src/ui/Progress/progress.js @@ -14,23 +14,22 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . -import { LinearProgress } from 'material-ui'; import React, { PropTypes } from 'react'; +import { Progress as SemanticProgress } from 'semantic-ui-react'; -export default function Progress ({ className, color, determinate, max, min, style, value }) { +export default function Progress ({ className, color, isDeterminate, max, style, value }) { return ( - ); } @@ -38,13 +37,8 @@ export default function Progress ({ className, color, determinate, max, min, sty Progress.propTypes = { className: PropTypes.string, color: PropTypes.string, - determinate: PropTypes.bool, + isDeterminate: PropTypes.bool, max: PropTypes.number, - min: PropTypes.number, style: PropTypes.object, value: PropTypes.number }; - -Progress.defaultProps = { - determinate: false -}; diff --git a/js/src/ui/Theme/theme.js b/js/src/ui/Theme/theme.js index 1faa3a38a..3232c23f4 100644 --- a/js/src/ui/Theme/theme.js +++ b/js/src/ui/Theme/theme.js @@ -16,26 +16,9 @@ import GeoPattern from 'geopattern'; import getMuiTheme from 'material-ui/styles/getMuiTheme'; -import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'; -const muiTheme = getMuiTheme(lightBaseTheme); +const muiTheme = getMuiTheme(); -// muiTheme.inkBar.backgroundColor = 'transparent'; -// muiTheme.paper.backgroundColor = 'rgb(18, 18, 18)'; -// muiTheme.raisedButton.primaryTextColor = 'white'; -// muiTheme.snackbar.backgroundColor = 'rgba(255, 30, 30, 0.9)'; -// muiTheme.snackbar.textColor = 'rgba(255, 255, 255, 0.75)'; -// muiTheme.stepper.textColor = '#eee'; -// muiTheme.stepper.disabledTextColor = '#777'; -// muiTheme.tabs = lightTheme.tabs; -// muiTheme.tabs.backgroundColor = 'transparent'; -// muiTheme.tabs.selectedTextColor = 'white'; -// muiTheme.tabs.textColor = 'rgba(255, 255, 255, 0.5)'; -// muiTheme.textField.floatingLabelColor = 'rgba(255, 255, 255, 0.5)'; -// muiTheme.textField.hintColor = 'rgba(255, 255, 255, 0.5)'; -// muiTheme.textField.disabledTextColor = muiTheme.textField.textColor; -// muiTheme.toolbar = lightTheme.toolbar; -// muiTheme.toolbar.backgroundColor = 'transparent'; muiTheme.zIndex.layer = 4000; muiTheme.zIndex.popover = 4100; diff --git a/js/src/ui/Theme/theme.spec.js b/js/src/ui/Theme/theme.spec.js deleted file mode 100644 index 3347032e9..000000000 --- a/js/src/ui/Theme/theme.spec.js +++ /dev/null @@ -1,55 +0,0 @@ -// Copyright 2015-2017 Parity Technologies (UK) Ltd. -// This file is part of Parity. - -// Parity is free software: you can redistribute it and/or modify -// it under the terms of the GNU General Public License as published by -// the Free Software Foundation, either version 3 of the License, or -// (at your option) any later version. - -// Parity is distributed in the hope that it will be useful, -// but WITHOUT ANY WARRANTY; without even the implied warranty of -// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -// GNU General Public License for more details. - -// You should have received a copy of the GNU General Public License -// along with Parity. If not, see . - -import getMuiTheme from 'material-ui/styles/getMuiTheme'; -import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'; - -const muiTheme = getMuiTheme(lightBaseTheme); - -import theme from './theme'; - -describe('ui/Theme', () => { - it('is MUI-based', () => { - expect(Object.keys(theme)).to.deep.equal(Object.keys(muiTheme).concat('parity')); - }); - - it('allows setting of Parity backgrounds', () => { - expect(typeof theme.parity.setBackgroundSeed === 'function').to.be.true; - expect(typeof theme.parity.getBackgroundStyle === 'function').to.be.true; - }); - - describe('parity', () => { - describe('setBackgroundSeed', () => { - const SEED = 'testseed'; - - beforeEach(() => { - theme.parity.setBackgroundSeed(SEED); - }); - - it('sets the correct theme values', () => { - expect(theme.parity.backgroundSeed).to.equal(SEED); - }); - }); - - describe('getBackgroundStyle', () => { - it('generates a style containing background', () => { - const style = theme.parity.getBackgroundStyle(); - - expect(style).to.have.property('background'); - }); - }); - }); -}); diff --git a/js/src/ui/TxHash/txHash.js b/js/src/ui/TxHash/txHash.js index 619be7de1..b9c32b884 100644 --- a/js/src/ui/TxHash/txHash.js +++ b/js/src/ui/TxHash/txHash.js @@ -181,10 +181,7 @@ class TxHash extends Component { if (!(transactionReceipt && transactionReceipt.blockNumber && transactionReceipt.blockNumber.gt(0))) { return (
- +
diff --git a/js/src/ui/TxHash/txHash.spec.js b/js/src/ui/TxHash/txHash.spec.js index a76a5192c..80e6d4b70 100644 --- a/js/src/ui/TxHash/txHash.spec.js +++ b/js/src/ui/TxHash/txHash.spec.js @@ -132,7 +132,7 @@ describe('ui/TxHash', () => { }); it('renders determinate progressbar', () => { - expect(child.find('Progress[determinate]')).to.have.length(1); + expect(child.find('Progress[isDeterminate]')).to.have.length(1); }); it('renders confirmation text', () => { diff --git a/js/src/ui/index.js b/js/src/ui/index.js index df7f197b7..b8c8747e4 100644 --- a/js/src/ui/index.js +++ b/js/src/ui/index.js @@ -48,6 +48,7 @@ export { Busy as BusyStep, Completed as CompletedStep } from './Modal'; export ModalBox from './ModalBox'; export muiTheme from './Theme'; export Page from './Page'; +export Popup from './Popup'; export Portal from './Portal'; export Progress from './Progress'; export QrCode from './QrCode'; @@ -61,6 +62,7 @@ export Snackbar from './Snackbar'; export Tabs from './Tabs'; export Tags from './Tags'; export Title from './Title'; +export TokenImage from './TokenImage'; export TxHash from './TxHash'; export TxList from './TxList'; export VaultCard from './VaultCard'; diff --git a/js/src/views/Account/Transfer/Details/details.js b/js/src/views/Account/Transfer/Details/details.js index 17c5b8013..bf7da2ca8 100644 --- a/js/src/views/Account/Transfer/Details/details.js +++ b/js/src/views/Account/Transfer/Details/details.js @@ -18,8 +18,7 @@ import React, { Component, PropTypes } from 'react'; import { FormattedMessage } from 'react-intl'; import { nullableProptype } from '@parity/shared/util/proptypes'; - -import Form, { Input, InputAddressSelect, AddressSelect, Checkbox } from '@parity/ui/Form'; +import Form, { AddressSelect, Checkbox, Input, InputAddressSelect } from '@parity/ui/Form'; import TokenSelect from './tokenSelect'; import styles from '../transfer.css'; diff --git a/js/src/views/Account/Transfer/Details/tokenSelect.js b/js/src/views/Account/Transfer/Details/tokenSelect.js index 787f28da8..0abbb4657 100644 --- a/js/src/views/Account/Transfer/Details/tokenSelect.js +++ b/js/src/views/Account/Transfer/Details/tokenSelect.js @@ -54,7 +54,8 @@ class TokenSelect extends Component { const { api } = this.context; const { balance, tokens } = this.props; - const items = Object.keys(balance) + const items = Object + .keys(balance) .map((tokenId) => { const token = tokens[tokenId]; const tokenValue = balance[tokenId]; @@ -122,4 +123,7 @@ function mapStateToProps (state) { return { tokens }; } -export default connect(mapStateToProps)(TokenSelect); +export default connect( + mapStateToProps, + null +)(TokenSelect); diff --git a/js/src/views/Account/account.css b/js/src/views/Account/account.css index 88c5f2a85..9353f95fa 100644 --- a/js/src/views/Account/account.css +++ b/js/src/views/Account/account.css @@ -15,11 +15,6 @@ /* along with Parity. If not, see . */ -.btnicon { - width: 24px; - height: 24px; -} - .textbox { line-height: 1.5em; margin-bottom: 1.5em; diff --git a/js/src/views/Account/account.js b/js/src/views/Account/account.js index 0b596f493..e7f9cfdf0 100644 --- a/js/src/views/Account/account.js +++ b/js/src/views/Account/account.js @@ -191,7 +191,7 @@ class Account extends Component {