From 2b7c258cf3b87d619ccf892a64dac5c82248bc39 Mon Sep 17 00:00:00 2001 From: Alex Liebowitz Date: Sat, 25 Feb 2017 01:51:33 -0500 Subject: [PATCH 1/4] Restore centering of modal headers --- scss/_gui.scss | 1 + 1 file changed, 1 insertion(+) 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 { From ce33050fb3bf7dd7c58090c48dc29b0a5a9b3fbd Mon Sep 17 00:00:00 2001 From: Alex Liebowitz Date: Sat, 25 Feb 2017 02:45:39 -0500 Subject: [PATCH 2/4] Refactor Modal component --- js/component/modal.js | 48 +++++++++++++------------------------------ 1 file changed, 14 insertions(+), 34 deletions(-) diff --git a/js/component/modal.js b/js/component/modal.js index b02f9df97..ac1316eb1 100644 --- a/js/component/modal.js +++ b/js/component/modal.js @@ -23,41 +23,21 @@ 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} + +
}
); } From 08c4a5173a3d786a077b8fbfb15d2977d7308084 Mon Sep 17 00:00:00 2001 From: Alex Liebowitz Date: Sat, 25 Feb 2017 02:56:57 -0500 Subject: [PATCH 3/4] Add new ExpandableModal component --- js/component/modal.js | 41 ++++++++++++++++++++++++++++++++++++++++- 1 file changed, 40 insertions(+), 1 deletion(-) diff --git a/js/component/modal.js b/js/component/modal.js index ac1316eb1..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, @@ -43,4 +43,43 @@ var Modal = React.createClass({ } }); +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; From eaa0b7ba0159b799337a83f8c6bc4ce72f1ad33e Mon Sep 17 00:00:00 2001 From: Alex Liebowitz Date: Sat, 25 Feb 2017 02:57:29 -0500 Subject: [PATCH 4/4] Convert error modal to use ExpandableModal component --- CHANGELOG.md | 2 +- js/app.js | 13 +++++-------- 2 files changed, 6 insertions(+), 9 deletions(-) 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} -
- -
-
+ ); }