Merge pull request #7011 from jdfreder/killthelayout

Kill the layout manager

IPython/html/static/base/js/page.js

@@ -4,14 +4,17 b''
 define([
     'base/js/namespace',
     'jquery',
-], function(IPython, $){
+    'base/js/events',
+], function(IPython, $, events){
     "use strict";
 
     var Page = function () {
         this.bind_events();
+        this._resize_header();
     };
 
     Page.prototype.bind_events = function () {
+        events.on('resize-header.Page', $.proxy(this._resize_header, this));
     };
 
     Page.prototype.show = function () {
@@ -41,6 +44,11 b' define(['
         $('div#site').css('display','block');
     };
 
+    Page.prototype._resize_header = function() {
+        // Update the header's size.
+        $('#header-spacer').height($('#header').height());
+    };
+
     // Register self in the global namespace for convenience.
     IPython.Page = Page;
     return {'Page': Page};

IPython/html/static/base/less/page.less

@@ -20,11 +20,33 b' body {'
 div#header {
     /* Initially hidden to prevent FLOUC */
     display: none;
-    margin-bottom: 0px;
-    padding-left: 30px;
-    padding-bottom: 5px;
-    border-bottom: 1px solid @navbar-default-border;
-    .border-box-sizing();
+    margin-bottom: -6px;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    background-color: @body-bg;
+    min-height: 31px;
+
+    /* Display over codemirror */
+    z-index: 100;
+
+    #header-container {
+        margin-bottom: 0px;
+        padding-left: 30px;
+        padding-bottom: 5px;
+        .border-box-sizing();
+    }
+
+    .header-bar {
+        width: 100%;
+        height: 0px;
+        border-bottom: 1px solid @navbar-default-border;
+    }
+}
+
+#header-spacer {
+    width: 100%;
+    visibility: hidden;
 }
 
 #ipython_notebook {

IPython/html/static/notebook/js/main.js

@@ -9,7 +9,6 b' require(['
     'services/config',
     'base/js/utils',
     'base/js/page',
-    'notebook/js/layoutmanager',
     'base/js/events',
     'auth/js/loginwidget',
     'notebook/js/maintoolbar',
@@ -34,7 +33,6 b' require(['
     configmod,
     utils, 
     page, 
-    layoutmanager, 
     events,
     loginwidget, 
     maintoolbar, 
@@ -66,9 +64,7 b' require(['
 
     var user_config = $.extend({}, config.default_config);
     var page = new page.Page();
