Add UI element for indicating command/edit modes

[ellisonbg]

Command and edit mode should have a global indicator somewhere, probably in the R of the main toolbar where we are putting the new kernel indicator in PR #4842

It would be great to find a good icon for command/edit mode here:

http://fortawesome.github.io/Font-Awesome/3.2.1/icons/

[Carreau]

May I propose adding a class on the full body too ?

[ellisonbg]

Why? You can already use :before and :after with absolute positions and
div.cell.command_mode.selected to put something anywhere on the page.
@jdfreder has a nice example of this that he can share.

On Mon, Jan 27, 2014 at 10:28 AM, Matthias Bussonnier <
notifications@github.com> wrote:

May I propose adding a class on the full body too ?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/4889#issuecomment-33404802
.

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

[damianavila]

What do you think about these ones?

• Editor mode: http://fortawesome.github.io/Font-Awesome/3.2.1/icon/edit/
• Command mode: http://fortawesome.github.io/Font-Awesome/3.2.1/icon/check-empty/

[ellisonbg]

I like the edit one, not sure about the command mode.

On Mon, Jan 27, 2014 at 12:08 PM, Damián Avila notifications@github.comwrote:

What do you think about these ones?

• Editor mode:
  http://fortawesome.github.io/Font-Awesome/3.2.1/icon/edit/
• Command mode:
  http://fortawesome.github.io/Font-Awesome/3.2.1/icon/check-empty/

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/4889#issuecomment-33415941
.

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

[damianavila]

I like the edit one, not sure about the command mode.

Yes, I am not sure too... my reasoning was in command line there is no "pencil"... but I agree, it is a weak choice, I will look into another one...

[ivanov]

I like the edit one as well -- we should use that when in edit mode, and nothing when in command mode. For example, when you're executing a notebook trying to show it off, there's no reason to have extra indicators around. FWIW, this is also how vi does it - there's only and -- INSERT -- and -- VISUAL -- indicator at the bottom when those modes are being used - the command mode has no indication that you're in it.

[ellisonbg]

But for us command mode is the dangerous one - users need to know not to
type...

On Mon, Jan 27, 2014 at 3:15 PM, Paul Ivanov notifications@github.comwrote:

I like the edit one as well -- we should use that when in edit mode, and
nothing when in command mode. For example, when you're executing a notebook
trying to show it off, there's no reason to have extra indicators around.
FWIW, this is also how vi does it - there's only and (insert) and (visual)indicator at the bottom when those modes are being used - the command mode
has no indication that you're in it.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/4889#issuecomment-33434824
.

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

[takluyver]

I don't think it actually matters much which one is more dangerous -
neither icon is going to be a flashing red warning sign in any case. The
important thing is just to give the user a reliably visible indicator to
tell the two modes apart. Hopefully they'll pick up an intuitive feel for
when to type.

I actually quite liked Damian's suggestion of the square, and then a pencil
appearing in that square - it's fairly minimal, and we're not about to find
a good icon for command mode anyway (Min and I were just looking at the
list).

[ellisonbg]

Let's give those two icons a shot and see how it feels. Where would you put
them?

On Mon, Jan 27, 2014 at 4:44 PM, Thomas Kluyver notifications@github.comwrote:

I don't think it actually matters much which one is more dangerous -
neither icon is going to be a flashing red warning sign in any case. The
important thing is just to give the user a reliably visible indicator to
tell the two modes apart. Hopefully they'll pick up an intuitive feel for
when to type.

I actually quite liked Damian's suggestion of the square, and then a pencil
appearing in that square - it's fairly minimal, and we're not about to find
a good icon for command mode anyway (Min and I were just looking at the
list).

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/4889#issuecomment-33440552
.

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

[Carreau]

Why? You can already use :before and :after with absolute positions and
div.cell.command_mode.selected to put something anywhere on the page.

I want a different background color on edit and command mode.

[ellisonbg]

Ahh OK.

On Tue, Jan 28, 2014 at 12:15 AM, Matthias Bussonnier <
notifications@github.com> wrote:

Why? You can already use :before and :after with absolute positions and
div.cell.command_mode.selected to put something anywhere on the page.

I want a different background color on edit and command mode.

Reply to this email directly or view it on GitHubhttps://github.com//issues/4889#issuecomment-33458561
.

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

[jdfreder]

This is what @ellisonbg mentioned earlier:
Command mode

Edit mode

[ivanov]

I think we should put it in the upper right - because we already send other notification to that general vicinity, and it feels more natural to have one place (notification area is there, and this is just a persistent indicator notifying the user of the mode she's in).

If we want this indicator to be visible at all times, the file menu bar, but aligned to the notification area, is a natural choice. Otherwise, the edge of the notification area itself also works.

[takluyver]

The upper right would make sense, but the right hand end of the menu bar is
where we're putting the kernel status indicator, isn't it? I think it would
be harder to get an intuitive feel for them if they're right next to each
other. Perhaps the command/edit icon should go in or nearer the editing
area? Maybe an overlay in the lower right?

[jasongrout]

1. using red vs. green is bad for color blind people
2. when the original pull request was merged, I was thinking you could introduce a decently thick frame around the entire notebook (so most of a long page, it would appear as two borders on the left and right). The frame could change colors, or go from transparent to black. The background of the notebook could subtly change shade to emphasize the transition as well.

[ellisonbg]

I think that changes to the entire notebook page (background, border, etc.) are way too distracting.

[jasongrout]

At the very least, I second @Carreau's suggestion that a class be added to some high-level container for the notebook (like the body, or perhaps the #notebook div). Then a person could easily customize various elements to experiment with what is appropriate. I haven't tried different ideas, but I imagine that background changing would be too distracting, but a border changing would be just about right.

[minrk]

+1 to @ivanov's suggested placement in upper right with the notification area.

+1 to @Carreau's CSS class on div#notebook, with no style implication by default.

[ivanov]

I'm also +1 on @Carreau's CSS class on div#notebook, with no style implication by default.

[damianavila]

And I'm also +1 on I'm also +1 on @Carreau's CSS class on div#notebook, with no style implication by default. 😉

Despite the joke... I agree too...

[jdfreder]

I'm +1 on @damianavila 's +1 😉

[Carreau]

I'm +1 on @jdfreder +1ing @damianavila +1.

[damianavila]

And we close the cycle... 😆

[ellisonbg]

The decision at the dev meeting today was to use the icons @damianavila posted above and put the indicator next to the new kernel indicator.