diff --git a/js/notebook/src/EasyForm.ts b/js/notebook/src/EasyForm.ts index ff3b005070..db27d72479 100644 --- a/js/notebook/src/EasyForm.ts +++ b/js/notebook/src/EasyForm.ts @@ -33,6 +33,7 @@ import 'flatpickr/dist/flatpickr.css'; import 'jquery-ui/themes/base/all.css'; import 'jquery-ui/ui/widgets/button'; import 'jquery-ui/ui/widgets/autocomplete'; +import BeakerXThemeHelper from "./BeakerXThemeHelper"; export class EasyFormModel extends widgets.DOMWidgetModel { defaults() { @@ -60,18 +61,19 @@ export class EasyFormView extends widgets.BoxView { this.$el .addClass('beaker-easyform-container') - .addClass('widget-vbox'); + .addClass('widget-vbox') + .addClass('beaker-fieldset'); const formTitle = this.model.get('easyFormName'); - this.$fieldset = $('
').addClass('beaker-fieldset'); this.$legend = $(''+formTitle+''); - this.displayed.then(() => { - this.$el.wrap(this.$fieldset); + if (BeakerXThemeHelper.isDark) { + this.$legend.css('background-color', '#636363'); + } if (formTitle) { - this.$el.before(this.$legend); + this.$el.prepend(this.$legend); } }); } diff --git a/js/notebook/src/Plot.ts b/js/notebook/src/Plot.ts index 5c5c4baec3..3d7d24471b 100644 --- a/js/notebook/src/Plot.ts +++ b/js/notebook/src/Plot.ts @@ -122,7 +122,7 @@ export class PlotView extends widgets.DOMWidgetView { handleModellUpdate() { const newModel = this.model.get('model'); - this._currentScope.updateModelData(newModel); + this._currentScope.updateModelData && this._currentScope.updateModelData(newModel); this._currentScope.updatePlot(); } diff --git a/js/notebook/src/easyForm/css/jupyter-easyform.scss b/js/notebook/src/easyForm/css/jupyter-easyform.scss index d1990a4ca1..2569707a33 100644 --- a/js/notebook/src/easyForm/css/jupyter-easyform.scss +++ b/js/notebook/src/easyForm/css/jupyter-easyform.scss @@ -97,14 +97,24 @@ $beakerxFont: "Lato", Helvetica, sans-serif; border: 1px solid #cfcfcf; padding: 10px; font-family: $beakerxFont; + overflow: visible; + position: relative; + margin-top: 10px; legend { border-bottom: none; - width: auto; - display: inline; - padding: 0 5px; - font-size: 17px; margin-bottom: 0; + font-size: 17px; + position: absolute; + top: -0.7em; + background: white; + width: auto; + display: inline-block; + padding: 0 4px; + } + + .widget-inline-hbox { + align-items: center; } } diff --git a/js/notebook/src/plot/plotScope.js b/js/notebook/src/plot/plotScope.js index d94fe06c96..372d0cb91e 100644 --- a/js/notebook/src/plot/plotScope.js +++ b/js/notebook/src/plot/plotScope.js @@ -2086,6 +2086,13 @@ define([ } }; + // update model with partial model data + PlotScope.prototype.updateModelData = function(data) { + if (this.model && this.model.model && data) { + this.model.model = _.extend(this.model.model, data); + } + }; + PlotScope.prototype.setElement = function(el) { this.element = el; };