WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#28842 closed defect (bug) (fixed)

Media Grid: Bulk selection mode

Reported by: helen Owned by: wonderboymusic
Milestone: 4.0 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-patch
Focuses: ui, javascript, administration Cc:
PR Number:

Description

It exists, but is less than smooth in terms of experience. This is a ticket to make sure we work on it.

Attachments (14)

28842.diff (5.1 KB) - added by ericlewis 5 years ago.
greyed-out-bulk-select.png (1.6 MB) - added by JerrySarcastic 5 years ago.
When entering Bulk Select mode, I think a visual change (such as reducing the opacity of all thumbs in the grid view) would help to reinforce this modal switch. Video: https://cloudup.com/cBpeNkAb-g2
28842.2.diff (14.4 KB) - added by ericlewis 5 years ago.
28842.mp4 (1.4 MB) - added by ericlewis 5 years ago.
28842.3.diff (5.4 KB) - added by ericlewis 5 years ago.
28842.4.diff (14.0 KB) - added by ericlewis 5 years ago.
28842.5.diff (511 bytes) - added by michalzuber 5 years ago.
Lower checkbox opacity, change on hover https://youtu.be/XYWofLwKX9g
28842.6.diff (11.8 KB) - added by ericlewis 5 years ago.
28842.7.diff (10.4 KB) - added by wonderboymusic 5 years ago.
28842.8.diff (11.1 KB) - added by wonderboymusic 5 years ago.
28842.9.diff (11.7 KB) - added by wonderboymusic 5 years ago.
28842.10.diff (14.2 KB) - added by wonderboymusic 5 years ago.
28842.disable-autoselect.patch (2.1 KB) - added by ocean90 5 years ago.
28842.disable-autoselect.2.patch (2.1 KB) - added by adamsilverstein 5 years ago.
minor JS standards fix

Change History (54)

@ericlewis
5 years ago

#1 @ericlewis
5 years ago

In 28842.diff:

  • make media.view.Button's html element button, so we can apply disabled a disabled state when first entering bulk edit mode, which enables when attachments are selected.
  • apply i18n for buttons, and change text to "Bulk Select" and "Delete Selected".

#2 @ericlewis
5 years ago

  • Summary changed from Bulk selection mode for Media Grid to Media Grid: Bulk selection mode

@JerrySarcastic
5 years ago

When entering Bulk Select mode, I think a visual change (such as reducing the opacity of all thumbs in the grid view) would help to reinforce this modal switch. Video: https://cloudup.com/cBpeNkAb-g2

@ericlewis
5 years ago

#3 @ericlewis
5 years ago

As per yesterday's IRC chat, in attachment:28842.2.diff:

  • Remove the bulk edit mode button, in lieu of a persistent mixed-mode.
  • Show checkboxes all the time. Clicking the attachment preview will open the edit attachment modal, clicking the checkbox will select the attachment for bulk edit.
  • Show the toolbar when entering bulk edit mode, and move the "Bulk Delete" button into it to reinforce this is an "action" the user can take.
  • Only show the edit attachment icon when hovering over the attachment. When hovering over the checkbox, don't show it.
Last edited 5 years ago by ericlewis (previous) (diff)

@ericlewis
5 years ago

#4 @ericlewis
5 years ago

attachment:28842.mp4 is a live preview of 28842.2.diff

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


5 years ago

@ericlewis
5 years ago

#6 @ericlewis
5 years ago

In 28842.3.diff, move bulk actions into the primary attachments browser toolbar.

@ericlewis
5 years ago

#7 @ericlewis
5 years ago

attachment:28842.3.diff was missing the checkboxes work from 28842.2.diff. 28842.4.diff puts it all together. Needs minor styling on the bulk edit UI elements.

#8 @helen
5 years ago

In 29212:

Media Grid:

Instead of a separate bulk selection mode, persistently show a checkbox for each item. Restores the more familiar bulk actions dropdown + action button.

props ericlewis. see #28842.

