New set of icons based on FontAwesome #2260

SylvainCorlay · 2015-03-22T02:42:32Z

@goanpeca @ccordoba12 opening this so that you can see what it looks like.

This is not intended to be merged as is. I want to add an intermediate layer with qtawesome that automates certain things like graying disabled font icons etc...

This requires the qtawesome 0.1.6, which I just pushed to pypi. Please update with pip install --upgrade.

Besides, I want to make the spyder font its own project so that people can use it for the web as well, with the same mechanism as fontawesome.

goanpeca · 2015-03-22T23:17:39Z

@SylvainCorlay looking at it now :)

I really like how the icons look inside the menus (small versions) but I am not entirely convinced on the look for the toolbars... maybe if we make the toolbars smaller it would look better?

Also somehow I feel there is some incoherence between the file toolbar icons ant the rest of the icons, the file icons are defined by contours, but all the other icons as defined as filled...

So instead of contour, maybe we should go for filled

SylvainCorlay · 2015-03-22T23:32:42Z

Indeed, the icons are really crisp in the menus but not pixel-perfect in the toolbars. Changing the size of the toolbars (bigger or smaller) should solve it.

I like the new step-into / step-out / step-over because it reflects better that the scopes in python are specified by indentation, and not with curly braces.
I should make a new step-forward one. This one is a bit confusing.
I want to design a specific glyph for the maximization of the current pane rather than the current icon_stack, (it would be similar to the original by Pierre). Also, some icons for selection still need to be drawn.

SylvainCorlay · 2015-03-23T00:24:29Z

(edited) indeed, the toolbar icons are much nicer when they are smaller - just pushed the change.

goanpeca · 2015-03-23T07:49:44Z

@SylvainCorlay checking them now, waayyyyyyy better :-)

It is looking very good (on linux so far), great job man. I think we just need to make sure that the rendered size is 14px or multiples (when font awesome icons are pixel perfect)

Do you think you can make a test with these? just to check if it looks more coherent :p

http://fortawesome.github.io/Font-Awesome/icon/file/
http://fortawesome.github.io/Font-Awesome/icon/folder-open/
We would need to make a filled save button..!

Update:
Could you maybe test some shadows... on the debug toolbar only just to have an idea :-) ?

goanpeca · 2015-03-23T13:10:14Z

Now on windows

We need to add the white background for the Spyder icon
the save all icon looses detail so I guess we need to see what is going on there... also we should cater for the case when the user has trutypefonts disabled on the OS, cause it will look bad on start, and this is an OS wide setting, so not sure what could be done inside Spyder, besides generating png files on the fly...
we maybe should keep the png file for the Spyder icon, it looks better...

@SylvainCorlay I guess there is something pending to take care of disabled buttons, right?

SylvainCorlay · 2015-03-23T15:06:01Z

@goanpeca I fixed the issue with the spyder logo. (it remains a glyph)
Regarding the disabled buttons, yes.
I am also not taking care of file types for now.

goanpeca · 2015-03-23T15:22:40Z

@SylvainCorlay cool :), what do you think of using filled vs, outlined icons?

On windows the spyder icon (in the about dialogue and in the taksbar) still looks funky

goanpeca · 2015-03-23T15:37:24Z

I think that we should include in the IconicFont(('fa', 'fontawesome-4.3.0.ttf', 'fontawesome-4.3.0-charmap.json', None, 14), call, the pixel perfect setting for the specific fonts used (if the fonts have any such setting) so that instead of defining a 0.9 arbitrary scale factor (line 14), we use a default value that makes sure the resulting icon is set to the pixel perfect value (14px for font awesome)

This would be auto-adjusted on every OS and would make the icons look the best regardless of screen resolution.
We could allow the setting of small/medium/big icons 14px, 28px, 42px, respectively, in the preferences
We need to make sure that the custom icons in ide-icons are aligned (to the best extent) in this 14x14 pixel grid.
We should define the scaling with respect to the pixel perfect setting and encourage users (including us ;) )to use integer values for scaling, or integer fractions(1/4,/1/3,1/2,1,2,3,4)
Final comment, (in windows at least) the spyder Icon glyph does not look good enough, compared to the original PNG file, so I would reconsider using a glyph for it

@ccordoba12, any tests on Mac? screenshot? just curious

SylvainCorlay · 2015-03-23T17:35:12Z

Yeah, would should do something along these lines for the pixel perfection.
I am not sure about filled vs outlined icons. What do you mean?

goanpeca · 2015-03-23T17:35:41Z

Why the icons in the browser (for the exact same size in pixels) look so much better than the ones in a Qt application?

Font Awesome website / qtawesome Screenshot

SylvainCorlay · 2015-03-23T17:37:07Z

Is this the anti-aliasing issue on Windows? In my case, they look very much alike.

goanpeca · 2015-03-23T17:44:50Z

For the Contour vs Filled I mean:

