Skip to content
This repository

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

Merged
merged 5 commits into from almost 2 years ago

5 participants

Matthias Bussonnier Fernando Perez Brian E. Granger Min RK Thomas Kluyver
Matthias Bussonnier
Collaborator
Carreau commented May 06, 2012

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.

Matthias Bussonnier 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
Fernando Perez
Owner
fperez commented May 06, 2012

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...

Matthias Bussonnier
Collaborator
Carreau commented May 07, 2012

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.

Fernando Perez
Owner
fperez commented May 07, 2012
Brian E. Granger
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?

Matthias Bussonnier
Collaborator
Carreau commented May 08, 2012
Matthias Bussonnier
Collaborator
Carreau commented May 08, 2012

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.

Brian E. Granger
Owner
Matthias Bussonnier
Collaborator
Carreau commented May 08, 2012

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 ?

Brian E. Granger
Owner
Brian E. Granger
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))
30 49
     };
31 50
 
32 51
 
33 52
     Pager.prototype.bind_events = function () {
34 53
         var that = this;
35 54
 
36  
-        this.pager_element.bind('collapse_pager', function () {
37  
-            that.pager_element.hide('fast');
  55
+        this.pager_element.bind('collapse_pager', function (event,extrap) {
1
Brian E. Granger Owner
ellisonbg added a note May 08, 2012

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))
20 19
         this.percentage_height = 0.40;
  20
+        this.pager_splitter_element = $(pager_splitter_selector)
  21
+            .draggable({
  22
+                        containment: 'window',
  23
+                        axis:'y',
  24
+                        helper: null ,
  25
+                        drag: function(event,ui){
  26
+                            // recalculate the amount of space the pager should take
  27
+                            var pheight =($(body).height()-event.clientY-4);
  28
+                            var downprct = pheight/IPython.layout_manager.app_height();
  29
+                                downprct = Math.min(0.9,downprct);
  30
+                            if(downprct < 0.1) {
1
Brian E. Granger Owner
ellisonbg added a note May 08, 2012

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))
20 19
         this.percentage_height = 0.40;
  20
+        this.pager_splitter_element = $(pager_splitter_selector)
  21
+            .draggable({
  22
+                        containment: 'window',
  23
+                        axis:'y',
  24
+                        helper: null ,
  25
+                        drag: function(event,ui){
1
Brian E. Granger Owner
ellisonbg added a note May 08, 2012

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))
20 19
         this.percentage_height = 0.40;
  20
+        this.pager_splitter_element = $(pager_splitter_selector)
  21
+            .draggable({
  22
+                        containment: 'window',
  23
+                        axis:'y',
  24
+                        helper: null ,
  25
+                        drag: function(event,ui){
  26
+                            // recalculate the amount of space the pager should take
  27
+                            var pheight =($(body).height()-event.clientY-4);
  28
+                            var downprct = pheight/IPython.layout_manager.app_height();
  29
+                                downprct = Math.min(0.9,downprct);
  30
+                            if(downprct < 0.1) {
  31
+                                that.percentage_height = 0.1;
  32
+                                that.collapse({'duration':0});
  33
+                            } else if(downprct > 0.2) {
1
Brian E. Granger Owner
ellisonbg added a note May 08, 2012

Again space after if.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Brian E. Granger
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.

Matthias Bussonnier pep 8 and js
space after comma, space around equal, space before if and curly bracket
e56bcf4
Matthias Bussonnier
Collaborator
Carreau commented May 09, 2012

fixed.

Brian E. Granger
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.

Min RK
Owner
minrk commented May 22, 2012

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.

Brian E. Granger
Owner
Matthias Bussonnier
Collaborator
Carreau commented May 22, 2012

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.

Fernando Perez
Owner
fperez commented May 23, 2012

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?

Thomas Kluyver
Collaborator
Matthias Bussonnier
Collaborator
Carreau commented May 23, 2012

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...

Brian E. Granger
Owner
Matthias Bussonnier
Collaborator
Carreau commented May 23, 2012

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.

Brian E. Granger
Owner
Matthias Bussonnier Carreau merged commit fa31376 into from May 25, 2012
Matthias Bussonnier Carreau closed this May 25, 2012
Matthias Bussonnier
Collaborator
Carreau commented May 25, 2012

thanks, merged.

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

Showing 5 unique commits by 1 author.

May 06, 2012
Matthias Bussonnier 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
May 07, 2012
Matthias Bussonnier esc collapse pager c8e47d4
May 08, 2012
Matthias Bussonnier fix firefox compatibility 4e8b04d
May 09, 2012
Matthias Bussonnier pep 8 and js
space after comma, space around equal, space before if and curly bracket
e56bcf4
May 23, 2012
Matthias Bussonnier Revert "esc collapse pager"
This reverts commit c8e47d4.
7ac66fa
This page is out of date. Refresh to see the latest.
9  IPython/frontend/html/notebook/static/js/layoutmanager.js
@@ -20,8 +20,7 @@ var IPython = (function (IPython) {
20 20
         $(window).resize($.proxy(this.do_resize,this));
21 21
     };
22 22
 
23  
-
24  
-    LayoutManager.prototype.do_resize = function () {
  23
+    LayoutManager.prototype.app_height = function() {
25 24
         var win = $(window);
26 25
         var w = win.width();
27 26
         var h = win.height();
@@ -38,7 +37,11 @@ var IPython = (function (IPython) {
38 37
         } else {
39 38
             toolbar_height = $('div#toolbar').outerHeight(true);
40 39
         }
41  
-        var app_height = h-header_height-menubar_height-toolbar_height;  // content height
  40
+        return h-header_height-menubar_height-toolbar_height;  // content height
  41
+    }
  42
+
  43
+    LayoutManager.prototype.do_resize = function () {
  44
+        var app_height = this.app_height()  // content height
42 45
 
43 46
         $('div#main_app').height(app_height);  // content+padding+border height
44 47
 
18  IPython/frontend/html/notebook/static/js/notebook.js
@@ -231,19 +231,29 @@ var IPython = (function (IPython) {
231 231
             return true;
232 232
         });
233 233
 
234  
-        this.element.bind('collapse_pager', function () {
  234
+        var collapse_time = function(time){
235 235
             var app_height = $('div#main_app').height(); // content height
236 236
             var splitter_height = $('div#pager_splitter').outerHeight(true);
237 237
             var new_height = app_height - splitter_height;
238  
-            that.element.animate({height : new_height + 'px'}, 'fast');
  238
+            that.element.animate({height : new_height + 'px'}, time);
  239
+        }
  240
+
  241
+        this.element.bind('collapse_pager', function (event,extrap) {
  242
+            time = (extrap != undefined) ? ((extrap.duration != undefined ) ? extrap.duration : 'fast') : 'fast';
  243
+            collapse_time(time);
239 244
         });
240 245
 
241  
-        this.element.bind('expand_pager', function () {
  246
+        var expand_time = function(time) {
242 247
             var app_height = $('div#main_app').height(); // content height
243 248
             var splitter_height = $('div#pager_splitter').outerHeight(true);
244 249
             var pager_height = $('div#pager').outerHeight(true);
245 250
             var new_height = app_height - pager_height - splitter_height; 
246  
-            that.element.animate({height : new_height + 'px'}, 'fast');
  251
+            that.element.animate({height : new_height + 'px'}, time);
  252
+        }
  253
+
  254
+        this.element.bind('expand_pager', function (event, extrap) {
  255
+            time = (extrap != undefined) ? ((extrap.duration != undefined ) ? extrap.duration : 'fast') : 'fast';
  256
+            expand_time(time);
247 257
         });
248 258
 
249 259
         $(window).bind('beforeunload', function () {
47  IPython/frontend/html/notebook/static/js/pager.js
@@ -15,30 +15,51 @@ var IPython = (function (IPython) {
15 15
 
16 16
     var Pager = function (pager_selector, pager_splitter_selector) {
17 17
         this.pager_element = $(pager_selector);
18  
-        this.pager_splitter_element = $(pager_splitter_selector);
19  
-        this.expanded = false;
  18
+        var that = this;
20 19
         this.percentage_height = 0.40;
  20
+        this.pager_splitter_element = $(pager_splitter_selector)
  21
+            .draggable({
  22
+                        containment: 'window',
  23
+                        axis:'y',
  24
+                        helper: null ,
  25
+                        drag: function(event, ui) {
  26
+                            // recalculate the amount of space the pager should take
  27
+                            var pheight = ($(body).height()-event.clientY-4);
  28
+                            var downprct = pheight/IPython.layout_manager.app_height();
  29
+                                downprct = Math.min(0.9, downprct);
  30
+                            if (downprct < 0.1) {
  31
+                                that.percentage_height = 0.1;
  32
+                                that.collapse({'duration':0});
  33
+                            } else if (downprct > 0.2) {
  34
+                                that.percentage_height = downprct;
  35
+                                that.expand({'duration':0});
  36
+                            }
  37
+                            IPython.layout_manager.do_resize();
  38
+                       }
  39
+            });
  40
+        this.expanded = false;
21 41
         this.style();
22 42
         this.bind_events();
23 43
     };
24 44
 
25  
-
26 45
     Pager.prototype.style = function () {
27 46
         this.pager_splitter_element.addClass('border-box-sizing ui-widget ui-state-default');
28 47
         this.pager_element.addClass('border-box-sizing ui-widget');
29  
-        this.pager_splitter_element.attr('title', 'Click to Show/Hide pager area');
  48
+        this.pager_splitter_element.attr('title', 'Click to Show/Hide pager area, drag to Resize');
30 49
     };
31 50
 
32 51
 
33 52
     Pager.prototype.bind_events = function () {
34 53
         var that = this;
35 54
 
36  
-        this.pager_element.bind('collapse_pager', function () {
37  
-            that.pager_element.hide('fast');
  55
+        this.pager_element.bind('collapse_pager', function (event, extrap) {
  56
+            time = (extrap != undefined) ? ((extrap.duration != undefined ) ? extrap.duration : 'fast') : 'fast';
  57
+            that.pager_element.hide(time);
38 58
         });
39 59
 
40  
-        this.pager_element.bind('expand_pager', function () {
41  
-            that.pager_element.show('fast');
  60
+        this.pager_element.bind('expand_pager', function (event, extrap) {
  61
+            time = (extrap != undefined) ? ((extrap.duration != undefined ) ? extrap.duration : 'fast') : 'fast';
  62
+            that.pager_element.show(time);
42 63
         });
43 64
 
44 65
         this.pager_splitter_element.hover(
@@ -57,18 +78,18 @@ var IPython = (function (IPython) {
57 78
     };
58 79
 
59 80
 
60  
-    Pager.prototype.collapse = function () {
  81
+    Pager.prototype.collapse = function (extrap) {
61 82
         if (this.expanded === true) {
62  
-            this.pager_element.add($('div#notebook')).trigger('collapse_pager');
63 83
             this.expanded = false;
  84
+            this.pager_element.add($('div#notebook')).trigger('collapse_pager', extrap);
64 85
         };
65 86
     };
66 87
 
67 88
 
68  
-    Pager.prototype.expand = function () {
  89
+    Pager.prototype.expand = function (extrap) {
69 90
         if (this.expanded !== true) {
70  
-            this.pager_element.add($('div#notebook')).trigger('expand_pager');
71 91
             this.expanded = true;
  92
+            this.pager_element.add($('div#notebook')).trigger('expand_pager', extrap);
72 93
         };
73 94
     };
74 95
 
@@ -91,7 +112,7 @@ var IPython = (function (IPython) {
91 112
         var toinsert = $("<div/>").addClass("output_area output_stream");
92 113
         toinsert.append($('<pre/>').html(utils.fixConsole(text)));
93 114
         this.pager_element.append(toinsert);
94  
-    };   
  115
+    };
95 116
 
96 117
 
97 118
     IPython.Pager = Pager;
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.