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

* 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

js/src/modals/AddDapps/addDapps.css

@@ -20,7 +20,6 @@
 }
 
 .container {
-  margin-top: 1.5em;
   overflow-y: auto;
 }
 

js/src/modals/AddDapps/addDapps.js

@@ -18,7 +18,7 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { ContainerTitle, DappCard, Portal, SectionList } from '~/ui';
+import { DappCard, Portal, SectionList } from '~/ui';
 import { CheckIcon } from '~/ui/Icons';
 
 import styles from './addDapps.css';
@@ -41,15 +41,13 @@ export default class AddDapps extends Component {
         className={ styles.modal }
         onClose={ store.closeModal }
         open
+        title={
+          <FormattedMessage
+            id='dapps.add.label'
+            defaultMessage='visible applications'
+          />
+        }
       >
-        <ContainerTitle
-          title={
-            <FormattedMessage
-              id='dapps.add.label'
-              defaultMessage='visible applications'
-            />
-          }
-        />
         <div className={ styles.container }>
           <div className={ styles.warning } />
           {

js/src/modals/DappPermissions/dappPermissions.css

@@ -15,12 +15,7 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-.modal {
-  flex-direction: column;
-}
-
 .container {
-  margin-top: 1.5em;
   overflow-y: auto;
 }
 
@@ -65,7 +60,6 @@
 
 .legend {
   opacity: 0.75;
-  margin-top: 1em;
 
   span {
     line-height: 24px;

js/src/modals/DappPermissions/dappPermissions.js

@@ -18,7 +18,7 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { AccountCard, ContainerTitle, Portal, SectionList } from '~/ui';
+import { AccountCard, Portal, SectionList } from '~/ui';
 import { CheckIcon, StarIcon, StarOutlineIcon } from '~/ui/Icons';
 
 import styles from './dappPermissions.css';
@@ -38,18 +38,27 @@ export default class DappPermissions extends Component {
 
     return (
       <Portal
-        className={ styles.modal }
+        buttons={
+          <div className={ styles.legend }>
+            <FormattedMessage
+              id='dapps.permissions.description'
+              defaultMessage='{activeIcon} account is available to application, {defaultIcon} account is the default account'
+              values={ {
+                activeIcon: <CheckIcon />,
+                defaultIcon: <StarIcon />
+              } }
+            />
+          </div>
+        }
         onClose={ store.closeModal }
         open
+        title={
+          <FormattedMessage
+            id='dapps.permissions.label'
+            defaultMessage='visible dapp accounts'
+          />
+        }
       >
-        <ContainerTitle
-          title={
-            <FormattedMessage
-              id='dapps.permissions.label'
-              defaultMessage='visible dapp accounts'
-            />
-          }
-        />
         <div className={ styles.container }>
           <SectionList
             items={ store.accounts }
@@ -57,16 +66,6 @@ export default class DappPermissions extends Component {
             renderItem={ this.renderAccount }
           />
         </div>
-        <div className={ styles.legend }>
-          <FormattedMessage
-            id='dapps.permissions.description'
-            defaultMessage='{activeIcon} account is available to application, {defaultIcon} account is the default account'
-            values={ {
-              activeIcon: <CheckIcon />,
-              defaultIcon: <StarIcon />
-            } }
-          />
-        </div>
       </Portal>
     );
   }

js/src/ui/Container/Title/title.css

@@ -14,30 +14,36 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
-.byline, .description {
+
+$bylineColor: #aaa;
+$bylineLineHeight: 1.2rem;
+$bylineMaxHeight: 2.4rem;
+$titleLineHeight: 2rem;
+$smallFontSize: 0.75rem;
+
+.byline,
+.description {
+  color: $bylineColor;
+  display: -webkit-box;
+  line-height: $bylineLineHeight;
+  max-height: $bylineMaxHeight;
   overflow: hidden;
   position: relative;
-  line-height: 1.2em;
-  max-height: 2.4em;
-
-  display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 
-  color: #aaa;
-
   * {
-    color: #aaa !important;
+    color: $bylineColor !important;
   }
 }
 
 .description {
-  font-size: 0.75em;
+  font-size: $smallFontSize;
   margin: 0.5em 0 0;
 }
 
 .title {
-  text-transform: uppercase;
+  line-height: $titleLineHeight;
   margin: 0;
-  line-height: 34px;
+  text-transform: uppercase;
 }

js/src/ui/Container/Title/title.js

@@ -29,29 +29,41 @@ export default class Title extends Component {
   }
 
   render () {
-    const { byline, className, title } = this.props;
+    const { className, title } = this.props;
-
-    const byLine = typeof byline === 'string'
-      ? (
-        <span title={ byline }>
-          { byline }
-        </span>
-      )
-      : byline;
 
     return (
       <div className={ className }>
         <h3 className={ styles.title }>
           { title }
         </h3>
-        <div className={ styles.byline }>
+        { this.renderByline() }
-          { byLine }
-        </div>
         { this.renderDescription() }
       </div>
     );
   }
 
+  renderByline () {
+    const { byline } = this.props;
+
+    if (!byline) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.byline }>
+        {
+          typeof byline === 'string'
+            ? (
+              <span title={ byline }>
+                { byline }
+              </span>
+            )
+            : byline
+        }
+      </div>
+    );
+  }
+
   renderDescription () {
     const { description } = this.props;
 
@@ -59,17 +71,17 @@ export default class Title extends Component {
       return null;
     }
 
-    const desc = typeof description === 'string'
-      ? (
-        <span title={ description }>
-          { description }
-        </span>
-      )
-      : description;
-
     return (
       <div className={ styles.description }>
-        { desc }
+        {
+          typeof description === 'string'
+            ? (
+              <span title={ description }>
+                { description }
+              </span>
+            )
+            : description
+        }
       </div>
     );
   }

js/src/ui/Form/AddressSelect/addressSelect.css

@@ -73,6 +73,12 @@
   }
 }
 
+.title {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
 .label {
   margin: 1rem 0.5rem 0.25em;
   color: rgba(255, 255, 255, 0.498039);
@@ -102,14 +108,11 @@
 }
 
 .categories {
-  flex: 1;
-
   display: flex;
+  flex: 1;
   flex-direction: row;
   justify-content: flex-start;
 
-  margin: 2rem 0 0;
-
   > * {
     flex: 1;
   }

js/src/ui/Form/AddressSelect/addressSelect.js

@@ -180,34 +180,38 @@ class AddressSelect extends Component {
         onClose={ this.handleClose }
         onKeyDown={ this.handleKeyDown }
         open={ expanded }
+        title={
+          <div className={ styles.title }>
+            <label className={ styles.label } htmlFor={ id }>
+              { label }
+            </label>
+            <div className={ styles.outerInput }>
+              <input
+                id={ id }
+                className={ styles.input }
+                placeholder={ ilHint }
+                onBlur={ this.handleInputBlur }
+                onFocus={ this.handleInputFocus }
+                onChange={ this.handleChange }
+                ref={ this.setInputRef }
+              />
+              { this.renderLoader() }
+            </div>
+
+            <div className={ styles.underline }>
+              <TextFieldUnderline
+                focus={ inputFocused }
+                focusStyle={ BOTTOM_BORDER_STYLE }
+                muiTheme={ muiTheme }
+                style={ BOTTOM_BORDER_STYLE }
+              />
+            </div>
+
+            { this.renderCurrentInput() }
+            { this.renderRegistryValues() }
+          </div>
+        }
       >
-        <label className={ styles.label } htmlFor={ id }>
-          { label }
-        </label>
-        <div className={ styles.outerInput }>
-          <input
-            id={ id }
-            className={ styles.input }
-            placeholder={ ilHint }
-            onBlur={ this.handleInputBlur }
-            onFocus={ this.handleInputFocus }
-            onChange={ this.handleChange }
-            ref={ this.setInputRef }
-          />
-          { this.renderLoader() }
-        </div>
-
-        <div className={ styles.underline }>
-          <TextFieldUnderline
-            focus={ inputFocused }
-            focusStyle={ BOTTOM_BORDER_STYLE }
-            muiTheme={ muiTheme }
-            style={ BOTTOM_BORDER_STYLE }
-          />
-        </div>
-
-        { this.renderCurrentInput() }
-        { this.renderRegistryValues() }
         { this.renderAccounts() }
       </Portal>
     );

js/src/ui/Modal/modal.css

@@ -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 {

js/src/ui/Modal/modal.js

@@ -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}`;

js/src/ui/Portal/portal.css

@@ -16,13 +16,14 @@
 */
 
 $modalMargin: 1.5em;
+$modalPadding: 1.5em;
 $modalBackZ: 2500;
 
 /* This should be the default case, the Portal used as a stand-alone modal */
-$modalBottom: 15vh;
+$modalBottom: $modalMargin;
 $modalLeft: $modalMargin;
 $modalRight: $modalMargin;
-$modalTop: 0;
+$modalTop: $modalMargin;
 $modalZ: 3500;
 
 /* This is the case where popped-up over another modal, Portal or otherwise */
@@ -55,7 +56,9 @@ $popoverZ: 3600;
   background-color: rgba(0, 0, 0, 1);
   box-sizing: border-box;
   display: flex;
-  padding: 1.5em;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: $modalPadding;
   position: fixed;
 
   * {
@@ -77,22 +80,48 @@ $popoverZ: 3600;
     width: calc(100vw - $popoverLeft - $popoverRight);
     z-index: $popoverZ;
   }
-}
 
-.closeIcon {
+  .buttonRow {
-  font-size: 4em;
+    display: flex;
-  position: absolute;
+    flex-direction: row;
-  right: 1rem;
+    flex-wrap: nowrap;
-  top: 0.5rem;
+    justify-content: flex-end;
-  z-index: 100;
+    padding: $modalPadding 0 0 0;
 
-  &, * {
+    button:not([disabled]) {
-    height: 48px !important;
+      color: white !important;
-    width: 48px !important;
+
+      svg {
+        fill: white !important;
+      }
+    }
   }
 
-  &:hover {
+  .childContainer {
-    cursor: pointer;
+    flex: 1;
-    opacity: 0.5;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .closeIcon {
+    font-size: 4em;
+    position: absolute;
+    right: 1rem;
+    top: 0.5rem;
+    z-index: 100;
+
+    &, * {
+      height: 48px !important;
+      width: 48px !important;
+    }
+
+    &:hover {
+      cursor: pointer;
+      opacity: 0.5;
+    }
+  }
+
+  .titleRow {
+    margin-bottom: $modalPadding;
   }
 }

js/src/ui/Portal/portal.example.js

@@ -16,6 +16,7 @@
 
 import React, { Component } from 'react';
 
+import { Button } from '~/ui';
 import PlaygroundExample from '~/playground/playgroundExample';
 
 import Modal from '../Modal';
@@ -77,6 +78,29 @@ export default class PortalExample extends Component {
             </Portal>
           </div>
         </PlaygroundExample>
+
+        <PlaygroundExample name='Portal with Buttons'>
+          <div>
+            <button onClick={ this.handleOpen(4) }>Open</button>
+            <Portal
+              activeStep={ 0 }
+              buttons={ [
+                <Button
+                  key='close'
+                  label='close'
+                  onClick={ this.handleClose }
+                />
+              ] }
+              isChildModal
+              open={ open[4] || false }
+              onClose={ this.handleClose }
+              steps={ [ 'step 1', 'step 2' ] }
+              title='Portal with button'
+            >
+              <p>This is the fourth portal</p>
+            </Portal>
+          </div>
+        </PlaygroundExample>
       </div>
     );
   }

js/src/ui/Portal/portal.js

@@ -20,8 +20,10 @@ import ReactDOM from 'react-dom';
 import ReactPortal from 'react-portal';
 import keycode from 'keycode';
 
+import { nodeOrStringProptype } from '~/util/proptypes';
 import { CloseIcon } from '~/ui/Icons';
 import ParityBackground from '~/ui/ParityBackground';
+import Title from '~/ui/Title';
 
 import styles from './portal.css';
 
@@ -29,14 +31,35 @@ export default class Portal extends Component {
   static propTypes = {
     onClose: PropTypes.func.isRequired,
     open: PropTypes.bool.isRequired,
+    activeStep: PropTypes.number,
+    busy: PropTypes.bool,
+    busySteps: PropTypes.array,
+    buttons: PropTypes.array,
     children: PropTypes.node,
     className: PropTypes.string,
+    hideClose: PropTypes.bool,
     isChildModal: PropTypes.bool,
-    onKeyDown: PropTypes.func
+    onKeyDown: PropTypes.func,
+    steps: PropTypes.array,
+    title: nodeOrStringProptype()
   };
 
+  componentDidMount () {
+    this.setBodyOverflow(this.props.open);
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.open !== this.props.open) {
+      this.setBodyOverflow(nextProps.open);
+    }
+  }
+
+  componentWillUnmount () {
+    this.setBodyOverflow(false);
+  }
+
   render () {
-    const { children, className, isChildModal, open } = this.props;
+    const { activeStep, busy, busySteps, children, className, isChildModal, open, steps, title } = this.props;
 
     if (!open) {
       return null;
@@ -69,32 +92,72 @@ export default class Portal extends Component {
               onKeyUp={ this.handleKeyUp }
             />
             <ParityBackground className={ styles.parityBackground } />
-            <div
+            { this.renderClose() }
-              className={ styles.closeIcon }
+            <Title
-              onClick={ this.handleClose }
+              activeStep={ activeStep }
-            >
+              busy={ busy }
-              <CloseIcon />
+              busySteps={ busySteps }
+              className={ styles.titleRow }
+              steps={ steps }
+              title={ title }
+            />
+            <div className={ styles.childContainer }>
+              { children }
             </div>
-            { children }
+            { this.renderButtons() }
           </div>
         </div>
       </ReactPortal>
     );
   }
 
+  renderButtons () {
+    const { buttons } = this.props;
+
+    if (!buttons) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.buttonRow }>
+        { buttons }
+      </div>
+    );
+  }
+
+  renderClose () {
+    const { hideClose } = this.props;
+
+    if (hideClose) {
+      return null;
+    }
+
+    return (
+      <CloseIcon
+        className={ styles.closeIcon }
+        onClick={ this.handleClose }
+      />
+    );
+  }
+
   stopEvent = (event) => {
     event.preventDefault();
     event.stopPropagation();
   }
 
   handleClose = () => {
-    this.props.onClose();
+    const { hideClose, onClose } = this.props;
+
+    if (!hideClose) {
+      onClose();
+    }
   }
 
   handleKeyDown = (event) => {
     const { onKeyDown } = this.props;
 
     event.persist();
+
     return onKeyDown
       ? onKeyDown(event)
       : false;
@@ -111,10 +174,11 @@ export default class Portal extends Component {
   }
 
   handleDOMAction = (ref, method) => {
-    const refItem = typeof ref === 'string'
+    const element = ReactDOM.findDOMNode(
-      ? this.refs[ref]
+      typeof ref === 'string'
-      : ref;
+        ? this.refs[ref]
-    const element = ReactDOM.findDOMNode(refItem);
+        : ref
+    );
 
     if (!element || typeof element[method] !== 'function') {
       console.warn('could not find', ref, 'or method', method);
@@ -123,4 +187,12 @@ export default class Portal extends Component {
 
     return element[method]();
   }
+
+  setBodyOverflow (open) {
+    if (!this.props.isChildModal) {
+      document.body.style.overflow = open
+        ? 'hidden'
+        : null;
+    }
+  }
 }

js/src/ui/Portal/portal.spec.js

@@ -44,4 +44,21 @@ describe('ui/Portal', () => {
   it('renders defaults', () => {
     expect(component).to.be.ok;
   });
+
+  describe('title rendering', () => {
+    const TITLE = 'some test title';
+    let title;
+
+    beforeEach(() => {
+      title = render({ title: TITLE }).find('Title');
+    });
+
+    it('renders the specified title', () => {
+      expect(title).to.have.length(1);
+    });
+
+    it('renders the passed title', () => {
+      expect(title.props().title).to.equal(TITLE);
+    });
+  });
 });

js/src/ui/Title/title.css

@@ -0,0 +1,26 @@
+/* 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/>.
+*/
+
+.title {
+  .steps {
+    margin: -0.5em 0 -1em 0;
+  }
+
+  .waiting {
+    margin: 1em -1em -1em -1em;
+  }
+}

js/src/ui/Title/title.js

@@ -14,35 +14,49 @@
 // 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 React, { Component, PropTypes } from 'react';
 
+// TODO: It would make sense (going forward) to replace all uses of
+// ContainerTitle with this component. In that case the styles for the
+// 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 { nodeOrStringProptype } from '~/util/proptypes';
 
-import styles from '../modal.css';
+import styles from './title.css';
 
 export default class Title extends Component {
   static propTypes = {
+    activeStep: PropTypes.number,
     busy: PropTypes.bool,
-    current: PropTypes.number,
+    busySteps: PropTypes.array,
+    className: PropTypes.string,
     steps: PropTypes.array,
-    waiting: PropTypes.array,
     title: nodeOrStringProptype()
   }
 
   render () {
-    const { current, steps, title } = this.props;
+    const { activeStep, className, steps, title } = this.props;
+
+    if (!title && !steps) {
+      return null;
+    }
 
     return (
-      <div className={ styles.title }>
+      <div
-        <h3>
+        className={
-          {
+          [styles.title, className].join(' ')
+        }
+      >
+        <ContainerTitle
+          title={
             steps
-              ? steps[current]
+              ? steps[activeStep || 0]
               : title
           }
-        </h3>
+        />
         { this.renderSteps() }
         { this.renderWaiting() }
       </div>
@@ -50,7 +64,7 @@ export default class Title extends Component {
   }
 
   renderSteps () {
-    const { current, steps } = this.props;
+    const { activeStep, steps } = this.props;
 
     if (!steps) {
       return;
@@ -58,7 +72,7 @@ export default class Title extends Component {
 
     return (
       <div className={ styles.steps }>
-        <Stepper activeStep={ current }>
+        <Stepper activeStep={ activeStep }>
           { this.renderTimeline() }
         </Stepper>
       </div>
@@ -80,8 +94,8 @@ export default class Title extends Component {
   }
 
   renderWaiting () {
-    const { current, busy, waiting } = this.props;
+    const { activeStep, busy, busySteps } = this.props;
-    const isWaiting = busy || (waiting || []).includes(current);
+    const isWaiting = busy || (busySteps || []).includes(activeStep);
 
     if (!isWaiting) {
       return null;

js/src/ui/index.js

@@ -55,6 +55,7 @@ import SectionList from './SectionList';
 import ShortenedHash from './ShortenedHash';
 import SignerIcon from './SignerIcon';
 import Tags from './Tags';
+import Title from './Title';
 import Tooltips, { Tooltip } from './Tooltips';
 import TxHash from './TxHash';
 import TxList from './TxList';
@@ -119,6 +120,7 @@ export {
   SectionList,
   SignerIcon,
   Tags,
+  Title,
   Tooltip,
   Tooltips,
   TxHash,