Migrate icons to material design

[juanis2112]

Here is the list of icons that need a completely new design along with ideas for them. (I will be updating this list as we go through the icons in our list)

• [x] General Preferences

  

• [x] Show sys path contents -> All caps, No outline, 3 letters

  

• [x] Show environment variables -> All caps, No outline, 3 letters

  

• [x] Delete all (for plots) -> First option (bigger gap between outlines)

  

• [x] Close all (files menu) -> New one with more spacing

  

• [x] Run configuration per file -> Smaller run button (Option 1)

  

• [x] Run file again -> :)

  

• [x] Run selection -> :)

  

• [ ] Run cell

• [ ] Debug cell

• [ ] Run cell and advance

• [x] Last edit location -> :)

  

• [x] Maximize/ Unmaximize -> Option 3 :)

  

• [ ] New package (mdi-folder-plus + "Py")

• [x] Compressed file -> First option with cut out :)

  

• [ ] Reset to factory default

• [ ] Horizontal split

• [ ] Dock

• [ ] PyLint

• [ ] Find next

• [ ] Find previous

[isabela-pf]

Since we have a lot of icons to review and not a lot of time to do it, I will be posting icons in batches as we point out which ones need customization. Our first round is Show sys.path contents and Show environment variables.

After some discussion about how abstract these commands are, we ended up agreeing to explore text-based icons. Based on existing Material icons with text, this is what I have for your consideration.

Show sys.path content

I'm not sure if there's a preferred abbreviation for this, so I've provided both SPC and SYS icons.

Rectangle

Text only

Show environment variables

Rectangle

Text only

In the interface

(I use SYS as the sys.path content example)

Rectangle

Text only

[juanis2112]

Thanks @isabela-pf I like the rectangle option for both and I think SPC should be better since I think SYS is used for other things.

[ccordoba12]

Thanks @isabela-pf for your work on this! I must say that I like this idea a lot! I think it'll help us to solve several issues with icons for which it's hard to come up with a design.

The main problem I see with the draft you posted above is that the font you selected is too thick, so it's really hard to tell the difference between ENV and SYS by reading them. So perhaps selecting a thinner font could solve that?

[isabela-pf]

@ccordoba12 I agree that it is harder to distinguish them in the rectangles. I can use a thinner font, but right now I am piecing together text from these existing Material Design icons and their guidelines.

I can experiment with other fonts and have a more Spyder-specific case of letter-based icons if you are interested. If not, I think the non-rectangle options are slightly more easy to tell apart, though I'd appreciate your thoughts on that as well.

(Also thanks @juanis2112 for letting me know spc is the better abbreviation)

[ccordoba12]

I can experiment with other fonts and have a more Spyder-specific case of letter-based icons if you are interested.

Yes, I am. I think other fonts (designed for small sizes) could look better.

[isabela-pf]

Also, I have two more icons based on our meeting! Here are Close all and Delete all. Both are modifications of the existing close and delete icons to match the "all" or "multiple" style of other material icons.

Close all

Delete all

The first option is a more dramatic stack of the two trash cans.

The second option is more subtle. I think it might be harder to spot at small sizes, but considering it only exists next to the standard delete icon, it might be dramatic enough.

[ccordoba12]

Close all

Mmmh, could you leave a bit bigger gap between the front and back Xs. Right now it's hard to see that the icon actually displays two Xs.

Delete all

I like the first option a lot!

[isabela-pf]

The below icons following up on previous feedback. Thanks again for the info! Since these were smaller changes, I show the previous version side by side for easier comparison.

Show sys.path content

Old

New

Show environment variables

Old

New

The text has been changed from the custom type drawn from existing Material icons to Rajdhani, a condensed, geometric typeface that allows for more space within characters. Depending on the letters used, we may need to modify the font if we want to continue to use it. With both text-based icons mocked up in the menu, the new options look like this:

Close all

Now with more spacing! Old

New

[isabela-pf]

I've got a few more simple updates for you all! These icons either recolor Material design icons or combine them.

