Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Left panel is now working.

  • Loading branch information...
commit 450ed2f3f78977dcffb4de8be27e781a5fb936c3 1 parent e37fefa
@ellisonbg ellisonbg authored
View
6 IPython/frontend/html/notebook/static/css/notebook.css
@@ -111,8 +111,6 @@ div#notebook_app {
}
div#left_panel {
- width: 200px;
- min-height: 300px;
overflow-y: auto;
top: 0px;
left: 0px;
@@ -131,7 +129,8 @@ div#left_panel_splitter {
}
div#notebook_panel {
- margin: 0px 0px 0px 209px;
+/* The L margin will be set in the Javascript code*/
+ margin: 0px 0px 0px 0px;
padding: 0px;
}
@@ -150,7 +149,6 @@ div#pager_splitter {
}
div#pager {
- height: 200px;
overflow: auto;
}
View
56 IPython/frontend/html/notebook/static/js/layout.js
@@ -0,0 +1,56 @@
+
+//============================================================================
+// Layout
+//============================================================================
+
+var IPython = (function (IPython) {
+
+ var LayoutManager = function () {
+ this.bind_events();
+ };
+
+
+ LayoutManager.prototype.bind_events = function () {
+ $(window).resize($.proxy(this.do_resize,this));
+ };
+
+
+ LayoutManager.prototype.do_resize = function () {
+ var win = $(window);
+ var w = win.width();
+ var h = win.height();
+ var header_height = $('div#header').outerHeight(true);
+ var app_height = h - header_height - 2; // content height
+
+ $('div#notebook_app').height(app_height + 2); // content+padding+border height
+
+ $('div#left_panel').height(app_height);
+
+ $('div#left_panel_splitter').height(app_height);
+
+ var left_panel_width = $('div#left_panel').outerWidth();
+ var left_panel_splitter_width = $('div#left_panel_splitter').outerWidth();
+ $('div#notebook_panel').height(app_height);
+ if (IPython.left_panel.expanded) {
+ $('div#notebook_panel').css({marginLeft : left_panel_width+left_panel_splitter_width});
+ } else {
+ $('div#notebook_panel').css({marginLeft : left_panel_splitter_width});
+ }
+
+
+ var pager_height = IPython.pager.percentage_height*app_height;
+ var pager_splitter_height = $('div#pager_splitter').outerHeight(true);
+ $('div#pager').height(pager_height);
+ if (IPython.pager.expanded) {
+ $('div#notebook').height(app_height-pager_height-pager_splitter_height);
+ } else {
+ $('div#notebook').height(app_height-pager_splitter_height);
+ }
+ console.log('resize: ', app_height);
+ };
+
+ IPython.LayoutManager = LayoutManager
+
+ return IPython;
+
+}(IPython));
View
87 IPython/frontend/html/notebook/static/js/leftpanel.js
@@ -0,0 +1,87 @@
+
+//============================================================================
+// LeftPanel
+//============================================================================
+
+
+var IPython = (function (IPython) {
+
+ var utils = IPython.utils;
+
+ var LeftPanel = function (left_panel_selector, left_panel_splitter_selector) {
+ this.left_panel_element = $(left_panel_selector);
+ this.left_panel_splitter_element = $(left_panel_splitter_selector);
+ this.expanded = true;
+ this.width = 250;
+ this.style();
+ this.bind_events();
+ };
+
+
+ LeftPanel.prototype.style = function () {
+ this.left_panel_splitter_element.addClass('border-box-sizing ui-widget ui-state-default');
+ this.left_panel_element.addClass('border-box-sizing ui-widget');
+ this.left_panel_element.width(this.width);
+ this.left_panel_splitter_element.css({left : this.width});
+ };
+
+
+ LeftPanel.prototype.bind_events = function () {
+ var that = this;
+
+ this.left_panel_element.bind('collapse_left_panel', function () {
+ that.left_panel_element.hide('fast');
+ that.left_panel_splitter_element.animate({left : 0}, 'fast');
+ });
+
+ this.left_panel_element.bind('expand_left_panel', function () {
+ that.left_panel_element.show('fast');
+ that.left_panel_splitter_element.animate({left : that.width}, 'fast');
+ });
+
+ this.left_panel_splitter_element.hover(
+ function () {
+ that.left_panel_splitter_element.addClass('ui-state-hover');
+ },
+ function () {
+ that.left_panel_splitter_element.removeClass('ui-state-hover');
+ }
+ );
+
+ this.left_panel_splitter_element.click(function () {
+ that.toggle();
+ });
+
+ };
+
+
+ LeftPanel.prototype.collapse = function () {
+ if (this.expanded === true) {
+ this.left_panel_element.add($('div#notebook')).trigger('collapse_left_panel');
+ this.expanded = false;
+ };
+ };
+
+
+ LeftPanel.prototype.expand = function () {
+ if (this.expanded !== true) {
+ this.left_panel_element.add($('div#notebook')).trigger('expand_left_panel');
+ this.expanded = true;
+ };
+ };
+
+
+ LeftPanel.prototype.toggle = function () {
+ if (this.expanded === true) {
+ this.collapse();
+ } else {
+ this.expand();
+ };
+ };
+
+ IPython.LeftPanel = LeftPanel;
+
+ return IPython;
+
+}(IPython));
+
View
15 IPython/frontend/html/notebook/static/js/notebook.js
@@ -25,6 +25,7 @@ var IPython = (function (IPython) {
Notebook.prototype.style = function () {
+ $('div#notebook').addClass('border-box-sizing');
};
@@ -96,6 +97,20 @@ var IPython = (function (IPython) {
var new_height = app_height - pager_height - splitter_height;
that.element.animate({height : new_height + 'px'}, 'fast');
});
+
+ this.element.bind('collapse_left_panel', function () {
+ var splitter_width = $('div#left_panel_splitter').outerWidth(true);
+ var new_margin = splitter_width;
+ $('div#notebook_panel').animate({marginLeft : new_margin + 'px'}, 'fast');
+ });
+
+ this.element.bind('expand_left_panel', function () {
+ var splitter_width = $('div#left_panel_splitter').outerWidth(true);
+ var left_panel_width = IPython.left_panel.width;
+ var new_margin = splitter_width + left_panel_width;
+ console.log('expand', splitter_width, left_panel_width, new_margin);
+ $('div#notebook_panel').animate({marginLeft : new_margin + 'px'}, 'fast');
+ });
};
View
53 IPython/frontend/html/notebook/static/js/notebook_main.js
@@ -6,26 +6,6 @@
$(document).ready(function () {
-
- $('div#notebook_app').addClass('border-box-sizing ui-widget ui-widget-content');
- $('div#left_panel').addClass('border-box-sizing ui-widget');
- $('div#left_panel_splitter').addClass('border-box-sizing ui-widget ui-state-default');
- $('div#notebook_panel').addClass('border-box-sizing ui-widget');
- $('div#notebook').addClass('border-box-sizing');
-
- $('div#left_panel_splitter').click(function () {
- $('div#left_panel').toggle('fast');
- });
-
- $('div#left_panel_splitter').hover(
- function () {
- $('div#left_panel_splitter').addClass('ui-state-hover');
- },
- function () {
- $('div#left_panel_splitter').removeClass('ui-state-hover');
- }
- );
-
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
@@ -37,34 +17,17 @@ $(document).ready(function () {
}
});
- var do_resize = function () {
- var win = $(window);
- var w = win.width();
- var h = win.height();
- var header_height = $('div#header').outerHeight(true);
- var app_height = h - header_height - 2; // content height
- var pager_height = $('div#pager').outerHeight(true);
- var pager_splitter_height = $('div#pager_splitter').outerHeight(true);
- $('div#notebook_app').height(app_height + 2); // content+padding+border height
- $('div#left_panel').height(app_height);
- $('div#left_panel_splitter').height(app_height);
- $('div#notebook_panel').height(app_height);
- if (IPython.pager.expanded) {
- $('div#notebook').height(app_height-pager_height-pager_splitter_height);
- } else {
- $('div#notebook').height(app_height-pager_splitter_height);
- }
- console.log('resize: ', app_height);
- };
-
- $(window).resize(do_resize);
-
- IPython.notebook = new IPython.Notebook('div#notebook');
- IPython.notebook.insert_code_cell_after();
+ $('div#notebook_app').addClass('border-box-sizing ui-widget ui-widget-content');
+ $('div#notebook_panel').addClass('border-box-sizing ui-widget');
+ IPython.layout_manager = new IPython.LayoutManager();
IPython.pager = new IPython.Pager('div#pager', 'div#pager_splitter');
+ IPython.left_panel = new IPython.LeftPanel('div#left_panel', 'div#left_panel_splitter');
+ IPython.notebook = new IPython.Notebook('div#notebook');
- do_resize();
+ IPython.notebook.insert_code_cell_after();
+ IPython.layout_manager.do_resize();
+ IPython.pager.collapse();
// $("#menu_tabs").tabs();
View
16 IPython/frontend/html/notebook/static/js/pager.js
@@ -7,17 +7,18 @@ var IPython = (function (IPython) {
var utils = IPython.utils;
- var Pager = function (pager_selector, pager_toggle_selector) {
+ var Pager = function (pager_selector, pager_splitter_selector) {
this.pager_element = $(pager_selector);
- this.pager_toggle_element = $(pager_toggle_selector);
+ this.pager_splitter_element = $(pager_splitter_selector);
this.expanded = true;
+ this.percentage_height = 0.30;
this.style();
this.bind_events();
};
Pager.prototype.style = function () {
- this.pager_toggle_element.addClass('border-box-sizing ui-widget ui-state-default');
+ this.pager_splitter_element.addClass('border-box-sizing ui-widget ui-state-default');
this.pager_element.addClass('border-box-sizing ui-widget');
};
@@ -33,18 +34,19 @@ var IPython = (function (IPython) {
that.pager_element.show('fast');
});
- this.pager_toggle_element.hover(
+ this.pager_splitter_element.hover(
function () {
- that.pager_toggle_element.addClass('ui-state-hover');
+ that.pager_splitter_element.addClass('ui-state-hover');
},
function () {
- that.pager_toggle_element.removeClass('ui-state-hover');
+ that.pager_splitter_element.removeClass('ui-state-hover');
}
);
- this.pager_toggle_element.click(function () {
+ this.pager_splitter_element.click(function () {
that.toggle();
});
+
};
View
2  IPython/frontend/html/notebook/templates/notebook.html
@@ -54,7 +54,9 @@
<script src="static/js/codecell.js" type="text/javascript" charset="utf-8"></script>
<script src="static/js/textcell.js" type="text/javascript" charset="utf-8"></script>
<script src="static/js/kernel.js" type="text/javascript" charset="utf-8"></script>
+<script src="static/js/layout.js" type="text/javascript" charset="utf-8"></script>
<script src="static/js/pager.js" type="text/javascript" charset="utf-8"></script>
+<script src="static/js/leftpanel.js" type="text/javascript" charset="utf-8"></script>
<script src="static/js/notebook.js" type="text/javascript" charset="utf-8"></script>
<script src="static/js/notebook_main.js" type="text/javascript" charset="utf-8"></script>
<script src="static/codemirror2/lib/codemirror.js"></script>
Please sign in to comment.
Something went wrong with that request. Please try again.