Media Grid: Introduce parity between Grid and List view headers

[melchoyce]

Currently, the Media Grid and List views have totally separate headers. This makes it very difficult to toggle back and forth between the two views (literally — the icons are in totally different locations!).

While the views themselves don't need to necessarily display the same information, the headers should probably be the same.

Related: #28944, #28895

[Clorith]

On mobile the search box is pushed to the foot of the page in list view, but remains at the top in grid mode.

Ideally this should be at the top in both views, both to keep it consistent, but also because it's easier to reach without scrolling far down

[knutsp]

Related: #28906

[michalzuber]

Result of 28946.patch ​http://i.imgur.com/o1fQGKW.png

• Filter and Search Media buttons might go away if JS is enabled to better match design to Media Grid, the select would have onchange event and the input[type="search"] would be triggered with pressing Enter as in Media Grid?
• Pagination results text 5 items is needed if in the left there is All (5) ? I'm aware that the number of pagination changes according search results
• I removed the bottom tablenav stuff, should I return just the Bulk Actions select ?

[michalzuber]

Not good, patch needs to be rewritten, break posts listing table :-/

[michalzuber]

Rewrite, dont't touch wp-admin/includes/class-wp-list-table.php

[helen]

Noting that there's a link for filtering to see "Unattached" items in the list table. If we unify and settle on the "filter bar" (as we're currently calling it), where does that go?

[SergeyBiryukov]

Replying to helen:

Noting that there's a link for filtering to see "Unattached" items in the list table. If we unify and settle on the "filter bar" (as we're currently calling it), where does that go?

Related: #29065

[melchoyce]

Replying to helen:

Noting that there's a link for filtering to see "Unattached" items in the list table. If we unify and settle on the "filter bar" (as we're currently calling it), where does that go?

It currently exists alongside "media type," so we could probably put it in the bottom of that dropdown.

As of now the only big difference in content between the list and grid views is the pagination in the list view. We should copy over the grid's filter bar and then put pagination under or over the bar (over looks a little better, but under will probably work better). Quick mockups attached after this comment.

[melchoyce]

Actually, looking at it again... I think under looks better, as well as works better. Forget about the over mockup.

[mrwweb]

Still don't see this in Beta 4. I'd love to test it there.

[helen]

#28906 was marked as a duplicate.

[helen]

#29284 was marked as a duplicate.

[helen]

#29354 was marked as a duplicate.

[helen]

Going through filter bar CSS first, then #29340, so we don't introduce terrible things as an intermediary step.

[helen]

28946.diff​ is a work-in-progress. It does some clean up of CSS in grid view (more may be needed), and starts implementing the filter bar in the list view. Here's what's left to do:

• Move the search input to the filter bar. A div of .search-form in the filter bar should get the styling done - see plugin install.
• Remove the other search input.
• Turn the views into a dropdown. This is more problematic - these are currently links, and not just filtering on one thing (unattached is different from media type). There is also a filter hook of views_{$this->screen->id}. I think we can do this in a back-compat way, just probably needs to do a check and a safe redirect when applied. The filter button should probably also serve as the submit button for that input.
• Make said filter button actually work again.

[pento]

attachment:28946.2.diff​ adds the things from comment:19, it maintains backwards compatibility with the old filter query args.

It currently doesn't try to be backwards compatible with the views_{$this->screen->id} filter, that's a little bit trickier with the change from links to dropdown.

[helen]

In 29625:

Media library: Unify headers between view modes.

Includes back compat for views_upload links. These look a little awkward, but do not appear to be commonly used. Also prevents the view mode links from being dropped on smaller screens so a user doesn't get "stuck" in the list view.

This is different from other list tables, but aligns well with other uploaded content management screens (themes, plugins).

props pento, helen.
fixes #28946.

[knutsp]

Replying to helen:

Also prevents the view mode links from being dropped on smaller screens so a user doesn't get "stuck" in the list view.

props pento, helen.

Many thanks for fixing, finally. This was my "pet" from a few weeks ago. Didn't mean to be annoying about it. Can't complain I didn't get a "props" for the simple and quite unusable patch I made, just to make a point. I will be happy to test this on my phone tomorrow, when RC is out. Good work, in between, I guess, short periods of sleep, for you as lead and for the other excellent leads and core committers. I'm sure 4.0 will be the greatest release in years!

[helen]

In 29626:

Fix a CSS typo from [29625]. see #28946.

[helen]

In 29641:

Media: views_upload filter expects an array, not a string.

see #28946.

[helen]

In 29645:

Media library: Ensure the header area is spaced consistently between view modes.

see #28946.