Notebook usability fixes #884

fperez · 2011-10-16T23:48:04Z

A number of small fixes for notebook usability, based on intensive 'in anger' use and feedback from @jdh2358 and others.

Note: it's NOT ready for merge, b/c I need help with one thing. I added a 'quick help' button that should at least be visible at the top and for the moment show the keybindings (later we can make a better quick help page). But right now that button:

doesn't get the right jquery styling
is too close to the left, it should be at the right, just left of the kernel status area
when clicked doesn't do anything.

I tried fixing all three of these and failed, a bit of JS help would be very welcome here. @ellisonbg and @minrk, if you guys can give me some pointers if you know, I'd be grateful and I can finish the job.

Once the quick help button thing is fixed, it's otherwise ready for review/discussion for merge. I'll be happy to take feedback on anything besides that button issue in the meantime.

Summary of changes that work (i.e., other than the broken quickhelp button):

add kernel restart dialog confirmation (it destroys the user session)
add missing keybindings
change language from 'terminal mode' to 'in-place execution' which is more descriptive
adjust spacing/padding and colors slightly for readability and better use of space in small screens.
add line numbering toggle to code cells. Triggered with C-m-l.
show keybindings in monospaced font.

Verified that all prompts align correctly on linux/chrome + ffox, and that input prompts up to 4 digits long still fit.

This makes the keybinding consistent with the rest, updated help dialog.

Help needed here, will discuss during pull request before merging.

…wsers.

minrk · 2011-10-17T06:33:21Z

One code note: You seem to have inserted a number of tabs, rather than soft-tabs into the js, so the diff on GH looks a bit funky.

fperez · 2011-10-17T07:02:15Z

Argh! Thanks for catching that... I guess emacs in javascript mode will insert tabs. I'll clean it up in a bit.

fperez · 2011-10-17T07:38:33Z

