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

Extend Portal component with title, buttons & steps (as per Modal) (#4392)

Browse Source 
* Allow Portal to take title & buttons props

* Fix tests

* Portal consistent in screen center

* Allow hiding of Close (e.g. FirstRun usage)

* Set overflow style on body based on open

* Don't lock scroll for child popups (overlaps)

* Override buttons to be white

* Expose ~/ui/Modal/Title as re-usable component

* Use ~/ui/Title to render the Title

* Update tests

* Added a portal example with buttons and steps

* Address PR comments

* Fix AddressSelect with new container withing container

* Move legend to "buttons"

* AddressSelect extra padding
This commit is contained in:
Jaco Greeff
2017-02-03 22:44:43 +01:00
committed by GitHub
parent a68ca7444e
commit c7f5ee481d
18 changed files with 345 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
js/src/ui/Modal/Title/index.js
View File

@@ -1,17 +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/>.
export default from './title';

96
js/src/ui/Modal/Title/title.js
View File

@@ -1,96 +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 React, { Component, PropTypes } from 'react';
import { LinearProgress } from 'material-ui';
import { Step, Stepper, StepLabel } from 'material-ui/Stepper';
import { nodeOrStringProptype } from '~/util/proptypes';
import styles from '../modal.css';
export default class Title extends Component {
static propTypes = {
busy: PropTypes.bool,
current: PropTypes.number,
steps: PropTypes.array,
waiting: PropTypes.array,
title: nodeOrStringProptype()
}
render () {
const { current, steps, title } = this.props;
return (
<div className={ styles.title }>
<h3>
{
steps
? steps[current]
: title
}
</h3>
{ this.renderSteps() }
{ this.renderWaiting() }
</div>
);
}
renderSteps () {
const { current, steps } = this.props;
if (!steps) {
return;
}
return (
<div className={ styles.steps }>
<Stepper activeStep={ current }>
{ this.renderTimeline() }
</Stepper>
</div>
);
}
renderTimeline () {
const { steps } = this.props;
return steps.map((label, index) => {
return (
<Step key={ label.key || index }>
<StepLabel>
{ label }
</StepLabel>
</Step>
);
});
}
renderWaiting () {
const { current, busy, waiting } = this.props;
const isWaiting = busy || (waiting || []).includes(current);
if (!isWaiting) {
return null;
}
return (
<div className={ styles.waiting }>
<LinearProgress />
</div>
);
}
}

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

@@ -47,20 +47,6 @@
.title {
background: rgba(0, 0, 0, 0.25) !important;
padding: 1em;
margin-bottom: 0;
h3 {
margin: 0;
text-transform: uppercase;
}
.steps {
margin-bottom: -1em;
}
}
.waiting {
margin: 1em -1em -1em -1em;
}
.overlay {

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

@@ -22,7 +22,7 @@ import { connect } from 'react-redux';
import { nodeOrStringProptype } from '~/util/proptypes';
import Container from '../Container';
import Title from './Title';
import Title from '../Title';
const ACTIONS_STYLE = { borderStyle: 'none' };
const TITLE_STYLE = { borderStyle: 'none' };
@@ -63,11 +63,12 @@ class Modal extends Component {
const contentStyle = muiTheme.parity.getBackgroundStyle(null, settings.backgroundSeed);
const header = (
<Title
activeStep={ current }
busy={ busy }
current={ current }
busySteps={ waiting }
className={ styles.title }
steps={ steps }
title={ title }
waiting={ waiting }
/>
);
const classes = `${styles.dialog} ${className}`;