SylvainCorlay · 2015-03-23T17:45:56Z

OK, not all icons have both versions (like the save button).

goanpeca · 2015-03-23T17:47:03Z

yes I know, but besides the save button, most of the icons have a filled version, and my opinion is that the GUI looks more uniform if filled ones (I think it does look better) instead of a mixed of both. In the worst case, we make a filled save icon?

goanpeca · 2015-03-23T17:48:29Z

Ok I made a check with windows... and there is a catch, it seems that when ClearType (a windows only thing) is enabled... it results in aliased icons 😞

SylvainCorlay · 2015-03-23T17:52:51Z

OK, I can make some tries with filled icons. Although for fa.copy = copy and fa.clipboard = paste, I don't see much of an alternative and I have used it consistently everywhere.

ccordoba12 · 2015-03-23T23:24:56Z

Just a few comments from @goanpeca screenshot:

I don't like the Debug button. Please try to leave it as it was, i.e. a play-and-pause button
Step in, step out and step into are confusing. I know they are the classical icons used in IDEs but it's not easy to visually distinguish among them.
Maximize current plugin is not that clear as before.
The icons for running cells are too dense. I mean, I think too much is going on with them.
Python path manager is really hard to understand.
Probably the icons looked better if the toolbars were smaller :-)

SylvainCorlay · 2015-03-23T23:40:23Z

@ccordoba12 the screenshots are a bit out of date. Running the branch should show something nicer now. The toolbar is smaller.

I agree on the icon to maximize the current plugin. It is mostly a placeholder for now.

The step-out and step-into are really what I find much better about the new theme actually. If you find them too dense, the scale of the screenshot is not 1:1 and this was a screenshot to show the issues with windows and anti-aliasing.

PS: do you still connect on gitter?

ccordoba12 · 2015-03-23T23:51:43Z

Good to know! Sorry for not being on gitter. I was very busy finishing 2.3.4 and other things for the next Anaconda release, so I wanted to focus just on that. I'll come back to gitter this week :-)

goanpeca · 2015-03-24T12:42:28Z

@ccordoba12 thanks for the comments, I agree with all of them :-), this is still a work in progress so hold on for some updates soon.

SylvainCorlay · 2015-04-05T19:18:08Z

I've got around 250 instances of call to qta.icon as of now. I have redesigned all the glyphs of the spyder font to be pixel-perfect at the same sizes as the font-awesome ones (14px and multiples) .
A few important ones are still missing, specifically, Run selection and Select all (See request FortAwesome/Font-Awesome#4842 but will probably make one in the spyder font)

ccordoba12 · 2015-04-05T23:30:02Z

It seems a rebase is needed here :-)

SylvainCorlay · 2015-04-06T04:20:03Z

Just rebased. Will create the icon manager we talked about with the freedesktop names sometimes in the week.

goanpeca · 2015-04-09T15:12:08Z

@SylvainCorlay, can you rebase to see if we can get rid of the Failed travis test?

ccordoba12 · 2015-06-06T20:05:55Z

spyderlib/widgets/findinfiles.py

@@ -619,7 +619,7 @@ def create_dir_item(dirname, parent):
                displayed_name = dirname
            item = QTreeWidgetItem(parent, [displayed_name],
                                   QTreeWidgetItem.Type)
-            item.setIcon(0, get_std_icon('DirClosedIcon'))
+            item.setIcon(0, ima.icon('DirOpenIcon'))


Why this change in the icon name?

ccordoba12 · 2015-06-06T20:24:50Z

Ok, first review done.

SylvainCorlay · 2015-06-07T15:11:35Z

@ccordoba12 I moved the icon manager, followed your suggestions.

for the pythonpath icons, there were two png files which were the same icon with different sizes. I just use the bigger one now (hence only one entry in the icon manager)
there was no package_collapsed.png file anyway.

SylvainCorlay · 2015-06-10T19:56:39Z

@ccordoba12 any update?

ccordoba12 · 2015-06-10T20:00:51Z

Yes, please make Spyder 2 the default theme for now. When Spyder 3 is finished, we can make it the default :-)

SylvainCorlay · 2015-06-10T20:06:08Z

Done. The merge button is in the lower-right area of the page ;)

ccordoba12 · 2015-06-10T20:10:40Z

spyderlib/config.py

