Post Format UI: Blue icons for colors-classic admin theme

[melchoyce]

I noticed I had never made blue icons, so here they are. Let me know if they need to be in a separate sprite.

[aaroncampbell]

Looks like we usually do separate blue and grey sprites (like icons32-2x.png and icons32-vs-2x.png). Melchoyce can you split these up? I know you had posted a .psd to #19570 but I'm not sure if it's the most recent, so if it's not can you also attach the newest file to that ticket?

Related:
#24331
#24322

[melchoyce]

16px

[melchoyce]

32px

[melchoyce]

64px

[melchoyce]

PSDs

[melchoyce]

24290.diff moves the post format icons from wp-admin.css to colors-fresh.css and colors-classic.css. I also readjusted the positioning based on the new post-formats32.png (removing post-formats-2x.png) and added the -vs versions of each icon file to colors-classic.css.

However, now that I'm writing this I realize I've done the retina portion wrong, so I'll fix that and re-post the new patch asap.

[melchoyce]

24290.2.diff​ tightens up the CSS for post formats, fixes retina for 16px icons, and adds retina for 32px icons.

[aaroncampbell]

Cleaned up to treat pngs as binary

[aaroncampbell]

24290.3.diff​ cleans up mel's patch, treating the pngs as binaries. All these images should go into wp-admin/images/:
post-formats.png​
post-formats32.png​
post-formats64.png​
post-formats-vs.png​
post-formats32-vs.png​
post-formats64-vs.png​
And wp-admin/images/post-formats-2x.png should be removed

[azaozz]

In 24294:

Post format retina icons for both color themes, props melchoyce, aaroncampbell. See #24290, see #24331.

[azaozz]

The spacing in the post-formats64 sprites is wrong. Should be exactly 2x of the spacing in post-formats32 so we can change background-size:... and it will fit without needing to redefine all background-position for each icon. This wil result in the 64 sprite being exactly twice the size of the 32 sprite, i.e. 1280 x 128.

Tweaked the css a bit more in [24294]. Includes the retina styling for the 32px icons too, should work as soon as the fixed sprites are added to wp-admin/images.

[melchoyce]

These new icons should work.

[saracannon]

blue sprite with double space inbetween

[saracannon]

regular sprite with double space

[saracannon]

post format PSDs

[saracannon]

I've attached psd's and pngs with double the space in-between the icons. The in-between measurements I got are as follows (varies because of icon width):

16 34 32 32 32 34 34 36 34 32 16 (regular)
32 68 64 64 64 68 68 72 68 64 32 (retina)

hope that works ok :)

[aaroncampbell]

24290.4.diff​ fixes an issue with the background-position being overridden by the background: directive. I changed it to use background-image to keep that from happening.

Uses post-formats64-vs.2.png​ and post-formats64.2.png​

[azaozz]

In 24297:

Post formats: add 32px retina icons for both color themes, tweak the css, "crush" the sprites. Props melchoyce, saracannon, aaroncampbell. Fixes #24290, fixes #24331.

[azaozz]

Replying to saracannon:

I've attached psd's and pngs with double the space in-between the icons.

For this to work right all sprite dimensions have to be 2 times larger, between the icons, left, right, top and bottom margins. Then when we scale the whole sprite with background-size it will look exactly like the smaller sprite and all positions will match.

Had to tweak the 64 sprites a bit: the 64px video icon is larger than 2 x 32px video icon, so had to move it couple of px to the right to prevent clipping.

An easy way to test retina icons on non-retina display is to comment out the @media selectors letting the retina styles overwrite the non-retina:

/*
@media print,
  (-o-min-device-pixel-ratio: 5/4),
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 120dpi) {
*/