From: Steve Thomas Date: Mon, 5 Feb 2018 16:54:23 +0000 (-0500) Subject: Correcting spinner X-Git-Tag: v1.2.1~10 X-Git-Url: https://gerrit.onap.org/r/gitweb?p=aai%2Fsparky-fe.git;a=commitdiff_plain;h=c89060158fab7394c3bddc5eacb0411dbb13785c Correcting spinner Change-Id: I0531805d63a9d5b8ac6a161281845a6b8cc1f4af Issue-ID: AAI-732 Signed-off-by: Steve Thomas --- diff --git a/resources/scss/_components.scss b/resources/scss/_components.scss index 38f9189..2b1d251 100644 --- a/resources/scss/_components.scss +++ b/resources/scss/_components.scss @@ -21,7 +21,7 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - + @import "components/validationForm"; @import "components/slidePanel"; @import "components/toggleInput"; diff --git a/resources/scss/_modules.scss b/resources/scss/_modules.scss index d2df043..085a59a 100644 --- a/resources/scss/_modules.scss +++ b/resources/scss/_modules.scss @@ -31,3 +31,4 @@ @import "setAttribute/editAttributeform.scss"; @import "inventory/inventory.scss"; @import "vnfSearch/vnfSearch.scss"; +@import "tier-support/tierSupport.scss"; diff --git a/resources/scss/common/_layout.scss b/resources/scss/common/_layout.scss index 07b5b4c..fedf2fa 100644 --- a/resources/scss/common/_layout.scss +++ b/resources/scss/common/_layout.scss @@ -20,7 +20,7 @@ * * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - + .hidden { display: none; } @@ -41,14 +41,18 @@ .showContainer { } +.spinner-container { + overflow: hidden; + position: relative; +} + .spinner { - position: fixed; + position: absolute; z-index: 999; - height: 2em; - width: 2em; - margin: auto; - top: 0; - left: 0; - bottom: 0; - right: 0; -} \ No newline at end of file + left: 50%; + top: 49%; +} + +.spinner-content { + opacity: 0.2; +} diff --git a/resources/scss/tier-support/_splitPane.scss b/resources/scss/tier-support/_splitPane.scss index dc07be0..c174920 100644 --- a/resources/scss/tier-support/_splitPane.scss +++ b/resources/scss/tier-support/_splitPane.scss @@ -21,9 +21,12 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ +div.SplitPane.vertical { + position: initial !important; +} + .SplitPane { min-width: $minimum-application-width; - height: calc(100% - #{$total-header-height}) !important; } .Resizer { diff --git a/resources/scss/tier-support/_tierSupport.scss b/resources/scss/tier-support/_tierSupport.scss new file mode 100644 index 0000000..e63bffd --- /dev/null +++ b/resources/scss/tier-support/_tierSupport.scss @@ -0,0 +1,3 @@ +.tier-support-ui { + height: calc(100% - #{$total-header-height}) !important; +} diff --git a/src/app/tierSupport/TierSupport.jsx b/src/app/tierSupport/TierSupport.jsx index 943943f..e51dde8 100644 --- a/src/app/tierSupport/TierSupport.jsx +++ b/src/app/tierSupport/TierSupport.jsx @@ -24,8 +24,7 @@ import React, {Component} from 'react'; import {connect} from 'react-redux'; import SplitPane from 'react-split-pane'; -import { ClipLoader } from 'react-spinners'; -import {COLOR_BLUE} from 'utils/GlobalConstants.js'; +import Spinner from 'utils/SpinnerContainer.jsx'; import {setSecondaryTitle} from 'app/MainScreenWrapperActionHelper.js'; import ForceDirectedGraph from 'generic-components/graph/ForceDirectedGraph.jsx'; @@ -177,11 +176,6 @@ class TierSupport extends Component { onNodeMenuSelect, enableBusyFeedback } = this.props; - - let componentVisibitliyClassName = 'showContainer'; - if(enableBusyFeedback){ - componentVisibitliyClassName = 'hideContainer'; - } let availableOverlay; let overlayComponent; // Currently only ONE overlay can be added to each view. @@ -209,10 +203,7 @@ class TierSupport extends Component { let currentSelectedMenu = this.getCurrentSelectedMenu(overlayComponent); return (
-
- -
-
+ -
+
); } diff --git a/src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx b/src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx index 806ab3a..19b37cd 100644 --- a/src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx +++ b/src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx @@ -36,7 +36,7 @@ import i18n from 'utils/i18n/i18n'; import {CHART_NF_ROLE} from 'app/vnfSearch/VnfSearchConstants.js'; import {COLOR_BLUE} from 'utils/GlobalConstants.js'; -import { ClipLoader } from 'react-spinners'; +import Spinner from 'utils/SpinnerContainer.jsx'; let mapStateToProps = ({vnfSearch}) => { let { @@ -61,10 +61,7 @@ class VnfSearchNfRoleVisualization extends Component { processedNfRoleCountChartData, enableBusyFeedback } = this.props; - let componentVisibitliyClassName = 'showContainer'; - if(enableBusyFeedback){ - componentVisibitliyClassName = 'hideContainer'; - } + let visualizationClass = 'visualizations'; if (processedNfRoleCountChartData.values === @@ -82,10 +79,7 @@ class VnfSearchNfRoleVisualization extends Component {

{i18n(CHART_NF_ROLE.title)}

-
- -
-
+ @@ -96,7 +90,7 @@ class VnfSearchNfRoleVisualization extends Component { dataKey={yAxisAttrName} fill={COLOR_BLUE}/> -
+
diff --git a/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx b/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx index 3f4acf0..3c862d7 100644 --- a/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx +++ b/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx @@ -36,7 +36,7 @@ import i18n from 'utils/i18n/i18n'; import {CHART_NF_TYPE} from 'app/vnfSearch/VnfSearchConstants.js'; import {COLOR_BLUE} from 'utils/GlobalConstants.js'; -import { ClipLoader } from 'react-spinners'; +import Spinner from 'utils/SpinnerContainer.jsx'; let mapStateToProps = ({vnfSearch}) => { let { @@ -61,10 +61,7 @@ class VnfSearchNfTypeVisualization extends Component { processedNfTypeCountChartData, enableBusyFeedback } = this.props; - let componentVisibitliyClassName = 'showContainer'; - if(enableBusyFeedback){ - componentVisibitliyClassName = 'hideContainer'; - } + let visualizationClass = 'visualizations'; if (processedNfTypeCountChartData.values === null || @@ -80,10 +77,7 @@ class VnfSearchNfTypeVisualization extends Component {

{i18n(CHART_NF_TYPE.title)}

-
- -
-
+ @@ -94,7 +88,7 @@ class VnfSearchNfTypeVisualization extends Component { dataKey={yAxisAttrName} fill={COLOR_BLUE}/> -
+
diff --git a/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx b/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx index 7cc29d8..834e179 100644 --- a/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx +++ b/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx @@ -36,7 +36,7 @@ import i18n from 'utils/i18n/i18n'; import {CHART_ORCH_STATUS} from 'app/vnfSearch/VnfSearchConstants.js'; import {COLOR_BLUE} from 'utils/GlobalConstants.js'; -import { ClipLoader } from 'react-spinners'; +import Spinner from 'utils/SpinnerContainer.jsx'; let mapStateToProps = ({vnfSearch}) => { let { @@ -61,10 +61,7 @@ class VnfSearchOrchStatusVisualizations extends Component { processedOrchStatusCountChartData, enableBusyFeedback } = this.props; - let componentVisibitliyClassName = 'showContainer'; - if(enableBusyFeedback){ - componentVisibitliyClassName = 'hideContainer'; - } + let visualizationClass = 'visualizations'; if (processedOrchStatusCountChartData.values === null || @@ -80,10 +77,7 @@ class VnfSearchOrchStatusVisualizations extends Component {

{i18n(CHART_ORCH_STATUS.title)}

-
- -
-
+ @@ -94,7 +88,7 @@ class VnfSearchOrchStatusVisualizations extends Component { dataKey={yAxisAttrName} fill={COLOR_BLUE}/> -
+
diff --git a/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx b/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx index 7ef6e9e..fe985c9 100644 --- a/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx +++ b/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx @@ -36,7 +36,7 @@ import i18n from 'utils/i18n/i18n'; import {CHART_PROV_STATUS} from 'app/vnfSearch/VnfSearchConstants.js'; import {COLOR_BLUE} from 'utils/GlobalConstants.js'; -import { ClipLoader } from 'react-spinners'; +import Spinner from 'utils/SpinnerContainer.jsx'; let mapStateToProps = ({vnfSearch}) => { let { @@ -62,10 +62,6 @@ class VnfSearchProvStatusVisualization extends Component { enableBusyFeedback } = this.props; - let componentVisibitliyClassName = 'showContainer'; - if(enableBusyFeedback){ - componentVisibitliyClassName = 'hideContainer'; - } let visualizationClass = 'visualizations'; if (processedProvStatusCountChartData.values === null || @@ -81,22 +77,19 @@ class VnfSearchProvStatusVisualization extends Component {

{i18n(CHART_PROV_STATUS.title)}

-
- -
-
+ - - - - - - - - -
+ + + + + + + + +
@@ -104,4 +97,4 @@ class VnfSearchProvStatusVisualization extends Component { } } -export default connect(mapStateToProps)(VnfSearchProvStatusVisualization); \ No newline at end of file +export default connect(mapStateToProps)(VnfSearchProvStatusVisualization); diff --git a/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx b/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx index 553de42..0335da3 100644 --- a/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx +++ b/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx @@ -26,8 +26,7 @@ import {connect} from 'react-redux'; import i18n from 'utils/i18n/i18n'; import {TOTAL_VNF_COUNT} from 'app/vnfSearch/VnfSearchConstants.js'; -import {COLOR_BLUE} from 'utils/GlobalConstants.js'; -import { ClipLoader } from 'react-spinners'; +import Spinner from 'utils/SpinnerContainer.jsx'; let mapStateToProps = ({vnfSearch}) => { let { @@ -55,10 +54,7 @@ class VnfSearchTotalCountVisualization extends Component { count, enableBusyFeedback } = this.props; - let componentVisibitliyClassName = 'showContainer'; - if(enableBusyFeedback){ - componentVisibitliyClassName = 'hideContainer'; - } + let visualizationClass = 'visualizations'; if (count === null) { visualizationClass = 'visualizations hidden'; @@ -70,14 +66,11 @@ class VnfSearchTotalCountVisualization extends Component {
 

{i18n(TOTAL_VNF_COUNT.title)}

-
- -
-
+
{count}
-
+
diff --git a/src/utils/SpinnerContainer.jsx b/src/utils/SpinnerContainer.jsx new file mode 100644 index 0000000..448999c --- /dev/null +++ b/src/utils/SpinnerContainer.jsx @@ -0,0 +1,30 @@ +import React, { Component } from 'react'; +import { ClipLoader } from 'react-spinners'; +import {COLOR_BLUE} from 'utils/GlobalConstants.js'; + +class SpinnerContainer extends Component { + render() { + // if loading, show content as busy (ex: grey out) + const spinnerContentClass = this.props.loading ? 'spinner-content' : ''; + return ( +
+
+ +
+
+ {this.props.children} +
+
+ ); + } +} +export default SpinnerContainer; + +SpinnerContainer.propTypes = { + loading: React.PropTypes.bool +}; + +SpinnerContainer.defaultProps = { + loading: false +}; +