Thanks for doing that !

I think we want something a more subtle, likely an icon (from https://fortawesome.github.io/Font-Awesome/icons/ ?) that change depending on the state, and likely with less strength in color.

My guess is that @ellisonbg and @cameronoelsen will want to make some design mocks !

Thanks !

An tip: you might be able to set the text with css using content: that would allow to change that with themes !

Thanks for the content: type in the CSS!

If anyone has some design mocks, I'll gladly update the PR accordingly. Else, I can try to come up with a better UI, but am not very good at it :)

I will work with @cameronoelsen on the design side

On Fri, Apr 1, 2016 at 4:37 PM, Lucas Verney notifications@github.com
wrote:

Thanks for the content: type in the CSS!

If anyone has some design mocks, I'll gladly update the PR accordingly.
Else, I can try to come up with a better UI, but am not very good at it :)

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#1293 (comment)

Brian E. Granger
Associate Professor of Physics and Data Science
Cal Poly State University, San Luis Obispo
@ellisonbg on Twitter and GitHub
bgranger@calpoly.edu and ellisonbg@gmail.com

Ok. Thanks!

@ellisonbg @cameronoelsen News on design ?

We were thinking that 1.) the design should be something that will work in both the current notebook as well as JupyterLab and 2.) it should be subtle and somehow connect to the actual document being run (hence why the alert is at the very top of the notebook document before the user starts running the cells). It seemed that when we put the untrusted symbol and text in the toolbar, it gets confused with either the kernel that is running or whether the document was autosaved or not.

Seeing that "trusted" means that the user has run all of the cells in the document, we could either have this "untrusted notification" be only dismissable (no buttons, only clickable to dismiss) or let the user decide if they either want to dismiss it or trust it on the spot (action buttons that are similar to the dialogs that are being built in JupyterLab).

Untrust notification with action buttons (dismiss and trust)

Untrust notification with only dismiss on click

