#7204 WIP, cleanup, fixes for lab

twosigma · May 21, 2018 · 2d56642 · 2d56642
1 parent b45a437
commit 2d56642
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 86 deletions.
diff --git a/js/notebook/src/embed.js b/js/notebook/src/embed.js
@@ -8,6 +8,8 @@
 module.exports = {};
 
 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');
 

diff --git a/js/notebook/src/shared/style/bxvariables.scss b/js/notebook/src/shared/style/bxvariables.scss
@@ -21,4 +21,5 @@ $bxBgColor2: #eeeeee;
 $bxColorSuccess: #5cb85c;
 $bxColorInfo: #5bc0de;
 $bxColorWarning: #f0ad4e;
+$bxColorError: #ff0000;
 $bxColorDefault: #777777;
diff --git a/js/notebook/src/shared/style/tree.scss b/js/notebook/src/shared/style/tree.scss
@@ -32,109 +32,105 @@
 
 @import "bxvariables";
 
-#beakerx-tree-widget.isLab {
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  box-sizing: border-box;
-}
-
-#beakerx-tree-widget label {
-  font-weight: 400;
-}
+#beakerx-tree-widget {
 
-#beakerx-tree-widget .p-TabBar {
-  min-height: 30px;
-  max-height: 30px;
-}
-
-#beakerx-tree-widget .p-TabBar-content {
-  min-width: 0;
-  align-items: flex-end;
-  border-bottom: 1px solid #ddd;
-  padding: 0 15px;
-}
+  .hidden {
+    display: none;
+  }
 
-#beakerx-tree-widget .p-TabBar-tab {
-  flex: 0 1 auto;
-  min-height: 26px;
-  max-height: 26px;
-  min-width: 35px;
-  margin-left: -1px;
-  border: 1px solid transparent;
-  padding: 4px 15px;
-}
+  &.isLab {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    box-sizing: border-box;
 
-#beakerx-tree-widget .p-TabBar-tab:first-child {
-  margin-left: 0;
-}
-
-#beakerx-tree-widget .p-TabBar-tab.p-mod-current {
-  background-color: #fff;
-  border-color: #ddd;
-  border-bottom-color: transparent;
-  transform: translateY(1px);
-}
+    font-size: 13px;
+  }
 
-#beakerx-tree-widget .p-TabBar-tab:hover:not(.p-mod-current) {
-  background: #F0F0F0;
-}
 
-.bx-banner-widget {
-  padding: 15px;
-}
+  * {
+    box-sizing: border-box;
+  }
 
-.bx-banner-widget .beakerx_site_link {
-  display: inline-block;
-  margin: 0 75px 0 0;
-}
+  fieldset {
+    border: none;
+    margin: 0;
+    padding: 0;
+  }
 
-.bx-banner-widget svg {
-  width: 154px;
-  height: 44px;
-  transform: translateY(5px);
-}
+  label {
+    font-weight: 400;
+  }
 
-.bx-options-widget {
-  padding: 15px 0;
-  display: flex;
-}
+  .bx-banner-widget {
+    padding: 15px;
+    .beakerx_site_link {
+      display: inline-block;
+      margin: 0 75px 0 0;
+    }
+    svg {
+      width: 154px;
+      height: 44px;
+      transform: translateY(5px);
+    }
+  }
 
-.bx-options-widget .p-TabPanel-stackedPanel {
-  left: 15px;
-  right: 15px;
-}
+  .bx-options-widget {
+    padding: 15px 0;
+    display: flex;
+    .p-TabPanel-stackedPanel {
+      left: 15px;
+      right: 15px;
+    }
+  }
 
-.bx-ui-options-widget,
-.bx-jvm-options-widget {
-  left: 10px;
-  right: 10px;
-  padding: 15px;
-}
+  .bx-ui-options-widget,
+  .bx-jvm-options-widget {
+    left: 10px;
+    right: 10px;
+    padding: 15px;
+  }
 
-.bx-ui-options-widget .form-check-label {
-  margin-left: 10px;
-}
+  .bx-ui-options-widget .form-check-label {
+    margin-left: 10px;
+  }
 
-.bx-sync-indicator-widget {
-  padding: 15px;
-}
-.bx-sync-indicator-widget .saving { color: #f0ad4e; }
-.bx-sync-indicator-widget .saved { color: #5cb85c; }
+  .p-TabBar {
+    min-height: 30px;
+    max-height: 30px;
+  }
 
-.bx-sync-indicator-widget .errors-wrapper { color: #ff0000; }
+  .p-TabBar-content {
+    min-width: 0;
+    align-items: flex-end;
+    border-bottom: 1px solid $bxBorderColor1;
+    padding: 0 15px;
+  }
 
-#properties_property .form-control {
-  margin-right: 10px;
-}
+  .p-TabBar-tab {
+    flex: 0 1 auto;
+    min-height: 26px;
+    max-height: 26px;
+    min-width: 35px;
+    margin-left: -1px;
+    border: 1px solid transparent;
+    padding: 4px 15px;
+  }
 
-#other_property .form-control {
-  margin-right: 10px;
-}
+  .p-TabBar-tab:first-child {
+    margin-left: 0;
+  }
 
-// ========== NEW
+  .p-TabBar-tab.p-mod-current {
+    background-color: $bxBgColor1;
+    border-color: $bxBorderColor1;
+    border-bottom-color: transparent;
+    transform: translateY(1px);
+  }
 
-#beakerx-tree {
+  .p-TabBar-tab:hover:not(.p-mod-current) {
+    background: $bxBgColor2;
+  }
 
   #default_options {
     margin: 0 0 18px 0;
@@ -215,6 +211,7 @@
           padding: 6px 12px;
           font-size: 13px;
           line-height: 1.4;
+          vertical-align: middle;
         }
 
         .bx-btn {
@@ -225,6 +222,8 @@
           padding: 6px 12px;
           font-size: 13px;
           line-height: 1.4;
+          vertical-align: middle;
+          height: 32px;
 
           &:hover {
             background-color: $bxBgColor2;
@@ -236,4 +235,11 @@
     }
   }
 
+  .bx-sync-indicator-widget {
+    padding: 15px;
+    .saving { color: $bxColorWarning; }
+    .saved { color: $bxColorSuccess; }
+    .errors-wrapper { color: $bxColorError; }
+  }
+
 }