OK, fixed and pushed the tab cleanup (and obviously configured emacs so it wouldn't happen again!).

fperez · 2011-10-17T07:45:08Z

Note: GH seems to be updating slowly. I've pushed the changes but they're not appearing on the branch yet, so perhaps give it a few minutes. The last commit should be:

2b62313 Keep kernel-related bindings together in code.

minrk · 2011-10-17T17:38:47Z

IPython/frontend/html/notebook/static/css/notebook.css

@@ -200,7 +206,7 @@ div.input_area {
    color: black;
    border: 1px solid #ddd;
    border-radius: 3px;
-    background: #fafafa;
+    background: #f4f4f4;


Can I ask why you darkened the code background? I actually like the lighter color better. The dark background doesn't feel editable to me.

I tested it on several systems, with various combinations of ffox, chrome, chromium and monitors. Onn some of them the previous gray was barely distinguishable from the background. Can you let me know which is the darkest gray that seems OK to you? Ultimately we may want to make this user-configurable...

I also tried by using yellows, with things like fafaea and similar (basically B<R=G), but wasn't quite happy with any of the results.

Yes, I like to fafafa as well.

On Mon, Oct 17, 2011 at 12:01 PM, Fernando Perez
reply@reply.github.com
wrote:

@@ -200,7 +206,7 @@ div.input_area {
color: black;
border: 1px solid #ddd;
border-radius: 3px;

background: #fafafa;

background: #f4f4f4;

I tested it on several systems, with various combinations of ffox, chrome, chromium and monitors. Onn some of them the previous gray was barely distinguishable from the background. Can you let me know which is the darkest gray that seems OK to you? Ultimately we may want to make this user-configurable...

I also tried by using yellows, with things like fafaea and similar (basically B<R=G), but wasn't quite happy with any of the results.

Reply to this email directly or view it on GitHub:
https://github.com/ipython/ipython/pull/884/files#r174401

Brian E. Granger
Cal Poly State University, San Luis Obispo
bgranger@calpoly.edu and ellisonbg@gmail.com

@ellisonbg, can you try with the chrome debug console or firebug (or just by saving and reloading the css) intermediate grays between fa and f4? Perhaps we can move a few notches darker so on linux/chrome it's readable (it really isn't right now) without looking too dark on osx.

Another option would be to darken the outline around every cell a little. That currently is ddd but perhaps we could make it darker. It would higlight each cell a little more without messing with the editing area.

On my linux machines as well, I think it's much too dark, and I even find f9f9f9 to be darker than ideal. I think the outline is the more significant thing for delineating the code area.

If we darken the border, it can't be much darker, as it should definitely be lighter than the cell border which is only #a8, so #bbb is as dark as it could reasonably go, and I probably wouldn't go lower than #ccc.

minrk · 2011-10-17T18:10:52Z

@fperez the reason the changes aren't showing up here is you pushed to ipython/nb-usablility instead of fperez/nb-usability

fperez · 2011-10-17T18:58:53Z

Argh, I'm an idiot! Don't know how I managed to do that, I was obvoiusly too tired yesterday sorting several branches at the same time. Fixing it now.

fperez · 2011-10-17T19:06:56Z

OK, done. I did a forced push b/c I'd rebased locally, so do a clean reset.

fperez · 2011-10-17T19:07:38Z

Deleting nb-usability branch from main repo, that was never meant to be there.

fperez · 2011-10-17T21:22:58Z

@ellisonbg, we split the difference on the gray after review with @minrk at f7. One thing to note is that to see the full effect, it's worth loading a notebook with very long cells, like the display_protocol one in our examples. We also adjusted the number color to be a subdued blue, that would stand out better against a non-white background.

We also played with the idea of using a yellow like #f8f4e8 for the bg. I kind of like it, but it may stand out too much for other's taste.

Ultimately, we'll probably want to allow people to load their custom CSS, because in the end there isn't really a 'right' answer to this: to a good extent this depends on variables beyond our control like people's monitor brightness, lighting environment, visual system and simple personal taste. We can only find a sensible rough solution, not the ultimate perfect one for everybody.

Let us know if this looks reasonable to you. With @minrk's help, I'm fixing up the help button too...

Move header.js -> quickhelp.js, as it not longer acts on whole header.

Now multiple calls no longer show multiple instances of the shortcut dialog. Rather, clicking the quick help, or invoking `C-m h` will hide the dialog if shown.

Various Notebook usability fixes: - add kernel restart dialog confirmation (it destroys the user session) - add missing keybindings - change language from 'terminal mode' to 'in-place execution' which is more descriptive - adjust spacing/padding and colors slightly for readability and better use of space in small screens. - add line numbering toggle to code cells. Triggered with C-m-l. - show keybindings in monospaced font. - add QuickHelp button that is always visible and at the top. - add missing keybindings for kernel interrupt/restart from the kbd.

fperez · 2011-10-17T23:11:11Z

OK, I've merged this one after the feedback and @minrk's help. We'll keep fine-tuning UI things for a long time, but I think this gets us close to something fairly solid for new users. Thanks for all the help/review!

Various Notebook usability fixes: - add kernel restart dialog confirmation (it destroys the user session) - add missing keybindings - change language from 'terminal mode' to 'in-place execution' which is more descriptive - adjust spacing/padding and colors slightly for readability and better use of space in small screens. - add line numbering toggle to code cells. Triggered with C-m-l. - show keybindings in monospaced font. - add QuickHelp button that is always visible and at the top. - add missing keybindings for kernel interrupt/restart from the kbd.

fperez added 9 commits October 16, 2011 20:02

Add Ctrl-L as a way to toggle line-numbers for any individual code cell

e6ec9bc

Padding adjustments to better use vertical and horizontal whitespace.

7160056

Verified that all prompts align correctly on linux/chrome + ffox, and that input prompts up to 4 digits long still fit.

Add C-m-{'i', '.'} as keybindings for kernel interrupt/restart.

e4e174d

Use monospaced font for keybinding display.

0be16e0

Refactor line num. toggle into proper function, access via C-m-l.

b12c675

This makes the keybinding consistent with the rest, updated help dialog.

Add confirmation dialog to kernel restart action.

566748a

Change button labels in restart dialog to action words.

6c90928

Add quick help button: broken ATM, style and binding aren't working.

6492aa9

Help needed here, will discuss during pull request before merging.

Fix text cell color, was too light to be seen on certain monitors/bro…

249093d

…wsers.

Clean up accidentally introduced hard tabs in JS code.

0f5ba50

Keep kernel-related bindings together in code.

2b62313

minrk reviewed Oct 17, 2011
View reviewed changes

Adjust cell background and number color after review with @minrk.

fc0d8b1

minrk and others added 4 commits October 17, 2011 14:58

fix quickhelp widget

feffa59

Move header.js -> quickhelp.js, as it not longer acts on whole header.

show_keyboard_shortcuts -> toggle_keyboard_shortcuts

d8d1752

Now multiple calls no longer show multiple instances of the shortcut dialog. Rather, clicking the quick help, or invoking `C-m h` will hide the dialog if shown.

Underline quick help button key accelerator (h).

b80a26b

Adjust title area sizes to improve alignment.

89110cb

fperez merged commit 4cc4dc8 into ipython:master Oct 17, 2011

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Notebook usability fixes #884

Notebook usability fixes #884

fperez commented Oct 16, 2011

minrk commented Oct 17, 2011

fperez commented Oct 17, 2011

fperez commented Oct 17, 2011

fperez commented Oct 17, 2011

minrk Oct 17, 2011

fperez Oct 17, 2011

ellisonbg Oct 17, 2011

fperez Oct 17, 2011

minrk Oct 17, 2011

minrk commented Oct 17, 2011

fperez commented Oct 17, 2011

fperez commented Oct 17, 2011

fperez commented Oct 17, 2011

fperez commented Oct 17, 2011

fperez commented Oct 17, 2011

Notebook usability fixes #884

Notebook usability fixes #884

Conversation

fperez commented Oct 16, 2011

minrk commented Oct 17, 2011

fperez commented Oct 17, 2011

fperez commented Oct 17, 2011

fperez commented Oct 17, 2011

minrk Oct 17, 2011

Choose a reason for hiding this comment

fperez Oct 17, 2011

Choose a reason for hiding this comment

ellisonbg Oct 17, 2011

Choose a reason for hiding this comment

fperez Oct 17, 2011

Choose a reason for hiding this comment

minrk Oct 17, 2011

Choose a reason for hiding this comment

minrk commented Oct 17, 2011

fperez commented Oct 17, 2011

fperez commented Oct 17, 2011

fperez commented Oct 17, 2011

fperez commented Oct 17, 2011

fperez commented Oct 17, 2011