diff --git a/IPython/html/static/style/ipython.min.css b/IPython/html/static/style/ipython.min.css index f17ad7c..d275e96 100644 --- a/IPython/html/static/style/ipython.min.css +++ b/IPython/html/static/style/ipython.min.css @@ -1534,18 +1534,6 @@ h6:hover .anchor-link { text-align: center; vertical-align: text-top; } -.widget-modal { - /* Box - ModalView */ - overflow: hidden; - position: absolute !important; - top: 0px; - left: 0px; - margin-left: 0px !important; -} -.widget-modal-body { - /* Box - ModalView Body */ - max-height: none !important; -} .widget-box { /* Box */ box-sizing: border-box; @@ -1582,12 +1570,4 @@ h6:hover .anchor-link { .widget-radio-box label { margin-top: 0px; } -.docked-widget-modal { - /* Horizontal Label */ - overflow: hidden; - position: relative !important; - top: 0px !important; - left: 0px !important; - margin-left: 0px !important; -} /*# sourceMappingURL=ipython.min.css.map */ \ No newline at end of file diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css index 7a062c8..60a6a75 100644 --- a/IPython/html/static/style/style.min.css +++ b/IPython/html/static/style/style.min.css @@ -9460,18 +9460,6 @@ h6:hover .anchor-link { text-align: center; vertical-align: text-top; } -.widget-modal { - /* Box - ModalView */ - overflow: hidden; - position: absolute !important; - top: 0px; - left: 0px; - margin-left: 0px !important; -} -.widget-modal-body { - /* Box - ModalView Body */ - max-height: none !important; -} .widget-box { /* Box */ box-sizing: border-box; @@ -9508,14 +9496,6 @@ h6:hover .anchor-link { .widget-radio-box label { margin-top: 0px; } -.docked-widget-modal { - /* Horizontal Label */ - overflow: hidden; - position: relative !important; - top: 0px !important; - left: 0px !important; - margin-left: 0px !important; -} /*! * * IPython notebook webapp diff --git a/IPython/html/static/widgets/js/widget.js b/IPython/html/static/widgets/js/widget.js index 6c8dad5..0938151 100644 --- a/IPython/html/static/widgets/js/widget.js +++ b/IPython/html/static/widgets/js/widget.js @@ -542,11 +542,11 @@ define(["widgets/js/manager", this.update_attr('border-style', this.model.get('border_style')); this.update_attr('font-style', this.model.get('font_style')); this.update_attr('font-weight', this.model.get('font_weight')); - this.update_attr('font-size', this.model.get('font_size')); + this.update_attr('font-size', this._default_px(this.model.get('font_size'))); this.update_attr('font-family', this.model.get('font_family')); this.update_attr('padding', this.model.get('padding')); - this.update_attr('margin', this.model.get('margin')); - this.update_attr('border-radius', this.model.get('border_radius')); + this.update_attr('margin', this._default_px(this.model.get('margin'))); + this.update_attr('border-radius', this._default_px(this.model.get('border_radius'))); this.update_css(this.model, this.model.get("_css")); }, this); diff --git a/IPython/html/static/widgets/js/widget_box.js b/IPython/html/static/widgets/js/widget_box.js index e7850ce..f31f40b 100644 --- a/IPython/html/static/widgets/js/widget_box.js +++ b/IPython/html/static/widgets/js/widget_box.js @@ -146,224 +146,8 @@ define([ }, }); - var PopupView = BoxView.extend({ - - render: function(){ - /** - * Called when view is rendered. - */ - var that = this; - - this.$el.on("remove", function(){ - that.$backdrop.remove(); - }); - this.$backdrop = $('
') - .appendTo($('#notebook-container')) - .addClass('modal-dialog') - .css('position', 'absolute') - .css('left', '0px') - .css('top', '0px'); - this.$window = $('') - .appendTo(this.$backdrop) - .addClass('modal-content widget-modal') - .mousedown(function(){ - that.bring_to_front(); - }); - - // Set the elements array since the this.$window element is not child - // of this.$el and the parent widget manager or other widgets may - // need to know about all of the top-level widgets. The IPython - // widget manager uses this to register the elements with the - // keyboard manager. - this.additional_elements = [this.$window]; - - this.$title_bar = $('') - .addClass('popover-title') - .appendTo(this.$window) - .mousedown(function(){ - that.bring_to_front(); - }); - this.$close = $('') - .addClass('close fa fa-remove') - .css('margin-left', '5px') - .appendTo(this.$title_bar) - .click(function(){ - that.hide(); - event.stopPropagation(); - }); - this.$minimize = $('') - .addClass('close fa fa-arrow-down') - .appendTo(this.$title_bar) - .click(function(){ - that.popped_out = !that.popped_out; - if (!that.popped_out) { - that.$minimize - .removeClass('fa-arrow-down') - .addClass('fa-arrow-up'); - - that.$window - .draggable('destroy') - .resizable('destroy') - .removeClass('widget-modal modal-content') - .addClass('docked-widget-modal') - .detach() - .insertBefore(that.$show_button); - that.$show_button.hide(); - that.$close.hide(); - } else { - that.$minimize - .addClass('fa-arrow-down') - .removeClass('fa-arrow-up'); - - that.$window - .removeClass('docked-widget-modal') - .addClass('widget-modal modal-content') - .detach() - .appendTo(that.$backdrop) - .draggable({handle: '.popover-title', snap: '#notebook, .modal', snapMode: 'both'}) - .resizable() - .children('.ui-resizable-handle').show(); - that.show(); - that.$show_button.show(); - that.$close.show(); - } - event.stopPropagation(); - }); - this.$title = $('') - .addClass('widget-modal-title') - .html(" ") - .appendTo(this.$title_bar); - this.$box = $('') - .addClass('modal-body') - .addClass('widget-modal-body') - .addClass('widget-box') - .addClass('vbox') - .appendTo(this.$window); - - this.$show_button = $('') - .html(" ") - .addClass('btn btn-info widget-modal-show') - .appendTo(this.$el) - .click(function(){ - that.show(); - }); - - this.$window.draggable({handle: '.popover-title', snap: '#notebook, .modal', snapMode: 'both'}); - this.$window.resizable(); - this.$window.on('resize', function(){ - that.$box.outerHeight(that.$window.innerHeight() - that.$title_bar.outerHeight()); - }); - - this._shown_once = false; - this.popped_out = true; - - this.children_views.update(this.model.get('children')) - }, - - hide: function() { - /** - * Called when the modal hide button is clicked. - */ - this.$window.hide(); - this.$show_button.removeClass('btn-info'); - }, - - show: function() { - /** - * Called when the modal show button is clicked. - */ - this.$show_button.addClass('btn-info'); - this.$window.show(); - if (this.popped_out) { - this.$window.css("positon", "absolute"); - this.$window.css("top", "0px"); - this.$window.css("left", Math.max(0, (($('body').outerWidth() - this.$window.outerWidth()) / 2) + - $(window).scrollLeft()) + "px"); - this.bring_to_front(); - } - }, - - bring_to_front: function() { - /** - * Make the modal top-most, z-ordered about the other modals. - */ - var $widget_modals = $(".widget-modal"); - var max_zindex = 0; - $widget_modals.each(function (index, el){ - var zindex = parseInt($(el).css('z-index')); - if (!isNaN(zindex)) { - max_zindex = Math.max(max_zindex, zindex); - } - }); - - // Start z-index of widget modals at 2000 - max_zindex = Math.max(max_zindex, 2000); - - $widget_modals.each(function (index, el){ - $el = $(el); - if (max_zindex == parseInt($el.css('z-index'))) { - $el.css('z-index', max_zindex - 1); - } - }); - this.$window.css('z-index', max_zindex); - }, - - update: function(){ - /** - * Update the contents of this view - * - * Called when the model is changed. The model may have been - * changed by another view or by a state update from the back-end. - */ - var description = this.model.get('description'); - if (description.trim().length === 0) { - this.$title.html(" "); // Preserve title height - } else { - this.typeset(this.$title, description); - } - - var button_text = this.model.get('button_text'); - if (button_text.trim().length === 0) { - this.$show_button.html(" "); // Preserve button height - } else { - this.$show_button.text(button_text); - } - - if (!this._shown_once) { - this._shown_once = true; - this.show(); - } - - return PopupView.__super__.update.apply(this); - }, - - _get_selector_element: function(selector) { - /** - * Get an element view a 'special' jquery selector. (see widget.js) - * - * Since the modal actually isn't within the $el in the DOM, we need to extend - * the selector logic to allow the user to set css on the modal if need be. - * The convention used is: - * "modal" - select the modal div - * "modal [selector]" - select element(s) within the modal div. - * "[selector]" - select elements within $el - * "" - select the $el - */ - if (selector.substring(0, 5) == 'modal') { - if (selector == 'modal') { - return this.$window; - } else { - return this.$window.find(selector.substring(6)); - } - } else { - return PopupView.__super__._get_selector_element.apply(this, [selector]); - } - }, - }); - return { 'BoxView': BoxView, - 'PopupView': PopupView, 'FlexBoxView': FlexBoxView, }; }); diff --git a/IPython/html/static/widgets/less/widgets.less b/IPython/html/static/widgets/less/widgets.less index d7a1cad..a55a425 100644 --- a/IPython/html/static/widgets/less/widgets.less +++ b/IPython/html/static/widgets/less/widgets.less @@ -249,20 +249,6 @@ } -.widget-modal { - /* Box - ModalView */ - overflow : hidden; - position : absolute !important; - top : 0px; - left : 0px; - margin-left : 0px !important; -} - -.widget-modal-body { - /* Box - ModalView Body */ - max-height: none !important; -} - .widget-box { /* Box */ .border-box-sizing(); @@ -280,12 +266,3 @@ margin-top: 0px; } } - -.docked-widget-modal { - /* Horizontal Label */ - overflow: hidden; - position: relative !important; - top: 0px !important; - left: 0px !important; - margin-left: 0px !important; -} diff --git a/IPython/html/widgets/__init__.py b/IPython/html/widgets/__init__.py index cb47420..0a5c7cc 100644 --- a/IPython/html/widgets/__init__.py +++ b/IPython/html/widgets/__init__.py @@ -2,7 +2,7 @@ from .widget import Widget, DOMWidget, CallbackDispatcher, register from .widget_bool import Checkbox, ToggleButton from .widget_button import Button -from .widget_box import Box, Popup, FlexBox, HBox, VBox +from .widget_box import Box, FlexBox, HBox, VBox from .widget_float import FloatText, BoundedFloatText, FloatSlider, FloatProgress, FloatRangeSlider from .widget_image import Image from .widget_int import IntText, BoundedIntText, IntSlider, IntProgress, IntRangeSlider @@ -16,7 +16,7 @@ from .widget_link import Link, link, DirectionalLink, dlink # Deprecated classes from .widget_bool import CheckboxWidget, ToggleButtonWidget from .widget_button import ButtonWidget -from .widget_box import ContainerWidget, PopupWidget +from .widget_box import ContainerWidget from .widget_float import FloatTextWidget, BoundedFloatTextWidget, FloatSliderWidget, FloatProgressWidget from .widget_image import ImageWidget from .widget_int import IntTextWidget, BoundedIntTextWidget, IntSliderWidget, IntProgressWidget diff --git a/IPython/html/widgets/widget_box.py b/IPython/html/widgets/widget_box.py index ca9c626..555db22 100644 --- a/IPython/html/widgets/widget_box.py +++ b/IPython/html/widgets/widget_box.py @@ -45,15 +45,6 @@ class Box(DOMWidget): child._handle_displayed() -@register('IPython.Popup') -class Popup(Box): - """Displays multiple widgets in an in page popup div.""" - _view_name = Unicode('PopupView', sync=True) - - description = Unicode(sync=True) - button_text = Unicode(sync=True) - - @register('IPython.FlexBox') class FlexBox(Box): """Displays multiple widgets using the flexible box model.""" @@ -87,5 +78,3 @@ def HBox(*pargs, **kwargs): # Remove in IPython 4.0 ContainerWidget = DeprecatedClass(Box, 'ContainerWidget') -PopupWidget = DeprecatedClass(Popup, 'PopupWidget') - diff --git a/examples/Interactive Widgets/Variable Inspector.ipynb b/examples/Interactive Widgets/Variable Inspector.ipynb index 24b3285..fa14c43 100644 --- a/examples/Interactive Widgets/Variable Inspector.ipynb +++ b/examples/Interactive Widgets/Variable Inspector.ipynb @@ -61,9 +61,12 @@ " self.namespace = NamespaceMagics()\n", " self.namespace.shell = ipython.kernel.shell\n", " \n", - " self._popout = widgets.Popup()\n", - " self._popout.description = \"Variable Inspector\"\n", - " self._popout.button_text = self._popout.description\n", + " self._box = widgets.Box()\n", + " self._box._dom_classes = ['inspector']\n", + " self._box.background_color = '#fff'\n", + " self._box.border_color = '#ccc'\n", + " self._box.border_width = 1\n", + " self._box.border_radius = 5\n", "\n", " self._modal_body = widgets.VBox()\n", " self._modal_body.overflow_y = 'scroll'\n", @@ -71,7 +74,7 @@ " self._modal_body_label = widgets.HTML(value = 'Not hooked')\n", " self._modal_body.children = [self._modal_body_label]\n", "\n", - " self._popout.children = [\n", + " self._box.children = [\n", " self._modal_body, \n", " ]\n", " \n", @@ -82,7 +85,7 @@ " \"\"\"Close and remove hooks.\"\"\"\n", " if not self.closed:\n", " self._ipython.events.unregister('post_run_cell', self._fill)\n", - " self._popout.close()\n", + " self._box.close()\n", " self.closed = True\n", " VariableInspectorWindow.instance = None\n", "\n", @@ -96,7 +99,7 @@ " def _ipython_display_(self):\n", " \"\"\"Called when display() or pyout is used to display the Variable \n", " Inspector.\"\"\"\n", - " self._popout._ipython_display_()\n" + " self._box._ipython_display_()\n" ] }, { @@ -115,6 +118,34 @@ "cell_type": "markdown", "metadata": {}, "source": [ + "Pop the inspector out of the widget area using Javascript. To close the inspector, click the close button on the widget area that it was spawned from." + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": { + "collapsed": false + }, + "outputs": [], + "source": [ + "%%javascript\n", + "$('div.inspector')\n", + " .detach()\n", + " .prependTo($('body'))\n", + " .css({\n", + " 'z-index': 999, \n", + " position: 'fixed',\n", + " 'box-shadow': '5px 5px 12px -3px black',\n", + " opacity: 0.9\n", + " })\n", + " .draggable();" + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ "# Test" ] }, @@ -187,15 +218,21 @@ ], "metadata": { "kernelspec": { + "display_name": "IPython (Python 2)", + "name": "python2" + }, + "language_info": { "codemirror_mode": { - "name": "python", + "name": "ipython", "version": 2 }, - "display_name": "Python 2", - "language": "python", - "name": "python2" - }, - "signature": "sha256:474731659fb14b86672d1dafb2b497fa280082ab40a8a82fe2cde1b6d9b88a6e" + "file_extension": ".py", + "mimetype": "text/x-python", + "name": "python", + "nbconvert_exporter": "python", + "pygments_lexer": "ipython2", + "version": "2.7.6" + } }, "nbformat": 4, "nbformat_minor": 0 diff --git a/examples/Interactive Widgets/Widget Styling.ipynb b/examples/Interactive Widgets/Widget Styling.ipynb index 2181714..5d674e2 100644 --- a/examples/Interactive Widgets/Widget Styling.ipynb +++ b/examples/Interactive Widgets/Widget Styling.ipynb @@ -258,196 +258,6 @@ } }, "source": [ - "### Popup" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Unlike the other two special containers, the `Popup` is only **designed to display one set of widgets**. The `Popup` can be used to **display widgets outside of the widget area**. " - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "counter = widgets.IntText(description='Counter:')\n", - "popup = widgets.Popup(children=[counter], description='Popup Demo', button_text='Popup Button')\n", - "display(popup)" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "counter.value += 1" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "counter.value += 1" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "popup.close()" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ "# Alignment" ] }, @@ -753,7 +563,7 @@ ] ], "kernelspec": { - "display_name": "Python 2", + "display_name": "IPython (Python 2)", "name": "python2" }, "language_info": { @@ -766,9 +576,8 @@ "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython2", - "version": "2.7.8" - }, - "signature": "sha256:198630bf2c2eb00401b60a395ebc75049099864b62f0faaf416da02f9808c40b" + "version": "2.7.6" + } }, "nbformat": 4, "nbformat_minor": 0