Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

[notebook] Make pager resizable, and remember size... #1705

Merged
merged 5 commits into from

5 participants

@Carreau
Owner

Resizing to small collapse the pager keeping the size to at least 20%
height

(trying to) resize a collapsed pager to more than 10% "expand" it.

Pager can remember it size when toggling by clicking.

@Carreau Carreau Make pager resizable, and remember size...
Resizing to small collapse the pager keeping the size to at least 20%
height

(trying to) resize a collapsed pager to more than 10% "expand" it.

Pager can remember it size when toggling by clicking.
f581afa
@fperez
Owner

While you're working on the pager, how easy do you think it would be to also make it so q and Esc close it when it's focused? That would match the keyboard workflow of the terminal and qt console: type something that activates pager, use arrow keys to navigate for reading, use q or Esc when finished. Just a suggestion, if it looks tricky don't worry.

Sorry that I won't be able to review much for a few days, I'm at a conference...

@Carreau
Owner

Collapsing on esc is easy (and done) but as the pager does not get 'focus', and can't with current implementation, it is not easy to add navigation with arrow keys.

If we ever give the pager ability to get focus, we should implement the ability to switch focus on code-cell again without closing the pager, and have a clear indication that the pager is in focus. Right know I would wait for #1697 (js refactor) and #1509 (new tooltip and completer) to be merged. then we could make the pager a js 'widget' that allows to search for help, navigate with keys, talk to the kernel to render rest docstring...etc.

@fperez
Owner
@ellisonbg
Owner

I am not quit clear on what this PR implements. I was expecting to be able to resize the pager area by dragging the divider. But when I try this on Chrome, it doesn't drag. Furthermore, there is a glitch when I single click to collapse the pager: it first gets bigger for a split second and then collapses. Am I misunderstanding what this is supposed to do or am I hitting a bug?

@Carreau
Owner
@Carreau
Owner

Well it works ok for me on OS-X on chrome 20.xx safari 5.1.1 and (now) in FF 12.0... I had to clear the cache though.

I also see the fact that it gets 'slightly bigger' (~5-10px) pixels when collapsing, i'm not sure it's pretty fast, but it does not look different from master.

@ellisonbg
Owner
@Carreau
Owner

Works on FF an debian (about tells me FF7, but I doubt it...), I really don't understand why it does not works for you... There is I think around 30 pixels snap to differentiate 'click' from 'drag', could it be it ?

@ellisonbg
Owner
@ellisonbg
Owner

OK it is working for me now. It was the fact that I had an older version that was using document.height. In general, it is very important to use the jQuery height()/outerHeight() when computing the size of elements. You fixed this in a later commit and it works great.