-    var layout_manager = new layoutmanager.LayoutManager();
-    var pager = new pager.Pager('div#pager', 'div#pager_splitter', {
-        layout_manager: layout_manager, 
+    var pager = new pager.Pager('div#pager', {
         events: events});
     var acts = new actions.init();
     var keyboard_manager = new keyboardmanager.KeyboardManager({
@@ -104,7 +100,6 b' require(['
     var menubar = new menubar.MenuBar('#menubar', $.extend({
         notebook: notebook, 
         contents: contents,
-        layout_manager: layout_manager, 
         events: events, 
         save_widget: save_widget, 
         quick_help: quick_help}, 
@@ -132,9 +127,7 b' require(['
 
     page.show();
 
-    layout_manager.do_resize();
     var first_load = function () {
-        layout_manager.do_resize();
         var hash = document.location.hash;
         if (hash) {
             document.location.hash = '';
@@ -147,7 +140,6 b' require(['
     events.on('notebook_loaded.Notebook', first_load);
     
     IPython.page = page;
-    IPython.layout_manager = layout_manager;
     IPython.notebook = notebook;
     IPython.contents = contents;
     IPython.pager = pager;

IPython/html/static/notebook/js/menubar.js

@@ -24,7 +24,6 b' define(['
          *      Dictionary of keyword arguments.
          *          notebook: Notebook instance
          *          contents: ContentManager instance
-         *          layout_manager: LayoutManager instance
          *          events: $(Events) instance
          *          save_widget: SaveWidget instance
          *          quick_help: QuickHelp instance
@@ -37,7 +36,6 b' define(['
         this.selector = selector;
         this.notebook = options.notebook;
         this.contents = options.contents;
-        this.layout_manager = options.layout_manager;
         this.events = options.events;
         this.save_widget = options.save_widget;
         this.quick_help = options.quick_help;
@@ -88,6 +86,13 b' define(['
         }
     };
 
+    MenuBar.prototype._size_header = function() {
+        /** 
+         * Update header spacer size.
+         */
+        this.events.trigger('resize-header.Page');
+    };
+
     MenuBar.prototype.bind_events = function () {
         /**
          *  File
@@ -218,12 +223,12 b' define(['
         
         // View
         this.element.find('#toggle_header').click(function () {
-            $('div#header').toggle();
-            that.layout_manager.do_resize();
+            $('div#header-container').toggle();
+            that._size_header();
         });
         this.element.find('#toggle_toolbar').click(function () {
             $('div#maintoolbar').toggle();
-            that.layout_manager.do_resize();
+            that._size_header();
         });
         // Insert
         this.element.find('#insert_cell_above').click(function () {

IPython/html/static/notebook/js/pager.js

@@ -8,48 +8,22 b' define(['
 ], function(IPython, $, utils) {
     "use strict";
 
-    var Pager = function (pager_selector, pager_splitter_selector, options) {
+    var Pager = function (pager_selector, options) {
         /**
          * Constructor
          *
          * Parameters:
          *  pager_selector: string
-         *  pager_splitter_selector: string
          *  options: dictionary
          *      Dictionary of keyword arguments.
          *          events: $(Events) instance
-         *          layout_manager: LayoutManager instance
          */
         this.events = options.events;
         this.pager_element = $(pager_selector);
-        this.pager_button_area = $('#pager_button_area');
-        var that = this;
-        this.percentage_height = 0.40;
-        options.layout_manager.pager = this;
-        this.pager_splitter_element = $(pager_splitter_selector)
-            .draggable({
-                        containment: 'window',
-                        axis:'y',
-                        helper: null ,
-                        drag: function(event, ui) {
-                            /**
-                             * recalculate the amount of space the pager should take
-                             */
-                            var pheight = ($(document.body).height()-event.clientY-4);
-                            var downprct = pheight/options.layout_manager.app_height();
-                                downprct = Math.min(0.9, downprct);
-                            if (downprct < 0.1) {
-                                that.percentage_height = 0.1;
-                                that.collapse({'duration':0});
-                            } else if (downprct > 0.2) {
-                                that.percentage_height = downprct;
-                                that.expand({'duration':0});
-                            }
-                            options.layout_manager.do_resize();
-                       }
-            });
+        this.pager_button_area = $('#pager-button-area');
+        this._default_end_space = 200;
+        this.pager_element.resizable({handles: 'n', resize: $.proxy(this._resize, this)});
         this.expanded = false;
-        this.style();
         this.create_button_area();
         this.bind_events();
     };
@@ -61,7 +35,6 b' define(['
                     .attr('title',"Open the pager in an external window")
                     .addClass('ui-button')
                     .click(function(){that.detach();})
-                    .attr('style','position: absolute; right: 20px;')
                     .append(
                         $('<span>').addClass("ui-icon ui-icon-extlink")
                     )
@@ -71,49 +44,37 b' define(['
                     .attr('title',"Close the pager")
                     .addClass('ui-button')
                     .click(function(){that.collapse();})
-                    .attr('style','position: absolute; right: 5px;')
                     .append(
                         $('<span>').addClass("ui-icon ui-icon-close")
                     )
         );
     };
 
-    Pager.prototype.style = function () {
-        this.pager_splitter_element.addClass('ui-widget ui-state-default');
-        this.pager_splitter_element.attr('title', 'Click to Show/Hide pager area, drag to Resize');
-    };
-
 
     Pager.prototype.bind_events = function () {
         var that = this;
 
         this.pager_element.bind('collapse_pager', function (event, extrap) {
-            var time = 'fast';
-            if (extrap && extrap.duration) {
-                time = extrap.duration;
-            }
-            that.pager_element.hide(time);
+            // Animate hiding of the pager.
+            var time = (extrap && extrap.duration) ? extrap.duration : 'fast';
+            that.pager_element.hide(time, function() {
+                $('.end_space').css('height', that._default_end_space);
+            });
         });
 
         this.pager_element.bind('expand_pager', function (event, extrap) {
-            var time = 'fast';
-            if (extrap && extrap.duration) {
-                time = extrap.duration;
-            }
-            that.pager_element.show(time);
-        });
-
-        this.pager_splitter_element.hover(
-            function () {
-                that.pager_splitter_element.addClass('ui-state-hover');
-            },
-            function () {
-                that.pager_splitter_element.removeClass('ui-state-hover');
-            }
-        );
-
-        this.pager_splitter_element.click(function () {
-            that.toggle();
+            // Clear the pager's height attr if it's set.  This allows the
+            // pager to size itself according to its contents.
+            that.pager_element.height('initial');
+
+            // Animate the showing of the pager
+            var time = (extrap && extrap.duration) ? extrap.duration : 'fast';
+            that.pager_element.show(time, function() {
+                // Explicitly set pager height once the pager has shown itself.
+                // This allows the pager-contents div to use percentage sizing.
+                that.pager_element.height(that.pager_element.height());
+                that._resize();
+            });
         });
 
         this.events.on('open_with_text.Pager', function (event, payload) {
@@ -130,7 +91,7 b' define(['
     Pager.prototype.collapse = function (extrap) {
         if (this.expanded === true) {
             this.expanded = false;
-            this.pager_element.add($('div#notebook')).trigger('collapse_pager', extrap);
+            this.pager_element.trigger('collapse_pager', extrap);
         }
     };
 
@@ -138,7 +99,7 b' define(['
     Pager.prototype.expand = function (extrap) {
         if (this.expanded !== true) {
             this.expanded = true;
-            this.pager_element.add($('div#notebook')).trigger('expand_pager', extrap);
+            this.pager_element.trigger('expand_pager', extrap);
         }
     };
 
@@ -184,6 +145,18 b' define(['
         this.pager_element.find(".container").append($('<pre/>').html(utils.fixCarriageReturn(utils.fixConsole(text))));
     };
 
+
+    Pager.prototype._resize = function() {
+        /**
+         * Update document based on pager size.
+         */
+        
+        // Make sure the padding at the end of the notebook is large
+        // enough that the user can scroll to the bottom of the 
+        // notebook.
+        $('.end_space').css('height', Math.max(this.pager_element.height(), this._default_end_space));
+    };
+
     // Backwards compatability.
     IPython.Pager = Pager;
 

IPython/html/static/notebook/less/menubar.less

@@ -1,12 +1,13 b''
 #menubar {
   margin-top: 0px;
-  margin-bottom: -19px;
+  margin-bottom: -24px;
   position: relative;
   .border-box-sizing();
 
   .navbar {
     border-top: 1px;
     border-radius: 0px 0px @border-radius-base @border-radius-base;
+    margin-bottom: 23px;
   }
   
   .navbar-toggle {

IPython/html/static/notebook/less/notebook.less

@@ -3,10 +3,6 b' body {'
     background-color:   @body-bg;
 }
 
-body.notebook_app {
-    overflow: hidden;
-}
-
 @media (max-width: 767px) {
     // remove bootstrap-responsive's body padding on small screens
     body.notebook_app {
@@ -36,19 +32,17 b' span#notebook_name {'
 div#notebook_panel {
     margin: 0px 0px 0px 0px;
     padding: 0px;
-    .box-shadow(@notebook-shadow);
     .border-box-sizing();
 }
 div#notebook {
     font-size: @notebook_font_size;
     line-height: @notebook_line_height;
-    overflow-y: scroll;
+    overflow-y: hidden;
     overflow-x: auto;
     width: 100%;
     /* This spaces the cell away from the edge of the notebook area */
-    padding: 1em 0 1em 0;
+    padding: 2em 0 2em 0;
     margin: 0px;
-    border-top: 1px solid @navbar-default-border;
     outline: none;
     .border-box-sizing();
 }
@@ -86,3 +80,14 b' p {'
 .end_space {
     height: 200px;
 }
+
+.lower-header-bar {
+    width: 100%;
+    height: 0px;
+    border-bottom: 1px solid @navbar-default-border;
+    margin-bottom: -1px;
+}
+
+.notebook_app #header {
+    .box-shadow(@notebook-shadow);
+}

IPython/html/static/notebook/less/pager.less

@@ -1,25 +1,51 b''
-div#pager_splitter {
-    height: 8px;
-    .border-box-sizing();
-}
-
-#pager-container {
-    position: relative;
-    padding: 15px 0px;
-    .border-box-sizing();
-}
-
 div#pager {
+    background-color:   @body-bg;
     font-size: @notebook_font_size;
     line-height: @notebook_line_height;
-    overflow: auto;
+    overflow: hidden;
     display: none;
+    position: fixed;
+    bottom: 0px;
+    width: 100%;
+    max-height: 50%;
+    padding-top: 7px;
+
+    /* Display over codemirror */
+    z-index: 100;
+
+    /* Hack which prevents jquery ui resizable from changing top. */
+    top: inherit !important; 
 
     pre {
-      line-height: @code_line_height;
-      color: @text-color;
-      background-color: @cell_background;
-      padding: @code_padding;
+        line-height: @code_line_height;
+        color: @text-color;
+        background-color: @cell_background;
+        padding: @code_padding;
+    }
+
+    #pager-button-area {
+        position: absolute;
+        top: 7px;
+        right: 20px; 
+    }
+
+    #pager-contents {
+        position: relative;
+        overflow: auto;
+        width: 100%;
+        height: 100%;
+
+        #pager-container {
+            position: relative;
+            padding: 15px 0px;
+            .border-box-sizing();
+        }
+    }
+
+    .ui-resizable-handle {
+        top: 0px;
+        height: 7px;
+        background: @light_border_color;
+        border-bottom: 1px solid @border_color;
     }
