#7204 do not rely on bootstrap css

js/notebook/package.json

@@ -70,7 +70,6 @@
     "@phosphor/datastore": "^0.7.0",
     "@phosphor/widgets": "^1.5.0",
     "big.js": "^3.1.3",
-    "bootstrap-sass": "^3.3.7",
     "d3": "^4.9.1",
     "datatables.net": "^1.10.15",
     "datatables.net-buttons": "^1.3.1",

js/notebook/src/SparkStateProgress.ts

@@ -115,10 +115,10 @@ class SparkStateProgressView extends widgets.VBoxView {
     let stagePanel = this.createStagePanel(state);
 
     return $('<div>', {
-      class: 'panel panel-default bx-spark-jobPanel'
+      class: 'bx-panel bx-spark-jobPanel'
     }).append(
-      $('<div>', { class: 'panel-heading' }).append(jobLink),
-      $('<div>', { class: 'panel-body container-fluid bx-spark-stagePanel' }).append(stagePanel)
+      $('<div>', { class: 'bx-panel-heading' }).append(jobLink),
+      $('<div>', { class: 'bx-panel-body bx-spark-stagePanel' }).append(stagePanel)
     );
   }
 
@@ -135,10 +135,10 @@ class SparkStateProgressView extends widgets.VBoxView {
     let progressBar = this.createStageProgressBar(state);
     let progressLabels = this.createStageProgressLabels(state);
 
-    return $('<div>', { class: 'row' }).append(
-      $('<div>', { class: 'col-xs-2 text-right' }).append(stageLink),
-      $('<div>', { class: 'col-xs-6' }).append(progressBar),
-      $('<div>', { class: 'col-xs-4' }).append(progressLabels),
+    return $('<div>', { class: 'bx-row' }).append(
+      $('<div>', { class: 'bx-col-xs-2 bx-text-right' }).append(stageLink),
+      $('<div>', { class: 'bx-col-xs-6' }).append(progressBar),
+      $('<div>', { class: 'bx-col-xs-4' }).append(progressLabels),
     );
   }
 
@@ -161,17 +161,16 @@ class SparkStateProgressView extends widgets.VBoxView {
 
     this.progressBar = document.createElement('div');
     this.progressBar.classList.add('bx-spark-stageProgressBar');
-    this.progressBar.classList.add('progress');
 
     this.progressBar.innerHTML = `
-      <div class="progress-bar progress-bar-success" style="width: ${percentDone}%"></div>
-      <div class="progress-bar progress-bar-info" style="width: ${percentActive}%"></div>
-      <div class="progress-bar progress-bar-warning" style="width: ${percentWaiting}%"></div>
+      <div class="bx-progress-bar done" style="width: ${percentDone}%"></div>
+      <div class="bx-progress-bar active" style="width: ${percentActive}%"></div>
+      <div class="bx-progress-bar waiting" style="width: ${percentWaiting}%"></div>
     `;
 
-    this.progressBarDone = this.progressBar.querySelector('.progress-bar-success');
-    this.progressBarActive = this.progressBar.querySelector('.progress-bar-info');
-    this.progressBarWaiting = this.progressBar.querySelector('.progress-bar-warning');
+    this.progressBarDone = this.progressBar.querySelector('.done');
+    this.progressBarActive = this.progressBar.querySelector('.active');
+    this.progressBarWaiting = this.progressBar.querySelector('.waiting');
 
     return $(this.progressBar);
   }
@@ -186,10 +185,10 @@ class SparkStateProgressView extends widgets.VBoxView {
     this.progressLabels.classList.add('bx-spark-stageProgressLabels');
 
     this.progressLabels.innerHTML = `
-      <span class="done label label-success" title="Done">${valueDone}</span> <span
-      class="active label label-info" title="Active">${valueActive}</span> <span
-      class="waiting label label-warning" title="Waiting">${valueWaiting}</span> <span
-      class="all label label-default" title="All tasks">${max}</span>
+      <span class="bx-label done" title="Done">${valueDone}</span> <span
+      class="bx-label active" title="Active">${valueActive}</span> <span
+      class="bx-label waiting" title="Waiting">${valueWaiting}</span> <span
+      class="bx-label all" title="All tasks">${max}</span>
     `;
 
     this.progressLabelDone = this.progressLabels.querySelector('.done');

js/notebook/src/embed.js

@@ -7,8 +7,9 @@
 // Export widget models and views, and the npm package version number.
 module.exports = {};
 
-require('./shared/style/bootstrap.scss');
 require('./shared/style/beakerx.scss');
+require('./shared/style/tree.scss');
+require('./shared/style/spark.scss');
 require('./plot/bko-combinedplot.css');
 require('./plot/bko-plot.css');
 

js/notebook/src/shared/style/bootstrap.scss → js/notebook/src/shared/style/bxvariables.scss

@@ -14,5 +14,15 @@
  *  limitations under the License.
  */
 
-$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
-@import '~bootstrap-sass/assets/stylesheets/bootstrap';
+$bxBorderColor1: #cccccc;
+$bxBgColor1: #ffffff;
+$bxBgColor2: #eeeeee;
+
+$bxColorSuccess: #5cb85c;
+$bxColorInfo: #5bc0de;
+$bxColorWarning: #f0ad4e;
+$bxColorError: #ff0000;
+$bxColorDefault: #777777;
+
+$bxColorLink: #337ab7;
+$bxColorHover: #23527c;

js/notebook/src/shared/style/spark.scss

@@ -14,6 +14,8 @@
  *  limitations under the License.
  */
 
+@import "bxvariables";
+
 .foldout-preview {
   & > .bx-spark-stagePanel {
     padding: 0 15px;
@@ -26,8 +28,79 @@
   max-width: 600px;
 }
 
+.bx-spark-stageProgressLabels {
+  margin: 0;
+}
+
+.bx-panel {
+  border: 1px solid $bxBorderColor1;
+  border-radius: 2px;
+  margin-bottom: 18px;
+
+  .bx-panel-heading {
+    background-color: $bxBgColor2;
+    padding: 10px;
+    border-bottom: 1px solid $bxBorderColor1;
+
+    display: flex;
+  }
+
+  .bx-panel-body {
+    padding: 10px;
+  }
+}
+
+.bx-label {
+  display: inline;
+  padding: .2em .6em .3em;
+  font-size: 75%;
+  font-weight: bold;
+  line-height: 1;
+  text-align: center;
+  vertical-align: baseline;
+  border-radius: .25em;
+  color: #ffffff;
+
+  &.done { background-color: $bxColorSuccess; }
+  &.active { background-color: $bxColorInfo; }
+  &.waiting { background-color: $bxColorWarning; }
+  &.all { background-color: $bxColorDefault; }
+}
+
 .bx-spark-stageProgressBar {
   margin: 0 10px;
+  display: flex;
+  align-items: center;
+  border-radius: .25em;
+  overflow: hidden;
+}
+
+.bx-progress-bar {
+  display: inline-block;
+  height: 18px;
+
+  &.done { background-color: $bxColorSuccess; }
+  &.active { background-color: $bxColorInfo; }
+  &.waiting { background-color: $bxColorWarning; }
+}
+
+.bx-row {
+  display: flex;
+  .bx-text-right {
+    text-align: right;
+  }
+  .bx-col-xs-2 {
+    display: inline-block;
+    width: 16.66%;
+  }
+  .bx-col-xs-4 {
+    display: inline-block;
+    width: 33.33%;
+  }
+  .bx-col-xs-6 {
+    display: inline-block;
+    width: 50%;
+  }
 }
 
 .bx-spark-stageProgressLabels {