IPython/frontend/html/notebook/static/js/pager.js
((39 lines not shown))
};
Pager.prototype.bind_events = function () {
var that = this;
- this.pager_element.bind('collapse_pager', function () {
- that.pager_element.hide('fast');
+ this.pager_element.bind('collapse_pager', function (event,extrap) {
@ellisonbg Owner

Even though this is JavaScript and not Python, I try to follow PEP 8 coding conventions, so 1 space after the comma in function argument please. Here and elsewhere.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
IPython/frontend/html/notebook/static/js/pager.js
((7 lines not shown))
this.percentage_height = 0.40;
+ 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 =($(body).height()-event.clientY-4);
+ var downprct = pheight/IPython.layout_manager.app_height();
+ downprct = Math.min(0.9,downprct);
+ if(downprct < 0.1) {
@ellisonbg Owner

Space after the if before the (.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
IPython/frontend/html/notebook/static/js/pager.js
((7 lines not shown))
this.percentage_height = 0.40;
+ this.pager_splitter_element = $(pager_splitter_selector)
+ .draggable({
+ containment: 'window',
+ axis:'y',
+ helper: null ,
+ drag: function(event,ui){
@ellisonbg Owner

Space between the ) and {.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
IPython/frontend/html/notebook/static/js/pager.js
((7 lines not shown))
this.percentage_height = 0.40;
+ 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 =($(body).height()-event.clientY-4);
+ var downprct = pheight/IPython.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) {
@ellisonbg Owner

Again space after if.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@ellisonbg
Owner

Minor changes to be made, but this is a great implementation of something that has been sorely needed. I am quite impressed at how easy the jQuery draggable stuff made this. Should be merge ready soon.

@Carreau Carreau pep 8 and js
space after comma, space around equal, space before if and curly bracket
e56bcf4
@Carreau
Owner

fixed.

@ellisonbg
Owner

So I have been thinking about making the notebook keyboard shortcuts modal. What I mean by this is that I want to make it so that selecting a cell does not focus the code mirror editor. This will enable us to implement things like multiple selection and other cell+notebook level keyboard shortcuts. In a modal editor you need a keyboard shortcut to initiate editing the selected cell. For that I am thinking about using RETURN, which will focus the code mirror editor. To stop editing, I think that ESC makes the most sense because it doesn't mean anything when you are editing a cell. BUT, if we use ESC for that, I don't think we should use ESC for collapsing the pager. Thoughts on this @fperez, @minrk, @takluyver ?

Other than this point, I think this PR is ready to merge, unless others want to test it more.

@minrk
Owner

Can we use q to collapse the pager? I think ESC is what ~100% of people will expect in a general browser context, but existing IPython users will likely be familiar with q to dismiss the pager.

@ellisonbg
Owner
@Carreau
Owner

sorry, I have been away for a few, trying to catch up.
qis a valid shortcut if the pager take focus and prevent from typing, but as it is now, the pager does not prevent from writing.

@ellisonbg, we can still have esc collapsing the pager only when cell are not selected, so that escwill collapse the pager, then leave edition mode (or other way around). It will just require some more thinking os esc key handeling.

@fperez
Owner

My thought would be that both esc and q should close the pager when focused. Ideally, the workflow would be:

  • user types foo?? and the pager opens.
  • Focus shifts automatically to the pager! So up/down arrows can be used to navigate it.
  • Esc and q both close the pager
  • User is back at the prompt, ready to continue working.

And the mouse is never needed for the above. Can we get that?

@takluyver
Owner
@Carreau
Owner

Pager is not focusable right now. It could be made focusable with some trick, hidden form etc, but IMHO we should wait until JS refactor is merged.

Then we could make it a separate widget, with much more interactivity, like searching, browsing help...

@ellisonbg
Owner
@Carreau
Owner

That's fine for me, but we can also remove the shortcut while working on cell shortcut, because esc to collapse pager is really usefull to avoid reaching the mouse... it depends on when the code for the cell will arrive.

I'll revert c8e47d4 then, can I merge when it is done ?
We can carry on discussing after put it will be one PR merged at least.

@ellisonbg
Owner
@Carreau Carreau merged commit fa31376 into from
@Carreau
Owner

thanks, merged.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on May 6, 2012
  1. @Carreau

    Make pager resizable, and remember size...

    Carreau authored
    Resizing to small collapse the pager keeping the size to at least 20%
    height
    
    (trying to) resize a collapsed pager to more than 10% "expand" it.
    
    Pager can remember it size when toggling by clicking.
Commits on May 7, 2012
  1. @Carreau

    esc collapse pager

    Carreau authored
Commits on May 8, 2012
  1. @Carreau

    fix firefox compatibility

    Carreau authored
Commits on May 9, 2012
  1. @Carreau

    pep 8 and js

    Carreau authored
    space after comma, space around equal, space before if and curly bracket
Commits on May 23, 2012
  1. @Carreau

    Revert "esc collapse pager"

    Carreau authored
    This reverts commit c8e47d4.
This page is out of date. Refresh to see the latest.
View
9 IPython/frontend/html/notebook/static/js/layoutmanager.js
@@ -20,8 +20,7 @@ var IPython = (function (IPython) {
$(window).resize($.proxy(this.do_resize,this));
};
-
- LayoutManager.prototype.do_resize = function () {
+ LayoutManager.prototype.app_height = function() {
var win = $(window);
var w = win.width();
var h = win.height();
@@ -38,7 +37,11 @@ var IPython = (function (IPython) {
} else {
toolbar_height = $('div#toolbar').outerHeight(true);
}
- var app_height = h-header_height-menubar_height-toolbar_height; // content height
+ return h-header_height-menubar_height-toolbar_height; // content height
+ }
+
+ LayoutManager.prototype.do_resize = function () {
+ var app_height = this.app_height() // content height
$('div#main_app').height(app_height); // content+padding+border height
View
18 IPython/frontend/html/notebook/static/js/notebook.js
@@ -231,19 +231,29 @@ var IPython = (function (IPython) {
return true;
});
- this.element.bind('collapse_pager', function () {
+ var collapse_time = function(time){
var app_height = $('div#main_app').height(); // content height
var splitter_height = $('div#pager_splitter').outerHeight(true);
var new_height = app_height - splitter_height;
- that.element.animate({height : new_height + 'px'}, 'fast');
+ that.element.animate({height : new_height + 'px'}, time);
+ }
+
+ this.element.bind('collapse_pager', function (event,extrap) {
+ time = (extrap != undefined) ? ((extrap.duration != undefined ) ? extrap.duration : 'fast') : 'fast';
+ collapse_time(time);
});
- this.element.bind('expand_pager', function () {
+ var expand_time = function(time) {
var app_height = $('div#main_app').height(); // content height
var splitter_height = $('div#pager_splitter').outerHeight(true);
var pager_height = $('div#pager').outerHeight(true);
var new_height = app_height - pager_height - splitter_height;
- that.element.animate({height : new_height + 'px'}, 'fast');
+ that.element.animate({height : new_height + 'px'}, time);
+ }
+
+ this.element.bind('expand_pager', function (event, extrap) {
+ time = (extrap != undefined) ? ((extrap.duration != undefined ) ? extrap.duration : 'fast') : 'fast';
+ expand_time(time);
});
$(window).bind('beforeunload', function () {
View
47 IPython/frontend/html/notebook/static/js/pager.js
@@ -15,30 +15,51 @@ var IPython = (function (IPython) {
var Pager = function (pager_selector, pager_splitter_selector) {
this.pager_element = $(pager_selector);
- this.pager_splitter_element = $(pager_splitter_selector);
- this.expanded = false;
+ var that = this;
this.percentage_height = 0.40;
+ 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 = ($(body).height()-event.clientY-4);
+ var downprct = pheight/IPython.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});
+ }
+ IPython.layout_manager.do_resize();
+ }
+ });
+ this.expanded = false;
this.style();
this.bind_events();
};
-
Pager.prototype.style = function () {
this.pager_splitter_element.addClass('border-box-sizing ui-widget ui-state-default');
this.pager_element.addClass('border-box-sizing ui-widget');
- this.pager_splitter_element.attr('title', 'Click to Show/Hide pager area');
+ 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 () {
- that.pager_element.hide('fast');
+ this.pager_element.bind('collapse_pager', function (event, extrap) {
+ time = (extrap != undefined) ? ((extrap.duration != undefined ) ? extrap.duration : 'fast') : 'fast';
+ that.pager_element.hide(time);
});
- this.pager_element.bind('expand_pager', function () {
- that.pager_element.show('fast');
+ this.pager_element.bind('expand_pager', function (event, extrap) {
+ time = (extrap != undefined) ? ((extrap.duration != undefined ) ? extrap.duration : 'fast') : 'fast';
+ that.pager_element.show(time);
});
this.pager_splitter_element.hover(
@@ -57,18 +78,18 @@ var IPython = (function (IPython) {
};
- Pager.prototype.collapse = function () {
+ Pager.prototype.collapse = function (extrap) {
if (this.expanded === true) {
- this.pager_element.add($('div#notebook')).trigger('collapse_pager');
this.expanded = false;
+ this.pager_element.add($('div#notebook')).trigger('collapse_pager', extrap);
};
};
- Pager.prototype.expand = function () {
+ Pager.prototype.expand = function (extrap) {
if (this.expanded !== true) {
- this.pager_element.add($('div#notebook')).trigger('expand_pager');
this.expanded = true;
+ this.pager_element.add($('div#notebook')).trigger('expand_pager', extrap);
};
};
@@ -91,7 +112,7 @@ var IPython = (function (IPython) {
var toinsert = $("<div/>").addClass("output_area output_stream");
toinsert.append($('<pre/>').html(utils.fixConsole(text)));
this.pager_element.append(toinsert);
- };
+ };
IPython.Pager = Pager;
Something went wrong with that request. Please try again.