-    .border-box-sizing();
 }

IPython/html/static/notebook/less/toolbar.less

@@ -2,6 +2,7 b''
     padding: 0px;
     margin-left: -5px;
     margin-top: -5px;
+    margin-bottom: 5px;
 
     select, label {
         width: auto;
@@ -33,8 +34,8 b''
   border: 0px;
   min-height: 27px;
   margin-left: 32px;
-  padding-top: 6px;
-  padding-bottom: 8px;
+  padding-top: 11px;
+  padding-bottom: 3px;
 
   .navbar-text {
     float: none;
@@ -44,10 +45,6 b''
     margin-right: 0px;
     margin-top: 0px;
   }
-
-  .toolbar {
-    margin-top: 0px;
-  }
 }
 
 .select-xs {

IPython/html/static/notebook/less/variables.less

@@ -10,7 +10,7 b''
 @notebook_line_height:          20px;
 @code_line_height:              1.21429em;  // changed from 1.231 to get 17px even
 @code_padding:                  0.4em;  // 5.6 px
-@notebook-shadow:               inset 1px 4px 9px -6px rgba(0,0,0,.25);
+@notebook-shadow:               1px 4px 9px -6px rgba(0,0,0,.25);
 @rendered_html_border_color:    black;
 @input_prompt_color:            navy;
 @output_prompt_color:           darkred;

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

@@ -7751,14 +7751,32 b' body {'
 div#header {
   /* Initially hidden to prevent FLOUC */
   display: none;
+  margin-bottom: -6px;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  background-color: #ffffff;
+  min-height: 31px;
+  /* Display over codemirror */
+  z-index: 100;
+}
+div#header #header-container {
   margin-bottom: 0px;
   padding-left: 30px;
   padding-bottom: 5px;