#9 @helen
5 years ago

In 29213:

Fix jshint errors introduced in [29212]. see #28842.

#10 follow-ups: @helen
5 years ago

The idea of fading everything except your current selection out is interesting, but perhaps unnecessary now?

Thing I noticed post-commit: If you have items selected but then filter your view in a way that they no longer show, the bulk action dropdown and button stay enabled. Not sure what we should do - reset the selection when filtering/searching?

#11 in reply to: ↑ 10 @michalzuber
5 years ago

Replying to helen:

Thing I noticed post-commit: If you have items selected but then filter your view in a way that they no longer show, the bulk action dropdown and button stay enabled. Not sure what we should do - reset the selection when filtering/searching?

Tried selecting more, search for string where one was selected and one not, removed with bulk action, reset search and all selected (also before search) were removed.
I think after searching the selection should be reset, because somebody may think after searching that only the newly selected ones will be removed. What I don't see I shouldn't be able to mess with it.

@michalzuber
5 years ago

Lower checkbox opacity, change on hover https://youtu.be/XYWofLwKX9g

#12 @michalzuber
5 years ago

Clear selection might go into the Bulk Actions select, clearing is available in Posts Insert Media modal https://youtu.be/gsB0VbIEEcg

#13 in reply to: ↑ 10 @ericlewis
5 years ago

Replying to helen:

If you have items selected but then filter your view in a way that they no longer show, the bulk action dropdown and button stay enabled. Not sure what we should do - reset the selection when filtering/searching?

I like that idea, let's go ahead with it.

#14 @ericlewis
5 years ago

  • Keywords needs-patch added

#15 @wonderboymusic
5 years ago

In 29297:

Media Grid: make check box-shadow more subtle.

See #28842.

#16 follow-up: @michalzuber
5 years ago

Opinions on Select All/Deselect All http://i.imgur.com/bQU4gP7.png ?

#17 in reply to: ↑ 16 @JerrySarcastic
5 years ago

Replying to michalzuber:

Opinions on Select All/Deselect All http://i.imgur.com/bQU4gP7.png ?

I worry about this, as the number of files in a given media libraries could be in the hundreds (if not thousands) depending on the user.

I think it would be trivially easy for someone to mistake, since they would only see a small portion of their library at any given time. Deleting media is *very permanent* I'd hate to see users accidentally nuking their entire library, and not realizing it until it is too late.

#18 @michalzuber
5 years ago

Good point JerrySarcastic, I had only problem with removing more files, annoying selecting tens or hundreds of files, but the solution is in the List view. Don't know how many people will realise this, too :)

#19 follow-up: @nosilver4u
5 years ago

It would be nice to allow developers to extend the bulk actions drop-down on the grid view. In EWWW Image Optimizer (and a few other plugins) developers are using a slightly hacky js+redirect method to add an action, and then send the user where we want based on that custom action.

While it would be preferable to give us some hooks to extend the bulk actions (from my perspective), if it isn't intended to let folks extend the bulk actions, and Delete Permanently is the only option, I wonder if this comment begins to make more sense: http://make.wordpress.org/ui/2014/07/22/media-grid-user-testing-round-1/#comment-24457
That would make 2 clicks instead of 4, and you're still asking the user for confirmation before they blow up anything.

At any rate, I've managed to add my own 'Bulk Optimize' action via the javascript method I mentioned (borrowed from viper007bond's regenerate thumbnails plugin). Unfortunately, it actually attempts to delete the images, because the drop-down on the grid mode is js-based, instead of submitting via POST like the old one. I barely know enough js to be dangerous, so any guidance here would be appreciated.

#20 in reply to: ↑ 19 @ocean90
5 years ago

Replying to nosilver4u:

See #29101.

@ericlewis
5 years ago

#21 follow-up: @ericlewis
5 years ago

  • Keywords has-patch added; needs-patch removed

