Merge branch 'ui-2' into menu

This commit is contained in:
Jaco Greeff 2017-05-10 13:47:36 +02:00
commit 1c262b2172
39 changed files with 194 additions and 214 deletions

2
Cargo.lock generated
View File

@ -1781,7 +1781,7 @@ dependencies = [
[[package]] [[package]]
name = "parity-ui-precompiled" name = "parity-ui-precompiled"
version = "1.4.0" version = "1.4.0"
source = "git+https://github.com/paritytech/js-precompiled.git#0826776d9190ee6945bfe481e10b19ec05b3a049" source = "git+https://github.com/paritytech/js-precompiled.git#cff0aec1877a4b75f51de3facee9fe439a41a90d"
dependencies = [ dependencies = [
"parity-dapps-glue 1.7.0 (registry+https://github.com/rust-lang/crates.io-index)", "parity-dapps-glue 1.7.0 (registry+https://github.com/rust-lang/crates.io-index)",
] ]

View File

@ -1,6 +1,6 @@
{ {
"name": "parity.js", "name": "parity.js",
"version": "1.7.69", "version": "1.7.70",
"main": "release/index.js", "main": "release/index.js",
"jsnext:main": "src/index.js", "jsnext:main": "src/index.js",
"author": "Parity Team <admin@parity.io>", "author": "Parity Team <admin@parity.io>",
@ -161,61 +161,33 @@
"dependencies": { "dependencies": {
"@parity/abi": "file:src/abi", "@parity/abi": "file:src/abi",
"@parity/api": "file:src/api", "@parity/api": "file:src/api",
"@parity/dapps": "file:src/dapps",
"@parity/jsonrpc": "file:src/jsonrpc", "@parity/jsonrpc": "file:src/jsonrpc",
"@parity/shared": "file:src/shared", "@parity/shared": "file:src/shared",
"@parity/shell": "file:src/shell",
"@parity/ui": "file:src/ui", "@parity/ui": "file:src/ui",
"@parity/views": "file:src/views",
"@parity/wordlist": "1.0.1", "@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", "es6-promise": "4.0.5",
"ethereumjs-tx": "1.2.5",
"eventemitter3": "2.0.2",
"flat": "2.0.1", "flat": "2.0.1",
"format-json": "1.0.3",
"format-number": "2.0.1",
"isomorphic-fetch": "2.2.1", "isomorphic-fetch": "2.2.1",
"js-sha3": "0.5.5",
"lodash": "4.17.2", "lodash": "4.17.2",
"loglevel": "1.4.1", "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", "moment": "2.17.0",
"napa": "2.3.0", "napa": "2.3.0",
"phoneformat.js": "1.0.3",
"promise-worker": "1.1.1", "promise-worker": "1.1.1",
"push.js": "0.0.11",
"qs": "6.3.0",
"react": "15.4.2", "react": "15.4.2",
"react-addons-css-transition-group": "15.4.2",
"react-dom": "15.4.2", "react-dom": "15.4.2",
"react-element-to-jsx-string": "6.0.0",
"react-intl": "2.1.5", "react-intl": "2.1.5",
"react-markdown": "2.4.4",
"react-redux": "4.4.6",
"react-router": "3.0.0", "react-router": "3.0.0",
"react-router-redux": "4.0.7", "react-router-redux": "4.0.7",
"react-tap-event-plugin": "2.0.1", "react-tap-event-plugin": "2.0.1",
"react-tooltip": "3.2.2", "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", "store": "1.3.20",
"sw-toolbox": "^3.6.0", "sw-toolbox": "^3.6.0",
"u2f-api": "0.0.9", "u2f-api": "0.0.9",
"u2f-api-polyfill": "0.4.3", "u2f-api-polyfill": "0.4.3",
"useragent.js": "0.5.6",
"utf8": "2.1.2", "utf8": "2.1.2",
"valid-url": "1.0.9",
"validator": "6.2.0",
"web3": "0.17.0-beta", "web3": "0.17.0-beta",
"whatwg-fetch": "2.0.1", "whatwg-fetch": "2.0.1",
"worker-loader": "^0.8.0", "worker-loader": "^0.8.0",

View File

@ -30,6 +30,7 @@
"@parity/jsonrpc": "file:../jsonrpc", "@parity/jsonrpc": "file:../jsonrpc",
"bignumber.js": "3.0.1", "bignumber.js": "3.0.1",
"blockies": "0.0.2", "blockies": "0.0.2",
"es6-error": "4.0.0",
"ethereumjs-tx": "1.2.5", "ethereumjs-tx": "1.2.5",
"eventemitter3": "2.0.2", "eventemitter3": "2.0.2",
"js-sha3": "0.5.5", "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": [], "keywords": [],
"scripts": {}, "scripts": {},
"devDependencies": {}, "devDependencies": {},
"dependencies": {}, "dependencies": {
"material-ui": "0.16.5",
"validator": "6.2.0"
},
"peerDependencies": {} "peerDependencies": {}
} }

View File

@ -14,7 +14,7 @@
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // 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'; import { api } from '../parity';
@ -211,7 +211,7 @@ const validateHex = (string) => {
}; };
const validateURL = (string) => { const validateURL = (string) => {
if (!isURL(string.toString())) { if (!validator.isURL(string.toString())) {
return { return {
error: ERRORS.invalidURL, error: ERRORS.invalidURL,
valid: false 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": [], "keywords": [],
"scripts": {}, "scripts": {},
"devDependencies": {}, "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": {} "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": [], "keywords": [],
"scripts": {}, "scripts": {},
"devDependencies": {}, "devDependencies": {},
"dependencies": {}, "dependencies": {
"qs": "6.3.0",
"useragent.js": "0.5.6"
},
"peerDependencies": {} "peerDependencies": {}
} }

View File

@ -19,10 +19,10 @@ import { FormattedMessage } from 'react-intl';
import FileSaver from 'file-saver'; import FileSaver from 'file-saver';
import Button from '../../Button'; import Button from '~/ui/Button';
import { FileDownloadIcon } from '../../Icons'; import { FileDownloadIcon } from '~/ui/Icons';
class ActionbarExport extends Component { export default class ActionbarExport extends Component {
static propTypes = { static propTypes = {
content: PropTypes.oneOfType([ content: PropTypes.oneOfType([
PropTypes.string, PropTypes.string,
@ -58,5 +58,3 @@ class ActionbarExport extends Component {
FileSaver.saveAs(blob, `${filename}.json`); 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 { nodeOrStringProptype } from '@parity/shared/util/proptypes';
import Button from '../../Button'; import Button from '~/ui/Button';
import FileSelect from '../../Form/FileSelect'; import FileSelect from '~/ui/Form/FileSelect';
import { CancelIcon, DoneIcon, FileUploadIcon } from '../../Icons'; import { CancelIcon, DoneIcon, FileUploadIcon } from '~/ui/Icons';
import Portal from '../../Portal'; import Portal from '~/ui/Portal';
import styles from './import.css'; import styles from './import.css';

View File

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

View File

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

View File

@ -14,12 +14,13 @@
/* You should have received a copy of the GNU General Public License /* You should have received a copy of the GNU General Public License
/* along with Parity. If not, see <http://www.gnu.org/licenses/>. /* along with Parity. If not, see <http://www.gnu.org/licenses/>.
*/ */
.bubble { .bubble {
border-radius: 50%; border-radius: 50%;
padding: 3px 5px;
color: white; color: white;
font-size: 0.7em; font-size: 0.7em;
line-height: 1em; line-height: 1em;
padding: 3px 5px;
} }
.default { .default {

View File

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

View File

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

View File

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

View File

@ -14,7 +14,6 @@
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
import { IconButton } from 'material-ui';
import React, { Component, PropTypes } from 'react'; import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import Clipboard from 'react-copy-to-clipboard'; import Clipboard from 'react-copy-to-clipboard';
@ -23,13 +22,10 @@ import { bindActionCreators } from 'redux';
import { showSnackbar } from '@parity/shared/redux/providers/snackbarActions'; import { showSnackbar } from '@parity/shared/redux/providers/snackbarActions';
import { CopyIcon } from '../Icons'; import { CopyIcon } from '~/ui/Icons';
import Theme from '../Theme';
import styles from './copyToClipboard.css'; import styles from './copyToClipboard.css';
const { textColor, disabledTextColor } = Theme.flatButton;
class CopyToClipboard extends Component { class CopyToClipboard extends Component {
static propTypes = { static propTypes = {
showSnackbar: PropTypes.func.isRequired, showSnackbar: PropTypes.func.isRequired,
@ -62,7 +58,6 @@ class CopyToClipboard extends Component {
render () { render () {
const { data, size } = this.props; const { data, size } = this.props;
const { copied } = this.state;
return ( return (
<Clipboard <Clipboard
@ -70,29 +65,14 @@ class CopyToClipboard extends Component {
text={ data } text={ data }
> >
<div <div
className={ styles.wrapper } className={ styles.icon }
onClick={ this.onClick } onClick={ this.onClick }
style={ {
height: size,
width: size
} }
> >
<IconButton <CopyIcon />
disableTouchRipple
iconStyle={ {
height: size,
width: size
} }
style={ {
height: size,
padding: '0',
width: size
} }
>
<CopyIcon
color={
copied
? disabledTextColor
: textColor
}
/>
</IconButton>
</div> </div>
</Clipboard> </Clipboard>
); );

View File

@ -14,14 +14,14 @@
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { PropTypes, Component } from 'react';
import 'brace'; import 'brace';
import 'brace/theme/solarized_dark';
import 'brace/mode/json';
import React, { PropTypes, Component } from 'react';
import AceEditor from 'react-ace'; import AceEditor from 'react-ace';
import { noop } from 'lodash'; import { noop } from 'lodash';
import 'brace/theme/solarized_dark';
import 'brace/mode/json';
import './mode-solidity'; import './mode-solidity';
export default class Editor extends Component { export default class Editor extends Component {

View File

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

View File

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

View File

@ -34,16 +34,12 @@
} }
.icon { .icon {
align-items: center;
background: rgb(167, 151, 0); background: rgb(167, 151, 0);
border-radius: 50%; border-radius: 50%;
display: flex;
flex: 0 0 5em;
flex-direction: column;
height: 5em; height: 5em;
justify-content: center;
margin-right: 1.5em; margin-right: 1.5em;
padding: 0.75em; padding: 0.75em;
text-align: center;
width: 5em; width: 5em;
img { img {
@ -51,12 +47,10 @@
padding: 0; padding: 0;
} }
svg { i {
fill: white !important; color: white;
font-size: 3.5em !important; font-size: 3.5rem;
height: 3.5em !important; margin: 0.75rem -0.125rem;
margin: 0 !important;
width: 3.5em !important;
} }
} }
} }

View File

@ -120,7 +120,7 @@ $backgroundOverlay: rgba(255, 255, 255, 0.95);
font-size: 3em; font-size: 3em;
position: absolute; position: absolute;
right: 1rem; right: 1rem;
top: 0.5rem; top: 1.5rem;
z-index: 100; z-index: 100;
i { i {

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

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

View File

@ -27,6 +27,7 @@
background-color: rgba(0, 0, 0, 0.75); background-color: rgba(0, 0, 0, 0.75);
z-index: 3000; z-index: 3000;
transition: transform 0.75s; transition: transform 0.75s;
transform: translateX(-50%) translateY(0px);
} }
#action { #action {

View File

@ -21,9 +21,7 @@ import styles from './snackbar.css';
export default class Snackbar extends Component { export default class Snackbar extends Component {
state = { state = {
snackStyle: { opened: false
transform: 'translateX(-50%) translateY(40px)'
}
}; };
static propTypes = { static propTypes = {
@ -32,7 +30,7 @@ export default class Snackbar extends Component {
message: PropTypes.string, message: PropTypes.string,
autoHideDuration: PropTypes.number, autoHideDuration: PropTypes.number,
bodyStyle: PropTypes.object, bodyStyle: PropTypes.object,
onRequestClose: PropTypes.Func onRequestClose: PropTypes.func
}; };
defaultProps = { defaultProps = {
@ -40,46 +38,26 @@ export default class Snackbar extends Component {
}; };
componentWillUpdate (nextProps) { componentWillUpdate (nextProps) {
const self = this; if (this.state.opened) {
if (this.openStatus) {
return; return;
} }
if (nextProps.open === true) { if (nextProps.open === true) {
this.openStatus = true; this.show();
self.autoShow(); setTimeout(this.hide, nextProps.autoHideDuration);
setTimeout(() => {
self.autoHide();
}, nextProps.autoHideDuration);
} }
} }
autoShow () {
this.setState({
snackStyle: {
transform: 'translateX(-50%) translateY(0px)'
}
});
}
autoHide () {
this.props.onRequestClose();
this.openStatus = false;
this.setState({
snackStyle: {
transform: 'translateX(-50%) translateY(40px)'
}
});
}
render () { render () {
const { bodyStyle, message } = this.props; const { bodyStyle, message } = this.props;
const { snackStyle } = this.state; const { opened } = this.state;
let { action } = this.props; let { action } = this.props;
if (!opened) {
return false;
}
if (action === null || action === 'undefined') { if (action === null || action === 'undefined') {
action = ( action = (
<FormattedMessage <FormattedMessage
@ -90,7 +68,7 @@ export default class Snackbar extends Component {
} }
return ( return (
<div className={ styles.snacks } style={ snackStyle }> <div className={ styles.snacks }>
<div style={ bodyStyle }> <div style={ bodyStyle }>
<span>{ message }</span> <span>{ message }</span>
<span id={ styles.action } onClick={ this.autoHide }>{ action }</span> <span id={ styles.action } onClick={ this.autoHide }>{ action }</span>
@ -98,4 +76,17 @@ export default class Snackbar extends Component {
</div> </div>
); );
} }
show = () => {
this.setState({
opened: true
});
}
hide = () => {
this.props.onRequestClose();
this.setState({
opened: false
});
}
} }

View File

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

View File

@ -28,35 +28,45 @@ export default class TypeIcon extends Component {
} }
render () { render () {
const { className, createStore, type } = this.props; const { className } = this.props;
return (
<div className={ className }>
{ this.getIcon() }
</div>
);
}
getIcon () {
const { createStore, type } = this.props;
const { createType, stage } = createStore; const { createType, stage } = createStore;
if (stage === STAGE_INFO) { if (stage === STAGE_INFO) {
return <DoneIcon className={ className } />; return <DoneIcon />;
} }
switch (type || createType) { switch (type || createType) {
case 'fromGeth': case 'fromGeth':
return <FileUploadIcon className={ className } />; return <FileUploadIcon />;
case 'fromJSON': case 'fromJSON':
return <FileIcon className={ className } />; return <FileIcon />;
case 'fromPhrase': case 'fromPhrase':
return <KeyboardIcon className={ className } />; return <KeyboardIcon />;
case 'fromPresale': case 'fromPresale':
return <MembershipIcon className={ className } />; return <MembershipIcon />;
case 'fromQr': case 'fromQr':
return <QrIcon className={ className } />; return <QrIcon />;
case 'fromRaw': case 'fromRaw':
return <KeyIcon className={ className } />; return <KeyIcon />;
case 'fromNew': case 'fromNew':
default: default:
return <AccountsIcon className={ className } />; return <AccountsIcon />;
} }
} }
} }

View File

@ -111,9 +111,8 @@
.icon { .icon {
color: rgb(167, 151, 0) !important; color: rgb(167, 151, 0) !important;
flex: 0 0 56px; flex: 0 0 56px;
height: 56px !important; font-size: 56px;
margin-right: 0.75em; margin: 1.5rem 1.5rem 0 0;
width: 56px !important;
} }
.info { .info {

View File

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

View File

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

View File

@ -19,7 +19,7 @@ import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { Button, Form, Input, InputAddress, ModalBox, Portal } from '~/ui'; import { Button, Form, Input, InputAddress, ModalBox, Portal } from '~/ui';
import { AddIcon, AddressesIcon, CancelIcon } from '~/ui/Icons'; import { AddIcon, AddressIcon, CancelIcon } from '~/ui/Icons';
import Store from './store'; import Store from './store';
@ -97,7 +97,7 @@ export default class AddAddress extends Component {
return ( return (
<ModalBox <ModalBox
icon={ <AddressesIcon /> } icon={ <AddressIcon /> }
summary={ summary={
<FormattedMessage <FormattedMessage
id='addAddress.header' id='addAddress.header'

View File

@ -276,6 +276,7 @@ export default class LoadContract extends Component {
return [ return [
<Button <Button
icon={ <CancelIcon /> } icon={ <CancelIcon /> }
key='cancel'
label={ label={
<FormattedMessage <FormattedMessage
id='loadContract.button.cancel' id='loadContract.button.cancel'
@ -287,6 +288,7 @@ export default class LoadContract extends Component {
<Button <Button
disabled={ this.state.selected === -1 } disabled={ this.state.selected === -1 }
icon={ <CheckIcon /> } icon={ <CheckIcon /> }
key='load'
label={ label={
<FormattedMessage <FormattedMessage
id='loadContract.button.load' id='loadContract.button.load'

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", "description": "Parity wallet dapps",
"version": "0.0.0", "version": "0.0.0",
"main": "index.js", "main": "index.js",
@ -14,6 +14,14 @@
"keywords": [], "keywords": [],
"scripts": {}, "scripts": {},
"devDependencies": {}, "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": {} "peerDependencies": {}
} }

View File

@ -15,5 +15,5 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
require('babel-register')({ 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 = { module.exports = {
test: /\.js$/, 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' use: 'babel-loader'
}; };