[4.4] Multiple Media Manager Fixes

[crystalenka]

Closes issues #39126, #39078, possibly others.

Summary of Changes

What started as something straightforward ended up fixing a few things... it's a couple small fixes so it made more sense to group them.

1. Media sources are now in a (open by default) details element.
   • This doesn't make much difference when someone only uses the default images folder, but if you have multiple image sources defined, this will make it much easier to navigate.
2. Folders now get hover and focus styles.
   • They didn't before. Now they do.
3. Super long folder names are now safely contained instead of stretching the container forever.
   • Previously, long file names would stretch the sidebar instead of wrapping or being truncated. This makes file names truncated as they were originally intended to (from what I can tell of the original CSS).
4. Media sources scroll independently of the images list (Media Manager folder tree #39126) and no longer stack behind one another if more than one is defined.
5. Infobar stays with you when you scroll. You no longer have to chase it to the top of the page. (Media Manager Info Bar #39078)

Testing Instructions

1. Go to the media manager and define a bunch of new random folders (enough so the list is taller than your browser height).
2. Scroll up and down.
3. Select the last item on the list and try to access the info box.

Actual result BEFORE applying this Pull Request

• Long folder names stretched out the file tree container

• You could not get to the last items on the file tree until you reached the end of the image list (see video in Media Manager folder tree #39126)
• The info box was always at the top of the page, even if you were trying to get an item all the way at the bottom of it. (See screenshot in Media Manager Info Bar #39078 )

Expected result AFTER applying this Pull Request

A much nicer experience.

• Media sources can be entirely collapsed.
• Long folder names are truncated with ellipses.
• You can scroll the file tree independently of the image list.
• The info box stays with you as you scroll.

Known issues

The list view. It's a mess, both before and after this PR. I will address it in another PR at a separate time because there are a lot of things that need to be improved.

That being said, it shouldn't be worse after this PR, so please let me know if there are new issues in the list view that do not exist before applying this PR.

Link to documentations

Please select:

• No documentation changes for docs.joomla.org needed
• No documentation changes for manual.joomla.org needed

[crystalenka]

Funky flex bugs happening when you switch folders or show/hide the main joomla sidebar menu. Marking this as draft until I can address. Sigh.

If anyone wants to give those particular issues a try then they're welcome to.

[brianteeman]

There is also #39222

[crystalenka]

There is also #39222

I just saw that but I don't think there is a conflict, it's still a good change. :)

[brianteeman]

I was thinking that it might be easier for you if you rolled that into this?

[crystalenka]

ahhh I see. Well, yours is already RTC so no reason to delay that fix while I figure out what is happening with the flex wrapping here. :) Thank you though

[HLeithner]

This pull request has been automatically rebased to 4.3-dev.

[HLeithner]

This pull request has been automatically rebased to 4.4-dev.