Adapt to reddit's new expando icon

[erikdesjardins]

It'd be nice if we could roll with the new design and keep our distinction between expando types, but there's not too many pixels to work with. Otherwise we use reddit's icon (technically a loss of functionality) or clobber their CSS and keep what we have now.

I'm sorta thinking we could replace the <> on collapsed expandos with a small icon for each type, and keep the >< for all types of expanded expandos. (@githue any ideas?)

(I don't know if the big ones are used anywhere)

[jewel-andraia]

In the short term, I'm probably thinking clobber their CSS and keep what they have now. New icons based on reddit's style with badges would be neat.

I suspect the bigger ones are just for retina.

[jewel-andraia]

@githue it's probably a good opportunity to use high-res icons too, with background-size @erikdesjardins sounds good to me

[jewel-andraia]

@githue I agree with erikdesjardins' idea with the specific icon when non expanded, and the broken plus sign when expanded

@andytuba +1

[githue]

I found that the new expando style doesn't mesh well with the existing RES icons, the new default glyph is very simple and stylized which doesn't match the RES style. Furthermore, the gray background offers little contrast for the details to show through. When I placed the RES icons in the light gray circles they were difficult to distinguish among their surroundings.

Since the +/- symbols are gone we can use the entire circle shape and play with negative space, giving each icon a more distinct profile. If you want people to recognize different media types at a glance this is essential.

Here's my redesign:

And here's an animation:

CSS (for testing only): http://pastebin.com/LE3u0pTK

Further notes:

• There's a bug in 4.6.0 where the 'collapsed' class doesn't get removed on first click, I'll make a PR for that shortly.
• The CSS snippet linked above includes a new method for styling NSFW expandos, it uses mix-blend-mode which can be used in subreddit stylesheets.
• I'm iffy about making a high-res version because it would break even more themes.

[thybag]

Really liking the look of those new buttons :+1:

[erikdesjardins]

:+1:

I did immediately think "refresh" for the gifv icon, but I'm sure it'll be fine once I get used to it.

mix-blend-mode

Nice! If that also lets you make nightmode NSFW expandos red again, we can close #2630.

I'm iffy about making a high-res version because it would break even more themes.

Makes sense.

[githue]

The gifv icon could be a closed circle minus the arrow. I thought it might be too cryptic, but it could work.

[githue]

Nightmode version added:

[jewel-andraia]

Spritesheet looks great! I like the "restart/loop" icon for gifv.

[jewel-andraia]

Hmm, can we select just people who are seeing the new reddit expandos? I think it would be better for both users and support to maintain a consistent experience with the expando update rollout.

[githue]

I suppose we could beat them to the punch with 4.6.2, presuming they don't plan on changing the design.

Edit: I don't think we can target only selected-for-testing users.

[z11h]

These new icons seem really cool! Are they going to make it into the 4.6.2 release?

[jewel-andraia]

@ZakariaRidouh I'm hoping to push them pretty soon.

fyi v4.6.2 at the moment actually means "hotfixed via external CSS and then add into whatever's the next release".

[githue]

If someone could find the new expando-button CSS from reddit.com and paste it all into a pastebin that would be great. I briefly searched the codebase and didn't find anything.

[erikdesjardins]

3415