WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 5 years ago

Last modified 5 years ago

#28946 closed defect (bug) (fixed)

Media Grid: Introduce parity between Grid and List view headers

Reported by: melchoyce Owned by:
Milestone: 4.0 Priority: normal
Severity: normal Version: 4.0
Component: Media Keywords:
Focuses: ui, administration Cc:
PR Number:

Description

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

Attachments (9)

media-list.png (116.3 KB) - added by melchoyce 6 years ago.
media-grid.png (978.8 KB) - added by melchoyce 6 years ago.
28946.patch (8.6 KB) - added by michalzuber 6 years ago.
28946.2.patch (9.7 KB) - added by michalzuber 6 years ago.
Rewrite, dont't touch wp-admin/includes/class-wp-list-table.php
media-list-header-under.png (368.1 KB) - added by melchoyce 6 years ago.
media-list-header-over.png (368.1 KB) - added by melchoyce 6 years ago.
28946.diff (7.2 KB) - added by helen 5 years ago.
28946.2.diff (12.3 KB) - added by pento 5 years ago.
28946.3.diff (324 bytes) - added by DrewAPicture 5 years ago.

Download all attachments as: .zip

Change History (35)

@melchoyce
6 years ago

@melchoyce
6 years ago

#1 @SergeyBiryukov
6 years ago

  • Milestone changed from Awaiting Review to 4.0

This ticket was mentioned in IRC in #wordpress-dev by michalzuber. View the logs.


6 years ago

#3 @Clorith
6 years ago

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

#4 @knutsp
6 years ago

Related: #28906

@michalzuber
6 years ago

#5 @michalzuber
6 years ago

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 ?
Last edited 6 years ago by michalzuber (previous) (diff)

#6 @michalzuber
6 years ago

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

@michalzuber
6 years ago

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

#7 follow-ups: @helen
6 years ago

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?

#8 in reply to: ↑ 7 @SergeyBiryukov
6 years ago

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

#9 in reply to: ↑ 7 @melchoyce
6 years ago

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.

#10 @melchoyce
6 years ago

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

#11 @mrwweb
6 years ago

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

#12 @helen
6 years ago

#28906 was marked as a duplicate.

#13 @ocean90
6 years ago

  • Keywords has-patch needs-refresh added

#14 @helen
5 years ago

#29284 was marked as a duplicate.

This ticket was mentioned in IRC in #wordpress-dev by helen. View the logs.


5 years ago

#16 @helen
5 years ago

#29354 was marked as a duplicate.

#17 @helen
5 years ago

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

#18 @helen
5 years ago

  • Keywords has-patch needs-refresh removed

@helen
5 years ago

#19 @helen
5 years ago

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.

This ticket was mentioned in IRC in #wordpress-dev by helen. View the logs.


5 years ago

@pento
5 years ago

#21 @pento
5 years ago

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.

#22 follow-up: @helen
5 years ago

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

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.

#23 in reply to: ↑ 22 @knutsp
5 years ago

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!

@DrewAPicture
5 years ago

#24 @helen
5 years ago

In 29626:

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

#25 @helen
5 years ago

In 29641:

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

see #28946.

#26 @helen
5 years ago

In 29645:

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

see #28946.

Note: See TracTickets for help on using tickets.