#7326 connection progress basic styles

twosigma · May 24, 2018 · c390d88 · c390d88
1 parent 629af48
commit c390d88
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/js/notebook/src/SparkUI.ts b/js/notebook/src/SparkUI.ts
@@ -38,14 +38,14 @@ class SparkUIView extends widgets.VBoxView {
   public render() {
     super.render();
 
-    this.el.classList.add('bx-spark-status-panel');
-
     this.processConnectionWidget();
     this.updateLabels();
   }
 
   public update() {
     super.update();
+
+    this.processConnectionWidget();
     this.updateLabels();
   }
 
@@ -79,7 +79,11 @@ class SparkUIView extends widgets.VBoxView {
   private processConnectionWidget() {
     this.children_views.update(this.model.get('children')).then((views) => {
       views.forEach((view) => {
-        debugger;
+        if (view instanceof widgets.LabelView) {
+          this.connectionStatus = view.pWidget;
+          this.connectionStatus.el.classList.add('bx-spark-connectionProgressBar');
+          this.connectionStatus.el.classList.add('progress');
+        }
       });
     });
   }

diff --git a/js/notebook/src/shared/style/spark.scss b/js/notebook/src/shared/style/spark.scss
@@ -14,6 +14,10 @@
  *  limitations under the License.
  */
 
+$colorSuccess: #4CAF50;
+$colorWhite: #ffffff;
+$colorBorder: #cfcfcf;
+
 .foldout-preview {
   & > .bx-spark-stagePanel {
     padding: 0 15px;
@@ -26,6 +30,7 @@
   max-width: 600px;
 }
 
+.bx-spark-connectionProgressBar,
 .bx-spark-stageProgressBar {
   margin: 0 10px;
 }
@@ -42,3 +47,15 @@
     line-height: 150%;
   }
 }
+
+.bx-spark-connectionProgressBar {
+  background-color: transparent;
+  border: 1px solid $colorBorder;
+  height: 20px;
+  margin: 6px;
+  line-height: 18px;
+
+  &.connected {
+    background-color: $colorSuccess;
+  }
+}