Ui 2 depends & fixes (#5590)

* File paths

* Align balance overlays & sizes

* Copy works as expected

* Re-arrange imports

* Icon props

* Move packages to their original dependencies

* Dependencies to packages

* Update test babel overrides
This commit is contained in:
Jaco Greeff 2017-05-10 13:23:14 +02:00 committed by GitHub
parent 861cbb874b
commit b9c4e5b36c
30 changed files with 136 additions and 153 deletions

View File

@ -161,61 +161,33 @@
"dependencies": {
"@parity/abi": "file:src/abi",
"@parity/api": "file:src/api",
"@parity/dapps": "file:src/dapps",
"@parity/jsonrpc": "file:src/jsonrpc",
"@parity/shared": "file:src/shared",
"@parity/shell": "file:src/shell",
"@parity/ui": "file:src/ui",
"@parity/views": "file:src/views",
"@parity/wordlist": "1.0.1",
"base32.js": "0.1.0",
"bignumber.js": "3.0.1",
"bytes": "2.4.0",
"date-difference": "1.0.0",
"debounce": "1.0.0",
"es6-error": "4.0.0",
"es6-promise": "4.0.5",
"ethereumjs-tx": "1.2.5",
"eventemitter3": "2.0.2",
"flat": "2.0.1",
"format-json": "1.0.3",
"format-number": "2.0.1",
"isomorphic-fetch": "2.2.1",
"js-sha3": "0.5.5",
"lodash": "4.17.2",
"loglevel": "1.4.1",
"marked": "0.3.6",
"material-ui": "0.16.5",
"mobx": "2.6.4",
"mobx-react": "4.0.3",
"moment": "2.17.0",
"napa": "2.3.0",
"phoneformat.js": "1.0.3",
"promise-worker": "1.1.1",
"push.js": "0.0.11",
"qs": "6.3.0",
"react": "15.4.2",
"react-addons-css-transition-group": "15.4.2",
"react-dom": "15.4.2",
"react-element-to-jsx-string": "6.0.0",
"react-intl": "2.1.5",
"react-markdown": "2.4.4",
"react-redux": "4.4.6",
"react-router": "3.0.0",
"react-router-redux": "4.0.7",
"react-tap-event-plugin": "2.0.1",
"react-tooltip": "3.2.2",
"redux": "3.6.0",
"redux-actions": "1.1.0",
"redux-thunk": "2.1.0",
"rlp": "2.0.0",
"scryptsy": "2.0.0",
"solc": "ngotchac/solc-js",
"store": "1.3.20",
"sw-toolbox": "^3.6.0",
"u2f-api": "0.0.9",
"u2f-api-polyfill": "0.4.3",
"useragent.js": "0.5.6",
"utf8": "2.1.2",
"valid-url": "1.0.9",
"validator": "6.2.0",
"web3": "0.17.0-beta",
"whatwg-fetch": "2.0.1",
"worker-loader": "^0.8.0",

View File

@ -30,6 +30,7 @@
"@parity/jsonrpc": "file:../jsonrpc",
"bignumber.js": "3.0.1",
"blockies": "0.0.2",
"es6-error": "4.0.0",
"ethereumjs-tx": "1.2.5",
"eventemitter3": "2.0.2",
"js-sha3": "0.5.5",

1
js/src/dapps/README.md Normal file
View File

@ -0,0 +1 @@
# Parity builtin dapps

View File

@ -14,6 +14,9 @@
"keywords": [],
"scripts": {},
"devDependencies": {},
"dependencies": {},
"dependencies": {
"material-ui": "0.16.5",
"validator": "6.2.0"
},
"peerDependencies": {}
}

View File

@ -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 isURL from 'validator/lib/isURL';
import validator from 'validator';
import { api } from '../parity';
@ -211,7 +211,7 @@ const validateHex = (string) => {
};
const validateURL = (string) => {
if (!isURL(string.toString())) {
if (!validator.isURL(string.toString())) {
return {
error: ERRORS.invalidURL,
valid: false

1
js/src/shared/README.md Normal file
View File

@ -0,0 +1 @@
# Parity shared non-ui components

View File

@ -14,6 +14,17 @@
"keywords": [],
"scripts": {},
"devDependencies": {},
"dependencies": {},
"dependencies": {
"mobx": "2.6.4",
"mobx-react": "4.0.3",
"push.js": "0.0.11",
"react-redux": "4.4.6",
"redux": "3.6.0",
"redux-actions": "1.1.0",
"redux-thunk": "2.1.0",
"scryptsy": "2.0.0",
"solc": "ngotchac/solc-js",
"yargs": "4.7.1"
},
"peerDependencies": {}
}

1
js/src/shell/README.md Normal file
View File

@ -0,0 +1 @@
# Parity shell & dapp launcher

View File

@ -14,6 +14,9 @@
"keywords": [],
"scripts": {},
"devDependencies": {},
"dependencies": {},
"dependencies": {
"qs": "6.3.0",
"useragent.js": "0.5.6"
},
"peerDependencies": {}
}

View File

@ -19,10 +19,10 @@ import { FormattedMessage } from 'react-intl';
import FileSaver from 'file-saver';
import Button from '../../Button';
import { FileDownloadIcon } from '../../Icons';
import Button from '~/ui/Button';
import { FileDownloadIcon } from '~/ui/Icons';
class ActionbarExport extends Component {
export default class ActionbarExport extends Component {
static propTypes = {
content: PropTypes.oneOfType([
PropTypes.string,
@ -58,5 +58,3 @@ class ActionbarExport extends Component {
FileSaver.saveAs(blob, `${filename}.json`);
}
}
export default ActionbarExport;

View File

@ -19,10 +19,10 @@ import { FormattedMessage } from 'react-intl';
import { nodeOrStringProptype } from '@parity/shared/util/proptypes';
import Button from '../../Button';
import FileSelect from '../../Form/FileSelect';
import { CancelIcon, DoneIcon, FileUploadIcon } from '../../Icons';
import Portal from '../../Portal';
import Button from '~/ui/Button';
import FileSelect from '~/ui/Form/FileSelect';
import { CancelIcon, DoneIcon, FileUploadIcon } from '~/ui/Icons';
import Portal from '~/ui/Portal';
import styles from './import.css';

View File

@ -17,9 +17,9 @@
import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import Button from '../../Button';
import InputChip from '../../Form/InputChip';
import { SearchIcon } from '../../Icons';
import Button from '~/ui/Button';
import InputChip from '~/ui/Form/InputChip';
import { SearchIcon } from '~/ui/Icons';
import styles from './search.css';

View File

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

View File

@ -14,12 +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/>.
*/
.bubble {
border-radius: 50%;
padding: 3px 5px;
color: white;
font-size: 0.7em;
line-height: 1em;
padding: 3px 5px;
}
.default {

View File

@ -18,9 +18,9 @@ import React, { PropTypes } from 'react';
import styles from './badge.css';
export default function Badge ({ className, color, value }) {
export default function Badge ({ className, color = 'default', value }) {
return (
<div className={ `${styles.bubble} ${styles[color || 'default']} ${className}` }>
<div className={ `${styles.bubble} ${styles[color]} ${className}` }>
{ value }
</div>
);

View File

@ -25,7 +25,7 @@ $textColor: white;
vertical-align: top;
&:not(.full) {
height: 2.5em;
height: 40px;
overflow: hidden;
}
}

View File

@ -15,7 +15,8 @@
/* along with Parity. If not, see <http://www.gnu.org/licenses/>.
*/
.wrapper {
.icon {
cursor: pointer;
display: inline-block;
}

View File

@ -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 { IconButton } from 'material-ui';
import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import Clipboard from 'react-copy-to-clipboard';
@ -23,13 +22,10 @@ import { bindActionCreators } from 'redux';
import { showSnackbar } from '@parity/shared/redux/providers/snackbarActions';
import { CopyIcon } from '../Icons';
import Theme from '../Theme';
import { CopyIcon } from '~/ui/Icons';
import styles from './copyToClipboard.css';
const { textColor, disabledTextColor } = Theme.flatButton;
class CopyToClipboard extends Component {
static propTypes = {
showSnackbar: PropTypes.func.isRequired,
@ -62,7 +58,6 @@ class CopyToClipboard extends Component {
render () {
const { data, size } = this.props;
const { copied } = this.state;
return (
<Clipboard
@ -70,29 +65,14 @@ class CopyToClipboard extends Component {
text={ data }
>
<div
className={ styles.wrapper }
className={ styles.icon }
onClick={ this.onClick }
style={ {
height: size,
width: size
} }
>
<IconButton
disableTouchRipple
iconStyle={ {
height: size,
width: size
} }
style={ {
height: size,
padding: '0',
width: size
} }
>
<CopyIcon
color={
copied
? disabledTextColor
: textColor
}
/>
</IconButton>
<CopyIcon />
</div>
</Clipboard>
);

View File

@ -14,14 +14,14 @@
// 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, { PropTypes, Component } from 'react';
import 'brace';
import 'brace/theme/solarized_dark';
import 'brace/mode/json';
import React, { PropTypes, Component } from 'react';
import AceEditor from 'react-ace';
import { noop } from 'lodash';
import 'brace/theme/solarized_dark';
import 'brace/mode/json';
import './mode-solidity';
export default class Editor extends Component {

View File

@ -18,6 +18,7 @@ import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Snackbar } from '~/ui/Snackbar';
import { closeErrors } from './actions';

View File

@ -17,62 +17,62 @@
import React from 'react';
import { Icon } from 'semantic-ui-react';
export const AccountsIcon = () => <Icon name='university' />;
export const AddIcon = () => <Icon name='plus' />;
export const AddressIcon = () => <Icon name='address book outline' />;
export const AppsIcon = () => <Icon name='sitemap' />;
export const AttachFileIcon = () => <Icon name='attach' />;
export const BackgroundIcon = () => <Icon name='image' />;
export const CancelIcon = () => <Icon name='cancel' />;
export const CheckIcon = () => <Icon name='check' />;
export const CloseIcon = () => <Icon name='close' />;
export const CompareIcon = () => <Icon name='exchange' />;
export const ComputerIcon = () => <Icon name='desktop' />;
export const ContractIcon = () => <Icon name='code' />;
export const CopyIcon = () => <Icon name='copy' />;
export const DashboardIcon = () => <Icon name='cubes' />;
export const AccountsIcon = (props) => <Icon name='university' { ...props } />;
export const AddIcon = (props) => <Icon name='plus' { ...props } />;
export const AddressIcon = (props) => <Icon name='address book outline' { ...props } />;
export const AppsIcon = (props) => <Icon name='sitemap' { ...props } />;
export const AttachFileIcon = (props) => <Icon name='attach' { ...props } />;
export const BackgroundIcon = (props) => <Icon name='image' { ...props } />;
export const CancelIcon = (props) => <Icon name='cancel' { ...props } />;
export const CheckIcon = (props) => <Icon name='check' { ...props } />;
export const CloseIcon = (props) => <Icon name='close' { ...props } />;
export const CompareIcon = (props) => <Icon name='exchange' { ...props } />;
export const ComputerIcon = (props) => <Icon name='desktop' { ...props } />;
export const ContractIcon = (props) => <Icon name='code' { ...props } />;
export const CopyIcon = (props) => <Icon name='copy' { ...props } />;
export const DashboardIcon = (props) => <Icon name='cubes' { ...props } />;
export const DoneIcon = CheckIcon;
export const DeleteIcon = () => <Icon name='trash' />;
export const DevelopIcon = () => <Icon name='connectdevelop' />;
export const DialIcon = () => <Icon name='text telephone' />;
export const EditIcon = () => <Icon name='edit' />;
export const ErrorIcon = () => <Icon name='exclamation circle' />;
export const EthernetIcon = () => <Icon name='wifi' />;
export const FileIcon = () => <Icon name='file outline' />;
export const FileDownloadIcon = () => <Icon name='download' />;
export const FileUploadIcon = () => <Icon name='upload' />;
export const FingerprintIcon = () => <Icon name='target' />;
export const GasIcon = () => <Icon name='settings' />;
export const GotoIcon = () => <Icon name='arrow circle right' />;
export const InfoIcon = () => <Icon name='info circle' />;
export const KeyIcon = () => <Icon name='key' />;
export const KeyboardIcon = () => <Icon name='keyboard' />;
export const LinkIcon = () => <Icon name='linkify' />;
export const ListIcon = () => <Icon name='list ul' />;
export const LockedIcon = () => <Icon name='unlock alternate' />;
export const MembershipIcon = () => <Icon name='id card outline' />;
export const MoveIcon = () => <Icon name='move' />;
export const NextIcon = () => <Icon name='chevron right' />;
export const PauseIcon = () => <Icon name='pause' />;
export const PlayIcon = () => <Icon name='play' />;
export const PrevIcon = () => <Icon name='chevron left' />;
export const PrintIcon = () => <Icon name='print' />;
export const QrIcon = () => <Icon name='qrcode' />;
export const RefreshIcon = () => <Icon name='refresh' />;
export const RemoveIcon = () => <Icon name='remove' />;
export const ReorderIcon = () => <Icon name='align justify' />;
export const ReplayIcon = () => <Icon name='retweet' />;
export const SaveIcon = () => <Icon name='save' />;
export const SearchIcon = () => <Icon name='search' />;
export const SendIcon = () => <Icon name='send' />;
export const SettingsIcon = () => <Icon name='settings' />;
export const SnoozeIcon = () => <Icon name='clock' />;
export const SortIcon = () => <Icon name='filter' />;
export const StarIcon = () => <Icon name='star' />;
export const StatusIcon = () => <Icon name='signal' />;
export const UnlockedIcon = () => <Icon name='unlock' />;
export const UpdateIcon = () => <Icon name='cloud download' />;
export const UpdateWaitIcon = () => <Icon name='wait' />;
export const VisibleIcon = () => <Icon name='eye' />;
export const VerifyIcon = () => <Icon name='shield' />;
export const VpnIcon = () => <Icon name='world' />;
export const DeleteIcon = (props) => <Icon name='trash' { ...props } />;
export const DevelopIcon = (props) => <Icon name='connectdevelop' { ...props } />;
export const DialIcon = (props) => <Icon name='text telephone' { ...props } />;
export const EditIcon = (props) => <Icon name='edit' { ...props } />;
export const ErrorIcon = (props) => <Icon name='exclamation circle' { ...props } />;
export const EthernetIcon = (props) => <Icon name='wifi' { ...props } />;
export const FileIcon = (props) => <Icon name='file outline' { ...props } />;
export const FileDownloadIcon = (props) => <Icon name='download' { ...props } />;
export const FileUploadIcon = (props) => <Icon name='upload' { ...props } />;
export const FingerprintIcon = (props) => <Icon name='target' { ...props } />;
export const GasIcon = (props) => <Icon name='settings' { ...props } />;
export const GotoIcon = (props) => <Icon name='arrow circle right' { ...props } />;
export const InfoIcon = (props) => <Icon name='info circle' { ...props } />;
export const KeyIcon = (props) => <Icon name='key' { ...props } />;
export const KeyboardIcon = (props) => <Icon name='keyboard' { ...props } />;
export const LinkIcon = (props) => <Icon name='linkify' { ...props } />;
export const ListIcon = (props) => <Icon name='list ul' { ...props } />;
export const LockedIcon = (props) => <Icon name='unlock alternate' { ...props } />;
export const MembershipIcon = (props) => <Icon name='id card outline' { ...props } />;
export const MoveIcon = (props) => <Icon name='move' { ...props } />;
export const NextIcon = (props) => <Icon name='chevron right' { ...props } />;
export const PauseIcon = (props) => <Icon name='pause' { ...props } />;
export const PlayIcon = (props) => <Icon name='play' { ...props } />;
export const PrevIcon = (props) => <Icon name='chevron left' { ...props } />;
export const PrintIcon = (props) => <Icon name='print' { ...props } />;
export const QrIcon = (props) => <Icon name='qrcode' { ...props } />;
export const RefreshIcon = (props) => <Icon name='refresh' { ...props } />;
export const RemoveIcon = (props) => <Icon name='remove' { ...props } />;
export const ReorderIcon = (props) => <Icon name='align justify' { ...props } />;
export const ReplayIcon = (props) => <Icon name='retweet' { ...props } />;
export const SaveIcon = (props) => <Icon name='save' { ...props } />;
export const SearchIcon = (props) => <Icon name='search' { ...props } />;
export const SendIcon = (props) => <Icon name='send' { ...props } />;
export const SettingsIcon = (props) => <Icon name='settings' { ...props } />;
export const SnoozeIcon = (props) => <Icon name='clock' { ...props } />;
export const SortIcon = (props) => <Icon name='filter' { ...props } />;
export const StarIcon = (props) => <Icon name='star' { ...props } />;
export const StatusIcon = (props) => <Icon name='signal' { ...props } />;
export const UnlockedIcon = (props) => <Icon name='unlock' { ...props } />;
export const UpdateIcon = (props) => <Icon name='cloud download' { ...props } />;
export const UpdateWaitIcon = (props) => <Icon name='wait' { ...props } />;
export const VisibleIcon = (props) => <Icon name='eye' { ...props } />;
export const VerifyIcon = (props) => <Icon name='shield' { ...props } />;
export const VpnIcon = (props) => <Icon name='world' { ...props } />;

View File

@ -20,7 +20,7 @@ import { connect } from 'react-redux';
import { isNullAddress } from '@parity/shared/util/validation';
import ShortenedHash from '../ShortenedHash';
import ShortenedHash from '~/ui/ShortenedHash';
const defaultName = (
<FormattedMessage

1
js/src/ui/REDAME.md Normal file
View File

@ -0,0 +1 @@
# Parity UI component library

View File

@ -16,11 +16,11 @@
"url": "git+https://github.com/paritytech/parity.git"
},
"keywords": [],
"scripts": {},
"devDependencies": {},
"dependencies": {
"bignumber.js": "3.0.1",
"brace": "0.9.0",
"date-difference": "1.0.0",
"file-saver": "1.3.3",
"geopattern": "1.2.3",
"js-sha3": "0.5.5",

View File

@ -24,8 +24,7 @@ import { FormattedMessage } from 'react-intl';
import { arrayOrObjectProptype, nullableProptype } from '@parity/shared/util/proptypes';
import { Balance, Container, ContainerTitle, CopyToClipboard, IdentityIcon, IdentityName, Tags, VaultTag } from '~/ui';
import Certifications from '~/ui/Certifications';
import { Balance, Certifications, Container, ContainerTitle, CopyToClipboard, IdentityIcon, IdentityName, Tags, VaultTag } from '~/ui';
import styles from '../accounts.css';

View File

@ -62,7 +62,7 @@
}
.overlay {
margin-top: -3.25em;
margin-top: -51px;
}
.owners {

1
js/src/views/README.md Normal file
View File

@ -0,0 +1 @@
# Parity wallet dapps

View File

@ -1,5 +1,5 @@
{
"name": "@parity/view",
"name": "@parity/views",
"description": "Parity wallet dapps",
"version": "0.0.0",
"main": "index.js",
@ -14,6 +14,14 @@
"keywords": [],
"scripts": {},
"devDependencies": {},
"dependencies": {},
"dependencies": {
"base32.js": "0.1.0",
"bytes": "2.4.0",
"format-number": "2.0.1",
"phoneformat.js": "1.0.3",
"react-element-to-jsx-string": "6.0.0",
"react-markdown": "2.4.4",
"rlp": "2.0.0"
},
"peerDependencies": {}
}

View File

@ -15,5 +15,5 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
require('babel-register')({
ignore: /node_modules\/(?!@parity\/(abi|api|jsonrpc|shared|ui))/
ignore: /node_modules\/(?!@parity\/(abi|api|dapps|jsonrpc|shared|shell|views|ui))/
});

View File

@ -16,6 +16,6 @@
module.exports = {
test: /\.js$/,
include: /node_modules\/@parity\/(abi|api|jsonrpc|shared|ui|wordlist)/,
include: /node_modules\/@parity\/(abi|api|dapps|jsonrpc|shared|shell|ui|views|wordlist)/,
use: 'babel-loader'
};