Toolbar styling

[blink1073]

Remove borders between buttons, wrap the dropdown in a div to give it borders

[ellisonbg]

Here is what this style looks like (approximately)

@cameronoelsen

[blink1073]

Initial implementation in #147:

[ellisonbg]

Looks like the icons are not vertically centered. Usually I do this by setting the line-height to the font size

On Tue, Apr 5, 2016 at 12:11 PM, Steven Silvester notifications@github.com wrote:

Initial implementation in #147 https://github.com/jupyter/jupyter-js-notebook/pull/147:

[image: screen shot 2016-04-04 at 8 20 29 am] https://cloud.githubusercontent.com/assets/2096628/14294791/5b5275ee-fb38-11e5-9c07-32421f602f19.png

— You are receiving this because you commented. Reply to this email directly or view it on GitHub https://github.com/jupyter/jupyter-js-notebook/issues/141#issuecomment-205952918

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

[cameronoelsen]

@blink1073 Are we able to use the material design icons that I have used (and they are open source and free to use) in my mockups on the UI? Not sure if we wanted to stick with the fontawesome icon set, just things like the buttons in the file browser, the "x"s in the UI, along with the Jupyter Notebook toolbar icons seem to pop out at me and doesn't mesh as well as it could

[blink1073]

No objections from me to switching.

[cameronoelsen]

@blink1073 using those images wouldn't slow it down or anything right?

[blink1073]

I don't think so.

[ellisonbg]

Do you have a link to the MD icons?

On Tue, Apr 5, 2016 at 1:46 PM, Steven Silvester notifications@github.com wrote:

I don't think so.

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/jupyter/jupyter-js-notebook/issues/141#issuecomment-205980560

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

[cameronoelsen]

@blink1073 What's the best file format for the icons to be in?

[blink1073]

A font file would be preferred, or SVG if that isn't available.

[ellisonbg]

I showed Cameron how to make an icon font

On Wed, Apr 6, 2016 at 1:54 PM, Steven Silvester notifications@github.com wrote:

A font file would be preferred, or SVG if that isn't available.

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/jupyter/jupyter-js-notebook/issues/141#issuecomment-206563367

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

[blink1073]

Great! We could include the font in this repo and release on npm with the appropriate license.

[blink1073]

Unless the font is more widely applicable, in which case we can put it in jupyter-js-ui (which is a dependency of this repo).

[cameronoelsen]

@blink1073 Here is an icon font I generated, if you look inside the folder in the example.html file, it shows you what I put inside of it! jupyterlabwebfont.zip

[blink1073]

Thanks, that should do it, I'll fold it in tomorrow.

[blink1073]

These definitely belong in jupyter-js-ui, since we'll need them for the file browser. Also, we're using circle-o and circle from FontAwesome for the kernel status indicator. I tried using the radio indicator icons but it looks like they're not included in your bundle.

Otherwise, here is is so far:

[SylvainCorlay]

@cameronoelsen what is the license for this font exactly?

[blink1073]

CC BY 4.0 or GPL.

[blink1073]

We also need an icon for the dropdown indicator on the "create new" button in the file browser.

[blink1073]

And the folder, file, and notebook icons. We were also using angle-right and ellipsis for the breadcrumb display.

[blink1073]

It might be easier to use font-awesome for the breadcrumb area, and icomoon everywhere else.

[SylvainCorlay]

icomoon composes a font based on multiple sources that may have different licenses. (It is not just "free") so we should probably be careful about using this type of services. Are you guys not finding what you want in font-awesome/elusive/glyphicons pr is it just a matter of taste?

[SylvainCorlay]

Besides these icons from heterogeneous sets may not be pixel perfect at the same sizes - we should also be careful about that. font-awesome is pixel perfect at multiples of 14px, if we find everything we need in there we should probably stick with font-awesome.

[SylvainCorlay]

cc @jasongrout

[jasongrout]

@blink1073, @cameronoelsen - I don't see any licensing information in the zip file you put up. I agree with Sylvain that we need to be very careful about the licenses here, and document exactly what packs you used and what the licenses are, include the licenses, etc. At some point, we need to consolidate all of this licensing information for JupyterLab as well, and we make it much harder for ourselves if we don't clearly document things from the start.

