From 425f93dfcb2de76d5b1258e62fa89c0c71ab42ac Mon Sep 17 00:00:00 2001 From: Howard Tong Date: Fri, 22 Nov 2019 09:01:54 -0800 Subject: [PATCH 1/5] #2079: Adds busy and error toast to save btns in GCI --- package.json | 1 + src/clincoded/static/components/app.js | 2 + .../components/case_control_curation.js | 18 +- .../static/components/create_gene_disease.js | 15 +- .../components/experimental_curation.js | 18 +- .../static/components/individual_curation.js | 18 +- .../components/score/case_control_score.js | 2 +- .../components/score/experimental_score.js | 2 +- .../components/score/individual_score.js | 2 +- .../static/scss/clincoded/modules/_toast.scss | 404 ++++++++++++++++++ src/clincoded/static/scss/style.scss | 1 + 11 files changed, 464 insertions(+), 19 deletions(-) create mode 100644 src/clincoded/static/scss/clincoded/modules/_toast.scss diff --git a/package.json b/package.json index c2cf789e7..70a523566 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "react-day-picker": "^7.0.7", "react-dom": "^15.4.0", "react-select": "^2.0.0", + "react-toastify": "^4.5.2", "scriptjs": "^2.5.7", "shivie8": "^1.0.0", "source-map-support": "^0.4.6", diff --git a/src/clincoded/static/components/app.js b/src/clincoded/static/components/app.js index abd34e556..0cf039129 100644 --- a/src/clincoded/static/components/app.js +++ b/src/clincoded/static/components/app.js @@ -3,6 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import createReactClass from 'create-react-class'; import url from 'url'; +import { ToastContainer } from 'react-toastify'; import { content_views } from './globals'; import { Auth0, HistoryAndTriggers } from './mixins'; import { NavbarMixin, Nav, Navbar, NavItem } from '../libs/bootstrap/navigation'; @@ -275,6 +276,7 @@ var App = module.exports = createReactClass({ __html: '\n\n' + jsonScriptEscape(JSON.stringify(this.props.context)) + '\n\n' }}>
+
{this.state.demoWarning ? Note: This is a demo version of the site. Data entered will be deleted upon release of updated versions, which occurs roughly once per month. Please contact us with any questions at clingen-helpdesk@lists.stanford.edu } /> diff --git a/src/clincoded/static/components/case_control_curation.js b/src/clincoded/static/components/case_control_curation.js index 02cf99849..36f0e4e10 100644 --- a/src/clincoded/static/components/case_control_curation.js +++ b/src/clincoded/static/components/case_control_curation.js @@ -5,6 +5,7 @@ import createReactClass from 'create-react-class'; import _ from 'underscore'; import moment from 'moment'; import url from 'url'; +import { toast } from 'react-toastify'; import { queryKeyValue, country_codes, external_url_map, curator_page, history_views, content_views } from './globals'; import { RestMixin } from './rest'; import { Form, FormMixin, Input } from '../libs/bootstrap/form'; @@ -1557,6 +1558,12 @@ var CaseControlViewer = createReactClass({ window.location.href = '/curation-central/?gdm=' + tempGdm.uuid + '&pmid=' + tempPmid; }, + handleScoreSubmitError: function(err) { + this.setState({ submitBusy: false }); + toast.error('Something went wrong! Help us improve your experience by sending an error report.'); + console.log('Case-control score submit error: ', err); + }, + scoreSubmit: function(e) { let caseControl = this.props.context; /*****************************************************/ @@ -1572,10 +1579,11 @@ var CaseControlViewer = createReactClass({ // Update and create score object when the score object has the scoreStatus key/value pair if (this.state.userScoreObj.uuid) { return this.putRestData('/evidencescore/' + this.state.userScoreObj.uuid, newUserScoreObj).then(modifiedScoreObj => { - this.setState({submitBusy: false}); return Promise.resolve(modifiedScoreObj['@graph'][0]['@id']); }).then(data => { this.handlePageRedirect(); + }).catch(err => { + this.handleScoreSubmitError(err); }); } else { return this.postRestData('/evidencescore/', newUserScoreObj).then(newScoreObject => { @@ -1596,12 +1604,13 @@ var CaseControlViewer = createReactClass({ newCaseControl.scores.push(newScoreObjectUuid); return this.putRestData('/casecontrol/' + caseControl.uuid, newCaseControl).then(updatedCaseControlObj => { - this.setState({submitBusy: false}); return Promise.resolve(updatedCaseControlObj['@graph'][0]); }); }); }).then(data => { this.handlePageRedirect(); + }).catch(err => { + this.handleScoreSubmitError(err); }); } } else if (Object.keys(newUserScoreObj).length && !newUserScoreObj.hasOwnProperty('score')) { @@ -1633,12 +1642,13 @@ var CaseControlViewer = createReactClass({ }); } return this.putRestData('/casecontrol/' + caseControl.uuid, newCaseControl).then(updatedCaseControlObj => { - this.setState({submitBusy: false}); return Promise.resolve(updatedCaseControlObj['@graph'][0]); }); }); }).then(data => { this.handlePageRedirect(); + }).catch(err => { + this.handleScoreSubmitError(err); }); } } @@ -2118,7 +2128,7 @@ var CaseControlViewer = createReactClass({ {isEvidenceScored || (!isEvidenceScored && affiliation && affiliatedCaseControl) || (!isEvidenceScored && !affiliation && userCaseControl) ? - : null} diff --git a/src/clincoded/static/components/create_gene_disease.js b/src/clincoded/static/components/create_gene_disease.js index a49756951..5ec293574 100644 --- a/src/clincoded/static/components/create_gene_disease.js +++ b/src/clincoded/static/components/create_gene_disease.js @@ -33,7 +33,8 @@ var CreateGeneDisease = createReactClass({ diseaseUuid: null, diseaseError: null, adjectives: [], - adjectiveDisabled: true + adjectiveDisabled: true, + submitBusy: false, }; }, @@ -113,6 +114,7 @@ var CreateGeneDisease = createReactClass({ this.saveFormValue('moiAdjective', moiAdjectiveValue); } if (this.validateForm()) { + this.setState({ submitBusy: true }); // Get the free-text values for the Orphanet ID and the Gene ID to check against the DB /** * FIXME: Need to delete orphanet reference @@ -128,7 +130,10 @@ var CreateGeneDisease = createReactClass({ this.getRestDatas([ '/genes/' + geneId ], [ - function() { this.setFormErrors('hgncgene', 'HGNC gene symbol not found'); }.bind(this) + function() { + this.setState({ submitBusy: false }); + this.setFormErrors('hgncgene', 'HGNC gene symbol not found'); + }.bind(this) ]).then(response => { return this.getRestData('/search?type=disease&diseaseId=' + diseaseObj.diseaseId).then(diseaseSearch => { let diseaseUuid; @@ -189,13 +194,14 @@ var CreateGeneDisease = createReactClass({ }); } else { // Found matching GDM. See of the user wants to curate it. - this.setState({gdm: gdmSearch['@graph'][0]}); + this.setState({ gdm: gdmSearch['@graph'][0], submitBusy: false }); this.child.openModal(); } }); }).catch(e => { // Some unexpected error happened parseAndLogError.bind(undefined, 'fetchedRequest'); + this.setState({ submitBusy: false }); }); } }, @@ -230,6 +236,7 @@ var CreateGeneDisease = createReactClass({ let adjectiveDisabled = this.state.adjectiveDisabled; const moiKeys = Object.keys(modesOfInheritance); let gdm = this.state.gdm; + const { submitBusy } = this.state; return (
@@ -267,7 +274,7 @@ var CreateGeneDisease = createReactClass({

The above options (gene, disease, mode of inheritance, or adjective) can be altered for a Gene:Disease record up until a PMID has been added to the record. This includes adding an adjective to a Gene:Disease:Mode of inheritance record that has already been created or editing an adjective associated with a record.

- +
{gdm && gdm.gene && gdm.disease && gdm.modeInheritance ? diff --git a/src/clincoded/static/components/experimental_curation.js b/src/clincoded/static/components/experimental_curation.js index 79c261b61..9ac143fa8 100644 --- a/src/clincoded/static/components/experimental_curation.js +++ b/src/clincoded/static/components/experimental_curation.js @@ -5,6 +5,7 @@ import createReactClass from 'create-react-class'; import _ from 'underscore'; import moment from 'moment'; import url from 'url'; +import { toast } from 'react-toastify'; import { curator_page, content_views, history_views, queryKeyValue, dbxref_prefix_map, external_url_map, country_codes } from './globals'; import { RestMixin } from './rest'; import { Form, FormMixin, Input } from '../libs/bootstrap/form'; @@ -2572,6 +2573,12 @@ const ExperimentalViewer = createReactClass({ window.location.href = '/curation-central/?gdm=' + tempGdm.uuid + '&pmid=' + tempPmid; }, + handleScoreSubmitError: function(err) { + this.setState({ submitBusy: false }); + toast.error('Something went wrong! Help us improve your experience by sending an error report.'); + console.log('Experimental score submit error: ', err); + }, + // Handle the score submit button scoreSubmit: function(e) { let experimental = this.props.context; @@ -2593,10 +2600,11 @@ const ExperimentalViewer = createReactClass({ // Update and create score object when the score object has the scoreStatus key/value pair if (this.state.userScoreObj.uuid) { return this.putRestData('/evidencescore/' + this.state.userScoreObj.uuid, newUserScoreObj).then(modifiedScoreObj => { - this.setState({submitBusy: false}); return Promise.resolve(modifiedScoreObj['@graph'][0]['@id']); }).then(data => { this.handlePageRedirect(); + }).catch(err => { + this.handleScoreSubmitError(err); }); } else { return this.postRestData('/evidencescore/', newUserScoreObj).then(newScoreObject => { @@ -2617,12 +2625,13 @@ const ExperimentalViewer = createReactClass({ newExperimental.scores.push(newScoreObjectUuid); return this.putRestData('/experimental/' + experimental.uuid, newExperimental).then(updatedExperimentalObj => { - this.setState({submitBusy: false}); return Promise.resolve(updatedExperimentalObj['@graph'][0]); }); }); }).then(data => { this.handlePageRedirect(); + }).catch(err => { + this.handleScoreSubmitError(err); }); } } else if (!newUserScoreObj.scoreStatus) { @@ -2654,12 +2663,13 @@ const ExperimentalViewer = createReactClass({ }); } return this.putRestData('/experimental/' + experimental.uuid, newExperimental).then(updatedExperimentalObj => { - this.setState({submitBusy: false}); return Promise.resolve(updatedExperimentalObj['@graph'][0]); }); }); }).then(data => { this.handlePageRedirect(); + }).catch(err => { + this.handleScoreSubmitError(err); }); } } @@ -3268,7 +3278,7 @@ const ExperimentalViewer = createReactClass({ {isEvidenceScored || (!isEvidenceScored && affiliation && affiliatedExperimental) || (!isEvidenceScored && !affiliation && userExperimental) ? + formError={this.state.formError} affiliation={affiliation} submitBusy={this.state.submitBusy} /> : null} {!isEvidenceScored && ((affiliation && !affiliatedExperimental) || (!affiliation && !userExperimental)) ?
diff --git a/src/clincoded/static/components/individual_curation.js b/src/clincoded/static/components/individual_curation.js index 747ae76aa..868bda82a 100644 --- a/src/clincoded/static/components/individual_curation.js +++ b/src/clincoded/static/components/individual_curation.js @@ -5,6 +5,7 @@ import createReactClass from 'create-react-class'; import _ from 'underscore'; import moment from 'moment'; import url from 'url'; +import { toast } from 'react-toastify'; import { curator_page, content_views, history_views, queryKeyValue, external_url_map, country_codes } from './globals'; import { RestMixin } from './rest'; import { Form, FormMixin, Input } from '../libs/bootstrap/form'; @@ -1765,6 +1766,12 @@ const IndividualViewer = createReactClass({ window.location.href = '/curation-central/?gdm=' + tempGdm.uuid + '&pmid=' + tempPmid; }, + handleScoreSubmitError: function(err) { + this.setState({ submitBusy: false }); + toast.error('Something went wrong! Help us improve your experience by sending an error report.'); + console.log('Individual score submit error: ', err); + }, + scoreSubmit: function(e) { let individual = this.props.context; /*****************************************************/ @@ -1794,10 +1801,11 @@ const IndividualViewer = createReactClass({ // Update and create score object when the score object has the scoreStatus key/value pair if (this.state.userScoreObj.uuid) { return this.putRestData('/evidencescore/' + this.state.userScoreObj.uuid, newUserScoreObj).then(modifiedScoreObj => { - this.setState({submitBusy: false}); return Promise.resolve(modifiedScoreObj['@graph'][0]['@id']); }).then(data => { this.handlePageRedirect(); + }).catch(err => { + this.handleScoreSubmitError(err); }); } else { return this.postRestData('/evidencescore/', newUserScoreObj).then(newScoreObject => { @@ -1818,12 +1826,13 @@ const IndividualViewer = createReactClass({ newIndividual.scores.push(newScoreObjectUuid); return this.putRestData('/individual/' + individual.uuid, newIndividual).then(updatedIndividualObj => { - this.setState({submitBusy: false}); return Promise.resolve(updatedIndividualObj['@graph'][0]); }); }); }).then(data => { this.handlePageRedirect(); + }).catch(err => { + this.handleScoreSubmitError(err); }); } } else if (!newUserScoreObj.scoreStatus) { @@ -1855,12 +1864,13 @@ const IndividualViewer = createReactClass({ }); } return this.putRestData('/individual/' + individual.uuid, newIndividual).then(updatedIndividualObj => { - this.setState({submitBusy: false}); return Promise.resolve(updatedIndividualObj['@graph'][0]); }); }); }).then(data => { this.handlePageRedirect(); + }).catch(err => { + this.handleScoreSubmitError(err); }); } } @@ -2167,7 +2177,7 @@ const IndividualViewer = createReactClass({ + variantInfo={variants} gdm={this.state.gdm} pmid={tempPmid ? tempPmid : null} submitBusy={this.state.submitBusy} /> : null} {!isEvidenceScored && ((affiliation && !affiliatedIndividual) || (!affiliation && !userIndividual)) ?
diff --git a/src/clincoded/static/components/score/case_control_score.js b/src/clincoded/static/components/score/case_control_score.js index 76c6d698a..391aaffb3 100644 --- a/src/clincoded/static/components/score/case_control_score.js +++ b/src/clincoded/static/components/score/case_control_score.js @@ -199,7 +199,7 @@ var ScoreCaseControl = module.exports.ScoreCaseControl = createReactClass({
{this.props.scoreSubmit ?
-
: null} diff --git a/src/clincoded/static/components/score/experimental_score.js b/src/clincoded/static/components/score/experimental_score.js index 94c6028b2..d8d6afd17 100644 --- a/src/clincoded/static/components/score/experimental_score.js +++ b/src/clincoded/static/components/score/experimental_score.js @@ -467,7 +467,7 @@ var ScoreExperimental = module.exports.ScoreExperimental = createReactClass({
{this.props.scoreSubmit ?
-
: null} diff --git a/src/clincoded/static/components/score/individual_score.js b/src/clincoded/static/components/score/individual_score.js index c4676f9a1..4eccf9ba1 100644 --- a/src/clincoded/static/components/score/individual_score.js +++ b/src/clincoded/static/components/score/individual_score.js @@ -649,7 +649,7 @@ const ScoreIndividual = module.exports.ScoreIndividual = createReactClass({
{this.props.scoreSubmit ?
-
: null} diff --git a/src/clincoded/static/scss/clincoded/modules/_toast.scss b/src/clincoded/static/scss/clincoded/modules/_toast.scss new file mode 100644 index 000000000..7d94a97ec --- /dev/null +++ b/src/clincoded/static/scss/clincoded/modules/_toast.scss @@ -0,0 +1,404 @@ +.Toastify__toast-container { + z-index: 9999; + position: fixed; + padding: 4px; + width: 320px; + box-sizing: border-box; + color: #fff; } + .Toastify__toast-container--top-left { + top: 1em; + left: 1em; } + .Toastify__toast-container--top-center { + top: 1em; + left: 50%; + margin-left: -160px; } + .Toastify__toast-container--top-right { + top: 1em; + right: 1em; } + .Toastify__toast-container--bottom-left { + bottom: 1em; + left: 1em; } + .Toastify__toast-container--bottom-center { + bottom: 1em; + left: 50%; + margin-left: -160px; } + .Toastify__toast-container--bottom-right { + bottom: 1em; + right: 1em; } + + @media only screen and (max-width: 480px) { + .Toastify__toast-container { + width: 100vw; + padding: 0; + left: 0; + margin: 0; } + .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right { + top: 0; } + .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right { + bottom: 0; } + .Toastify__toast-container--rtl { + right: 0; + left: initial; } } + + .Toastify__toast { + position: relative; + min-height: 64px; + box-sizing: border-box; + margin-bottom: 1rem; + padding: 8px; + border-radius: 1px; + box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05); + display: -ms-flexbox; + display: flex; + -ms-flex-pack: justify; + justify-content: space-between; + max-height: 800px; + overflow: hidden; + font-family: sans-serif; + cursor: pointer; + direction: ltr; } + .Toastify__toast--rtl { + direction: rtl; } + .Toastify__toast--default { + background: #fff; + color: #aaa; } + .Toastify__toast--info { + background: #3498db; } + .Toastify__toast--success { + background: #07bc0c; } + .Toastify__toast--warning { + background: #f1c40f; } + .Toastify__toast--error { + background: #e74c3c; } + .Toastify__toast-body { + margin: auto 0; + -ms-flex: 1; + flex: 1; } + + @media only screen and (max-width: 480px) { + .Toastify__toast { + margin-bottom: 0; } } + + .Toastify__close-button { + color: #fff; + font-weight: bold; + font-size: 14px; + background: transparent; + outline: none; + border: none; + padding: 0; + cursor: pointer; + opacity: 0.7; + transition: 0.3s ease; + -ms-flex-item-align: start; + align-self: flex-start; } + .Toastify__close-button--default { + color: #000; + opacity: 0.3; } + .Toastify__close-button:hover, .Toastify__close-button:focus { + opacity: 1; } + + @keyframes Toastify__trackProgress { + 0% { + transform: scaleX(1); } + 100% { + transform: scaleX(0); } } + + .Toastify__progress-bar { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 5px; + z-index: 9999; + opacity: 0.7; + background-color: rgba(255, 255, 255, 0.7); + transform-origin: left; } + .Toastify__progress-bar--animated { + animation: Toastify__trackProgress linear 1 forwards; } + .Toastify__progress-bar--controlled { + transition: transform .2s; } + .Toastify__progress-bar--rtl { + right: 0; + left: initial; + transform-origin: right; } + .Toastify__progress-bar--default { + background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55); } + + @keyframes Toastify__bounceInRight { + from, + 60%, + 75%, + 90%, + to { + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } + from { + opacity: 0; + transform: translate3d(3000px, 0, 0); } + 60% { + opacity: 1; + transform: translate3d(-25px, 0, 0); } + 75% { + transform: translate3d(10px, 0, 0); } + 90% { + transform: translate3d(-5px, 0, 0); } + to { + transform: none; } } + + @keyframes Toastify__bounceOutRight { + 20% { + opacity: 1; + transform: translate3d(-20px, 0, 0); } + to { + opacity: 0; + transform: translate3d(2000px, 0, 0); } } + + @keyframes Toastify__bounceInLeft { + from, + 60%, + 75%, + 90%, + to { + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } + 0% { + opacity: 0; + transform: translate3d(-3000px, 0, 0); } + 60% { + opacity: 1; + transform: translate3d(25px, 0, 0); } + 75% { + transform: translate3d(-10px, 0, 0); } + 90% { + transform: translate3d(5px, 0, 0); } + to { + transform: none; } } + + @keyframes Toastify__bounceOutLeft { + 20% { + opacity: 1; + transform: translate3d(20px, 0, 0); } + to { + opacity: 0; + transform: translate3d(-2000px, 0, 0); } } + + @keyframes Toastify__bounceInUp { + from, + 60%, + 75%, + 90%, + to { + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } + from { + opacity: 0; + transform: translate3d(0, 3000px, 0); } + 60% { + opacity: 1; + transform: translate3d(0, -20px, 0); } + 75% { + transform: translate3d(0, 10px, 0); } + 90% { + transform: translate3d(0, -5px, 0); } + to { + transform: translate3d(0, 0, 0); } } + + @keyframes Toastify__bounceOutUp { + 20% { + transform: translate3d(0, -10px, 0); } + 40%, + 45% { + opacity: 1; + transform: translate3d(0, 20px, 0); } + to { + opacity: 0; + transform: translate3d(0, -2000px, 0); } } + + @keyframes Toastify__bounceInDown { + from, + 60%, + 75%, + 90%, + to { + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } + 0% { + opacity: 0; + transform: translate3d(0, -3000px, 0); } + 60% { + opacity: 1; + transform: translate3d(0, 25px, 0); } + 75% { + transform: translate3d(0, -10px, 0); } + 90% { + transform: translate3d(0, 5px, 0); } + to { + transform: none; } } + + @keyframes Toastify__bounceOutDown { + 20% { + transform: translate3d(0, 10px, 0); } + 40%, + 45% { + opacity: 1; + transform: translate3d(0, -20px, 0); } + to { + opacity: 0; + transform: translate3d(0, 2000px, 0); } } + + .Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left { + animation-name: Toastify__bounceInLeft; } + + .Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right { + animation-name: Toastify__bounceInRight; } + + .Toastify__bounce-enter--top-center { + animation-name: Toastify__bounceInDown; } + + .Toastify__bounce-enter--bottom-center { + animation-name: Toastify__bounceInUp; } + + .Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left { + animation-name: Toastify__bounceOutLeft; } + + .Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right { + animation-name: Toastify__bounceOutRight; } + + .Toastify__bounce-exit--top-center { + animation-name: Toastify__bounceOutUp; } + + .Toastify__bounce-exit--bottom-center { + animation-name: Toastify__bounceOutDown; } + + @keyframes Toastify__zoomIn { + from { + opacity: 0; + transform: scale3d(0.3, 0.3, 0.3); } + 50% { + opacity: 1; } } + + @keyframes Toastify__zoomOut { + from { + opacity: 1; } + 50% { + opacity: 0; + transform: scale3d(0.3, 0.3, 0.3); } + to { + opacity: 0; } } + + .Toastify__zoom-enter { + animation-name: Toastify__zoomIn; } + + .Toastify__zoom-exit { + animation-name: Toastify__zoomOut; } + + @keyframes Toastify__flipIn { + from { + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + animation-timing-function: ease-in; + opacity: 0; } + 40% { + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + animation-timing-function: ease-in; } + 60% { + transform: perspective(400px) rotate3d(1, 0, 0, 10deg); + opacity: 1; } + 80% { + transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } + to { + transform: perspective(400px); } } + + @keyframes Toastify__flipOut { + from { + transform: perspective(400px); } + 30% { + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + opacity: 1; } + to { + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + opacity: 0; } } + + .Toastify__flip-enter { + animation-name: Toastify__flipIn; } + + .Toastify__flip-exit { + animation-name: Toastify__flipOut; } + + @keyframes Toastify__slideInRight { + from { + transform: translate3d(110%, 0, 0); + visibility: visible; } + to { + transform: translate3d(0, 0, 0); } } + + @keyframes Toastify__slideInLeft { + from { + transform: translate3d(-110%, 0, 0); + visibility: visible; } + to { + transform: translate3d(0, 0, 0); } } + + @keyframes Toastify__slideInUp { + from { + transform: translate3d(0, 110%, 0); + visibility: visible; } + to { + transform: translate3d(0, 0, 0); } } + + @keyframes Toastify__slideInDown { + from { + transform: translate3d(0, -110%, 0); + visibility: visible; } + to { + transform: translate3d(0, 0, 0); } } + + @keyframes Toastify__slideOutRight { + from { + transform: translate3d(0, 0, 0); } + to { + visibility: hidden; + transform: translate3d(110%, 0, 0); } } + + @keyframes Toastify__slideOutLeft { + from { + transform: translate3d(0, 0, 0); } + to { + visibility: hidden; + transform: translate3d(-110%, 0, 0); } } + + @keyframes Toastify__slideOutDown { + from { + transform: translate3d(0, 0, 0); } + to { + visibility: hidden; + transform: translate3d(0, 500px, 0); } } + + @keyframes Toastify__slideOutUp { + from { + transform: translate3d(0, 0, 0); } + to { + visibility: hidden; + transform: translate3d(0, -500px, 0); } } + + .Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left { + animation-name: Toastify__slideInLeft; } + + .Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right { + animation-name: Toastify__slideInRight; } + + .Toastify__slide-enter--top-center { + animation-name: Toastify__slideInDown; } + + .Toastify__slide-enter--bottom-center { + animation-name: Toastify__slideInUp; } + + .Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left { + animation-name: Toastify__slideOutLeft; } + + .Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right { + animation-name: Toastify__slideOutRight; } + + .Toastify__slide-exit--top-center { + animation-name: Toastify__slideOutUp; } + + .Toastify__slide-exit--bottom-center { + animation-name: Toastify__slideOutDown; } + + /*# sourceMappingURL=ReactToastify.css.map */ \ No newline at end of file diff --git a/src/clincoded/static/scss/style.scss b/src/clincoded/static/scss/style.scss index 756ac4b56..113f1509c 100644 --- a/src/clincoded/static/scss/style.scss +++ b/src/clincoded/static/scss/style.scss @@ -71,6 +71,7 @@ @import "clincoded/modules/variant_interpretation_summary"; @import "clincoded/modules/admin"; @import "clincoded/modules/modal_clinvar_submission"; +@import "clincoded/modules/toast"; // Utility classes - Bootstrap 3, keep last @import "bootstrap/utilities"; From 9fdcf75c2ae8904a79aa2433d3bed2c9f7066e51 Mon Sep 17 00:00:00 2001 From: Howard Tong Date: Tue, 10 Dec 2019 16:02:23 -0800 Subject: [PATCH 2/5] Adds helpdesk email to error message --- src/clincoded/static/components/case_control_curation.js | 2 +- src/clincoded/static/components/experimental_curation.js | 2 +- src/clincoded/static/components/individual_curation.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/clincoded/static/components/case_control_curation.js b/src/clincoded/static/components/case_control_curation.js index 36f0e4e10..2ee371b31 100644 --- a/src/clincoded/static/components/case_control_curation.js +++ b/src/clincoded/static/components/case_control_curation.js @@ -1560,7 +1560,7 @@ var CaseControlViewer = createReactClass({ handleScoreSubmitError: function(err) { this.setState({ submitBusy: false }); - toast.error('Something went wrong! Help us improve your experience by sending an error report.'); + toast.error('Something went wrong! Help us improve your experience by sending an error report to clingen-helpdesk@lists.stanford.edu'); console.log('Case-control score submit error: ', err); }, diff --git a/src/clincoded/static/components/experimental_curation.js b/src/clincoded/static/components/experimental_curation.js index 9ac143fa8..765ad3e9a 100644 --- a/src/clincoded/static/components/experimental_curation.js +++ b/src/clincoded/static/components/experimental_curation.js @@ -2575,7 +2575,7 @@ const ExperimentalViewer = createReactClass({ handleScoreSubmitError: function(err) { this.setState({ submitBusy: false }); - toast.error('Something went wrong! Help us improve your experience by sending an error report.'); + toast.error('Something went wrong! Help us improve your experience by sending an error report to clingen-helpdesk@lists.stanford.edu'); console.log('Experimental score submit error: ', err); }, diff --git a/src/clincoded/static/components/individual_curation.js b/src/clincoded/static/components/individual_curation.js index 868bda82a..6c7b1b575 100644 --- a/src/clincoded/static/components/individual_curation.js +++ b/src/clincoded/static/components/individual_curation.js @@ -1768,7 +1768,7 @@ const IndividualViewer = createReactClass({ handleScoreSubmitError: function(err) { this.setState({ submitBusy: false }); - toast.error('Something went wrong! Help us improve your experience by sending an error report.'); + toast.error('Something went wrong! Help us improve your experience by sending an error report to clingen-helpdesk@lists.stanford.edu'); console.log('Individual score submit error: ', err); }, From 1853d7e1902b12e3b560f1aa28097b5045529a67 Mon Sep 17 00:00:00 2001 From: Howard Tong Date: Fri, 13 Dec 2019 15:20:05 -0800 Subject: [PATCH 3/5] Adds help email link and makes common --- src/clincoded/static/components/app.js | 2 +- .../components/case_control_curation.js | 4 ++-- .../components/experimental_curation.js | 4 ++-- .../static/components/individual_curation.js | 4 ++-- .../static/libs/error_notification.js | 23 +++++++++++++++++++ .../static/scss/clincoded/_base.scss | 4 ++++ 6 files changed, 34 insertions(+), 7 deletions(-) create mode 100644 src/clincoded/static/libs/error_notification.js diff --git a/src/clincoded/static/components/app.js b/src/clincoded/static/components/app.js index 0cf039129..5916877ba 100644 --- a/src/clincoded/static/components/app.js +++ b/src/clincoded/static/components/app.js @@ -276,7 +276,7 @@ var App = module.exports = createReactClass({ __html: '\n\n' + jsonScriptEscape(JSON.stringify(this.props.context)) + '\n\n' }}>
- +
{this.state.demoWarning ? Note: This is a demo version of the site. Data entered will be deleted upon release of updated versions, which occurs roughly once per month. Please contact us with any questions at clingen-helpdesk@lists.stanford.edu } /> diff --git a/src/clincoded/static/components/case_control_curation.js b/src/clincoded/static/components/case_control_curation.js index 65fd57404..d05250834 100644 --- a/src/clincoded/static/components/case_control_curation.js +++ b/src/clincoded/static/components/case_control_curation.js @@ -5,12 +5,12 @@ import createReactClass from 'create-react-class'; import _ from 'underscore'; import moment from 'moment'; import url from 'url'; -import { toast } from 'react-toastify'; import { queryKeyValue, country_codes, external_url_map, curator_page, history_views, content_views } from './globals'; import { RestMixin } from './rest'; import { Form, FormMixin, Input } from '../libs/bootstrap/form'; import { PanelGroup, Panel } from '../libs/bootstrap/panel'; import { parsePubmed } from '../libs/parse-pubmed'; +import { showErrorNotification } from '../libs/error_notification'; import * as methods from './methods'; import * as CaseControlEvalScore from './case_control/evaluation_score'; import * as CuratorHistory from './curator_history'; @@ -1560,7 +1560,7 @@ var CaseControlViewer = createReactClass({ handleScoreSubmitError: function(err) { this.setState({ submitBusy: false }); - toast.error('Something went wrong! Help us improve your experience by sending an error report to clingen-helpdesk@lists.stanford.edu'); + showErrorNotification(); console.log('Case-control score submit error: ', err); }, diff --git a/src/clincoded/static/components/experimental_curation.js b/src/clincoded/static/components/experimental_curation.js index 60131a5be..017f233bf 100644 --- a/src/clincoded/static/components/experimental_curation.js +++ b/src/clincoded/static/components/experimental_curation.js @@ -5,11 +5,11 @@ import createReactClass from 'create-react-class'; import _ from 'underscore'; import moment from 'moment'; import url from 'url'; -import { toast } from 'react-toastify'; import { curator_page, content_views, history_views, queryKeyValue, dbxref_prefix_map, external_url_map, country_codes } from './globals'; import { RestMixin } from './rest'; import { Form, FormMixin, Input } from '../libs/bootstrap/form'; import { PanelGroup, Panel } from '../libs/bootstrap/panel'; +import { showErrorNotification } from '../libs/error_notification'; import { AddResourceId } from './add_external_resource'; import * as CuratorHistory from './curator_history'; import * as methods from './methods'; @@ -2574,7 +2574,7 @@ const ExperimentalViewer = createReactClass({ handleScoreSubmitError: function(err) { this.setState({ submitBusy: false }); - toast.error('Something went wrong! Help us improve your experience by sending an error report to clingen-helpdesk@lists.stanford.edu'); + showErrorNotification(); console.log('Experimental score submit error: ', err); }, diff --git a/src/clincoded/static/components/individual_curation.js b/src/clincoded/static/components/individual_curation.js index d85bcace6..76c70abdc 100644 --- a/src/clincoded/static/components/individual_curation.js +++ b/src/clincoded/static/components/individual_curation.js @@ -5,13 +5,13 @@ import createReactClass from 'create-react-class'; import _ from 'underscore'; import moment from 'moment'; import url from 'url'; -import { toast } from 'react-toastify'; import { curator_page, content_views, history_views, queryKeyValue, external_url_map, country_codes } from './globals'; import { RestMixin } from './rest'; import { Form, FormMixin, Input } from '../libs/bootstrap/form'; import { PanelGroup, Panel } from '../libs/bootstrap/panel'; import { parseAndLogError } from './mixins'; import { parsePubmed } from '../libs/parse-pubmed'; +import { showErrorNotification } from '../libs/error_notification'; import { AddResourceId } from './add_external_resource'; import * as CuratorHistory from './curator_history'; import * as methods from './methods'; @@ -1768,7 +1768,7 @@ const IndividualViewer = createReactClass({ handleScoreSubmitError: function(err) { this.setState({ submitBusy: false }); - toast.error('Something went wrong! Help us improve your experience by sending an error report to clingen-helpdesk@lists.stanford.edu'); + showErrorNotification(); console.log('Individual score submit error: ', err); }, diff --git a/src/clincoded/static/libs/error_notification.js b/src/clincoded/static/libs/error_notification.js new file mode 100644 index 000000000..ec0abd71c --- /dev/null +++ b/src/clincoded/static/libs/error_notification.js @@ -0,0 +1,23 @@ +import React from 'react'; +import { toast } from 'react-toastify'; + +const defaultMessage = Something went wrong! Help us improve your experience by sending an error report to clingen-helpdesk@lists.stanford.edu; +const defaultOptions = { + type: 'error', // 'default', 'sucess', 'info', 'warning', 'error' + autoClose: 5000, // How long until the notification dismisses. Default is 5000. Set to false to disable autoClose + hideProgressBar: true, + pauseOnHover: true, + bodyClassName: 'toast-body', +}; + +/** + * + * @param {string | node} message A string or React element for what to display within the notification + * @param {object} options https://www.npmjs.com/package/react-toastify/v/4.5.1 to see what the available options are + */ +const showErrorNotification = (message = defaultMessage, options = defaultOptions) => { + const combinedOptions = Object.assign({}, defaultOptions, options); + toast(message, combinedOptions); +}; + +export { showErrorNotification }; \ No newline at end of file diff --git a/src/clincoded/static/scss/clincoded/_base.scss b/src/clincoded/static/scss/clincoded/_base.scss index 2586735c9..6baf1803e 100644 --- a/src/clincoded/static/scss/clincoded/_base.scss +++ b/src/clincoded/static/scss/clincoded/_base.scss @@ -155,6 +155,10 @@ dl.dl-horizontal { border-radius: 0; } +.toast-body { + padding: 4px; +} + .alert-demo { color: white; background: #880000; From 3209ae1f1bbdf101f7d28d78a9b5f7b75f008034 Mon Sep 17 00:00:00 2001 From: Howard Tong Date: Mon, 16 Dec 2019 11:41:19 -0800 Subject: [PATCH 4/5] Edit version in comment --- src/clincoded/static/libs/error_notification.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/clincoded/static/libs/error_notification.js b/src/clincoded/static/libs/error_notification.js index ec0abd71c..76ca93539 100644 --- a/src/clincoded/static/libs/error_notification.js +++ b/src/clincoded/static/libs/error_notification.js @@ -13,7 +13,7 @@ const defaultOptions = { /** * * @param {string | node} message A string or React element for what to display within the notification - * @param {object} options https://www.npmjs.com/package/react-toastify/v/4.5.1 to see what the available options are + * @param {object} options https://www.npmjs.com/package/react-toastify/v/4.5.2 to see what the available options are */ const showErrorNotification = (message = defaultMessage, options = defaultOptions) => { const combinedOptions = Object.assign({}, defaultOptions, options); From 99133dfb5f166b2a5c52e1abaeb8823b799a364f Mon Sep 17 00:00:00 2001 From: Howard Tong Date: Mon, 16 Dec 2019 13:04:17 -0800 Subject: [PATCH 5/5] Adds css link and removes static files --- src/clincoded/static/components/app.js | 1 + .../static/scss/clincoded/modules/_toast.scss | 404 ------------------ src/clincoded/static/scss/style.scss | 1 - 3 files changed, 1 insertion(+), 405 deletions(-) delete mode 100644 src/clincoded/static/scss/clincoded/modules/_toast.scss diff --git a/src/clincoded/static/components/app.js b/src/clincoded/static/components/app.js index 5916877ba..cb5563fb3 100644 --- a/src/clincoded/static/components/app.js +++ b/src/clincoded/static/components/app.js @@ -269,6 +269,7 @@ var App = module.exports = createReactClass({ + diff --git a/src/clincoded/static/scss/clincoded/modules/_toast.scss b/src/clincoded/static/scss/clincoded/modules/_toast.scss deleted file mode 100644 index 7d94a97ec..000000000 --- a/src/clincoded/static/scss/clincoded/modules/_toast.scss +++ /dev/null @@ -1,404 +0,0 @@ -.Toastify__toast-container { - z-index: 9999; - position: fixed; - padding: 4px; - width: 320px; - box-sizing: border-box; - color: #fff; } - .Toastify__toast-container--top-left { - top: 1em; - left: 1em; } - .Toastify__toast-container--top-center { - top: 1em; - left: 50%; - margin-left: -160px; } - .Toastify__toast-container--top-right { - top: 1em; - right: 1em; } - .Toastify__toast-container--bottom-left { - bottom: 1em; - left: 1em; } - .Toastify__toast-container--bottom-center { - bottom: 1em; - left: 50%; - margin-left: -160px; } - .Toastify__toast-container--bottom-right { - bottom: 1em; - right: 1em; } - - @media only screen and (max-width: 480px) { - .Toastify__toast-container { - width: 100vw; - padding: 0; - left: 0; - margin: 0; } - .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right { - top: 0; } - .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right { - bottom: 0; } - .Toastify__toast-container--rtl { - right: 0; - left: initial; } } - - .Toastify__toast { - position: relative; - min-height: 64px; - box-sizing: border-box; - margin-bottom: 1rem; - padding: 8px; - border-radius: 1px; - box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05); - display: -ms-flexbox; - display: flex; - -ms-flex-pack: justify; - justify-content: space-between; - max-height: 800px; - overflow: hidden; - font-family: sans-serif; - cursor: pointer; - direction: ltr; } - .Toastify__toast--rtl { - direction: rtl; } - .Toastify__toast--default { - background: #fff; - color: #aaa; } - .Toastify__toast--info { - background: #3498db; } - .Toastify__toast--success { - background: #07bc0c; } - .Toastify__toast--warning { - background: #f1c40f; } - .Toastify__toast--error { - background: #e74c3c; } - .Toastify__toast-body { - margin: auto 0; - -ms-flex: 1; - flex: 1; } - - @media only screen and (max-width: 480px) { - .Toastify__toast { - margin-bottom: 0; } } - - .Toastify__close-button { - color: #fff; - font-weight: bold; - font-size: 14px; - background: transparent; - outline: none; - border: none; - padding: 0; - cursor: pointer; - opacity: 0.7; - transition: 0.3s ease; - -ms-flex-item-align: start; - align-self: flex-start; } - .Toastify__close-button--default { - color: #000; - opacity: 0.3; } - .Toastify__close-button:hover, .Toastify__close-button:focus { - opacity: 1; } - - @keyframes Toastify__trackProgress { - 0% { - transform: scaleX(1); } - 100% { - transform: scaleX(0); } } - - .Toastify__progress-bar { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 5px; - z-index: 9999; - opacity: 0.7; - background-color: rgba(255, 255, 255, 0.7); - transform-origin: left; } - .Toastify__progress-bar--animated { - animation: Toastify__trackProgress linear 1 forwards; } - .Toastify__progress-bar--controlled { - transition: transform .2s; } - .Toastify__progress-bar--rtl { - right: 0; - left: initial; - transform-origin: right; } - .Toastify__progress-bar--default { - background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55); } - - @keyframes Toastify__bounceInRight { - from, - 60%, - 75%, - 90%, - to { - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } - from { - opacity: 0; - transform: translate3d(3000px, 0, 0); } - 60% { - opacity: 1; - transform: translate3d(-25px, 0, 0); } - 75% { - transform: translate3d(10px, 0, 0); } - 90% { - transform: translate3d(-5px, 0, 0); } - to { - transform: none; } } - - @keyframes Toastify__bounceOutRight { - 20% { - opacity: 1; - transform: translate3d(-20px, 0, 0); } - to { - opacity: 0; - transform: translate3d(2000px, 0, 0); } } - - @keyframes Toastify__bounceInLeft { - from, - 60%, - 75%, - 90%, - to { - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } - 0% { - opacity: 0; - transform: translate3d(-3000px, 0, 0); } - 60% { - opacity: 1; - transform: translate3d(25px, 0, 0); } - 75% { - transform: translate3d(-10px, 0, 0); } - 90% { - transform: translate3d(5px, 0, 0); } - to { - transform: none; } } - - @keyframes Toastify__bounceOutLeft { - 20% { - opacity: 1; - transform: translate3d(20px, 0, 0); } - to { - opacity: 0; - transform: translate3d(-2000px, 0, 0); } } - - @keyframes Toastify__bounceInUp { - from, - 60%, - 75%, - 90%, - to { - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } - from { - opacity: 0; - transform: translate3d(0, 3000px, 0); } - 60% { - opacity: 1; - transform: translate3d(0, -20px, 0); } - 75% { - transform: translate3d(0, 10px, 0); } - 90% { - transform: translate3d(0, -5px, 0); } - to { - transform: translate3d(0, 0, 0); } } - - @keyframes Toastify__bounceOutUp { - 20% { - transform: translate3d(0, -10px, 0); } - 40%, - 45% { - opacity: 1; - transform: translate3d(0, 20px, 0); } - to { - opacity: 0; - transform: translate3d(0, -2000px, 0); } } - - @keyframes Toastify__bounceInDown { - from, - 60%, - 75%, - 90%, - to { - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } - 0% { - opacity: 0; - transform: translate3d(0, -3000px, 0); } - 60% { - opacity: 1; - transform: translate3d(0, 25px, 0); } - 75% { - transform: translate3d(0, -10px, 0); } - 90% { - transform: translate3d(0, 5px, 0); } - to { - transform: none; } } - - @keyframes Toastify__bounceOutDown { - 20% { - transform: translate3d(0, 10px, 0); } - 40%, - 45% { - opacity: 1; - transform: translate3d(0, -20px, 0); } - to { - opacity: 0; - transform: translate3d(0, 2000px, 0); } } - - .Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left { - animation-name: Toastify__bounceInLeft; } - - .Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right { - animation-name: Toastify__bounceInRight; } - - .Toastify__bounce-enter--top-center { - animation-name: Toastify__bounceInDown; } - - .Toastify__bounce-enter--bottom-center { - animation-name: Toastify__bounceInUp; } - - .Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left { - animation-name: Toastify__bounceOutLeft; } - - .Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right { - animation-name: Toastify__bounceOutRight; } - - .Toastify__bounce-exit--top-center { - animation-name: Toastify__bounceOutUp; } - - .Toastify__bounce-exit--bottom-center { - animation-name: Toastify__bounceOutDown; } - - @keyframes Toastify__zoomIn { - from { - opacity: 0; - transform: scale3d(0.3, 0.3, 0.3); } - 50% { - opacity: 1; } } - - @keyframes Toastify__zoomOut { - from { - opacity: 1; } - 50% { - opacity: 0; - transform: scale3d(0.3, 0.3, 0.3); } - to { - opacity: 0; } } - - .Toastify__zoom-enter { - animation-name: Toastify__zoomIn; } - - .Toastify__zoom-exit { - animation-name: Toastify__zoomOut; } - - @keyframes Toastify__flipIn { - from { - transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - animation-timing-function: ease-in; - opacity: 0; } - 40% { - transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - animation-timing-function: ease-in; } - 60% { - transform: perspective(400px) rotate3d(1, 0, 0, 10deg); - opacity: 1; } - 80% { - transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } - to { - transform: perspective(400px); } } - - @keyframes Toastify__flipOut { - from { - transform: perspective(400px); } - 30% { - transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - opacity: 1; } - to { - transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - opacity: 0; } } - - .Toastify__flip-enter { - animation-name: Toastify__flipIn; } - - .Toastify__flip-exit { - animation-name: Toastify__flipOut; } - - @keyframes Toastify__slideInRight { - from { - transform: translate3d(110%, 0, 0); - visibility: visible; } - to { - transform: translate3d(0, 0, 0); } } - - @keyframes Toastify__slideInLeft { - from { - transform: translate3d(-110%, 0, 0); - visibility: visible; } - to { - transform: translate3d(0, 0, 0); } } - - @keyframes Toastify__slideInUp { - from { - transform: translate3d(0, 110%, 0); - visibility: visible; } - to { - transform: translate3d(0, 0, 0); } } - - @keyframes Toastify__slideInDown { - from { - transform: translate3d(0, -110%, 0); - visibility: visible; } - to { - transform: translate3d(0, 0, 0); } } - - @keyframes Toastify__slideOutRight { - from { - transform: translate3d(0, 0, 0); } - to { - visibility: hidden; - transform: translate3d(110%, 0, 0); } } - - @keyframes Toastify__slideOutLeft { - from { - transform: translate3d(0, 0, 0); } - to { - visibility: hidden; - transform: translate3d(-110%, 0, 0); } } - - @keyframes Toastify__slideOutDown { - from { - transform: translate3d(0, 0, 0); } - to { - visibility: hidden; - transform: translate3d(0, 500px, 0); } } - - @keyframes Toastify__slideOutUp { - from { - transform: translate3d(0, 0, 0); } - to { - visibility: hidden; - transform: translate3d(0, -500px, 0); } } - - .Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left { - animation-name: Toastify__slideInLeft; } - - .Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right { - animation-name: Toastify__slideInRight; } - - .Toastify__slide-enter--top-center { - animation-name: Toastify__slideInDown; } - - .Toastify__slide-enter--bottom-center { - animation-name: Toastify__slideInUp; } - - .Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left { - animation-name: Toastify__slideOutLeft; } - - .Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right { - animation-name: Toastify__slideOutRight; } - - .Toastify__slide-exit--top-center { - animation-name: Toastify__slideOutUp; } - - .Toastify__slide-exit--bottom-center { - animation-name: Toastify__slideOutDown; } - - /*# sourceMappingURL=ReactToastify.css.map */ \ No newline at end of file diff --git a/src/clincoded/static/scss/style.scss b/src/clincoded/static/scss/style.scss index 113f1509c..756ac4b56 100644 --- a/src/clincoded/static/scss/style.scss +++ b/src/clincoded/static/scss/style.scss @@ -71,7 +71,6 @@ @import "clincoded/modules/variant_interpretation_summary"; @import "clincoded/modules/admin"; @import "clincoded/modules/modal_clinvar_submission"; -@import "clincoded/modules/toast"; // Utility classes - Bootstrap 3, keep last @import "bootstrap/utilities";