-  border-bottom: 1px solid #e7e7e7;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
+div#header .header-bar {
+  width: 100%;
+  height: 0px;
+  border-bottom: 1px solid #e7e7e7;
+}
+#header-spacer {
+  width: 100%;
+  visibility: hidden;
+}
 #ipython_notebook {
   padding-left: 0px;
 }
@@ -9461,9 +9479,6 b' h6:hover .anchor-link {'
 body {
   background-color: #ffffff;
 }
-body.notebook_app {
-  overflow: hidden;
-}
 @media (max-width: 767px) {
   body.notebook_app {
     padding-left: 0px;
@@ -9489,8 +9504,6 b' span#notebook_name:hover {'
 div#notebook_panel {
   margin: 0px 0px 0px 0px;
   padding: 0px;
-  -webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.25);
-  box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.25);
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -9498,13 +9511,12 b' div#notebook_panel {'
 div#notebook {
   font-size: 14px;
   line-height: 20px;
-  overflow-y: scroll;
+  overflow-y: hidden;
   overflow-x: auto;
   width: 100%;
   /* This spaces the cell away from the edge of the notebook area */
-  padding: 1em 0 1em 0;
+  padding: 2em 0 2em 0;
   margin: 0px;
-  border-top: 1px solid #e7e7e7;
   outline: none;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -9542,6 +9554,16 b' p {'
 .end_space {
   height: 200px;
 }
