Make WordPress Core

Opened 11 years ago

Closed 11 years ago

Last modified 11 years ago

#26170 closed defect (bug) (fixed)

Replace PNG-based ratings stars with dashicons

Reported by: iammattthomas's profile iammattthomas Owned by: dd32's profile dd32
Milestone: 3.8 Priority: high
Severity: minor Version: 3.8
Component: Administration Keywords:
Focuses: ui Cc:


The .star-holder/.star/.star-rating styles used for ratings stars on plugin-install.php should be replaced with the corresponding equivalents in Dashicons.

Attachments (3)

stars-colors.png (570.9 KB) - added by iammattthomas 11 years ago.
Example of ratings stars using Dashicons and $highlight-color
26170.diff (7.5 KB) - added by dd32 11 years ago.
26170.2.diff (480 bytes) - added by melchoyce 11 years ago.

Download all attachments as: .zip

Change History (15)

#1 @iammattthomas
11 years ago

  • Cc mt@… added

I'll pick this task up.

#2 @SergeyBiryukov
11 years ago

  • Keywords ui-focus added
  • Milestone changed from Awaiting Review to 3.8

11 years ago

Example of ratings stars using Dashicons and $highlight-color

#3 @iammattthomas
11 years ago

The way the ratings stars are implemented don't allow a simple swap-out of Dashicons for PNGs. Since a solution will require more code-fu than I've got, I've just mocked up how I imagine stars working with Dashicons and the $highlight-color from color schemes.

  • Unfilled stars use dashicons-star-empty, glyph \f154. Color is # 777 gray.
  • Filled stars use dashicons-star-filled, glyph \f155. Color is $highlight-color, # 0074a2 by default.
Last edited 11 years ago by iammattthomas (previous) (diff)

#4 @helen
11 years ago

While we're at this, it might make sense to unify completely and use a helper function instead of maintaining the markup in a couple of places.

#5 follow-up: @dd32
11 years ago

It's worth noting that moving from our current system to the proposed one here, is that we currently allow "3.5 stars" or "2.9 stars", this would force us to round to 3 or 4 stars.

A compromise might be standardising on empty/half/full stars, so 2.5/3.0/3.5, no 2.9's or 3.4's

(EDIT: The mockup shows half stars, the glyph comment didn't, oops)

Last edited 11 years ago by dd32 (previous) (diff)

#6 in reply to: ↑ 5 @rmccue
11 years ago

Replying to dd32:

A compromise might be standardising on empty/half/full stars, so 2.5/3.0/3.5, no 2.9's or 3.4's

I think this is better anyway. As cool as it is having 2.9 stars, I hate seeing it 1px off.

Also, solid +1 on helen's suggestion; I need star markup in a few places, and it's actually been broken about 3/4 times before. Adding this would ensure we don't break in future (yay styling backwards compatibility!).

#7 @dd32
11 years ago

26170.diff is a implementation using Dashicons and a helper function.

Since we don't currently have a half-star, I've just gone with a placeholder of a lighter colour for the .5 star for now.

It completely removes the .star-holder styling (I went with .star-rating to avoid conflicts) of past, however we can leave that for back-compat if need be.
With the old styling removed, old-style star ratings simply fail to load, they don't take up space or look bad, they just vanish.

11 years ago

#8 @matt
11 years ago

  • Priority changed from normal to high
  • Severity changed from normal to minor

#9 @dd32
11 years ago

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

In 26380:

Replace the Star ratings in the dashboard with dashicons ratings.
This also moves the ratings to only displaying full, half, or empty stars (ie. 3.0, 3.5, 4.0, no 3.7 ratings - which are rounded).
Fixes #26170

#10 @dd32
11 years ago

As can be seen, I opted to leave the .star-holder styling & images for back-compat.

Previously when we altered the stars (HiDPI) we broke the HTML & CSS which plugins had been using, we should avoid doing that again.

11 years ago

#11 @melchoyce
11 years ago

26170.2.diff​ decreases the font size of the dashicon so it both fits better within the space and appears crisp on non-retina screens.

#12 @iammattthomas
11 years ago

In 26393:

Make ratings stars 20px to match dashicons native size so they're crisp on all screens. See #26170, props melchoyce.

Note: See TracTickets for help on using tickets.