diff --git a/js/notebook/package.json b/js/notebook/package.json index 93d9e6b215..b300fcb483 100644 --- a/js/notebook/package.json +++ b/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", diff --git a/js/notebook/src/SparkStateProgress.ts b/js/notebook/src/SparkStateProgress.ts index bdbd0786b9..f48bfc726d 100644 --- a/js/notebook/src/SparkStateProgress.ts +++ b/js/notebook/src/SparkStateProgress.ts @@ -115,10 +115,10 @@ class SparkStateProgressView extends widgets.VBoxView { let stagePanel = this.createStagePanel(state); return $('
', { - class: 'panel panel-default bx-spark-jobPanel' + class: 'bx-panel bx-spark-jobPanel' }).append( - $('
', { class: 'panel-heading' }).append(jobLink), - $('
', { class: 'panel-body container-fluid bx-spark-stagePanel' }).append(stagePanel) + $('
', { class: 'bx-panel-heading' }).append(jobLink), + $('
', { 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 $('
', { class: 'row' }).append( - $('
', { class: 'col-xs-2 text-right' }).append(stageLink), - $('
', { class: 'col-xs-6' }).append(progressBar), - $('
', { class: 'col-xs-4' }).append(progressLabels), + return $('
', { class: 'bx-row' }).append( + $('
', { class: 'bx-col-xs-2 bx-text-right' }).append(stageLink), + $('
', { class: 'bx-col-xs-6' }).append(progressBar), + $('
', { 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 = `
-
+
- -
- -
GB
-
+ + + GB
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 = `
-
-
+
+
- + Other Command Line Options
-
+
`; @@ -82,13 +81,13 @@ export default class OtherOptionsWidget extends Widget implements OtherOptionsWi private createFormRowElement(): JQuery { return $('
', { - class: 'form-group form-inline' + class: 'bx-form-row', }); } private createInputElement(val: string = ''): JQuery { return $('', { - class: 'form-control', + class: 'bx-input-text', type: 'text', placeholder: 'value', }).val(val) @@ -98,7 +97,7 @@ export default class OtherOptionsWidget extends Widget implements OtherOptionsWi private createRemoveButtonElement(): JQuery { return $('
-
+
`; @@ -166,13 +165,13 @@ export default class PropertiesWidget extends Widget { private createFormRowElement(): JQuery { return $('
', { - class: 'form-group form-inline' + class: 'bx-form-row' }); } private createInputElement(placeholder: string, val: string = ''): JQuery { return $('', { - class: 'form-control', + class: 'bx-input-text', type: 'text', placeholder: placeholder, }).val(val) @@ -182,7 +181,7 @@ export default class PropertiesWidget extends Widget { private createRemoveButtonElement(): JQuery { return $('