Merge branch 'ui-2-mui' into ui-2

js/src/shell/Application/Requests/requests.js

@@ -14,7 +14,6 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { LinearProgress } from 'material-ui';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import ReactDOM from 'react-dom';
@@ -22,7 +21,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { hideRequest } from '~/redux/providers/requestsActions';
-import { MethodDecoding, IdentityIcon, ScrollableText, ShortenedHash } from '~/ui';
+import { MethodDecoding, IdentityIcon, Progress, ScrollableText, ShortenedHash } from '~/ui';
 
 import styles from './requests.css';
 
@@ -100,7 +99,7 @@ class Requests extends Component {
           state.type === ERROR_STATE
             ? null
             : (
-              <LinearProgress
+              <Progress
                 max={ 6 }
                 mode={ state.type === WAITING_STATE ? 'indeterminate' : 'determinate' }
                 value={ state.type === DONE_STATE ? request.blockHeight.toNumber() : 6 }

js/src/ui/Actionbar/Sort/sort.js

@@ -21,9 +21,8 @@ import { observer } from 'mobx-react';
 import IconMenu from 'material-ui/IconMenu';
 import MenuItem from 'material-ui/MenuItem';
 
-import SortIcon from 'material-ui/svg-icons/content/sort';
-
 import Button from '../../Button';
+import { SortIcon } from '../../Icons';
 
 import SortStore from './sortStore';
 import styles from './sort.css';

js/src/ui/Form/PasswordStrength/passwordStrength.js

@@ -16,10 +16,11 @@
 
 import React, { Component, PropTypes } from 'react';
 import { debounce } from 'lodash';
-import { LinearProgress } from 'material-ui';
 import { FormattedMessage } from 'react-intl';
 import zxcvbn from 'zxcvbn';
 
+import Progress from '~/ui/Progress';
+
 import styles from './passwordStrength.css';
 
 const BAR_STYLE = {
@@ -80,9 +81,9 @@ export default class PasswordStrength extends Component {
             defaultMessage='password strength'
           />
         </label>
-        <LinearProgress
+        <Progress
           color={ color }
-          mode='determinate'
+          determinate
           style={ BAR_STYLE }
           value={ value }
         />

js/src/ui/Form/PasswordStrength/passwordStrength.spec.js

@@ -36,25 +36,25 @@ describe('ui/Form/PasswordStrength', () => {
     });
 
     it('renders a linear progress', () => {
-      expect(render({ input: INPUT_A }).find('LinearProgress')).to.be.ok;
+      expect(render({ input: INPUT_A }).find('Progress')).to.be.ok;
     });
 
     describe('compute strength', () => {
       it('has low score with empty input', () => {
         expect(
-          render({ input: INPUT_NULL }).find('LinearProgress').props().value
+          render({ input: INPUT_NULL }).find('Progress').props().value
         ).to.equal(20);
       });
 
       it('has medium score', () => {
         expect(
-          render({ input: INPUT_A }).find('LinearProgress').props().value
+          render({ input: INPUT_A }).find('Progress').props().value
         ).to.equal(60);
       });
 
       it('has high score', () => {
         expect(
-          render({ input: INPUT_B }).find('LinearProgress').props().value
+          render({ input: INPUT_B }).find('Progress').props().value
         ).to.equal(100);
       });
     });

js/src/ui/Form/TypedInput/typedInput.js

@@ -20,8 +20,6 @@ import { range } from 'lodash';
 import BigNumber from 'bignumber.js';
 
 import IconButton from 'material-ui/IconButton';
-import AddIcon from 'material-ui/svg-icons/content/add';
-import RemoveIcon from 'material-ui/svg-icons/content/remove';
 
 import { fromWei, toWei } from '@parity/api/util/wei';
 import { bytesToHex } from '@parity/api/util/format';
@@ -29,6 +27,7 @@ import { bytesToHex } from '@parity/api/util/format';
 import Input from '~/ui/Form/Input';
 import InputAddressSelect from '~/ui/Form/InputAddressSelect';
 import Select from '~/ui/Form/Select';
+import { AddIcon, RemoveIcon } from '~/ui/Icons';
 import { ABI_TYPES, parseAbiType } from '~/util/abi';
 import { nodeOrStringProptype } from '~/util/proptypes';
 

js/src/ui/Icons/index.js

@@ -56,6 +56,7 @@ export PlayIcon from 'material-ui/svg-icons/av/play-arrow';
 export PrevIcon from 'material-ui/svg-icons/navigation/arrow-back';
 export PrintIcon from 'material-ui/svg-icons/action/print';
 export RefreshIcon from 'material-ui/svg-icons/action/autorenew';
+export RemoveIcon from 'material-ui/svg-icons/content/remove';
 export ReorderIcon from 'material-ui/svg-icons/action/reorder';
 export ReplayIcon from 'material-ui/svg-icons/av/replay';
 export SaveIcon from 'material-ui/svg-icons/content/save';
@@ -63,6 +64,7 @@ export SearchIcon from 'material-ui/svg-icons/action/search';
 export SendIcon from 'material-ui/svg-icons/content/send';
 export SettingsIcon from 'material-ui/svg-icons/action/settings';
 export SnoozeIcon from 'material-ui/svg-icons/av/snooze';
+export SortIcon from 'material-ui/svg-icons/content/sort';
 export StarCircleIcon from 'material-ui/svg-icons/action/stars';
 export StarIcon from 'material-ui/svg-icons/toggle/star';
 export StarOutlineIcon from 'material-ui/svg-icons/toggle/star-border';

js/src/ui/Loading/loading.js

@@ -14,30 +14,30 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { Component, PropTypes } from 'react';
+import React, { PropTypes } from 'react';
 import CircularProgress from 'material-ui/CircularProgress';
 
 import styles from './loading.css';
 
-export default class Loading extends Component {
+export default function Loading ({ className, size, thickness }) {
-  static propTypes = {
-    className: PropTypes.string,
-    size: PropTypes.number
-  };
-
-  static defaultProps = {
-    className: '',
-    size: 2
-  };
-
-  render () {
-    const { className, size } = this.props;
-    const computedSize = size * 60;
-
   return (
     <div className={ [ styles.loading, className ].join(' ') }>
-        <CircularProgress size={ computedSize } />
+      <CircularProgress
+        size={ size * 60 }
+        thickness={ thickness }
+      />
     </div>
   );
 }
-}
+
+Loading.propTypes = {
+  className: PropTypes.string,
+  size: PropTypes.number,
+  thickness: PropTypes.number
+};
+
+Loading.defaultProps = {
+  className: '',
+  size: 2,
+  thickness: 3.5
+};

js/src/ui/MethodDecoding/methodDecoding.js

@@ -14,13 +14,13 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { CircularProgress } from 'material-ui';
 import moment from 'moment';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
 import { TypedInput, InputAddress } from '../Form';
+import Loading from '../Loading';
 import MethodDecodingStore from './methodDecodingStore';
 
 import styles from './methodDecoding.css';
@@ -99,7 +99,7 @@ class MethodDecoding extends Component {
     if (isLoading) {
       return (
         <div className={ styles.loading }>
-          <CircularProgress size={ 60 } thickness={ 2 } />
+          <Loading size={ 1 } thickness={ 2 } />
         </div>
       );
     }

js/src/ui/Progress/index.js

@@ -0,0 +1,17 @@
+// 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 <http://www.gnu.org/licenses/>.
+
+export default from './progress';

js/src/ui/Progress/progress.js

@@ -0,0 +1,50 @@
+// 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 <http://www.gnu.org/licenses/>.
+
+import { LinearProgress } from 'material-ui';
+import React, { PropTypes } from 'react';
+
+export default function Progress ({ className, color, determinate, max, min, style, value }) {
+  return (
+    <LinearProgress
+      className={ className }
+      color={ color }
+      max={ max }
+      min={ min }
+      mode={
+        determinate
+          ? 'determinate'
+          : 'indeterminate'
+      }
+      style={ style }
+      value={ value }
+    />
+  );
+}
+
+Progress.propTypes = {
+  className: PropTypes.string,
+  color: PropTypes.string,
+  determinate: PropTypes.bool,
+  max: PropTypes.number,
+  min: PropTypes.number,
+  style: PropTypes.object,
+  value: PropTypes.number
+};
+
+Progress.defaultProps = {
+  determinate: false
+};

js/src/ui/SignerIcon/signerIcon.js

@@ -17,9 +17,9 @@
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { keccak_256 } from 'js-sha3'; // eslint-disable-line camelcase
-import ActionFingerprint from 'material-ui/svg-icons/action/fingerprint';
 
 import IdentityIcon from '../IdentityIcon';
+import { FingerprintIcon } from '../Icons';
 
 class SignerIcon extends Component {
   static propTypes = {
@@ -32,7 +32,7 @@ class SignerIcon extends Component {
 
     if (!secureToken) {
       return (
-        <ActionFingerprint />
+        <FingerprintIcon />
       );
     }
 

js/src/ui/Title/title.js

@@ -14,7 +14,6 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { LinearProgress } from 'material-ui';
 import { Step, Stepper, StepLabel } from 'material-ui/Stepper';
 import React, { Component, PropTypes } from 'react';
 
@@ -23,6 +22,7 @@ import React, { Component, PropTypes } from 'react';
 // h3 (title) can be pulled from there. (As it stands the duplication
 // between the 2 has been removed, but as a short-term DRY only)
 import { Title as ContainerTitle } from '~/ui/Container';
+import Progress from '~/ui/Progress';
 import { nodeOrStringProptype } from '~/util/proptypes';
 
 import styles from './title.css';
@@ -113,7 +113,7 @@ export default class Title extends Component {
 
     return (
       <div className={ styles.waiting }>
-        <LinearProgress />
+        <Progress />
       </div>
     );
   }

js/src/ui/Title/title.spec.js

@@ -82,8 +82,8 @@ describe('ui/Title', () => {
         waiting = shallow(instance.renderWaiting());
       });
 
-      it('renders the LinearProgress', () => {
+      it('renders the Progress', () => {
-        expect(waiting.find('LinearProgress').get(0)).to.be.ok;
+        expect(waiting.find('Progress').get(0)).to.be.ok;
       });
     });
   });

js/src/ui/TxHash/txHash.js

@@ -15,7 +15,6 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import BigNumber from 'bignumber.js';
-import { LinearProgress } from 'material-ui';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
@@ -24,7 +23,9 @@ import { txLink } from '~/3rdparty/etherscan/links';
 import Warning from '~/ui/Warning';
 import { DEFAULT_GAS } from '~/util/constants';
 
-import ShortenedHash from '../ShortenedHash';
+import Progress from '~/ui/Progress';
+import ShortenedHash from '~/ui/ShortenedHash';
+
 import styles from './txHash.css';
 
 class TxHash extends Component {
@@ -180,10 +181,9 @@ class TxHash extends Component {
     if (!(transactionReceipt && transactionReceipt.blockNumber && transactionReceipt.blockNumber.gt(0))) {
       return (
         <div className={ styles.confirm }>
-          <LinearProgress
+          <Progress
             className={ styles.progressbar }
             color='white'
-            mode='indeterminate'
           />
           <div className={ styles.progressinfo }>
             <FormattedMessage
@@ -206,13 +206,13 @@ class TxHash extends Component {
 
     return (
       <div className={ styles.confirm }>
-        <LinearProgress
+        <Progress
           className={ styles.progressbar }
           min={ 0 }
           max={ maxConfirmations }
           value={ value }
           color='white'
-          mode='determinate'
+          determinate
         />
         <div className={ styles.progressinfo }>
           <abbr title={ `block #${blockNumber.toFormat(0)}` }>

js/src/ui/TxHash/txHash.spec.js

@@ -114,7 +114,7 @@ describe('ui/TxHash', () => {
       });
 
       it('renders indeterminate progressbar', () => {
-        expect(child.find('LinearProgress[mode="indeterminate"]')).to.have.length(1);
+        expect(child.find('Progress')).to.have.length(1);
       });
 
       it('renders waiting text', () => {
@@ -132,7 +132,7 @@ describe('ui/TxHash', () => {
       });
 
       it('renders determinate progressbar', () => {
-        expect(child.find('LinearProgress[mode="determinate"]')).to.have.length(1);
+        expect(child.find('Progress[determinate]')).to.have.length(1);
       });
 
       it('renders confirmation text', () => {

js/src/ui/index.js

@@ -47,6 +47,7 @@ export ModalBox from './ModalBox';
 export muiTheme from './Theme';
 export Page from './Page';
 export Portal from './Portal';
+export Progress from './Progress';
 export QrCode from './QrCode';
 export QrScan from './QrScan';
 export ScrollableText from './ScrollableText';

js/src/views/Contract/Queries/inputQuery.js

@@ -17,13 +17,12 @@
 import { isEqual } from 'lodash';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
-import LinearProgress from 'material-ui/LinearProgress';
 import { Card, CardActions, CardTitle, CardText } from 'material-ui/Card';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { newError } from '~/redux/actions';
-import { Button, TypedInput } from '~/ui';
+import { Button, Progress, TypedInput } from '~/ui';
 import { arrayOrObjectProptype } from '~/util/proptypes';
 import { parseAbiType } from '~/util/abi';
 
@@ -126,7 +125,7 @@ class InputQuery extends Component {
 
     if (isLoading) {
       return (
-        <LinearProgress mode='indeterminate' />
+        <Progress />
       );
     }
 

js/src/views/ContractDevelop/contractDevelop.js

@@ -19,11 +19,10 @@ import { FormattedMessage } from 'react-intl';
 import { observer } from 'mobx-react';
 import { MenuItem, Toggle } from 'material-ui';
 import { connect } from 'react-redux';
-import CircularProgress from 'material-ui/CircularProgress';
 import moment from 'moment';
 import { throttle } from 'lodash';
 
-import { Actionbar, ActionbarExport, ActionbarImport, Button, Page, Select, Input } from '~/ui';
+import { Actionbar, ActionbarExport, ActionbarImport, Button, Input, Loading, Page, Select } from '~/ui';
 import { CancelIcon, ListIcon, SaveIcon, SendIcon, SettingsIcon } from '~/ui/Icons';
 import Editor from '~/ui/Editor';
 import { DeployContract, SaveContract, LoadContract } from '~/modals';
@@ -292,8 +291,8 @@ class ContractDevelop extends Component {
     if (selectedBuild < 0) {
       return (
         <div className={ `${styles.panel} ${styles.centeredMessage}` }>
-          <CircularProgress
+          <Loading
-            size={ 80 }
+            size={ 1.2 }
             thickness={ 5 }
           />
           <p>
@@ -312,8 +311,8 @@ class ContractDevelop extends Component {
       return (
         <div className={ styles.panel }>
           <div className={ styles.centeredMessage }>
-            <CircularProgress
+            <Loading
-              size={ 80 }
+              size={ 1.2 }
               thickness={ 5 }
             />
             <p>
@@ -495,8 +494,8 @@ class ContractDevelop extends Component {
     if (compiling) {
       return (
         <div className={ styles.centeredMessage }>
-          <CircularProgress
+          <Loading
-            size={ 80 }
+            size={ 1.2 }
             thickness={ 5 }
           />
           <p>

js/src/views/Wallet/Confirmations/confirmations.js

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { LinearProgress, MenuItem, IconMenu } from 'material-ui';
+import { MenuItem, IconMenu } from 'material-ui';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
@@ -24,7 +24,7 @@ import { bindActionCreators } from 'redux';
 import { bytesToHex } from '@parity/api/util/format';
 
 import { confirmOperation, revokeOperation } from '~/redux/providers/walletActions';
-import { Container, InputAddress, Button, IdentityIcon } from '~/ui';
+import { Button, Container, InputAddress, IdentityIcon, Progress } from '~/ui';
 import TxRow from '~/ui/TxList/TxRow';
 
 import styles from '../wallet.css';
@@ -319,16 +319,15 @@ class WalletConfirmation extends Component {
             {
               pending
               ? (
-                <LinearProgress
+                <Progress
                   key={ `pending_${operation}` }
-                  mode='indeterminate'
                   style={ style }
                 />
               )
               : (
-                <LinearProgress
+                <Progress
                   key={ `unpending_${operation}` }
-                  mode='determinate'
+                  determinate
                   min={ 0 }
                   max={ require.toNumber() }
                   value={ confirmedBy.length }