From c0237ec608e6ca8bb1fabc87f864c0a698bbc279 Mon Sep 17 00:00:00 2001 From: mcsearchin Date: Mon, 21 Oct 2019 15:14:10 -0400 Subject: [PATCH] Fix loading state for saving a visualization (#68) * fixed loading state for saving a visualization smartcolumbusos/discovery_ui#8 co-authored-by: Cameron Marsh * formatting smartcolumbusos/discovery_ui#8 co-authored-by: Cameron Marsh --- package-lock.json | 43 +++++++++++++----- package.json | 2 +- src/pages/dataset-view/dataset-view.js | 52 ++++++++++++---------- src/pages/dataset-view/dataset-view.scss | 56 ++++++++++++------------ 4 files changed, 90 insertions(+), 63 deletions(-) diff --git a/package-lock.json b/package-lock.json index dba906e7..d1989ef2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@smartcitiesdata/react-discovery-ui", - "version": "0.3.2", + "version": "0.4.1", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -7756,7 +7756,8 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -7780,13 +7781,15 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -7803,19 +7806,22 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -7946,7 +7952,8 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -7960,6 +7967,7 @@ "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -7976,6 +7984,7 @@ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -7984,13 +7993,15 @@ "version": "0.0.8", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz", "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -8011,6 +8022,7 @@ "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -8099,7 +8111,8 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -8113,6 +8126,7 @@ "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -8208,7 +8222,8 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -8250,6 +8265,7 @@ "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -8271,6 +8287,7 @@ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -8319,13 +8336,15 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz", "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", - "dev": true + "dev": true, + "optional": true } } }, diff --git a/package.json b/package.json index e7e80ca1..5a0f1da8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@smartcitiesdata/react-discovery-ui", - "version": "0.4.0", + "version": "0.4.1", "description": "React component for dataset discovery UI", "main": "./lib/ReactDiscoveryUI.js", "repository": { diff --git a/src/pages/dataset-view/dataset-view.js b/src/pages/dataset-view/dataset-view.js index 57b8e7d1..be01c6d7 100644 --- a/src/pages/dataset-view/dataset-view.js +++ b/src/pages/dataset-view/dataset-view.js @@ -41,37 +41,43 @@ export default class extends Component { render() { if (!this.props.isDatasetLoaded) { return ( - + - + ); } if (this.props.isRemoteDataset || this.props.isHostDataset) { - return ; + return ( + + + + ) } return ( - this.setState({ index: tabIndex })} - > - - Dataset Details - Visualize - Write SQL - - - - - - - - - - - + + this.setState({ index: tabIndex })} + > + + Dataset Details + Visualize + Write SQL + + + + + + + + + + + + ); } } diff --git a/src/pages/dataset-view/dataset-view.scss b/src/pages/dataset-view/dataset-view.scss index f2d9f60f..19af274e 100644 --- a/src/pages/dataset-view/dataset-view.scss +++ b/src/pages/dataset-view/dataset-view.scss @@ -1,68 +1,70 @@ @import "../../styles/mixins.scss"; @import "../../styles/variables.scss"; -.chartIcon { +dataset-view { + .chartIcon { padding-left: 5px; path { - fill: $medium-grey; + fill: $medium-grey; } -} + } -.sqlIcon { + .sqlIcon { padding-left: 5px; fill: $medium-grey; -} + } -.react-tabs__tab-list { + .react-tabs__tab-list { border-bottom: 0; box-shadow: 0px 1px 3px $light-grey; margin: 0; padding: 0; -} + } -.react-tabs__tab { + .react-tabs__tab { display: inline-block; border: 0; position: relative; list-style: initial; padding: 12px 24px; cursor: pointer; - color: $medium-grey -} + color: $medium-grey; + } -.react-tabs__tab--selected { + .react-tabs__tab--selected { background: transparent; border-bottom: 5px solid; border-color: $light-blue; color: $almost-black; - .sqlIcon{ - padding-left: 5px; - fill: $almost-black; + .sqlIcon { + padding-left: 5px; + fill: $almost-black; } .chartIcon { - path { - fill: $almost-black; - } + path { + fill: $almost-black; + } } -} + } -.react-tabs__tab:hover { + .react-tabs__tab:hover { color: $almost-black; - .sqlIcon{ - padding-left: 5px; - fill: $almost-black; + .sqlIcon { + padding-left: 5px; + fill: $almost-black; } .chartIcon { - path { - fill: $almost-black; - } + path { + fill: $almost-black; + } } -} + } -loading-element { + loading-element { @include default-loading-icon(); + } }