grassrootseconomics/openethereum
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Convert all remaining Modals to use Portal (UI consistency) (#4625)

Browse Source 
* FirstRun dialog -> Portal

* CreateAccount Modal -> Portal

* CreateWallet dialog -> Portal

* Transfer dialog -> Portal

* Fix failing tests

* ShapeShift dialog -> Portal

* Verification dialog -> Portal

* EditMeta dialog -> Portal

* PasswordManager dialog -> Portal

* WalletSettings dialog -> Portal

* AddAddress dialog -> Portal

* s/delete address/forget address/

* AddContract dialog -> Portal

* DeployContract dialog -> Portal

* ExceuteContract dialog -> Portal

* LoadContract dialog -> Portal

* SaveContract dialog -> Portal

* UpgradeParity dialog -> Portal

* Convert inline modals (tsk, tsk)

* Remove ui/Modal

* Import dialog i18n

* Button array returns (thanks @derhuerst)

* Unneeded debug

* Typo

* Readability formatting
This commit is contained in:
Jaco Greeff
2017-02-22 15:26:58 +01:00
committed by GitHub
parent 49675483c3
commit 6938a7a202
45 changed files with 1009 additions and 666 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
js/src/ui/Actionbar/Import/import.js
View File

@@ -16,12 +16,13 @@
import React, { Component, PropTypes } from 'react';
import Dropzone from 'react-dropzone';
import FileUploadIcon from 'material-ui/svg-icons/file/file-upload';
import ContentClear from 'material-ui/svg-icons/content/clear';
import ActionDoneAll from 'material-ui/svg-icons/action/done-all';
import { FormattedMessage } from 'react-intl';
import { nodeOrStringProptype } from '~/util/proptypes';
import Button from '../../Button';
import Modal from '../../Modal';
import { CancelIcon, DoneIcon, FileUploadIcon } from '../../Icons';
import Portal from '../../Portal';
import styles from './import.css';
@@ -37,14 +38,19 @@ const initialState = {
export default class ActionbarImport extends Component {
static propTypes = {
className: PropTypes.string,
onConfirm: PropTypes.func.isRequired,
renderValidation: PropTypes.func,
className: PropTypes.string,
title: PropTypes.string
title: nodeOrStringProptype()
};
static defaultProps = {
title: 'Import from a file'
title: (
<FormattedMessage
id='ui.actionbar.import.title'
defaultMessage='Import from a file'
/>
)
};
state = Object.assign({}, initialState);
@@ -57,7 +63,12 @@ export default class ActionbarImport extends Component {
<Button
className={ className }
icon={ <FileUploadIcon /> }
label='import'
label={
<FormattedMessage
id='ui.actiobar.import.button.import'
defaultMessage='import'
/>
}
onClick={ this.onOpenModal }
/>
{ this.renderModal() }
@@ -73,20 +84,38 @@ export default class ActionbarImport extends Component {
return null;
}
const hasSteps = typeof renderValidation === 'function';
const steps = hasSteps ? [ 'select a file', error ? 'error' : 'validate' ] : null;
const steps = typeof renderValidation === 'function'
? [
<FormattedMessage
id='ui.actiobar.import.step.select'
defaultMessage='select a file'
/>,
error
? (
<FormattedMessage
id='ui.actiobar.import.step.error'
defaultMessage='error'
/>
)
: (
<FormattedMessage
id='ui.actiobar.import.step.validate'
defaultMessage='validate'
/>)
]
: null;
return (
<Modal
actions={ this.renderActions() }
title={ title }
<Portal
activeStep={ step }
buttons={ this.renderActions() }
onClose={ this.onCloseModal }
open
steps={ steps }
current={ step }
visible
title={ title }
>
{ this.renderBody() }
</Modal>
</Portal>
);
}
@@ -95,9 +124,14 @@ export default class ActionbarImport extends Component {
const cancelBtn = (
<Button
icon={ <CancelIcon /> }
key='cancel'
label='Cancel'
icon={ <ContentClear /> }
label={
<FormattedMessage
id='ui.actiobar.import.button.cancel'
defaultMessage='Cancel'
/>
}
onClick={ this.onCloseModal }
/>
);
@@ -109,9 +143,14 @@ export default class ActionbarImport extends Component {
if (validate) {
const confirmBtn = (
<Button
icon={ <DoneIcon /> }
key='confirm'
label='Confirm'
icon={ <ActionDoneAll /> }
label={
<FormattedMessage
id='ui.actiobar.import.button.confirm'
defaultMessage='Confirm'
/>
}
onClick={ this.onConfirm }
/>
);
@@ -128,7 +167,15 @@ export default class ActionbarImport extends Component {
if (error) {
return (
<div>
<p>An error occured: { errorText }</p>
<p>
<FormattedMessage
id='ui.actiobar.import.error'
defaultMessage='An error occured: {errorText}'
values={ {
errorText
} }
/>
</p>
</div>
);
}
@@ -148,7 +195,12 @@ export default class ActionbarImport extends Component {
multiple={ false }
className={ styles.importZone }
>
<div>Drop a file here, or click to select a file to upload.</div>
<div>
<FormattedMessage
id='ui.actiobar.import.dropzone'
defaultMessage='Drop a file here, or click to select a file to upload.'
/>
</div>
</Dropzone>
</div>
);
@@ -160,7 +212,10 @@ export default class ActionbarImport extends Component {
return (
<div>
<p className={ styles.desc }>
Confirm that this is what was intended to import.
<FormattedMessage
id='ui.actiobar.import.confirm'
defaultMessage='Confirm that this is what was intended to import.'
/>
</p>
<div>
{ validationBody }

4
js/src/ui/Icons/index.js
View File

@@ -28,6 +28,8 @@ export DashboardIcon from 'material-ui/svg-icons/action/dashboard';
export DeleteIcon from 'material-ui/svg-icons/action/delete';
export DoneIcon from 'material-ui/svg-icons/action/done-all';
export EditIcon from 'material-ui/svg-icons/content/create';
export ErrorIcon from 'material-ui/svg-icons/alert/error';
export FileUploadIcon from 'material-ui/svg-icons/file/file-upload';
export FingerprintIcon from 'material-ui/svg-icons/action/fingerprint';
export KeyIcon from 'material-ui/svg-icons/communication/vpn-key';
export LinkIcon from 'material-ui/svg-icons/content/link';
@@ -44,6 +46,8 @@ 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';
export UnlockedIcon from 'material-ui/svg-icons/action/lock-open';
export UpdateIcon from 'material-ui/svg-icons/action/system-update-alt';
export UpdateWaitIcon from 'material-ui/svg-icons/action/update';
export VerifyIcon from 'material-ui/svg-icons/action/verified-user';
export VisibleIcon from 'material-ui/svg-icons/image/remove-red-eye';
export VpnIcon from 'material-ui/svg-icons/notification/vpn-lock';

2
js/src/ui/Modal/index.js
View File

@@ -17,8 +17,6 @@
import Busy from './Busy';
import Completed from './Completed';
export default from './modal';
export {
Busy,
Completed

55
js/src/ui/Modal/modal.css
View File

@@ -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 <http://www.gnu.org/licenses/>.
*/
.actions {
background: rgba(0, 0, 0, 0.25) !important;
button:not([disabled]) {
color: white !important;
svg {
fill: white !important;
}
}
}
.body {
padding: 0 !important;
}
.dialog {
}
.content {
transform: translate(0px, 0px) !important;
transition: none !important;
&>div {
background: rgba(0, 0, 0, 0.5) !important;
transition: none !important;
}
}
.title {
background: rgba(0, 0, 0, 0.25) !important;
padding: 1em;
}
.overlay {
background: rgba(255, 255, 255, 0.5) !important;
transition: none !important;
}

121
js/src/ui/Modal/modal.js
View File

@@ -1,121 +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 <http://www.gnu.org/licenses/>.
import { Dialog } from 'material-ui';
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import { nodeOrStringProptype } from '~/util/proptypes';
import Container from '../Container';
import Title from '../Title';
const ACTIONS_STYLE = { borderStyle: 'none' };
const TITLE_STYLE = { borderStyle: 'none' };
const DIALOG_STYLE = { paddingTop: '1px' };
import styles from './modal.css';
class Modal extends Component {
static contextTypes = {
muiTheme: PropTypes.object.isRequired
}
static propTypes = {
actions: PropTypes.node,
busy: PropTypes.bool,
children: PropTypes.node,
className: PropTypes.string,
compact: PropTypes.bool,
current: PropTypes.number,
settings: PropTypes.object.isRequired,
steps: PropTypes.array,
title: nodeOrStringProptype(),
visible: PropTypes.bool.isRequired,
waiting: PropTypes.array
}
componentDidMount () {
const element = ReactDOM.findDOMNode(this.refs.dialog);
if (element) {
element.focus();
}
}
render () {
const { muiTheme } = this.context;
const { actions, busy, children, className, current, compact, settings, steps, title, visible, waiting } = this.props;
const contentStyle = muiTheme.parity.getBackgroundStyle(null, settings.backgroundSeed);
const header = (
<Title
activeStep={ current }
busy={ busy }
busySteps={ waiting }
className={ styles.title }
steps={ steps }
title={ title }
/>
);
const classes = `${styles.dialog} ${className}`;
return (
<Dialog
actions={ actions }
actionsContainerClassName={ styles.actions }
actionsContainerStyle={ ACTIONS_STYLE }
autoDetectWindowHeight={ false }
autoScrollBodyContent
bodyClassName={ styles.body }
className={ classes }
contentClassName={ styles.content }
contentStyle={ contentStyle }
modal
open={ visible }
overlayClassName={ styles.overlay }
overlayStyle={ { transition: 'none' } }
repositionOnUpdate={ false }
style={ DIALOG_STYLE }
title={ header }
titleStyle={ TITLE_STYLE }
>
<Container
compact={ compact }
light
ref='dialog'
style={
{ transition: 'none' }
}
tabIndex={ 0 }
>
{ children }
</Container>
</Dialog>
);
}
}
function mapStateToProps (state) {
const { settings } = state;
return { settings };
}
export default connect(
mapStateToProps,
null
)(Modal);

9
js/src/ui/Portal/portal.example.js
View File

@@ -19,7 +19,6 @@ import React, { Component } from 'react';
import { Button } from '~/ui';
import PlaygroundExample from '~/playground/playgroundExample';
import Modal from '../Modal';
import Portal from './portal';
export default class PortalExample extends Component {
@@ -61,14 +60,6 @@ export default class PortalExample extends Component {
<div>
<button onClick={ this.handleOpen(2) }>Open</button>
<Modal
title='Modal'
visible={ open[2] || false }
>
<button onClick={ this.handleOpen(3) }>Open</button>
<button onClick={ this.handleClose }>Close</button>
</Modal>
<Portal
isChildModal
open={ open[3] || false }

7
js/src/ui/Portal/portal.js
View File

@@ -71,10 +71,7 @@ export default class Portal extends Component {
}
return (
<ReactPortal
isOpened
onClose={ this.handleClose }
>
<ReactPortal isOpened>
<div
className={ styles.backOverlay }
onClick={ this.handleClose }
@@ -159,6 +156,8 @@ export default class Portal extends Component {
if (!hideClose) {
onClose();
}
this.stopEvent(event);
}
handleKeyDown = (event) => {

2
js/src/ui/Theme/theme.js
View File

@@ -38,6 +38,8 @@ 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;
const imageCache = {};

1
js/src/ui/VaultCard/vaultCard.js
View File

@@ -93,7 +93,6 @@ export default class VaultCard extends Component {
address={ address }
center
className={ styles.account }
key={ address }
/>
</Link>
);

2
js/src/ui/index.js
View File

@@ -39,7 +39,7 @@ export IdentityName from './IdentityName';
export LanguageSelector from './LanguageSelector';
export Loading from './Loading';
export MethodDecoding from './MethodDecoding';
export Modal, { Busy as BusyStep, Completed as CompletedStep } from './Modal';
export { Busy as BusyStep, Completed as CompletedStep } from './Modal';
export muiTheme from './Theme';
export Page from './Page';
export ParityBackground from './ParityBackground';