From 087aaaa791485d0c483819c14bf9528c55d96710 Mon Sep 17 00:00:00 2001 From: Ann Marie Ward Date: Sat, 19 Dec 2020 10:36:46 -0700 Subject: [PATCH 1/7] Add an 'x' button to close the error messages popup #1403 --- .../components/error/FrontEnd/FrontEndError.css | 11 +++++++++++ .../FrontEnd/FrontEndErrorContainer.react.js | 17 ++++++++++++++--- .../error/GlobalErrorOverlay.react.js | 7 +++++-- .../src/components/error/icons/OffIcon.svg | 2 +- .../components/error/menu/DebugMenu.react.js | 1 + 5 files changed, 32 insertions(+), 6 deletions(-) diff --git a/dash-renderer/src/components/error/FrontEnd/FrontEndError.css b/dash-renderer/src/components/error/FrontEnd/FrontEndError.css index e5f50d5490..9e5d39497f 100644 --- a/dash-renderer/src/components/error/FrontEnd/FrontEndError.css +++ b/dash-renderer/src/components/error/FrontEnd/FrontEndError.css @@ -2,6 +2,17 @@ margin-top: 10px; } +.dash-fe-error__icon-x { + width: 16px; + height: 16px; + background-color: red; + margin-left: 75px; + border-radius: 4px; + border: 1px solid; + +} + + .dash-fe-errors { min-width: 386px; max-width: 650px; diff --git a/dash-renderer/src/components/error/FrontEnd/FrontEndErrorContainer.react.js b/dash-renderer/src/components/error/FrontEnd/FrontEndErrorContainer.react.js index 3bdbf51cb3..2b5b26d6c3 100644 --- a/dash-renderer/src/components/error/FrontEnd/FrontEndErrorContainer.react.js +++ b/dash-renderer/src/components/error/FrontEnd/FrontEndErrorContainer.react.js @@ -1,5 +1,6 @@ import React, {Component} from 'react'; import './FrontEndError.css'; +import OffIcon from '../icons/OffIcon.svg'; import PropTypes from 'prop-types'; import {FrontEndError} from './FrontEndError.react'; @@ -9,9 +10,9 @@ class FrontEndErrorContainer extends Component { } render() { - const {errors, connected} = this.props; + const {errors, connected, errorsOpened, clickHandler} = this.props; const errorsLength = errors.length; - if (errorsLength === 0) { + if (errorsLength === 0 || !errorsOpened) { return null; } @@ -34,7 +35,14 @@ class FrontEndErrorContainer extends Component { ){connected ? null : '\u00a0 🚫 Server Unavailable'} +
clickHandler()} + > + +
+
{errorElements}
); @@ -42,9 +50,12 @@ class FrontEndErrorContainer extends Component { } FrontEndErrorContainer.propTypes = { + id: PropTypes.string, errors: PropTypes.array, connected: PropTypes.bool, - inAlertsTray: PropTypes.any + inAlertsTray: PropTypes.any, + errorsOpened: PropTypes.any, + clickHandler: PropTypes.func }; FrontEndErrorContainer.propTypes = { diff --git a/dash-renderer/src/components/error/GlobalErrorOverlay.react.js b/dash-renderer/src/components/error/GlobalErrorOverlay.react.js index 4ad50a978c..ccb581bf84 100644 --- a/dash-renderer/src/components/error/GlobalErrorOverlay.react.js +++ b/dash-renderer/src/components/error/GlobalErrorOverlay.react.js @@ -11,7 +11,7 @@ export default class GlobalErrorOverlay extends Component { } render() { - const {visible, error, errorsOpened} = this.props; + const {visible, error, errorsOpened, clickHandler} = this.props; let frontEndErrors; if (errorsOpened) { @@ -21,6 +21,8 @@ export default class GlobalErrorOverlay extends Component { ); } @@ -41,5 +43,6 @@ GlobalErrorOverlay.propTypes = { children: PropTypes.object, visible: PropTypes.bool, error: PropTypes.object, - errorsOpened: PropTypes.any + errorsOpened: PropTypes.any, + clickHandler: PropTypes.func }; diff --git a/dash-renderer/src/components/error/icons/OffIcon.svg b/dash-renderer/src/components/error/icons/OffIcon.svg index 44f805eb6d..0621bbfff2 100644 --- a/dash-renderer/src/components/error/icons/OffIcon.svg +++ b/dash-renderer/src/components/error/icons/OffIcon.svg @@ -1,3 +1,3 @@ - + diff --git a/dash-renderer/src/components/error/menu/DebugMenu.react.js b/dash-renderer/src/components/error/menu/DebugMenu.react.js index 47f0d5cf23..a11ab6085d 100644 --- a/dash-renderer/src/components/error/menu/DebugMenu.react.js +++ b/dash-renderer/src/components/error/menu/DebugMenu.react.js @@ -147,6 +147,7 @@ class DebugMenu extends Component { error={error} visible={errCount > 0} errorsOpened={errorsOpened} + clickHandler={toggleErrors} > {this.props.children} From b74ac865ac2d53046aeeab81a8e2e264f763b228 Mon Sep 17 00:00:00 2001 From: Ann Marie Ward Date: Tue, 22 Dec 2020 11:31:57 -0700 Subject: [PATCH 2/7] Updated css #1403 --- .../components/error/FrontEnd/FrontEndError.css | 16 ++++++++++------ .../FrontEnd/FrontEndErrorContainer.react.js | 9 +++------ .../src/components/error/GlobalErrorOverlay.css | 1 + 3 files changed, 14 insertions(+), 12 deletions(-) diff --git a/dash-renderer/src/components/error/FrontEnd/FrontEndError.css b/dash-renderer/src/components/error/FrontEnd/FrontEndError.css index 9e5d39497f..cf3df35e86 100644 --- a/dash-renderer/src/components/error/FrontEnd/FrontEndError.css +++ b/dash-renderer/src/components/error/FrontEnd/FrontEndError.css @@ -3,13 +3,17 @@ } .dash-fe-error__icon-x { - width: 16px; - height: 16px; - background-color: red; - margin-left: 75px; - border-radius: 4px; - border: 1px solid; + position: absolute; + right: 0; + top: 0; + color: #ccc; + font-size: 20px; + cursor: pointer; +} +.dash-fe-error__icon-x:hover +{ + color:black; } diff --git a/dash-renderer/src/components/error/FrontEnd/FrontEndErrorContainer.react.js b/dash-renderer/src/components/error/FrontEnd/FrontEndErrorContainer.react.js index 2b5b26d6c3..233ff990a3 100644 --- a/dash-renderer/src/components/error/FrontEnd/FrontEndErrorContainer.react.js +++ b/dash-renderer/src/components/error/FrontEnd/FrontEndErrorContainer.react.js @@ -1,6 +1,5 @@ import React, {Component} from 'react'; import './FrontEndError.css'; -import OffIcon from '../icons/OffIcon.svg'; import PropTypes from 'prop-types'; import {FrontEndError} from './FrontEndError.react'; @@ -36,13 +35,11 @@ class FrontEndErrorContainer extends Component { ){connected ? null : '\u00a0 🚫 Server Unavailable'}
clickHandler()} - > - + className='dash-fe-error__icon-x' + onClick={() => clickHandler()}> + x
-
{errorElements}
); diff --git a/dash-renderer/src/components/error/GlobalErrorOverlay.css b/dash-renderer/src/components/error/GlobalErrorOverlay.css index 318efa88ba..955c97c160 100644 --- a/dash-renderer/src/components/error/GlobalErrorOverlay.css +++ b/dash-renderer/src/components/error/GlobalErrorOverlay.css @@ -53,6 +53,7 @@ display: flex; justify-content: center; align-items: center; + position: relative; } .dash-error-card__message { font-size: 14px; From ebe50bb240ed4913820d25e8a533aaf118ab9952 Mon Sep 17 00:00:00 2001 From: Ann Marie Ward Date: Tue, 22 Dec 2020 11:44:22 -0700 Subject: [PATCH 3/7] One more css update to align the button #1403 --- dash-renderer/src/components/error/FrontEnd/FrontEndError.css | 1 + 1 file changed, 1 insertion(+) diff --git a/dash-renderer/src/components/error/FrontEnd/FrontEndError.css b/dash-renderer/src/components/error/FrontEnd/FrontEndError.css index cf3df35e86..5b57c79438 100644 --- a/dash-renderer/src/components/error/FrontEnd/FrontEndError.css +++ b/dash-renderer/src/components/error/FrontEnd/FrontEndError.css @@ -9,6 +9,7 @@ color: #ccc; font-size: 20px; cursor: pointer; + margin-right: 5px } .dash-fe-error__icon-x:hover From e53f278e0bf68bca0ae63a5977775d85ae8b1e10 Mon Sep 17 00:00:00 2001 From: Ann Marie Ward Date: Tue, 22 Dec 2020 11:44:22 -0700 Subject: [PATCH 4/7] One more css update to align the button #1403 --- dash-renderer/src/components/error/FrontEnd/FrontEndError.css | 4 ++++ .../components/error/FrontEnd/FrontEndErrorContainer.react.js | 3 ++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/dash-renderer/src/components/error/FrontEnd/FrontEndError.css b/dash-renderer/src/components/error/FrontEnd/FrontEndError.css index 5b57c79438..1bc4e8b145 100644 --- a/dash-renderer/src/components/error/FrontEnd/FrontEndError.css +++ b/dash-renderer/src/components/error/FrontEnd/FrontEndError.css @@ -9,7 +9,11 @@ color: #ccc; font-size: 20px; cursor: pointer; +<<<<<<< refs/remotes/origin/1403-x-button-to-close-error-box margin-right: 5px +======= + margin-right: 10px +>>>>>>> One more css update to align the button #1403 } .dash-fe-error__icon-x:hover diff --git a/dash-renderer/src/components/error/FrontEnd/FrontEndErrorContainer.react.js b/dash-renderer/src/components/error/FrontEnd/FrontEndErrorContainer.react.js index 233ff990a3..aba39209e6 100644 --- a/dash-renderer/src/components/error/FrontEnd/FrontEndErrorContainer.react.js +++ b/dash-renderer/src/components/error/FrontEnd/FrontEndErrorContainer.react.js @@ -36,7 +36,8 @@ class FrontEndErrorContainer extends Component {
clickHandler()}> + onClick={() => clickHandler()} + > x
From 030f881f186c61ed4e7143d9d86c59b48939106f Mon Sep 17 00:00:00 2001 From: Ann Marie Ward Date: Sat, 26 Dec 2020 17:19:28 -0700 Subject: [PATCH 5/7] updated hover color --- .../src/components/error/FrontEnd/FrontEndError.css | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/dash-renderer/src/components/error/FrontEnd/FrontEndError.css b/dash-renderer/src/components/error/FrontEnd/FrontEndError.css index 1bc4e8b145..ec1293a4c6 100644 --- a/dash-renderer/src/components/error/FrontEnd/FrontEndError.css +++ b/dash-renderer/src/components/error/FrontEnd/FrontEndError.css @@ -6,19 +6,15 @@ position: absolute; right: 0; top: 0; - color: #ccc; + color: #B9C2CE; font-size: 20px; cursor: pointer; -<<<<<<< refs/remotes/origin/1403-x-button-to-close-error-box - margin-right: 5px -======= margin-right: 10px ->>>>>>> One more css update to align the button #1403 } .dash-fe-error__icon-x:hover { - color:black; + color:#a1a9b5; } From a05b13ff3c983fff304a765ae4955ff937e04d94 Mon Sep 17 00:00:00 2001 From: Ann Marie Ward Date: Wed, 6 Jan 2021 10:44:51 -0700 Subject: [PATCH 6/7] x and officon update --- .../components/error/FrontEnd/FrontEndErrorContainer.react.js | 2 +- dash-renderer/src/components/error/icons/OffIcon.svg | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/dash-renderer/src/components/error/FrontEnd/FrontEndErrorContainer.react.js b/dash-renderer/src/components/error/FrontEnd/FrontEndErrorContainer.react.js index aba39209e6..1ff561febb 100644 --- a/dash-renderer/src/components/error/FrontEnd/FrontEndErrorContainer.react.js +++ b/dash-renderer/src/components/error/FrontEnd/FrontEndErrorContainer.react.js @@ -38,7 +38,7 @@ class FrontEndErrorContainer extends Component { className='dash-fe-error__icon-x' onClick={() => clickHandler()} > - x + ×
{errorElements}
diff --git a/dash-renderer/src/components/error/icons/OffIcon.svg b/dash-renderer/src/components/error/icons/OffIcon.svg index 0621bbfff2..44f805eb6d 100644 --- a/dash-renderer/src/components/error/icons/OffIcon.svg +++ b/dash-renderer/src/components/error/icons/OffIcon.svg @@ -1,3 +1,3 @@ - + From beeee567880f7a476ecc616db2643a4cd523ef3a Mon Sep 17 00:00:00 2001 From: Ann Marie Ward Date: Wed, 6 Jan 2021 13:58:35 -0700 Subject: [PATCH 7/7] update changelog for #1505 --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 64e9ec6a53..3366fd904c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to `dash` will be documented in this file. This project adheres to [Semantic Versioning](https://semver.org/). ## [UNRELEASED] +### Added +- [#1508](https://github.com/plotly/dash/pull/1508) Fix [#1403](https://github.com/plotly/dash/issues/1403): Adds an x button +to close the error messages box. + ### Changed - [#1503](https://github.com/plotly/dash/pull/1506) Fix [#1466](https://github.com/plotly/dash/issues/1466): loosen `dash[testing]` requirements for easier integration in external projects. This PR also bumps many `dash[dev]` requirements.