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 {