From 481731f41bd3828258a2e2793895733a796289ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Pior?= Date: Tue, 20 Feb 2018 15:51:55 +0100 Subject: [PATCH 01/17] #6809 add tab-pane wrapper in notebook --- js/notebook/src/tree.js | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/js/notebook/src/tree.js b/js/notebook/src/tree.js index 61fcf67c66..e7807111c7 100644 --- a/js/notebook/src/tree.js +++ b/js/notebook/src/tree.js @@ -28,13 +28,19 @@ define([ function load() { var TreeWidget = require('./tree/TreeWidget').default; - var options = { + var bxTabPane = $('
', { + class: 'tab-pane', + id: 'beakerx-tree' + }).appendTo($('.tab-content')).get(0); + + var widgetOptions = { baseUrl: (Jupyter.notebook_list || Jupyter.notebook).base_url, isLab: false }; - var bxWidget = new TreeWidget(options); + var bxWidget = new TreeWidget(widgetOptions); + + Widget.attach(bxWidget, bxTabPane); - Widget.attach(bxWidget, $('.tab-content').get(0)); $('#tabs').append( $('
  • ').append( $('', { @@ -43,15 +49,20 @@ define([ 'data-toggle': 'tab', text: 'BeakerX' }).on('click', function (e) { + if (false === $(e.currentTarget).parents('li').hasClass('active')) { + bxWidget.update(); + } if (window.location.hash === '#beakerx-tree') { return; } - window.history.pushState(null, '', '#beakerx-tree'); - bxWidget.update(); }) ) ); + + $(window).on('resize', function() { + bxWidget.update(); + }); } return { From a0914ed0e8735fcab9a487a6007d4fdb10dd9c9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Pior?= Date: Tue, 20 Feb 2018 15:58:18 +0100 Subject: [PATCH 02/17] #6809 keep styles in css file not in Widgets --- js/notebook/src/tree/styles/tree.css | 123 +++++++++++++++++++++++++++ 1 file changed, 123 insertions(+) create mode 100644 js/notebook/src/tree/styles/tree.css diff --git a/js/notebook/src/tree/styles/tree.css b/js/notebook/src/tree/styles/tree.css new file mode 100644 index 0000000000..817368a93f --- /dev/null +++ b/js/notebook/src/tree/styles/tree.css @@ -0,0 +1,123 @@ +/* + * 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 '~@phosphor/widgets/style/index.css'; + +.p-TabBar { + min-height: 30px; + max-height: 30px; +} + +.p-TabBar-content { + min-width: 0; + align-items: flex-end; + border-bottom: 1px solid #ddd; +} + +.p-TabBar-tab { + flex: 0 1 auto; + min-height: 26px; + max-height: 26px; + min-width: 35px; + margin-left: -1px; + border: 1px solid transparent; + padding: 6px 15px 4px 15px; +} + +.p-TabBar-tab:first-child { + margin-left: 0; +} + +.p-TabBar-tab.p-mod-current { + background-color: #fff; + border-color: #ddd; + border-bottom-color: transparent; + transform: translateY(1px); +} + +.p-TabBar-tab:hover:not(.p-mod-current) { + background: #F0F0F0; +} + + + +#tab_content { + height: 100%; + position: relative; +} + +#beakerx-tree.tab-pane.active { + display: flex; + position: absolute; + top: 50px; + bottom: 0; + width: 100%; + overflow-y: auto; +} + +#beakerx-tree-widget { + flex: 1 1 auto; + overflow: auto; +} + +.bx-banner-widget { + flex: 1 0 available; + padding: 15px; +} + +.bx-banner-widget .beakerx_site_link { + display: inline-block; +} + +.bx-banner-widget svg { + height: 35px; +} + +.bx-options-widget { + flex-grow: 1; + flex-shrink: 0; + flex-basis: auto; + padding: 15px 0; + display: flex; +} + +.bx-options-widget .p-TabPanel-stackedPanel { + width: auto !important; + left: 15px; + right: 15px; +} + +.bx-ui-options-widget, +.bx-jvm-options-widget { + left: 10px; + right: 10px; + padding: 15px; +} + +.bx-sync-indicator-widget { + flex: 1 0 content; + padding: 15px; +} +.bx-sync-indicator-widget .saving { color: #f0ad4e; } +.bx-sync-indicator-widget .saved { color: #5cb85c; } + +#properties_property .form-control { + margin-right: 10px; +} + +#other_property .form-control { + margin-right: 10px; +} From a6ac777fd1ebc697542cf4fe99a6323b52e1c090 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Pior?= Date: Tue, 20 Feb 2018 15:59:25 +0100 Subject: [PATCH 03/17] #6809 DOMUtils helper --- js/notebook/src/tree/Utils/DOMUtils.ts | 34 ++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 js/notebook/src/tree/Utils/DOMUtils.ts diff --git a/js/notebook/src/tree/Utils/DOMUtils.ts b/js/notebook/src/tree/Utils/DOMUtils.ts new file mode 100644 index 0000000000..3e570bb5f1 --- /dev/null +++ b/js/notebook/src/tree/Utils/DOMUtils.ts @@ -0,0 +1,34 @@ +/* + * 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 * as $ from "jquery"; + +export default class DOMUtils { + + public static getRealElementHeight(el: HTMLElement): number { + let copyEl = $(el).clone() + .attr("id", null) + .css({ + visibility:"hidden", + display:"block", + position:"absolute" + }); + $('body').append(copyEl); + let h = copyEl.outerHeight(); + copyEl.remove(); + return h; + } +} From ef2286c06d6c8e426f22c8d390ea56000d19667a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Pior?= Date: Tue, 20 Feb 2018 16:01:30 +0100 Subject: [PATCH 04/17] #6809 Remove style from Widget, notify parent when size changed --- .../JVMOptions/DefaultOptionsWidget.ts | 2 + .../Widgets/JVMOptions/OtherOptionsWidget.ts | 9 ++- .../Widgets/JVMOptions/PropertiesWidget.ts | 61 +++++++++---------- .../tree/Widgets/UIOptions/UIOptionsWidget.ts | 29 ++++++--- 4 files changed, 57 insertions(+), 44 deletions(-) diff --git a/js/notebook/src/tree/Widgets/JVMOptions/DefaultOptionsWidget.ts b/js/notebook/src/tree/Widgets/JVMOptions/DefaultOptionsWidget.ts index 47f53b5ad6..268393d397 100644 --- a/js/notebook/src/tree/Widgets/JVMOptions/DefaultOptionsWidget.ts +++ b/js/notebook/src/tree/Widgets/JVMOptions/DefaultOptionsWidget.ts @@ -16,8 +16,10 @@ import * as $ from "jquery"; import * as _ from "underscore"; + import { Widget } from "@phosphor/widgets"; import { MessageLoop } from "@phosphor/messaging"; + import DefaultOptionsWidgetInterface from "./DefaultOptionsWidgetInterface"; import HeapGBValidator from "../../Utils/HeapGBValidator"; import { Messages } from "../../Messages"; diff --git a/js/notebook/src/tree/Widgets/JVMOptions/OtherOptionsWidget.ts b/js/notebook/src/tree/Widgets/JVMOptions/OtherOptionsWidget.ts index 194c452d32..3a1fea8b31 100644 --- a/js/notebook/src/tree/Widgets/JVMOptions/OtherOptionsWidget.ts +++ b/js/notebook/src/tree/Widgets/JVMOptions/OtherOptionsWidget.ts @@ -16,8 +16,10 @@ import * as $ from "jquery"; import * as _ from "underscore"; + import { Widget } from "@phosphor/widgets"; import { MessageLoop, Message } from "@phosphor/messaging"; + import OtherOptionsWidgetInterface from "./OtherOptionsWidgetInterface"; import { IOtherJVMOptions } from "../../Types/IJVMOptions"; import { Messages } from "../../Messages"; @@ -28,11 +30,6 @@ export default class OtherOptionsWidget extends Widget implements OtherOptionsWi public readonly PANEL_SELECTOR = '#other_property'; public readonly HTML_ELEMENT_TEMPLATE = ` -
    @@ -113,6 +110,7 @@ export default class OtherOptionsWidget extends Widget implements OtherOptionsWi element.appendTo(this.$node.find(this.PANEL_SELECTOR)) MessageLoop.sendMessage(this, new Private.ElementAddedMessage(element)); + MessageLoop.sendMessage(this.parent, new Messages.SizeChangedMessage()); } public processMessage(msg: Message): void { @@ -150,6 +148,7 @@ export default class OtherOptionsWidget extends Widget implements OtherOptionsWi let el: JQuery = evt.data.el; el.remove(); MessageLoop.sendMessage(this, new Private.ElementRemovedMessage(el)); + MessageLoop.sendMessage(this.parent, new Messages.SizeChangedMessage()); } private inputChangedHandler(evt): void { diff --git a/js/notebook/src/tree/Widgets/JVMOptions/PropertiesWidget.ts b/js/notebook/src/tree/Widgets/JVMOptions/PropertiesWidget.ts index 4e465ea606..57023b8fb5 100644 --- a/js/notebook/src/tree/Widgets/JVMOptions/PropertiesWidget.ts +++ b/js/notebook/src/tree/Widgets/JVMOptions/PropertiesWidget.ts @@ -19,8 +19,9 @@ import * as _ from "underscore"; import { Widget } from "@phosphor/widgets"; import { MessageLoop, Message } from "@phosphor/messaging"; -import {IPropertiesJVMOptions} from "../../Types/IJVMOptions"; -import {Messages} from "../../Messages"; + +import { IPropertiesJVMOptions } from "../../Types/IJVMOptions"; +import { Messages } from "../../Messages"; export default class PropertiesWidget extends Widget { @@ -28,11 +29,6 @@ export default class PropertiesWidget extends Widget { public readonly PROPERTIES_PANEL_SELECTOR: string = '#properties_property'; public readonly HTML_ELEMENT_TEMPLATE = ` -
    @@ -109,30 +105,7 @@ export default class PropertiesWidget extends Widget { element.appendTo(this.$node.find(this.PROPERTIES_PANEL_SELECTOR)); MessageLoop.sendMessage(this, new Private.ElementAddedMessage(element)); - } - - private createFormRowElement(): JQuery { - return $('
    ', { - class: 'form-group form-inline bko-spacing' - }); - } - - private createInputElement(placeholder: string, val: string = ''): JQuery { - return $('', { - class: 'form-control', - type: 'text', - placeholder: placeholder, - }).val(val) - .data('val', val); - } - - private createRemoveButtonElement(): JQuery { - return $('