WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

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

Download all attachments as: .zip

Change History (31)

#1 @SergeyBiryukov
5 years ago

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

#2 @aaroncampbell
5 years 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

@melchoyce
5 years ago

16px

@melchoyce
5 years ago

32px

@melchoyce
5 years ago

64px

@melchoyce
5 years ago

#3 @melchoyce
5 years 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.

@melchoyce
5 years ago

#4 @melchoyce
5 years ago

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

@aaroncampbell
5 years ago

Cleaned up to treat pngs as binary

#5 @aaroncampbell
5 years 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

#6 @azaozz
5 years ago

In 24294:

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

#7 @azaozz
5 years 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.

#8 @melchoyce
5 years ago

These new icons should work.

@saracannon
5 years ago

blue sprite with double space inbetween

@saracannon
5 years ago

regular sprite with double space

@saracannon
5 years ago

post format PSDs

#9 follow-up: @saracannon
5 years 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 :)

#10 @aaroncampbell
5 years 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

#11 @azaozz
5 years 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.

#12 in reply to: ↑ 9 @azaozz
5 years 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.