+.lower-header-bar {
+  width: 100%;
+  height: 0px;
+  border-bottom: 1px solid #e7e7e7;
+  margin-bottom: -1px;
+}
+.notebook_app #header {
+  -webkit-box-shadow: 1px 4px 9px -6px rgba(0, 0, 0, 0.25);
+  box-shadow: 1px 4px 9px -6px rgba(0, 0, 0, 0.25);
+}
 /* CSS for the cell toolbar */
 .celltoolbar {
   border: thin solid #CFCFCF;
@@ -9779,7 +9801,7 b' fieldset[disabled] #kernel_selector_widget > button.active {'
 }
 #menubar {
   margin-top: 0px;
-  margin-bottom: -19px;
+  margin-bottom: -24px;
   position: relative;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -9788,6 +9810,7 b' fieldset[disabled] #kernel_selector_widget > button.active {'
 #menubar .navbar {
   border-top: 1px;
   border-radius: 0px 0px 4px 4px;
+  margin-bottom: 23px;
 }
 #menubar .navbar-toggle {
   float: left;
@@ -10256,27 +10279,21 b' fieldset[disabled] .notification_widget.danger.active {'
   color: #d9534f;
   background-color: #ffffff;
 }
-div#pager_splitter {
-  height: 8px;
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-}
-#pager-container {
-  position: relative;
-  padding: 15px 0px;
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-}
 div#pager {
+  background-color: #ffffff;
   font-size: 14px;
   line-height: 20px;
-  overflow: auto;
+  overflow: hidden;
   display: none;
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
+  position: fixed;
+  bottom: 0px;
+  width: 100%;
+  max-height: 50%;
+  padding-top: 7px;
+  /* Display over codemirror */
+  z-index: 100;
+  /* Hack which prevents jquery ui resizable from changing top. */
+  top: inherit !important;
 }
 div#pager pre {
   line-height: 1.21429em;
@@ -10284,6 +10301,30 b' div#pager pre {'
   background-color: #f7f7f7;
   padding: 0.4em;
 }
