', { 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 = `
-
-
-
+
+
+
`;
- 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 = `
-
${valueDone} ${valueActive} ${valueWaiting} ${max}
+
${valueDone} ${valueActive} ${valueWaiting} ${max}
`;
this.progressLabelDone = this.progressLabels.querySelector('.done');
diff --git a/js/notebook/src/embed.js b/js/notebook/src/embed.js
index 6a0898f44a..e9a79e1f7d 100644
--- a/js/notebook/src/embed.js
+++ b/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');
diff --git a/js/notebook/src/shared/style/bootstrap.scss b/js/notebook/src/shared/style/bxvariables.scss
similarity index 71%
rename from js/notebook/src/shared/style/bootstrap.scss
rename to js/notebook/src/shared/style/bxvariables.scss
index 410bea6824..ce7623889b 100644
--- a/js/notebook/src/shared/style/bootstrap.scss
+++ b/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;
diff --git a/js/notebook/src/shared/style/spark.scss b/js/notebook/src/shared/style/spark.scss
index a383d94dd1..505f78bf08 100644
--- a/js/notebook/src/shared/style/spark.scss
+++ b/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 {
diff --git a/js/notebook/src/tree/styles/tree-notebook.css b/js/notebook/src/shared/style/tree-notebook.css
similarity index 100%
rename from js/notebook/src/tree/styles/tree-notebook.css
rename to js/notebook/src/shared/style/tree-notebook.css
diff --git a/js/notebook/src/shared/style/tree.scss b/js/notebook/src/shared/style/tree.scss
new file mode 100644
index 0000000000..6493f17a35
--- /dev/null
+++ b/js/notebook/src/shared/style/tree.scss
@@ -0,0 +1,238 @@
+/*
+ * Copyright 2017 TWO SIGMA OPEN SOURCE, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "bxvariables";
+
+a {
+ color: $bxColorLink;
+ text-decoration: none;
+ &:focus, &:hover {
+ color: $bxColorHover;
+ text-decoration: underline;
+ }
+}
+
+#beakerx-tree-widget {
+
+ .hidden {
+ display: none;
+ }
+
+ &.isLab {
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ box-sizing: border-box;
+
+ font-size: 13px;
+ }
+
+
+ * {
+ box-sizing: border-box;
+ }
+
+ fieldset {
+ border: none;
+ margin: 0;
+ padding: 0;
+ }
+
+ label {
+ font-weight: 400;
+ }
+
+ .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 {
+ 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 .form-check-label {
+ margin-left: 10px;
+ }
+
+ .p-TabBar {
+ min-height: 30px;
+ max-height: 30px;
+ }
+
+ .p-TabBar-content {
+ min-width: 0;
+ align-items: flex-end;
+ border-bottom: 1px solid $bxBorderColor1;
+ padding: 0 15px;
+ }
+
+ .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;
+ }
+
+ .p-TabBar-tab:first-child {
+ margin-left: 0;
+ }
+
+ .p-TabBar-tab.p-mod-current {
+ background-color: $bxBgColor1;
+ border-color: $bxBorderColor1;
+ border-bottom-color: transparent;
+ transform: translateY(1px);
+ }
+
+ .p-TabBar-tab:hover:not(.p-mod-current) {
+ background: $bxBgColor2;
+ }
+
+ #default_options {
+ margin: 0 0 18px 0;
+
+ .bx-wrapper {
+ display: flex;
+ align-items: stretch;
+
+ label {
+ margin: 0 6px 0 0;
+ line-height: 32px;
+ }
+
+ input {
+ height: 32px;
+ padding: 6px 12px;
+ font-size: 13px;
+ line-height: 1;
+ background-color: $bxBgColor1;
+ border: 1px solid $bxBorderColor1;
+ border-collapse: collapse;
+ border-radius: 2px 0 0 2px;
+ }
+
+ span {
+ background-color: $bxBgColor2;
+ border: 1px solid $bxBorderColor1;
+ line-height: 30px;
+ padding: 0 12px;
+ font-size: 13px;
+ border-radius: 0 2px 2px 0;
+ border-left-width: 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-btn {
+ border: 1px solid $bxBorderColor1;
+ border-radius: 2px;
+ margin: 0 0 0 6px;
+ background-color: $bxBgColor1;
+ padding: 2px 6px;
+ font-size: 1em;
+ line-height: 1;
+
+ &:hover {
+ background-color: $bxBgColor2;
+ }
+ }
+ }
+
+ .bx-panel-body {
+ padding:10px;
+
+ .bx-form-row {
+
+ &:not(:last-child) {
+ margin-bottom: 6px;
+ }
+
+ .bx-input-text {
+ display: inline-block;
+ border: 1px solid $bxBorderColor1;
+ border-radius: 2px;
+ margin: 0 6px 0 0;
+ padding: 6px 12px;
+ font-size: 13px;
+ line-height: 1.4;
+ vertical-align: middle;
+ }
+
+ .bx-btn {
+ border: 1px solid $bxBorderColor1;
+ border-radius: 2px;
+ margin: 0;
+ background-color: $bxBgColor1;
+ padding: 6px 12px;
+ font-size: 13px;
+ line-height: 1.4;
+ vertical-align: middle;
+ height: 32px;
+
+ &:hover {
+ background-color: $bxBgColor2;
+ }
+
+ }
+
+ }
+ }
+ }
+
+ .bx-sync-indicator-widget {
+ padding: 15px;
+ .saving { color: $bxColorWarning; }
+ .saved { color: $bxColorSuccess; }
+ .errors-wrapper { color: $bxColorError; }
+ }
+
+}
diff --git a/js/notebook/src/tree/TreeWidget.ts b/js/notebook/src/tree/TreeWidget.ts
index bc829b21be..f29b8554fb 100644
--- a/js/notebook/src/tree/TreeWidget.ts
+++ b/js/notebook/src/tree/TreeWidget.ts
@@ -25,7 +25,7 @@ import TreeWidgetModel from "./Models/TreeWidgetModel";
import SyncIndicatorWidget from "./Widgets/SyncIndicatorWidget";
import OptionsWidget from "./Widgets/OptionsWidget";
-import "./styles/tree.css";
+import "./../shared/style/tree.scss";
export default class TreeWidget extends Panel {
@@ -41,7 +41,7 @@ export default class TreeWidget extends Panel {
if (this.options.isLab) {
this.addClass('isLab');
} else {
- require("./styles/tree-notebook.css");
+ require("./../shared/style/tree-notebook.css");
}
this.title.label = 'BeakerX';
diff --git a/js/notebook/src/tree/Utils/DOMUtils.ts b/js/notebook/src/tree/Utils/DOMUtils.ts
index 3e570bb5f1..1b141f4a4c 100644
--- a/js/notebook/src/tree/Utils/DOMUtils.ts
+++ b/js/notebook/src/tree/Utils/DOMUtils.ts
@@ -26,9 +26,12 @@ export default class DOMUtils {
display:"block",
position:"absolute"
});
- $('body').append(copyEl);
+ let fakeEl = $('
', { id: 'beakerx-tree-widget' });
+ fakeEl.appendTo($('body'));
+ copyEl.appendTo(fakeEl);
let h = copyEl.outerHeight();
copyEl.remove();
+ fakeEl.remove();
return h;
}
}
diff --git a/js/notebook/src/tree/Widgets/JVMOptions/DefaultOptionsWidget.ts b/js/notebook/src/tree/Widgets/JVMOptions/DefaultOptionsWidget.ts
index cbb6c70c12..a73783aa02 100644
--- a/js/notebook/src/tree/Widgets/JVMOptions/DefaultOptionsWidget.ts
+++ b/js/notebook/src/tree/Widgets/JVMOptions/DefaultOptionsWidget.ts
@@ -30,13 +30,11 @@ export default class DefaultOptionsWidget extends Widget implements DefaultOptio
public readonly HTML_ELEMENT_TEMPLATE = `
-
diff --git a/js/notebook/src/tree/Widgets/JVMOptions/OtherOptionsWidget.ts b/js/notebook/src/tree/Widgets/JVMOptions/OtherOptionsWidget.ts
index 8a1a3d8037..b04202fc26 100644
--- a/js/notebook/src/tree/Widgets/JVMOptions/OtherOptionsWidget.ts
+++ b/js/notebook/src/tree/Widgets/JVMOptions/OtherOptionsWidget.ts
@@ -31,21 +31,20 @@ export default class OtherOptionsWidget extends Widget implements OtherOptionsWi
public readonly HTML_ELEMENT_TEMPLATE = `