Make WordPress Core

Opened 10 years ago

Closed 10 years ago

Last modified 10 years ago

#28842 closed defect (bug) (fixed)

Media Grid: Bulk selection mode

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

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 10 years ago.
greyed-out-bulk-select.png (1.6 MB) - added by JerrySarcastic 10 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 10 years ago.
28842.mp4 (1.4 MB) - added by ericlewis 10 years ago.
28842.3.diff (5.4 KB) - added by ericlewis 10 years ago.
28842.4.diff (14.0 KB) - added by ericlewis 10 years ago.
28842.5.diff (511 bytes) - added by michalzuber 10 years ago.
Lower checkbox opacity, change on hover https://youtu.be/XYWofLwKX9g
28842.6.diff (11.8 KB) - added by ericlewis 10 years ago.
28842.7.diff (10.4 KB) - added by wonderboymusic 10 years ago.
28842.8.diff (11.1 KB) - added by wonderboymusic 10 years ago.
28842.9.diff (11.7 KB) - added by wonderboymusic 10 years ago.
28842.10.diff (14.2 KB) - added by wonderboymusic 10 years ago.
28842.disable-autoselect.patch (2.1 KB) - added by ocean90 10 years ago.
28842.disable-autoselect.2.patch (2.1 KB) - added by adamsilverstein 10 years ago.
minor JS standards fix

Change History (54)

@ericlewis
10 years ago

#1 @ericlewis
10 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
10 years ago

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

@JerrySarcastic
10 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
10 years ago

#3 @ericlewis
10 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 10 years ago by ericlewis (previous) (diff)

@ericlewis
10 years ago

#4 @ericlewis
10 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.


10 years ago

@ericlewis
10 years ago

#6 @ericlewis
10 years ago

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

@ericlewis
10 years ago

#7 @ericlewis
10 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
10 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
10 years ago

In 29213:

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

#10 follow-ups: @helen
10 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
10 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
10 years ago

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

#12 @michalzuber
10 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
10 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
10 years ago

  • Keywords needs-patch added

#15 @wonderboymusic
10 years ago

In 29297:

Media Grid: make check box-shadow more subtle.

See #28842.

#16 follow-up: @michalzuber
10 years ago

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

#17 in reply to: ↑ 16 @JerrySarcastic
10 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
10 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
10 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
10 years ago

Replying to nosilver4u:

See #29101.

@ericlewis
10 years ago

#21 follow-up: @ericlewis
10 years ago

  • Keywords has-patch added; needs-patch removed

In attachment:28842.6.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.

Last edited 10 years ago by ericlewis (previous) (diff)

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


10 years ago

#23 in reply to: ↑ 21 @helen
10 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.


10 years ago

#25 follow-up: @wonderboymusic
10 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
10 years ago

In 29485:

Remove debug line from [29484].

See #28842.

#27 @michalzuber
10 years ago

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

#28 @helen
10 years ago

In 29486:

Remove now-unused strings. see #28842.

#29 in reply to: ↑ 25 ; follow-up: @ocean90
10 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
10 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
10 years ago

In 29500:

Media: Apply attachment opacity only in grid mode.

see #28842.

#32 follow-up: @ocean90
10 years ago

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

#33 @ocean90
10 years ago

In 29517:

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

see #28842.

#34 in reply to: ↑ 32 @helen
10 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
10 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
10 years ago

minor JS standards fix

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


10 years ago

#37 @wonderboymusic
10 years ago

In 29565:

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

Props ocean90.
See #28842.

#38 @helen
10 years ago

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

#39 @wonderboymusic
10 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
10 years ago

In 29568:

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

See #28842.

Note: See TracTickets for help on using tickets.