Merge pull request #7341 from jdfreder/remove-popup

Remove the popup widget

IPython/html/static/style/ipython.min.css

@@ -1534,18 +1534,6 b' 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 b' 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

IPython/html/static/style/style.min.css

@@ -9460,18 +9460,6 b' 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 b' 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

IPython/html/static/widgets/js/widget.js

@@ -542,11 +542,11 b' 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);

IPython/html/static/widgets/js/widget_box.js

@@ -146,224 +146,8 b' 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 = $('<div />')
-                .appendTo($('#notebook-container'))
-                .addClass('modal-dialog')
-                .css('position', 'absolute')
-                .css('left', '0px')
-                .css('top', '0px');
-            this.$window = $('<div />')
-                .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 = $('<div />')
-                .addClass('popover-title')
-                .appendTo(this.$window)
-                .mousedown(function(){
-                    that.bring_to_front();
-                });
-            this.$close = $('<button />')
-                .addClass('close fa fa-remove')
-                .css('margin-left', '5px')
-                .appendTo(this.$title_bar)
-                .click(function(){
-                    that.hide();
-                    event.stopPropagation();
-                });
-            this.$minimize = $('<button />')
-                .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 = $('<div />')
-                .addClass('widget-modal-title')
-                .html("&nbsp;")
-                .appendTo(this.$title_bar);     
-            this.$box = $('<div />')
-                .addClass('modal-body')
-                .addClass('widget-modal-body')
-                .addClass('widget-box')
-                .addClass('vbox')
-                .appendTo(this.$window);
-            
-            this.$show_button = $('<button />')
-                .html("&nbsp;")
-                .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("&nbsp;"); // 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("&nbsp;"); // 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,
     };
 });

IPython/html/static/widgets/less/widgets.less

@@ -249,20 +249,6 b''
 
 }
 
-.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 b''
         margin-top: 0px;
     }
 }
-
-.docked-widget-modal {
-    /* Horizontal Label */
-    overflow: hidden; 
-    position: relative !important;
-    top: 0px !important; 
-    left: 0px !important; 
-    margin-left: 0px !important;
-}

IPython/html/widgets/__init__.py

@@ -2,7 +2,7 b' 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 b' 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

IPython/html/widgets/widget_box.py

@@ -45,15 +45,6 b' 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 b' def HBox(*pargs, **kwargs):'
 
 # Remove in IPython 4.0
 ContainerWidget = DeprecatedClass(Box, 'ContainerWidget')
-PopupWidget = DeprecatedClass(Popup, 'PopupWidget')
-

examples/Interactive Widgets/Variable Inspector.ipynb

@@ -61,9 +61,12 b''
     "        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 b''
     "        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 b''
     "        \"\"\"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 b''
     "    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 b''
    "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 b''
  ],
  "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

examples/Interactive Widgets/Widget Styling.ipynb

@@ -258,196 +258,6 b''
     }
    },
    "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 b''
    ]
   ],
   "kernelspec": {
-   "display_name": "Python 2",
+   "display_name": "IPython (Python 2)",
    "name": "python2"
   },
   "language_info": {
@@ -766,9 +576,8 b''
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython2",
-   "version": "2.7.8"
-  },
-  "signature": "sha256:198630bf2c2eb00401b60a395ebc75049099864b62f0faaf416da02f9808c40b"
+   "version": "2.7.6"
+  }
  },
  "nbformat": 4,
  "nbformat_minor": 0