Add option to select/deselect all files

[sminnee]

There is currently no "select all" option in the gallery view of the asset admin. Users can click-and-drag to select all items on the page, but that's not as intuitive as you might think. Many users are unaware of that feature.

Additionally, if I have ticked a number of files, there's no obvious way that I can quickly deselect all items. Clicking on an empty space will deselect all, but again that may not be intuitive for some users.

There should be a select all and deselect all option in the gallery view of the asset admin. There are designs for this in the comments below (see #546 (comment))
We'll need to consider whether this should also be applied across pages (see #1210)

Acceptance criteria

• "Select All"/"Deselect All" are implemented along the lines of Cassie's mock-ups.
• The action bar only shows once you have selected one item.
• The behaviour only applies to the current page of results.
• There's a design review done wit the UX team before merging.

PRs

• NEW Select all and clear all functionality #1418
• DOC Select all and deselect all files developer-docs#398

[phalkunz]

@clarkepaul @newleeland We need visual for this one. Is something like the following ok?

[clarkepaul]

I didn't see this as a priority (impact/low) so we have it further back on our backlog. I think we would associate it with the number in the blue box.

[clarkepaul]

Something like this @phalkunz ?

[phalkunz]

@clarkepaul Looks nice :) but I'm afraid a user might confuse with deleting "those 2 items". Maybe I'm just being too cautious. How about having the same button style (inset shadow and right-hand side rounded corners) at the end of the batch panel? That way it's clearer, I think, that action is to close the panel thus get out of batch mode.

[clarkepaul]

I put up another idea in the next few weeks or so.

[chillu]

Removing from milestone - it's a valid concern, but not a common use case (users changing their mind about a batch selection). Will also be made partially obsolete by more efficient ways of selecting and unselecting (ctrl/shift select and lasso select, see #424)

[newleeland]

Potential Design

Effectively using the mobile view for desktop

• Gives room for "Select all" and "Deselect all"
• Gives room for additional buttons
• Established interactive pattern

[chillu]

I like it - moving the "edit" triggers to the bottom gives you more room, and it's a more natural place for actions (save/publish is there as well). It might be a bit easier to miss on large resolutions, but the slide-in animation does a good job at drawing attention.

The only concern I have is with messaging: Would success/failure messages show on the top? That's quite far away from where the user triggered the action. Same problem as with save/publish though.

Aside: Ideally this pattern would also work for list views and multiple grid fields embedded in a form. In the case of multiple grid fields, scrolling would make you lose context on which gridfield actually contains the selects. But with this design, it seems natural to inline the selection bar as well. Have we done multi-select grid field designs? Low priority, but something to consider for long-term UX consistency.

/cc @clarkepaul

[clarkepaul]

Having actions fixed to bottom is a pretty common pattern for the CMS so I feel this is the best pattern for bulk actions considering it has more room for growth and flexibility across veiwports.

I think this pattern could work for multiple grid field bulk actions. I would have put all actions in line with the standard grid field actions but with areas like Files, there is a lack of space. We haven't done any multi grid field designs as yet but I would think if you jump from one grid field to another the previous selection could be deselected (if the grid fields provide different functionality). Otherwise, if bulk actions can cover both grid fields at the same time then that would be easier UX wise.

[chillu]

but I would think if you jump from one grid field to another the previous selection could be deselected

That's going to be a bit confusing - often a grid field with ~20 items (default pagination) doesn't fit on a single screen page, so you'll need to scroll to select and review. At what point do you consider this "overscrolling" then, and remove the selection? But yeah, don't need to solve this for the current ticket, I'm confident there is some solution that's close to the current design approach.

[flamerohr]

I think we no longer need a deselect button, as when you click any blank background area in the gallery the deselect happens anyway. Although it is implicit.

Also bare in mind that the select all and deselect options in the mock provided will lead to overcrowding the action bar when in mobile view.
I've implemented the "more actions" popover recently because the action bar was beginning to become overcrowded.

[clarkepaul]

@flamerohr we are moving the bulk actions in the files area to the bottom to allow for more space. With a smaller viewport we can drop the action text to just icons and with the select/deselect we can show just one of those and swap out with the other when selected (quite a typical approach).

[tractorcow]

I think we no longer need a deselect button, as when you click any blank background area in the gallery the deselect happens anyway. Although it is implicit.

Agreed, this seems adequate for me. Can we call this issue closed, or should we still add another link for deselect all @clarkepaul ?

[clarkepaul]

That deselect doesn't work for list view. With de-select you also get "select all" which is also helpful. I think we keep the issue open but leave as impact low as this provides little value when comparing to other issues.

[maxime-rainville]

Had a chat with Cassie. Some of the key takeaways:

• She suggested combining the "clear selection" button with the "count" indicator. I think that's a great idea.
• We're happy with saying that the action bar and the "select all" button only show when you select at least 1 file.
• Select all should only apply to the current page.

The mock up is from an experimental admin theme. It has slightly different icons and colours, but otherwise it matches what we are going after.

On a related note, I noticed that pagination is not disabled when you select files. It's rendered under the bottom action bar. If the last page doesn't have too many items, you can actually still use it. I'm calling that a bug and will raise a card.

[GuySartorelli]

PRs merged. This feature will be available in Silverstripe CMS 5.2.0