diff options
| -rw-r--r-- | openecomp-ui/resources/scss/common/_variables.scss | 1 | ||||
| -rw-r--r-- | openecomp-ui/resources/scss/onboarding.scss | 17 | ||||
| -rw-r--r-- | openecomp-ui/src/sdc-app/onboarding/Onboarding.js | 9 | ||||
| -rw-r--r-- | openecomp-ui/src/sdc-app/onboarding/OnboardingView.jsx | 11 |
4 files changed, 28 insertions, 10 deletions
diff --git a/openecomp-ui/resources/scss/common/_variables.scss b/openecomp-ui/resources/scss/common/_variables.scss index 5125b652ea..6ea204aa76 100644 --- a/openecomp-ui/resources/scss/common/_variables.scss +++ b/openecomp-ui/resources/scss/common/_variables.scss @@ -29,6 +29,7 @@ $tlv-gray: #f8f8f8; $tlv-light-gray: #eaeaea; $tlv-hover: #e6f6fb; $highlight-gray: #eceff3; +$transparent-black: rgba(0,0,0,.3); $content-background-color: $white; diff --git a/openecomp-ui/resources/scss/onboarding.scss b/openecomp-ui/resources/scss/onboarding.scss index d44674fb42..c38809cd07 100644 --- a/openecomp-ui/resources/scss/onboarding.scss +++ b/openecomp-ui/resources/scss/onboarding.scss @@ -8,7 +8,7 @@ @import "modules"; &.dox-ui-punch-out { - background-color: $content-background-color; + background-color: $content-background-color; &.dox-ui-punch-out-full-page { position: absolute; top: 0; @@ -17,7 +17,7 @@ right: 0; overflow-y: auto; } - } + } } /* Out of namespace context for datepicker */ @@ -219,3 +219,16 @@ div[data-reactroot].tooltip { top: 50px; } } + + +.onboarding-loader { + .onboarding-loader-backdrop { + @import "common/variables"; + top: 0; + right: 0; + bottom: 0; + left: 0; + position: absolute; + background-color: $transparent-black; + } +} diff --git a/openecomp-ui/src/sdc-app/onboarding/Onboarding.js b/openecomp-ui/src/sdc-app/onboarding/Onboarding.js index b894e3f031..fbeda31126 100644 --- a/openecomp-ui/src/sdc-app/onboarding/Onboarding.js +++ b/openecomp-ui/src/sdc-app/onboarding/Onboarding.js @@ -4,9 +4,9 @@ * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * + * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. @@ -17,6 +17,9 @@ import OnboardingView from './OnboardingView.jsx'; import { connect } from 'react-redux'; -const mapStateToProps = ({ currentScreen }) => ({ currentScreen }); +const mapStateToProps = ({ currentScreen, loader: { isLoading } }) => ({ + currentScreen, + isLoading +}); const Onboarding = connect(mapStateToProps, null)(OnboardingView); export default Onboarding; diff --git a/openecomp-ui/src/sdc-app/onboarding/OnboardingView.jsx b/openecomp-ui/src/sdc-app/onboarding/OnboardingView.jsx index 69e514bc6e..7156e2e253 100644 --- a/openecomp-ui/src/sdc-app/onboarding/OnboardingView.jsx +++ b/openecomp-ui/src/sdc-app/onboarding/OnboardingView.jsx @@ -4,9 +4,9 @@ * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * + * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. @@ -74,11 +74,12 @@ export default class OnboardingView extends React.Component { } render() { - let { currentScreen } = this.props; + let { currentScreen, isLoading } = this.props; let { screen, props } = currentScreen; - + const preventClicks = isLoading ? 'no-pointer-events' : ''; return ( - <div className="dox-ui dox-ui-punch-out dox-ui-punch-out-full-page"> + <div + className={`dox-ui dox-ui-punch-out dox-ui-punch-out-full-page ${preventClicks}`}> {(() => { switch (screen) { case enums.SCREEN.ONBOARDING_CATALOG: |