@@ -163,6 +163,7 @@ def is_ubuntu():
 DEFAULTS = [
            ('main',
             {
+              'icon_theme': 'spyder 3',


Not yet :-) Here it needs to be spyder 2 too.

ccordoba12 · 2015-06-10T20:15:42Z

Ok, waiting to hear from Travis before pressing the green button!

I tested things in Qt4 and 5 and I'm glad to report they are working fine :-)

SylvainCorlay · 2015-06-10T20:31:30Z

Awesome. There are a couple of icon related prs coming your way, that depend on this.

use qtawesome icons only for the outline explorer, but base icon colors on syntax coloring theme.
pixel-perfect outline explorer icons.

ccordoba12 · 2015-06-10T20:34:03Z

Ok, here we go!

New set of icons based on FontAwesome

ccordoba12 · 2015-06-10T20:41:25Z

@SylvainCorlay, I just noticed some small errors after merging (damn!): Some icons that are inherited from the operating system are missing in Spyder 2!

The ones I can't see after a quick inspection are:

in the Working directory toolbar: Browse a working dir
In the File Explorer plugin: Previous and next buttons
In the Find widget (i.e. the one you get after pressing Ctrl+F in the Editor): Next result

Please fix these issues ASAP :-)

SylvainCorlay · 2015-06-10T21:51:35Z

Hum this should work normally. I will fix tonight.

SylvainCorlay · 2015-06-10T21:57:18Z

I see what is going on. The commit where I fixed this was lost in a rebase. It is really simple.

SylvainCorlay · 2015-06-11T00:37:47Z

@ccordoba12 : fixed in #2480.

ccordoba12 added the Spyder-Gui label Mar 23, 2015

ccordoba12 added this to the v2.4 milestone Mar 23, 2015

ccordoba12 assigned SylvainCorlay Mar 23, 2015

ccordoba12 changed the title ~~Ide icons~~ New set of icons based on FontAwesome Apr 5, 2015

ccordoba12 added the type:Enhancement label Apr 5, 2015

SylvainCorlay force-pushed the ide-icons branch from b2f3a9a to c27856a Compare April 6, 2015 04:15

ccordoba12 reviewed Jun 6, 2015
View reviewed changes

SylvainCorlay added 2 commits June 7, 2015 10:11

Correction post first review

65ce8d2

Displace icon_magaer to utils

1628c3b

SylvainCorlay force-pushed the ide-icons branch from 07e0d9d to 1628c3b Compare June 7, 2015 14:32

SylvainCorlay added 2 commits June 7, 2015 10:44

resample icons

29cfca1

pythonpath icon

36dccc1

old fullscreen icons

4342347

Nodd mentioned this pull request Jun 10, 2015

Fix broken png files: libpng 1.6.2 and newer has stricter iCCP rules #2216

Merged

ccordoba12 reviewed Jun 10, 2015
View reviewed changes

spyder 2 theme

45381a7

SylvainCorlay force-pushed the ide-icons branch from 233669f to 45381a7 Compare June 10, 2015 20:13

ccordoba12 added a commit that referenced this pull request Jun 10, 2015

Merge pull request #2260 from SylvainCorlay/ide-icons

d8293a0

New set of icons based on FontAwesome

ccordoba12 merged commit d8293a0 into spyder-ide:master Jun 10, 2015

SylvainCorlay deleted the ide-icons branch June 10, 2015 20:34

ccordoba12 mentioned this pull request Jul 14, 2015

Icons as vector graphics to support retina displays #2210

Closed

New set of icons based on FontAwesome #2260

New set of icons based on FontAwesome #2260

Conversation

SylvainCorlay commented Mar 22, 2015

goanpeca commented Mar 22, 2015

SylvainCorlay commented Mar 22, 2015

SylvainCorlay commented Mar 23, 2015

goanpeca commented Mar 23, 2015

goanpeca commented Mar 23, 2015

SylvainCorlay commented Mar 23, 2015

goanpeca commented Mar 23, 2015

goanpeca commented Mar 23, 2015

SylvainCorlay commented Mar 23, 2015

goanpeca commented Mar 23, 2015

SylvainCorlay commented Mar 23, 2015

goanpeca commented Mar 23, 2015

SylvainCorlay commented Mar 23, 2015

goanpeca commented Mar 23, 2015

goanpeca commented Mar 23, 2015

SylvainCorlay commented Mar 23, 2015

ccordoba12 commented Mar 23, 2015

SylvainCorlay commented Mar 23, 2015

ccordoba12 commented Mar 23, 2015

goanpeca commented Mar 24, 2015

SylvainCorlay commented Apr 5, 2015

ccordoba12 commented Apr 5, 2015

SylvainCorlay commented Apr 6, 2015

goanpeca commented Apr 9, 2015

ccordoba12 Jun 6, 2015

Choose a reason for hiding this comment

ccordoba12 commented Jun 6, 2015

SylvainCorlay commented Jun 7, 2015

SylvainCorlay commented Jun 10, 2015

ccordoba12 commented Jun 10, 2015

SylvainCorlay commented Jun 10, 2015

ccordoba12 Jun 10, 2015

Choose a reason for hiding this comment

ccordoba12 commented Jun 10, 2015

SylvainCorlay commented Jun 10, 2015

ccordoba12 commented Jun 10, 2015

ccordoba12 commented Jun 10, 2015

SylvainCorlay commented Jun 10, 2015

SylvainCorlay commented Jun 10, 2015

SylvainCorlay commented Jun 11, 2015