fix(MediaSettings): jumping on devices/backgrounds switch

[ShGKme]

☑️ Resolves

• A part of: Adjust UI according to the design review #12800

🖌️ UI Checklist

🖼️ Screenshots / Screencasts

🏚️ Before	🏡 After

🚧 Tasks

• Add a new simple tabs component (not very reusable atm)
  • With panel switch transition with permanent height independent of the current tab's content height
  • Also, improve tabs a11y, except arrows tabs switch
• Add a TransitionExpandDown component
  • Allows having a slide down transition but keep taking an actual height
  • Not a part of TransitionWrapper, because it is a bit more complex than adding name and CSS

Checked:

• Initially opening any tab, not only the first one. Same with closing.
• Closing tabs during opening and vice versa

🏁 Checklist

• 🌏 Tested with Chrome, Firefox and Safari or should not be risky to browser differences
• 🖥️ Tested with Desktop client or should not be risky for it
• 🖌️ Design was reviewed, approved or inspired by the design team
• ⛑️ Tests are included or not possible
• 📗 User documentation in https://github.com/nextcloud/documentation/tree/master/user_manual/talk has been updated or is not required

[ShGKme]

@jancborchardt

We can easily remove the jumping when switching between tabs. But there is still a jump on opening a tab for the first time.

What do you think?

[jancborchardt]

We can easily remove the jumping when switching between tabs.

Nice, looks great! :)

But there is still a jump on opening a tab for the first time.

Can we have a quick vertical size increase / decrease animation on opening the tab initially (and closing it as well)? We can also use either --animation-slow or --animation-quick for that, whatever looks nicer.

[jancborchardt]

And btw, the first time you switch to the "Backgrounds" tab, there is no left/right animation. Is that an artifact in the screen recording or a bug?

[ShGKme]

Can we have a quick vertical size increase / decrease animation on opening the tab initially (and closing it as well)?

Sure

And btw, the first time you switch to the "Backgrounds" tab, there is no left/right animation. Is that an artifact in the screen recording or a bug?

If the switch happens too fast after opening the first tab, there is a small glitch — a browser needs some time to load and render quite huge images...

You can see it on the before example. Images are shown after some time. The same happens for after, but hidden.

Will have a look if we can prevent it.

Also, on gif it's a bit more noticeable than in reality

[ShGKme]

@jancborchardt Updated gif. What do you think?

[Antreesy]

Looks good!

[ShGKme]

Rebased and squashed

[jancborchardt]

@ShGKme this looks so damns smooth now, awesome work! 😲