From 19fcb5080e1d2d8c2043fb75edc0310bebaed86f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Pior?= Date: Thu, 17 May 2018 14:09:07 +0200 Subject: [PATCH] #7204 WIP --- js/notebook/src/shared/style/bootstrap.scss | 2 +- js/notebook/src/shared/style/tree.scss | 32 --- js/notebook/src/tree/TreeWidget.ts | 2 +- .../JVMOptions/DefaultOptionsWidget.ts | 10 +- .../Widgets/JVMOptions/OtherOptionsWidget.ts | 11 +- .../Widgets/JVMOptions/PropertiesWidget.ts | 11 +- js/notebook/src/tree/styles/tree.scss | 207 ++++++++++++++++++ 7 files changed, 226 insertions(+), 49 deletions(-) delete mode 100644 js/notebook/src/shared/style/tree.scss create mode 100644 js/notebook/src/tree/styles/tree.scss diff --git a/js/notebook/src/shared/style/bootstrap.scss b/js/notebook/src/shared/style/bootstrap.scss index afc0baab7d..410bea6824 100644 --- a/js/notebook/src/shared/style/bootstrap.scss +++ b/js/notebook/src/shared/style/bootstrap.scss @@ -15,4 +15,4 @@ */ $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/"; -//@import '~bootstrap-sass/assets/stylesheets/bootstrap'; +@import '~bootstrap-sass/assets/stylesheets/bootstrap'; diff --git a/js/notebook/src/shared/style/tree.scss b/js/notebook/src/shared/style/tree.scss deleted file mode 100644 index 24d493f701..0000000000 --- a/js/notebook/src/shared/style/tree.scss +++ /dev/null @@ -1,32 +0,0 @@ -/* - * 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. - */ - -#beakerx-tree { - - #default_options { - - .label { - - } - .input { - - } - .addon { - - } - } - -} \ No newline at end of file diff --git a/js/notebook/src/tree/TreeWidget.ts b/js/notebook/src/tree/TreeWidget.ts index bc829b21be..2bd753e19c 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 "./styles/tree.scss"; export default class TreeWidget extends Panel { diff --git a/js/notebook/src/tree/Widgets/JVMOptions/DefaultOptionsWidget.ts b/js/notebook/src/tree/Widgets/JVMOptions/DefaultOptionsWidget.ts index 06f5ff6ce1..a73783aa02 100644 --- a/js/notebook/src/tree/Widgets/JVMOptions/DefaultOptionsWidget.ts +++ b/js/notebook/src/tree/Widgets/JVMOptions/DefaultOptionsWidget.ts @@ -30,9 +30,13 @@ 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..7fae911f3a 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
-
+
`; diff --git a/js/notebook/src/tree/Widgets/JVMOptions/PropertiesWidget.ts b/js/notebook/src/tree/Widgets/JVMOptions/PropertiesWidget.ts index 7a3ffae93c..882ab8687a 100644 --- a/js/notebook/src/tree/Widgets/JVMOptions/PropertiesWidget.ts +++ b/js/notebook/src/tree/Widgets/JVMOptions/PropertiesWidget.ts @@ -30,21 +30,20 @@ export default class PropertiesWidget extends Widget { public readonly HTML_ELEMENT_TEMPLATE = `
-
-
+
+
- + Properties
-
+
`; diff --git a/js/notebook/src/tree/styles/tree.scss b/js/notebook/src/tree/styles/tree.scss new file mode 100644 index 0000000000..7edaf483da --- /dev/null +++ b/js/notebook/src/tree/styles/tree.scss @@ -0,0 +1,207 @@ +/* + * 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. + */ + +/* + * 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. + */ + +#beakerx-tree-widget.isLab { + width: 100%; + height: 100%; + overflow: auto; + box-sizing: border-box; +} + +#beakerx-tree-widget label { + font-weight: 400; +} + +#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; +} + +#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; +} + +#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); +} + +#beakerx-tree-widget .p-TabBar-tab:hover:not(.p-mod-current) { + background: #F0F0F0; +} + +.bx-banner-widget { + padding: 15px; +} + +.bx-banner-widget .beakerx_site_link { + display: inline-block; + margin: 0 75px 0 0; +} + +.bx-banner-widget svg { + width: 154px; + height: 44px; + transform: translateY(5px); +} + +.bx-options-widget { + padding: 15px 0; + display: flex; +} + +.bx-options-widget .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; +} + +.bx-sync-indicator-widget { + padding: 15px; +} +.bx-sync-indicator-widget .saving { color: #f0ad4e; } +.bx-sync-indicator-widget .saved { color: #5cb85c; } + +.bx-sync-indicator-widget .errors-wrapper { color: #ff0000; } + +#properties_property .form-control { + margin-right: 10px; +} + +#other_property .form-control { + margin-right: 10px; +} + +// ========== NEW +$bxBorderColor1: #cccccc; +$bxBgColor1: #ffffff; +$bxBgColor2: #eeeeee; + +#beakerx-tree { + + #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; + } + } + +}