Merge pull request #186 from lbryio/modal-updates

Improvements to modals

CHANGELOG.md

@@ -13,7 +13,7 @@ Web UI version numbers should always match the corresponding version of LBRY App
   *
 
 ### Changed
-  *
+  * In error modal, hide details in expandable section
   *
   *
 

js/app.js

@@ -18,7 +18,7 @@ import DeveloperPage from './page/developer.js';
 import {FileListDownloaded, FileListPublished} from './page/file-list.js';
 import Drawer from './component/drawer.js';
 import Header from './component/header.js';
-import Modal from './component/modal.js';
+import {Modal, ExpandableModal} from './component/modal.js';
 import {Link} from './component/link.js';
 
 
@@ -236,19 +236,16 @@ var App = React.createClass({
             Downloading Update: {this.state.downloadProgress}% Complete
             <Line percent={this.state.downloadProgress} strokeWidth="4"/>
           </Modal>
-          <Modal isOpen={this.state.modal == 'error'} contentLabel="Error" type="custom"
+          <ExpandableModal isOpen={this.state.modal == 'error'} contentLabel="Error" className="error-modal"
-                 className="error-modal" overlayClassName="error-modal-overlay"  >
+                           overlayClassName="error-modal-overlay" onConfirmed={this.closeModal}
+                           extraContent={this.state.errorInfo}>
             <h3 className="modal__header">Error</h3>
 
             <div className="error-modal__content">
               <div><img className="error-modal__warning-symbol" src={lbry.imagePath('warning.png')} /></div>
               <p>We're sorry that LBRY has encountered an error. This has been reported and we will investigate the problem.</p>
             </div>
-            {this.state.errorInfo}
+          </ExpandableModal>
-            <div className="modal__buttons">
-              <Link button="alt" label="OK" className="modal__button" onClick={this.closeModal} />
-            </div>
-          </Modal>
         </div>
     );
   }

js/component/modal.js

@@ -3,7 +3,7 @@ import ReactModal from 'react-modal';
 import {Link} from './link.js';
 
 
-var Modal = React.createClass({
+export const Modal = React.createClass({
   propTypes: {
     type: React.PropTypes.oneOf(['alert', 'confirm', 'custom']),
     onConfirmed: React.PropTypes.func,
@@ -23,44 +23,63 @@ var Modal = React.createClass({
     };
   },
   render: function() {
-    var props = Object.assign({}, this.props);
-
-    if (typeof props.className == 'undefined') {
-      props.className = 'modal';
-    } else {
-      props.className += ' modal';
-    }
-
-    if (typeof props.overlayClassName == 'undefined') {
-      props.overlayClassName = 'modal-overlay';
-    } else {
-      props.overlayClassName += ' modal-overlay';
-    }
-
-    props.onCloseRequested = props.onAborted || props.onConfirmed;
-
-    if (this.props.type == 'custom') {
-      var buttons = null;
-    } else {
-      var buttons = (
-        <div className="modal__buttons">
-          {this.props.type == 'confirm'
-            ? <Link button="alt" label={props.abortButtonLabel} className="modal__button" disabled={this.props.abortButtonDisabled} onClick={props.onAborted} />
-            : null}
-          <Link button="primary" label={props.confirmButtonLabel} className="modal__button" disabled={this.props.confirmButtonDisabled} onClick={props.onConfirmed} />
-        </div>
-      );
-    }
-
     return (
-      <ReactModal {...props}>
+      <ReactModal onCloseRequested={this.props.onAborted || this.props.onConfirmed} {...this.props}
-         <div>
+                  className={(this.props.className || '') + ' modal'}
-           {this.props.children}
+                  overlayClassName={(this.props.overlayClassName || '') + ' modal-overlay'}>
-         </div>
+        <div>
-         {buttons}
+          {this.props.children}
+        </div>
+        {this.props.type == 'custom' // custom modals define their own buttons
+          ? null
+          : <div className="modal__buttons">
+              {this.props.type == 'confirm'
+                ? <Link button="alt" label={this.props.abortButtonLabel} className="modal__button" disabled={this.props.abortButtonDisabled} onClick={this.props.onAborted} />
+                : null}
+              <Link button="primary" label={this.props.confirmButtonLabel} className="modal__button" disabled={this.props.confirmButtonDisabled} onClick={this.props.onConfirmed} />
+            </div>}
       </ReactModal>
     );
   }
 });
 
+export const ExpandableModal = React.createClass({
+  propTypes: {
+    expandButtonLabel: React.PropTypes.string,
+    extraContent: React.PropTypes.element,
+  },
+  getDefaultProps: function() {
+    return {
+      confirmButtonLabel: 'OK',
+      expandButtonLabel: 'Show More...',
+      hideButtonLabel: 'Show Less',
+    }
+  },
+  getInitialState: function() {
+    return {
+      expanded: false,
+    }
+  },
+  toggleExpanded: function() {
+    this.setState({
+      expanded: !this.state.expanded,
+    });
+  },
+  render: function() {
+    return (
+      <Modal type="custom" {... this.props}>
+        {this.props.children}
+        {this.state.expanded
+          ? this.props.extraContent
+          : null}
+        <div className="modal__buttons">
+          <Link button="primary" label={this.props.confirmButtonLabel} className="modal__button" onClick={this.props.onConfirmed} />
+          <Link button="alt" label={!this.state.expanded ? this.props.expandButtonLabel : this.props.hideButtonLabel}
+                className="modal__button" onClick={this.toggleExpanded} />
+        </div>
+      </Modal>
+    );
+  }
+});
+
 export default Modal;

scss/_gui.scss

@@ -342,6 +342,7 @@ input[type="text"], input[type="search"]
 
 .modal__header {
    margin-bottom: 5px;
+   text-align: center;
 }
 
 .modal__buttons {