Run

Run again

Run settings

I'm still experimenting with the size of the run portion while keeping the wrench easy to identify.

Run selection

I'm working on the cell-related icons in the main toolbar and am hoping to post them before the week is done. 🌻

[isabela-pf]

Cell-related icons are here! Because they are related, I was designing them together so they will work as a set. There are a two main options that I think will work. Just to be clear, I think we should choose one of the visual languages for all the icons not just a rectangle for one and tab cell for another. This makes sure that the idea of a cell is clear to users.

Run current cell

Because I had heard in meetings that people were interested in having Spyder's cells represented as %% to reinforce the syntax, I did start by working with that idea. I don't think any of these icons are successful though since it creates a lot of small pieces in a single icon and many times is difficult to tell that it is a % sign at all. Some examples:

As for directions I do think could work, my first option relies on the rectangle representation of the cell.

The second option looks less like the literal cell. The idea is that you are running based on the active place you are in the editor, so the line serves as a kind of marker like the active tab markers in panes. Its definitely more ambiguous, but it works well across the multiple icons.

Run current cell and advance

Rectangle cell version

Tab cell version

Debug current cell

Rectangle cell version

Tab cell version

[ccordoba12]

@isabela-pf, things are looking pretty nice! Thanks for your work!

My comments so far:

The text has been changed from the custom type drawn from existing Material icons to Rajdhani, a condensed, geometric typeface that allows for more space within characters

I still think they are not readable. Perhaps we can find a different font? Or instead of using the filled version of those icons we could use the outlined one? I think that could help too.

New

This one is ready for me.

Run

I really like the shade of green you selected for this one, it's really nice!

Run again

I also like it a lot!

Run settings

I much prefer the second one.

Run selection

This one is so cool! I know it didn't take much work to combine those two icons, but it looks really nice to me.

Run current cell

Among the options you suggested, I really like the second one (i.e. the one with two percentages). But I have one suggestion: make the percentages bigger.

Run current cell and advance

Double percentage and double play icon would work for me.

Debug current cell

Again, I'd prefer the double percentage and play/pause button next to it.

[isabela-pf]

Remaking the above list so I can check it off.

Here is the list of icons that need a completely new design along with ideas for them. (I will be updating this list as we go through the icons in our list)

• [ ] General Preferences

• [ ] Show sys path contents (Use letter Icons)
• [ ] Show environment variables (Use letter Icons)
• [x] Delete all (for plots)

(Double trashcan)

• [x] Close all (files menu)

(Double close sign)

• [x] Run configuration per file

(Add gap between wrench and play button)

• [x] Run file again

(Add gap between arrow and play button)

• [x] Run selection (Maybe try something with the cursor)
• [ ] Run cell
• [ ] Debug cell
• [ ] Run cell and advance
• [ ] Last edit location (Left arrow + Cursor)
• [ ] Maximize/ Unmaximize (Combine)
• [ ] New package (mdi-folder-plus + Python logo inside)
• [ ] Compressed file (mdi-zip-box + File)

[juanis2112]

Thanks! Let me know if I'm missing anything.

[isabela-pf]

Responding to @ccordoba12's request for cell based icons with the %% syntax incorporated, here are some ideas.

Overall, this is a difficult request because of the number of pieces required to fit in one small icon (three for each percentage and at least one for the action being done to a cell for a minimum of 7 parts to the icon). This also means that elements overlap and sometimes cover enough of another portion to make it difficult to tell that it is a %. I think these are the options that work the best for the series of cell-based icons:

Run cell

Vertical

Horizontal

Debug cell

Vertical

Horizontal

Run cell and advance

Vertical

Horizontal

[isabela-pf]

I also have some updates on text icons. Right now I am still using Rajdhani because I have not found a font that I think is more legible at this size.

Outlined Box

Since there was a request for seeing the options outlined (since reversed cut out looking things like that can be harder to read), here it is.

