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
openethereum · Feb 3, 2017 · c7f5ee4 · c7f5ee4
1 parent a68ca74
commit c7f5ee4
Show file tree

Hide file tree

Showing 18 changed files with 345 additions and 159 deletions.
diff --git a/js/src/modals/AddDapps/addDapps.css b/js/src/modals/AddDapps/addDapps.css
@@ -20,7 +20,6 @@
 }
 
 .container {
-  margin-top: 1.5em;
   overflow-y: auto;
 }
 

diff --git a/js/src/modals/AddDapps/addDapps.js b/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 } />
           {

diff --git a/js/src/modals/DappPermissions/dappPermissions.css b/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;

diff --git a/js/src/modals/DappPermissions/dappPermissions.js b/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,35 +38,34 @@ 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 }
             noStretch
             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>
     );
   }

diff --git a/js/src/ui/Container/Title/title.css b/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 {
-  overflow: hidden;
-  position: relative;
-  line-height: 1.2em;
-  max-height: 2.4em;
 
+$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;
   -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;
 }
diff --git a/js/src/ui/Container/Title/title.js b/js/src/ui/Container/Title/title.js
@@ -29,47 +29,59 @@ export default class Title extends Component {
   }
 
   render () {
-    const { byline, className, title } = this.props;
-
-    const byLine = typeof byline === 'string'
-      ? (
-        <span title={ byline }>
-          { byline }
-        </span>
-      )
-      : byline;
+    const { className, title } = this.props;
 
     return (
       <div className={ className }>
         <h3 className={ styles.title }>
           { title }
         </h3>
-        <div className={ styles.byline }>
-          { byLine }
-        </div>
+        { this.renderByline() }
         { 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;
 
     if (!description) {
       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>
     );
   }

diff --git a/js/src/ui/Form/AddressSelect/addressSelect.css b/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;
   }

diff --git a/js/src/ui/Form/AddressSelect/addressSelect.js b/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>
     );

diff --git a/js/src/ui/Modal/modal.css b/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 {

diff --git a/js/src/ui/Modal/modal.js b/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}`;
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,7 +20,6 @@ @@
     }
     .container {
-      margin-top: 1.5em;
       overflow-y: auto;
     }
@@ Expand Down @@