NMC-127 - File action button behaviour for different viewport

[TSI-kavitasonawane]

File action button behaviour changes:
We now show more single actions depending on the viewport size in the table header beginning from the first option in the dropdown.
We add a new option called "Cancel" (ger: Abbrechen") which will remove any selection (just remove selection, not the files of course).
We right align the Actions button.
We will show every option in the action button dropdown. It doesnt matter which option is also shown in the table header.
We add a new label called "All".
on S: we hide the label "All" according to the screen design

Screenshot after changes:

[juliusknorr]

Some screenshots for before/after would be nice to make this easier to review for our design team :)

[artonge]

I like this change a lot, but I have some design feedback:

There is a flash when selecting or deselecting an element

Can we have some additional style on hover?

Some ugly ideas:

OR

Can we align "All" and "1 file (164 B)"

Can we make the "Cancel" button different to highlight that it is not an action like the others?

Something like that with the cross also styled in red:

[TSI-kavitasonawane]

I like this change a lot, but I have some design feedback:

There is a flash when selecting or deselecting an element

Can we have some additional style on hover?

Some ugly ideas:

OR

Can we align "All" and "1 file (164 B)"

Can we make the "Cancel" button different to highlight that it is not an action like the others?

Something like that with the cross also styled in red:

@artonge I have done all the changes which you suggested. Please check it.

[artonge]

@artonge I have done all the changes which you suggested. Please check it.

Thanks, this looks much better already :)

Three new nitpicks:

1. The trash icon is red on hover, can we prevent that to make it more persistent with other actions ? Or maybe go further and make it red when the label is hovered too. Maybe make the label red too.

2. Should we move the Cancel action outside of the three dots menu and have it always accessible ?

3. Should we only list the hidden actions in the three dots menu instead of listing them all ?

Maybe we should @jancborchardt for some proper design inputs :)

[TSI-kavitasonawane]

@artonge I have done all the changes which you suggested. Please check it.

Thanks, this looks much better already :)

Three new nitpicks:

1. The trash icon is red on hover, can we prevent that to make it more persistent with other actions ? Or maybe go further and make it red when the label is hovered too. Maybe make the label red too.

@artonge I have done the changes which you suggested for trash icon.

1. Should we move the Cancel action outside of the three dots menu and have it always accessible ?

We can't do this because we don't have space for Cancel action in small screen. Please refer below screenshot for the same

2. Should we only list the hidden actions in the three dots menu instead of listing them all ?
   As per requirement we have to show every option in the action button dropdown. It doesnt matter which option is also shown in the table header. @jancborchardt Please confirm this.
   

Maybe we should @jancborchardt for some proper design inputs :)

[juliusknorr]

Maybe we should @jancborchardt for some proper design inputs :)

cc @nimishavijay 😉

[nimishavijay]

Really nice work! Suggestions from my end:

This button style looks better for actions, because with an underline it looks like a link

The trash icon is red on hover, can we prevent that to make it more persistent with other actions ? Or maybe go further and make it red when the label is hovered too. Maybe make the label red too.

I agree with removing the red for consistency, in any action menu it is not red either :)

Should we move the Cancel action outside of the three dots menu and have it always accessible ?

I agree, it is a good idea.
Many other softwares have a different pattern for the Cancel action, it is in the "select all" checkbox.
Clicking on the select all checkbox when only some items are selected will unselect everything. That way we don't need to have a separate action called "Cancel". I've pasted some examples here. What do you think?

Gmail

Dropbox

If we are keeping the Cancel action, can we get rid of the red colour? It makes it look like a much more dangerous action than it actually is.

Should we only list the hidden actions in the three dots menu instead of listing them all ?

Yes, agreed, we don't have to repeat actions.

More suggestions:

• "Delete" action is always the last item in the menu, we follow this UI pattern everywhere.
• We don't need the "Actions" label, just the 3 dot menu is enough as we are already showing actions next to it

Looks super cool :)
cc @jancborchardt when he sees this

[jancborchardt]

Agree with all of @nimishavijay’s feedback above – @TSI-kavitasonawane anything remaining from those items? :)

[blizzz]

changing the milestone to 24 for the PR is against master, a feature and we branch off 23 very soon.

[juliusknorr]

@skjnldsv All covered in #37642 right? Just to keep a reference here as well

[skjnldsv]

yes!