I personally am leaning towards the notification only being dismissable without the buttons (since it is smaller and doesn't require user input). Also, this notification will stay at the top of the document until the cells are run and "trusted"

all-gray might be a little too subtle for untrusted

I definitely think it shouldn't have the trust button - it makes it too easy to trust a notebook without really understanding what that means. It looks like a dialog, and we know that users seeing a dialog typically just click the first thing they see that looks like it will make it go away.

I definitely think it shouldn't have the trust button - it makes it too easy to trust a notebook without really understanding what that means. It looks like a dialog, and we know that users seeing a dialog typically just click the first thing they see that looks like it will make it go away.

Agreed.

@Carreau @takluyver Do you guys like the placement of the dialog box in the top left of the document instead of the toolbar?

all-gray might be a little too subtle for untrusted

Not sure about that. All grey seem fine to me.

Though:
I would likely put notification on right, as many user will have a title or text in first cell, and thus the notification will be hiding content.

@Carreau Here is the notification on the righthand side, good point!

Or if we have it on the lefthand side, is there a way to have the content of the notebook fall under the dialog? I like it on the left only because it aligning with most of the content in the toolbar

Do you guys like the placement of the dialog box in the top left of the document instead of the toolbar?

I'm not sure. I'm a bit concerned that it will feel like unnecessary clutter. When you scroll the notebook, does it scroll too, or float wherever you are?

Also, I think it should have an (i) for more information about what that means.

@takluyver It will definitely stay in place at the top and not float as you scroll, I think when a user loads up the document and sees it, it doesn't have to get more in the way while scrolling. Trying out adding an information icon to see how that looks, should have it posted soon

Dialog with information icon

Gets a little hard designing such a small dialog with the exclamation icon along with the "i" icon, but we could take out the exclamation mark altogether and just put the "i" in a circle instead in it's place

Last one looks nice to me

I think this is converging. I like the last one, but my only comment is
that the "!" and "i" look similar visually but are not aligned vertically.
I agree we need someway for a user to get more information. Maybe some
things to try:

• Just an "i" in a circle?
• Vertically align the "!" and "i"?
• Use text "This notebook is untrusted (info)"?

On Fri, Apr 8, 2016 at 4:07 PM, Min RK notifications@github.com wrote:

Last one looks nice to me

—
You are receiving this because you were assigned.
Reply to this email directly or view it on GitHub
#1293 (comment)

Brian E. Granger
Associate Professor of Physics and Data Science
Cal Poly State University, San Luis Obispo
@ellisonbg on Twitter and GitHub
bgranger@calpoly.edu and ellisonbg@gmail.com

I like the last one. As @minrk I think light grey might be too subtle?

Concerning @cameronoelsen remark that on the left it would be aligned, is there a reason for the toolbar to be slightly shifted to the right with respect to the notebook content? (or is it an illusion)

@Phyks I took a screenshot of the notebook, I think you are right with it being aligned to the right and not aligning on the left-hand side:

I just opened a new issue related to it here @Phyks #1345. Nice find!

@ellisonbg I think this one looks more natural. Adding the information icon inside the circle and the spacing and alignment between everything helped a lot with putting pertinent information closer to each other. What do you think?

@cameronoelsen Thanks for the double check!

@cameronoelsen Concerning your latest screenshot, I think it is a bit hard to distinguish between the exclamation point (not clickable) and the information button (which is clickable). Isn't it a bit misleading?

And, if the alignment issue can be easily fixed, what about putting the notification on the left hand side? (not sure it is way better though)

@Phyks Does this change help with that confusion of which one is actionable vs. not?

Also, @Phyks I like the notification at the top left of the document more so too, but @Carreau made a good point that most user notebook titles are aligned left at the top of the document and having the notification on the left hand side will most likely cover a good amount of notebooks with titles there.

But, if there is a way to make the content of the document to start underneath of the notification or if this issues doesn't affect as many users as we are thinking, I definitely think the left is where to place it since it aligns with the toolbar content.

Here is the notification with the information symbol enlarged to be the height of the font:

I think this last version works pretty well. I know the grey isn't too
strong, but I think that reflects the relative importance of the
notification well.

On Tue, Apr 12, 2016 at 4:03 PM, Cameron Oelsen notifications@github.com
wrote:

Here is the notification with the information symbol enlarged to be the
height of the font:

[image: righttool]
https://cloud.githubusercontent.com/assets/6437976/14478183/267f91f4-00c8-11e6-9eb3-39da25286047.png

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#1293 (comment)

Brian E. Granger
Associate Professor of Physics and Data Science
Cal Poly State University, San Luis Obispo
@ellisonbg on Twitter and GitHub
bgranger@calpoly.edu and ellisonbg@gmail.com

Concerning your latest screenshot, I think it is a bit hard to distinguish between the exclamation point (not clickable) and the information button (which is clickable). Isn't it a bit misleading?

We don't need to have only the icon clickable, the all notification can, so I would just remove the i in the circle, but we can try that later.

Also, dumb question, we already have a notification area, which is meant for notification, notification that can be sticky. Why not use it ?

@cameronoelsen 👍 for your last design!

@Carreau What does the notification area / individual notifications look like in the notebook?

Look like that:

Trying to revive this one.

@ellisonbg there is already most of the code ready, could this be iterated on by your students, to get something in ? it would be nice to have @Phyks code integrated. Thanks.

Ok, i'm going to bump that to 4.3, and we'll move forward even if we don't get the design perfectly. I'll try to get to it next week.

I'd be willing to implement whatever design spec we've agreed upon. It looks like consensus is currently #1293 (comment).

Requirements:

• Display the notification if the notebook is untrusted
• Clicking on the notification will dismiss it?

@Carreau Do we currently have a notification/alert component that I could use to implement this? We have Bootstrap's alert which offers the same functionality but different presentation.

@Carreau Do we currently have a notification/alert component that I could use to implement this? We have Bootstrap's alert which offers the same functionality but different presentation.

No we don't have anything specific, just the notification widgets/notification are, but they are in the toolbar.

I don't think we should dismiss the notification on click,we might just want to pop-up a longer dialog that explain what untrusted means.

From the experience with my own little trusted notebook indicator here, I would like to add, that it is useful to have a persistent indication if the notebook is trusted.

@Carreau I just saw your comment about the notifiction area. This seems like a good solution given that's how other notifications (such as kernel error) are presented. I will share a quick implementation of this...

See #1658 for an implementation using the notebook's notification widgets.

Merged #1658 (comment)

Thanks a lot all, to @gnestor to get the ball rolling on that and to @Phyks to starting that originally.