diff --git a/CHANGELOG.md b/CHANGELOG.md index 5fb8c8090..6c1712f0e 100644 --- a/CHANGELOG.md +++ b/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 * * diff --git a/js/app.js b/js/app.js index 0cf11a654..ab5fc1c3b 100644 --- a/js/app.js +++ b/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 - +

Error

We're sorry that LBRY has encountered an error. This has been reported and we will investigate the problem.

- {this.state.errorInfo} -
- -
-
+ ); } diff --git a/js/component/modal.js b/js/component/modal.js index b02f9df97..7f99adffc 100644 --- a/js/component/modal.js +++ b/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 = ( -
- {this.props.type == 'confirm' - ? - : null} - -
- ); - } - return ( - -
- {this.props.children} -
- {buttons} + +
+ {this.props.children} +
+ {this.props.type == 'custom' // custom modals define their own buttons + ? null + :
+ {this.props.type == 'confirm' + ? + : null} + +
}
); } }); +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 ( + + {this.props.children} + {this.state.expanded + ? this.props.extraContent + : null} +
+ + +
+
+ ); + } +}); + export default Modal; diff --git a/scss/_gui.scss b/scss/_gui.scss index 4fa3ecc45..965d7ce78 100644 --- a/scss/_gui.scss +++ b/scss/_gui.scss @@ -342,6 +342,7 @@ input[type="text"], input[type="search"] .modal__header { margin-bottom: 5px; + text-align: center; } .modal__buttons {