WordPress.org

Make WordPress Core

#26469 closed enhancement (fixed)

Twenty Fourteen: Better Audio/Video Player Styling with Genericons

Reported by: celloexpressions Owned by: lancewillett
Milestone: 4.0 Priority: high
Severity: normal Version: 3.8
Component: Bundled Theme Keywords: has-patch
Focuses: ui Cc:

Description

I just realized that we can easily replace the default icons in the Audio/Video players with Genericons, and also introduce some color.

While this is fine to wait until .1, it would introduce some color rules that child themers would probably want to override.

Attachments (6)

26469.diff (1.8 KB) - added by celloexpressions 21 months ago.
First pass at improved Media Element styling with Genericons instead of the default non-flat icons.
twentyfourteen-mediaelements-genericons.png (240.8 KB) - added by celloexpressions 21 months ago.
Some screenshots, although the best way to see the interactions is to test the patch.
26469.1.diff (256.1 KB) - added by celloexpressions 15 months ago.
Use Genericons for Media Element icons (including in the editor), and update to Genericons 3.0.3.
26469.2.diff (4.3 KB) - added by celloexpressions 15 months ago.
Refresh, without Genericons
26469.3.diff (828 bytes) - added by iamtakashi 14 months ago.
26469.4.diff (1.6 KB) - added by iamtakashi 14 months ago.

Download all attachments as: .zip

Change History (35)

@celloexpressions21 months ago

First pass at improved Media Element styling with Genericons instead of the default non-flat icons.

comment:1 @celloexpressions21 months ago

  • Keywords has-patch added

@celloexpressions21 months ago

Some screenshots, although the best way to see the interactions is to test the patch.

comment:2 @lancewillett21 months ago

  • Milestone changed from Awaiting Review to Future Release
  • Version set to trunk

I think we can look for 1.1, or you can merge into your colors plugin so people can use it right away.

comment:3 @celloexpressions21 months ago

Added to Fourteen Colors as a component for now, and we can look at it for 1.1 unless it gets horrible feedback. We'd also want tweaks from iamtakashi.

comment:4 @celloexpressions20 months ago

Genericons 3.0.3 introduced a new "fullscreen" icon, so we could consider using that instead of genericon-external for the fullscreen icon (unless we don't update them for some reason). Might want to ask for some sort of a "collapse" or "escape" icon to go with that, although the X works fine too.

By the way, this has been in Fourteen Colors for the past 6 weeks and I haven't heard any feedback either way, which I think is a good sign. At a minimum it flattens the design a bit more to bring it more closely in link with the rest of Twenty Fourteen, and it also makes it even easier for child themers to customize the audio/video players.

comment:5 @wonderboymusic16 months ago

  • Milestone changed from Future Release to 4.0

If only for the new fullscreen icon (I loathe the one in MEjs)

@celloexpressions15 months ago

Use Genericons for Media Element icons (including in the editor), and update to Genericons 3.0.3.

comment:6 @celloexpressions15 months ago

26469.1.diff contains an updated version of 26469.diff and also adds the styles to the the visual editor, and an update to Genericons 3.0.3 (which contains the new fullscreen icon).

Fourteen Colors has been extremely popular, and no one has complained about its Genericons treatment of the audio/video players, so I think this is definitely a good, subtle improvement.

We could also do something similar for Twenty Thirteen, as it also uses almost identical MediaElement styling and Genericons. We could also use Dashicons in the admin if the necessary icons are added.

comment:7 follow-up: @wonderboymusic15 months ago

  • Owner set to lancewillett
  • Status changed from new to assigned

I am not in love with the play button

comment:8 @lancewillett15 months ago

  • Owner lancewillett deleted

comment:9 in reply to: ↑ 7 ; follow-up: @celloexpressions15 months ago

Replying to wonderboymusic:

I am not in love with the play button

Agreed, we need someone (probably @iamtakashi) to design something that fits Twenty Fourteen better.

With the attached patch - probably worth splitting the genericons update out and doing that separately (should not break anything), and skipping that is always an option (using the genericon-external icon instead of the new fullscreen one).

comment:10 in reply to: ↑ 9 ; follow-up: @lancewillett15 months ago

Replying to celloexpressions:

With the attached patch - probably worth splitting the genericons update out and doing that separately (should not break anything)

Yes, can you split it out to a new ticket? See also #25391 for Twenty Thirteen. I can get both updated today if you refresh the patches.

comment:11 in reply to: ↑ 10 @celloexpressions15 months ago

Replying to lancewillett:

Yes, can you split it out to a new ticket? See also #25391 for Twenty Thirteen. I can get both updated today if you refresh the patches.

Created #28456, #25391 looks ready to go as well. For both, the binary files are unlikely to work through the patch; those may need to be taken from http://genericons.com/ and committed directly.

comment:12 @lancewillett15 months ago

Thanks! Noted about binary files.

comment:13 @lancewillett15 months ago

  • Keywords needs-refresh added

Can you also refresh the patch for this ticket without the Genericons changes?

comment:14 @lancewillett15 months ago

@celloexpressions You should come to WordCamp Orange County this weekend. :) http://2014.oc.wordcamp.org/ -- on Sunday we can work on Trac + patches.