Sticking with a single source for the fonts makes it much easier, I think.

[SylvainCorlay]

Besides, it would be quite difficult to reproduce this font if the icomoon proprietary web app was not available anymore.

If we want to make our own iconic font, we should use open tools such as fontforge etc...

[ellisonbg]

@cameronoelsen will probably need some help in generating his custom icon font using an approach that is reproducible. Also, because he did these font's himself, wouldn't they be whatever license we want?

On Thu, Apr 7, 2016 at 2:14 PM, Sylvain Corlay notifications@github.com wrote:

Besides, it would be quite difficult to reproduce this font if the icomoon proprietary web app was not available anymore.

If we want to make our own iconic font, we should use open tools such as fontforge etc...

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/jupyter/jupyter-js-notebook/issues/141#issuecomment-207090938

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

[SylvainCorlay]

@cameronoelsen will probably need some help in generating his custom icon font using an approach that is reproducible. Also, because he did these font's himself, wouldn't they be whatever license we want?

Ah, I thought these icons came from iconmoon too. If he made everything from custom svgs, I guess that it is ok.

[ellisonbg]

Sorry for the lack of context. In general, we are trying to follow Material Design for icons:

https://design.google.com/icons/

But there were a few icons they don't currently have so @cameronoelsen just designed those by hand in the MD style.

On Thu, Apr 7, 2016 at 10:16 PM, Sylvain Corlay notifications@github.com wrote:

Reopened #141 https://github.com/jupyter/jupyter-js-notebook/issues/141.

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/jupyter/jupyter-js-notebook/issues/141#event-619493115

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

[jasongrout]

Whether or not Cameron is the author, there should be clear license statements somewhere. The most convenient and appropriate license for Cameron's own work, I think, would be the standard project BSD license, Copyright (c) Jupyter Development Team. Is that okay?

On Fri, Apr 8, 2016 at 1:22 AM Brian E. Granger notifications@github.com wrote:

Sorry for the lack of context. In general, we are trying to follow Material Design for icons:

https://design.google.com/icons/

But there were a few icons they don't currently have so @cameronoelsen just designed those by hand in the MD style.

On Thu, Apr 7, 2016 at 10:16 PM, Sylvain Corlay notifications@github.com wrote:

Reopened #141 <https://github.com/jupyter/jupyter-js-notebook/issues/141 .

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub < https://github.com/jupyter/jupyter-js-notebook/issues/141#event-619493115>

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

— You are receiving this because you were mentioned.

Reply to this email directly or view it on GitHub https://github.com/jupyter/jupyter-js-notebook/issues/141#issuecomment-207219662

[ellisonbg]

Fine with me to use the standard project license.

On Thu, Apr 7, 2016 at 11:15 PM, Jason Grout notifications@github.com wrote:

Whether or not Cameron is the author, there should be clear license statements somewhere. The most convenient and appropriate license for Cameron's own work, I think, would be the standard project BSD license, Copyright (c) Jupyter Development Team. Is that okay?

On Fri, Apr 8, 2016 at 1:22 AM Brian E. Granger notifications@github.com wrote:

Sorry for the lack of context. In general, we are trying to follow Material Design for icons:

https://design.google.com/icons/

But there were a few icons they don't currently have so @cameronoelsen just designed those by hand in the MD style.

On Thu, Apr 7, 2016 at 10:16 PM, Sylvain Corlay < notifications@github.com> wrote:

Reopened #141 < https://github.com/jupyter/jupyter-js-notebook/issues/141 .

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub <

https://github.com/jupyter/jupyter-js-notebook/issues/141#event-619493115>

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

— You are receiving this because you were mentioned.

Reply to this email directly or view it on GitHub < https://github.com/jupyter/jupyter-js-notebook/issues/141#issuecomment-207219662

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/jupyter/jupyter-js-notebook/issues/141#issuecomment-207234485

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

[blink1073]

Closing since the Cal Poly interns are taking this over in Jupyterlab.