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