+div#pager #pager-button-area {
+  position: absolute;
+  top: 7px;
+  right: 20px;
+}
+div#pager #pager-contents {
+  position: relative;
+  overflow: auto;
+  width: 100%;
+  height: 100%;
+}
+div#pager #pager-contents #pager-container {
+  position: relative;
+  padding: 15px 0px;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+div#pager .ui-resizable-handle {
+  top: 0px;
+  height: 7px;
+  background: #cfcfcf;
+  border-bottom: 1px solid #ababab;
+}
 .quickhelp {
   /* Old browsers */
   display: -webkit-box;
@@ -10350,6 +10391,7 b' span#autosave_status {'
   padding: 0px;
   margin-left: -5px;
   margin-top: -5px;
+  margin-bottom: 5px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -10380,8 +10422,8 b' span#autosave_status {'
   border: 0px;
   min-height: 27px;
   margin-left: 32px;
-  padding-top: 6px;
-  padding-bottom: 8px;
+  padding-top: 11px;
+  padding-bottom: 3px;
 }
 #maintoolbar .navbar-text {
   float: none;
@@ -10391,9 +10433,6 b' span#autosave_status {'
   margin-right: 0px;
   margin-top: 0px;
 }
-#maintoolbar .toolbar {
-  margin-top: 0px;
-}
 .select-xs {
   height: 24px;
 }

IPython/html/templates/notebook.html

@@ -32,7 +32,7 b' class="notebook_app"'
 {% endblock %}
 
 
-{% block header %}
+{% block headercontainer %}
 
 
 <span id="save_widget" class="nav pull-left">
@@ -50,11 +50,9 b' class="notebook_app"'
     </ul>
 </span>
 
-{% endblock %}
-
-
-{% block site %}
+{% endblock headercontainer %}
 
+{% block header %}
 <div id="menubar-container" class="container">
 <div id="menubar">
     <div id="menus" class="navbar navbar-default" role="navigation">
@@ -289,6 +287,7 b' class="notebook_app"'
         </div>
     </div>
 </div>
+
 <div id="maintoolbar" class="navbar">
   <div class="toolbar-inner navbar-inner navbar-nobg">
     <div id="maintoolbar-container" class="container"></div>
@@ -296,19 +295,25 b' class="notebook_app"'
 </div>
 </div>
 
-<div id="ipython-main-app">
+<div class="lower-header-bar"></div>
+{% endblock header %}
 
+{% block site %}
+
+
+<div id="ipython-main-app">
     <div id="notebook_panel">
         <div id="notebook"></div>
-        <div id="pager_splitter"></div>
-        <div id="pager">
-            <div id='pager_button_area'>
-            </div>
-            <div id="pager-container" class="container"></div>
-        </div>
     </div>
+</div>
 
+<div id="pager">
+    <div id="pager-contents">
+        <div id="pager-container" class="container"></div>
+    </div>
+    <div id='pager-button-area'></div>
 </div>
+
 <div id='tooltip' class='ipython_tooltip' style='display:none'></div>
 
 

IPython/html/templates/page.html

@@ -81,7 +81,7 b''
 </noscript>
 
 <div id="header" class="navbar navbar-static-top">
-  <div class="container">
+  <div id="header-container" class="container">
   <div id="ipython_notebook" class="nav navbar-brand pull-left"><a href="{{base_url}}tree" alt='dashboard'>{% block logo %}<img src='{{static_url("base/images/logo.png") }}' alt='Jupyter Notebook'/>{% endblock %}</a></div>
 
   {% block login_widget %}
@@ -96,10 +96,15 b''
 
   {% endblock %}
 
-  {% block header %}
+  {% block headercontainer %}
   {% endblock %}
   </div>
+  <div class="header-bar"></div>
+
+  {% block header %}
+  {% endblock %}
 </div>
+<div id="header-spacer"></div>
 
 <div id="site">
 {% block site %}