@celloexpressions15 months ago

Refresh, without Genericons

comment:15 @celloexpressions15 months ago

  • Keywords needs-refresh removed

Refreshed without Genericons and to resolve a conflict.

comment:16 @lancewillett15 months ago

In 28694:

Twenty Fourteen: first pass at better Audio/Video player styling with genericons. Props celloexpressions, see #26469.

comment:17 @lancewillett15 months ago

  • Focuses ui added

Let's leave this open for Takashi to take a look at the play button, and for more testing.

comment:18 follow-up: @iamtakashi14 months ago

Maybe something like this?

https://i.cloudup.com/h8dJaEHIN8.png

If we are happy with this I make a patch.

comment:19 in reply to: ↑ 18 @celloexpressions14 months ago

  • Keywords needs-patch added; has-patch removed

Replying to iamtakashi:

Maybe something like this?

https://i.cloudup.com/h8dJaEHIN8.png

If we are happy with this I make a patch.

Looks way better to me! Now that I see that, what about matching the button colors here? The white would be green by default, with a white arrow, and then the lighter green on hover/focus. This is fairly similar to the button-in-primary-sidebar look, and the white-on-black isn't great.

comment:20 @ircbot14 months ago

This ticket was mentioned in IRC in #wordpress-themes by obenland. View the logs.

comment:21 @obenland14 months ago

  • Priority changed from normal to high

Needs a refreshed patch soon.
iamtakashi is looking at it.

@iamtakashi14 months ago

comment:22 @iamtakashi14 months ago

Style update for the play button.

comment:23 @lancewillett14 months ago

  • Keywords needs-refresh added; needs-patch removed

Can you also refresh the editor-style.css file to match?

@iamtakashi14 months ago

comment:24 @iamtakashi14 months ago

Refreshed patch including the changes for editor-style.css

comment:25 @obenland14 months ago

  • Keywords has-patch added; needs-refresh removed

comment:26 @lancewillett14 months ago

  • Keywords needs-refresh added

Hmm, patch doesn't apply cleanly to editor-style.css. Can you refresh again please?

comment:27 @obenland14 months ago

Does it apply from the src/ folder?

comment:28 @lancewillett14 months ago

  • Keywords needs-refresh removed

My fault, cancel. :/

comment:29 @lancewillett14 months ago

  • Owner set to lancewillett
  • Resolution set to fixed
  • Status changed from assigned to closed

In 29168:

Twenty Fourteen: improve styles for media "play" button. Props iamtakashi, closes #26469.

Note: See TracTickets for help on using tickets.