WordPress.org

Make WordPress Core

Opened 12 months ago

Closed 11 months ago

Last modified 11 months ago

#24290 closed enhancement (fixed)

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

Reported by: melchoyce Owned by: azaozz
Milestone: 3.6 Priority: normal
Severity: normal Version: 3.6
Component: Post Formats Keywords: needs-patch
Focuses: Cc:

Description

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

Attachments (19)

post-formats-sprite.png (8.4 KB) - added by melchoyce 12 months ago.
post-formats-sprite-32.png (21.3 KB) - added by melchoyce 12 months ago.
post-formats-sprite-64.png (62.3 KB) - added by melchoyce 12 months ago.
post-formats-vs.png (4.9 KB) - added by melchoyce 11 months ago.
16px
post-formats32-vs.png (11.6 KB) - added by melchoyce 11 months ago.
32px
post-formats64-vs.png (35.2 KB) - added by melchoyce 11 months ago.
64px
post-formats-vs-psds.zip (194.5 KB) - added by melchoyce 11 months ago.
PSDs
24290.diff (108.3 KB) - added by melchoyce 11 months ago.
24290.2.diff (99.4 KB) - added by melchoyce 11 months ago.
24290.3.diff (21.1 KB) - added by aaroncampbell 11 months ago.
Cleaned up to treat pngs as binary
post-formats.png (4.6 KB) - added by aaroncampbell 11 months ago.
post-formats32.png (10.6 KB) - added by aaroncampbell 11 months ago.
post-formats64.png (28.5 KB) - added by aaroncampbell 11 months ago.
post-formats64.2.png (30.5 KB) - added by melchoyce 11 months ago.
post-formats64-vs.2.png (37.7 KB) - added by melchoyce 11 months ago.
post-formats64-vs.3.png (36.7 KB) - added by saracannon 11 months ago.
blue sprite with double space inbetween
post-formats64.3.png (29.7 KB) - added by saracannon 11 months ago.
regular sprite with double space
postformat.zip (164.4 KB) - added by saracannon 11 months ago.
post format PSDs
24290.4.diff (3.4 KB) - added by aaroncampbell 11 months ago.

Download all attachments as: .zip

Change History (31)

comment:1 SergeyBiryukov12 months ago

  • Component changed from General to Post Formats
  • Milestone changed from Awaiting Review to 3.6
  • Version set to trunk

comment:2 aaroncampbell11 months ago

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

melchoyce11 months ago

16px

melchoyce11 months ago

32px

melchoyce11 months ago

64px

melchoyce11 months ago

PSDs

melchoyce11 months ago

comment:3 melchoyce11 months ago

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.

melchoyce11 months ago

comment:4 melchoyce11 months ago

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

aaroncampbell11 months ago

Cleaned up to treat pngs as binary

aaroncampbell11 months ago

comment:5 aaroncampbell11 months ago

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

comment:6 azaozz11 months ago

In 24294:

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

comment:7 azaozz11 months ago

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.

melchoyce11 months ago

comment:8 melchoyce11 months ago

These new icons should work.

saracannon11 months ago

blue sprite with double space inbetween

saracannon11 months ago

regular sprite with double space

saracannon11 months ago

post format PSDs

comment:9 follow-up: saracannon11 months ago

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 :)

aaroncampbell11 months ago

comment:10 aaroncampbell11 months ago

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

comment:11 azaozz11 months ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

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.

comment:12 in reply to: ↑ 9 azaozz11 months ago

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) {
*/
Note: See TracTickets for help on using tickets.