In attachment:28842.diff,

  • remove the persistent checkboxes, and split the Select workflow back into a separate mode of the attachments browsing interface.
  • as this mode is now globally toggle-able, users should have access to switch modes at any time. So, try out a sticky-style on the main toolbar.
  • Toggling into the mode removes all other toolbar actions, reiterating the fact that you have switched modes.
  • Put bulk selected actions in a persistent toolbar fixed just above the bottom of the attachments browser.

This is rough and shouldn't be merged unless we're gonna clean it up later; this is more proof of concept(everything works) to get UX feedback.

Version 0, edited 5 years ago by ericlewis (next)

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


5 years ago

#23 in reply to: ↑ 21 @helen
5 years ago

Replying to ericlewis:

In attachment:28842.6.diff

  • I don't think both toolbars are necessary - let's go with just the top one.
  • Not feeling the top bar always being sticky - I get that you have to be at the top to start selection mode, but given that right now bulk actions by default are all of delete, we may be prematurely worrying about exposing the functionality fully. We do still have to tackle the UI of the stickiness at least somewhat though, since the actions need to stick on screen given infinite scroll.
  • "Select" should be "Bulk Select" - looks like that's a string already, probably from before.

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


5 years ago

#25 follow-up: @wonderboymusic
5 years ago

In 29484:

Media Grid: add Bulk Selection mode for deleting attachments.

  • Toolbar is sticky when select mode is active
  • Selection is toggled when clicking an attachment preview
  • Unselected attachments fade out, selected fade in.

See #28842.

#26 @wonderboymusic
5 years ago

In 29485:

Remove debug line from [29484].

See #28842.

#27 @michalzuber
5 years ago

Delete selected doesn't work https://youtu.be/1bSorSpDFFU

#28 @helen
5 years ago

In 29486:

Remove now-unused strings. see #28842.

#29 in reply to: ↑ 25 ; follow-up: @ocean90
5 years ago

Replying to wonderboymusic:

Unselected attachments fade out, selected fade in.

That feels wrong in the media modal, see https://cloudup.com/c1DHcsTk3au.

#30 in reply to: ↑ 29 @wonderboymusic
5 years ago

Replying to ocean90:

Replying to wonderboymusic:

Unselected attachments fade out, selected fade in.

That feels wrong in the media modal, see https://cloudup.com/c1DHcsTk3au.

Yep, that was a mistake. The opacity should be scoped to .media-frame.mode-grid .attachment

#31 @ocean90
5 years ago

In 29500:

Media: Apply attachment opacity only in grid mode.

see #28842.

#32 follow-up: @ocean90
5 years ago

When uploading multiple files each file will be in a selected state. Should we switch into bulk selection mode then?

#33 @ocean90
5 years ago

In 29517:

Media Grid: Improve position of fixed toolbar at small-screen sizes.

see #28842.

#34 in reply to: ↑ 32 @helen
5 years ago

  • Keywords has-patch removed

Replying to ocean90:

When uploading multiple files each file will be in a selected state. Should we switch into bulk selection mode then?

No, but I have written down on my notes that nothing should be "checked"/selected on upload to the media grid.

#35 @ocean90
5 years ago

  • Keywords has-patch added

In 28842.disable-autoselect.patch I added a new property autoSelect to wp.media.controller.Library which allows you to enable/disable auto selecting. But maybe wonderboymusic has a better idea.

@adamsilverstein
5 years ago

minor JS standards fix

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


5 years ago

#37 @wonderboymusic
5 years ago

In 29565:

Media Grid: don't auto-select attachments upon upload.

Props ocean90.
See #28842.

#38 @helen
5 years ago

The only thing I have left here is to exit bulk selection mode when you take an action like delete.

#39 @wonderboymusic
5 years ago

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

In 29566:

Media Grid: after completing a Bulk action, switch from select to edit mode.

Fixes #28842.

#40 @wonderboymusic
5 years ago

In 29568:

Media Grid: after [29566], account for Trash and Delete.

See #28842.

Note: See TracTickets for help on using tickets.