Toolbar styling
Closed this issue · 32 comments
Remove borders between buttons, wrap the dropdown in a div to give it borders
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
#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
#141 (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
@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
No objections from me to switching.
@blink1073 using those images wouldn't slow it down or anything right?
I don't think so.
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
#141 (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
@blink1073 What's the best file format for the icons to be in?
A font file would be preferred, or SVG if that isn't available.
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
#141 (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
Great! We could include the font in this repo and release on npm with the appropriate license.
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).
@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
Thanks, that should do it, I'll fold it in tomorrow.
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:
@cameronoelsen what is the license for this font exactly?
CC BY 4.0 or GPL.
We also need an icon for the dropdown indicator on the "create new" button in the file browser.
And the folder, file, and notebook icons. We were also using angle-right and ellipsis for the breadcrumb display.
It might be easier to use font-awesome for the breadcrumb area, and icomoon everywhere else.
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?
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.
cc @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.
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...
@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
#141 (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
@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.
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:
—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#141 (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
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:—
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
#141 (comment)
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:—
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
<
#141 (comment)—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#141 (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
Closing since the Cal Poly interns are taking this over in Jupyterlab.