I don't think it solves the problem because it is still forcing the text to be quite small. Since Material Design's icon specifications ask for 2pxs of distance between elements in a 24x24px icon, that means the letters are only about 14px wide when you have to account for the extra outlines. And since we are not displaying 24x24 icons at their full size, it gets even smaller in the menu. Because of this, I wanted to give some options that are just the text since I think these will end up being the most legible.

All caps

All lowercase

Capital letters can also be harder to read because they all have the same height. It creates the visual effect of a straight line at small sizes, while using other cases can break that and be easier to identify. This isn't the case with the env here, but you can tell with the bottom of the p in spc.

Sentence/Camel case

Sentence/camel case—where both upper and lowercase characters are used—tends to be recommended as the easiest to read because it is most likely to create a distinctive shape (if you have questions about this, you can visit figure 1.7 on this article). Even though it may not be the most logical choice with our abbreviations, I wanted to try it since we are having such a legibility issue.

Further abbreviation

While we've had good reason to abbreviate these phrases with three letters, we can cut it shorter and allow the characters to be a little larger. For this example I've kept environments abbreviated as env both for comparing size with different character lengths and because env is the common abbreviation.

[isabela-pf]

Since I'm working through icons we haven't decided on yet, I also wanted to throw in one with simpler modifications to keep moving down the list. Here's General Preferences based on the above sketch.

[isabela-pf]

Finishing off first versions for this list of icons, so here are a handful more of simple combined icons.

Last edit location

New package

Compressed file

Depending whether or not we want to keep the cut out of the file corner, the zipper fits in different areas. I think either could work.

With cut out.

Without cut out.

[isabela-pf]

The last one on the current list (though I'm sure there are more that need to be done) is the maximize current pane icon! Right now there are two icons to maximize and minimize, but I think we can just have one button with a pressed state like we do with other icon buttons (such as the filter in the files pane). Let me know what you think!

Maximize current pane

Option 1. The closest to the current icons, but the most different from common visual language for maximizing a region of the screen. Still, this matches Material icons' style a lot better if we do want to keep this concept.

Option 2.

Option 3.

[juanis2112]

We are changing icon color to Green.B60

[isabela-pf]

Following up on this week's feedback, here are a few more iterations! Thanks in advance for the feedback.

New package

Because the icon on the folder must be so small, the Python logo became to hard to distinguish. Here it is abbreviated Pyinstead.

Reset Settings

This follows the other settings/preferences icon pattern and the pattern of sizes and placement for overlapping icons (such as run again and last edit location).

Cell-based icons

We also reviewed run cell, debug cell, and run cell and advance as a group since they should use the same visual language. Even though these weren't everyone's favorite options individually, I polished this set of icons since some of us agreed that these work best for all three icons needed.

[ccordoba12]

I like all these icons @isabela-pf! Great work, as usual!

[isabela-pf]

I was double checking the full icon manager list to make sure I was ready to make the PR to Spyder as soon as it is ready when I found a few more icons that I missed. I added them to the first comment above and have them for you below. Let me know if anything seems amiss!

Horizontal split

This is based off a Material icon that existed for a vertical split only. I kept the same shape and flipped the division.

Vertical split

I know I said that the vertical split icon already existed, but it is off center by one pixel in the original SVG. It became very noticeable in the horizontal split option since the sections were not able to be the same size. Because of this, I remade the vertical split option to match the horizontal split icon.

Dock

This icon already existed in Material design as open-in-app. I flipped the arrow down for our purposes.

Pylint

This is currently a composed icon. Option 1 is in the same direction as the current composed icon but is resized to match the pattern of the other previously composed icons.

Find next and find previous

These ended up being the trickiest icons to remake because both of the original icons are a little wide and can obscure each other very easily. I've narrowed it down to two directions I think will work.

Option 1 is closest to the existing icons. Find next

Find previous

Option 2 takes advantage of the open space in the magnifying glass in order to allow both icons to be a little larger. Find next

Find previous

[isabela-pf]

Option 2 find next and previous!