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 18 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 18 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 12 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 12 months ago.
Refresh, without Genericons
26469.3.diff (828 bytes) - added by iamtakashi 11 months ago.
26469.4.diff (1.6 KB) - added by iamtakashi 11 months ago.

Download all attachments as: .zip

Change History (35)

@celloexpressions18 months ago

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

comment:1 @celloexpressions18 months ago

  • Keywords has-patch added

@celloexpressions18 months ago

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

comment:2 @lancewillett18 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 @celloexpressions18 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 @celloexpressions16 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 @wonderboymusic13 months ago

  • Milestone changed from Future Release to 4.0

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

@celloexpressions12 months ago

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

comment:6 @celloexpressions12 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: @wonderboymusic12 months ago

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

I am not in love with the play button

comment:8 @lancewillett12 months ago

  • Owner lancewillett deleted

comment:9 in reply to: ↑ 7 ; follow-up: @celloexpressions12 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: @lancewillett12 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 @celloexpressions12 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 @lancewillett12 months ago

Thanks! Noted about binary files.

comment:13 @lancewillett12 months ago

  • Keywords needs-refresh added

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

comment:14 @lancewillett12 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.

@celloexpressions12 months ago

Refresh, without Genericons

comment:15 @celloexpressions12 months ago

  • Keywords needs-refresh removed

Refreshed without Genericons and to resolve a conflict.

comment:16 @lancewillett12 months ago

In 28694:

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

comment:17 @lancewillett12 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: @iamtakashi11 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 @celloexpressions11 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 @ircbot11 months ago

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

comment:21 @obenland11 months ago

  • Priority changed from normal to high

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

@iamtakashi11 months ago

comment:22 @iamtakashi11 months ago

Style update for the play button.

comment:23 @lancewillett11 months ago

  • Keywords needs-refresh added; needs-patch removed

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

@iamtakashi11 months ago

comment:24 @iamtakashi11 months ago

Refreshed patch including the changes for editor-style.css

comment:25 @obenland11 months ago

  • Keywords has-patch added; needs-refresh removed

comment:26 @lancewillett11 months ago

  • Keywords needs-refresh added

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

comment:27 @obenland11 months ago

Does it apply from the src/ folder?

comment:28 @lancewillett11 months ago

  • Keywords needs-refresh removed

My fault, cancel. :/

comment:29 @lancewillett11 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.