more semantic icons

[ivanov]

This adds classes to customize the folder and notebook document icons in the dashboard view.

I've also changed the notebook icon to have it better distinguished from the
folders and match e.g. Github's approach to this issue.

For the pixel-perfectionist, I've also made these icons a fixed width (they weren't before, I'm sure, like me, it's made you angry ; )

screenshot is coming.

closes #5555

[ivanov]

Here's a screenshot of the new icons

Whereas the old ones looked like this:

[ellisonbg]

The main issue that I see with the icon change is that the dashboard will soon display text files as well. We need to use an icon for the notebook that is both different from folders, but also from that of text files. The icon you choose for the notebook seems too generic to me - and similar to whatever we will use for text files.

[minrk]

GitHub also makes folder icons the same color as text, leaving files as grayscale. Do we want to follow suit? It seems to delineate files and folders nicely.

[ellisonbg]

I think I actually prefer to have icons that have a different color - like the rest of the GH API does. But we try out different things to see what works. Also, I think we should not get to into fine tuning this UI too much, as it is targeted for a big refactor.

[takluyver]

I think we're quickly going to run into UI problems if we add all kinds of file types while keeping these tiny icons. Not to mention the fact that it's already annoyingly long - if I start the notebook in my home directory, I have to scroll to see any notebooks, because the list of folders takes up so much space.

Perhaps when we add other file types, we should have named sections in the dashboard, for 'Notebooks', 'Folders', 'Other files'.

[ivanov]

I went with the file icon to be generic - I don't think github ever distinguishes the different file types

[minrk]

(technically, the folder icon is #80a6cd and the text is #4183c4, but they are similar)

[ivanov]

Here's a screenshot with the folders colored more like github

[ivanov]

How's this @ellisonbg? Just change the folder icon color, keeping our old notebook icon, which leaves the generic white text file icon for other files down the line:

[jdfreder]

I'm not @ellisonbg , but I think the / in the path should be colored blue too (to the right of the 🏠).

[ivanov]

@jdfreder that is not a change being discussed here. That's a separat[e|or] issue.

[ellisonbg]

I agree that when we start to include all file types that the dashboard listing is going to get really long. We probably do want to explore ways of listing directories, notebooks and files separately (tabs?).

However, I think that notebooks and regular text files should still have a different icon as they behave very differently. Sure they are documents, but one has a kernel attached and the other doesn't.

[ellisonbg]

About the color differences between the icons and the links. In general clickable links on web pages should have a unique styling/color that makes it clear to users where you can click. While I love GitHub's design choices overall, in this case, I think the choice to color non-clickable icons (nearly) the same color as links is less than ideal.

I am fine having different icons (dirs, nb, files) be different colors to help emphasize their differences, but I think that all of those colors should be different than our link colors.

[ellisonbg]

Another icon related design pattern that GitHub uses elsewhere on its page (not for the folder/file icons though :( is that if an icon is clickable, its changes color on hover either to the global link color or a darker version of its non-hover version.

[ellisonbg]

Some other icon brainstorming (I am not particularly fond of even our current icons choices):

For notebooks - more of an emphasis on code/data/viz:

http://fortawesome.github.io/Font-Awesome/3.2.1/icon/bar-chart/

I tend to prefer the closed folder icons to the open one we use now:

http://fortawesome.github.io/Font-Awesome/3.2.1/icon/folder-close/
http://fortawesome.github.io/Font-Awesome/3.2.1/icon/folder-close-alt/

[ivanov]

@ellisonbg yes, i also thought that the close folder icon would be better, but it looks flat and weird since there's nothing distinguishing the tab portion of the folder.

[ivanov]

Here's a summary of options, how do others feel?

	no highlight	highlight
current
alt
full

I'm leaning towards alt-no-highlight

[takluyver]

I think I like alt-no-highlight as well.

[minrk]

+1 alt-no-highlight

[damianavila]

+1 for option in [alt-no-highlight, full-no-highlight] 😉

[ellisonbg]

I too like the alt-no-highlight

Thanks for generating these options!

On Wed, Apr 16, 2014 at 7:22 PM, Damián Avila notifications@github.comwrote:

+1 for option in [alt-no-highlight, alt-full] [image: 😉]

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/5584#issuecomment-40674284
.

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