Add info about number of selected items and their size

[LukasHirt]

Description

We've added information about the number of selected items and their size above the files list next to batch actions.

Related Issue

• Fixes Unify multi-select info and add size product#122

How Has This Been Tested?

• Select multiple resources in different files lists.

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Technical debt
• Tests

[LukasHirt]

The interaction to clear selection doesn't look different at all currently. Is taken care of in owncloud/owncloud-design-system#418

[LukasHirt]

• remove selected text from buttons

[kulmann]

Some visual things I noticed:

• Clear selection raw button has a height of 22px, while the text left of it has a height of 17px. Because of this, the Clear selection text overflows to the bottom, which looks off.
• The pipe | between text and clear selection button is quite short. I would expect it to have the same height as all the other text.
• When you shrink the windows size so that the left sidebar disappears, the info about selected items and the clear selection button disappear entirely. Might be intended, but this way shrinking the windows causes the ui to lose information and one quite handy action (clearing the selection).
• selected suffix from the action buttons still needs to be removed ;-)

[LukasHirt]

When you shrink the windows size so that the left sidebar disappears, the info about selected items and the clear selection button disappear entirely. Might be intended, but this way shrinking the windows causes the ui to lose information and one quite handy action (clearing the selection).

This is on purpose until we figure out the app bar layout on smaller screens. Adding there more elements makes it almost unusable already. #3774

selected suffix from the action buttons still needs to be removed ;-)

It was already removed in the previous commit. Just forgot to remove it now from tests - will do next

[kulmann]

🚀

[LukasHirt]

Clear selection raw button has a height of 22px, while the text left of it has a height of 17px. Because of this, the Clear selection text overflows to the bottom, which looks off.

I've aligned it with flexbox.

The pipe | between text and clear selection button is quite short. I would expect it to have the same height as all the other text.

With the flexbox in place, it should be now aligned as well. But since it's using font size it's possible that some screens might slightly differ.

Here's a screenshot with the new alignment: