#20551 Resolves issue 20551.

Work Item: 20551

src/Orchard.Web/Modules/Orchard.MediaLibrary/Scripts/media-library.js

@@ -332,17 +332,6 @@ $(function () {
             };
             self.orderMedia.subscribe(selectFolderOrRecent);
             self.mediaType.subscribe(selectFolderOrRecent);
-
-            self.fetchDisplayedFolderStructure = function(displayedFolder) {
-                var folders = self.mediaFolders();
-                for (var x = 0; x < folders.length; x++) {
-                    var folder = folders[x];
-                    if (displayedFolder.indexOf(folder.folderPath()) === 0) {
-                        folder.fetchChildren(displayedFolder);
-                        folder.isExpanded(true);
-                    }
-                }
-            };
         }
 
         var viewModel = new mediaIndexViewModel();
@@ -361,7 +350,6 @@ $(function () {
             self.childFoldersFetchStatus = 0;  //0 = unfetched, 1 = fetching, 2 = fetched
 
             self.isExpanded = ko.observable(false);
-            self.isVisible = ko.observable(true);
 
             self.isSelected = ko.computed(function() {
                 return (self.mediaIndexViewModel.displayed() == self.folderPath());
@@ -402,7 +390,6 @@ $(function () {
                             newChildFolder.fetchChildren(deepestChildPath);
                             newChildFolder.isExpanded(true);
                         }
-                        newChildFolder.isVisible(true);
                         self.childFolders.push(newChildFolder);
                     }
 
@@ -421,25 +408,12 @@ $(function () {
                 }
 
                 self.mediaIndexViewModel.selectFolder(self.folderPath());
-                
-                var childFolders = self.childFolders();
 
-                if (self.isExpanded()) {    
-                    for (var x = 0; x < childFolders.length; x++) {
-                        childFolders[x].isVisible(false);
-                    }
-                    self.isExpanded(false);
-                } else {
-                    if (self.childFoldersFetchStatus !== 0) {
-                        for (var x = 0; x < childFolders.length; x++) {
-                            childFolders[x].isVisible(true);
-                        }
-                    } else {
-                        self.fetchChildren();
-                    }
-                    
-                    self.isExpanded(true);
+                if (self.childFoldersFetchStatus === 0) {
+                    self.fetchChildren();
                 }
+
+                self.isExpanded(!self.isExpanded());
             };
 
             self.afterRenderMediaFolderTemplate = function (elements, model) {
@@ -450,9 +424,7 @@ $(function () {
 
         $.map(settings.childFolders, function (childFolder, index) {
             viewModel.mediaFolders.push(new mediaFolderViewModel(childFolder));
-        });
-
-        viewModel.fetchDisplayedFolderStructure(settings.folderPath);
+        });
 
         enhanceViewModel(viewModel);
         
@@ -460,6 +432,20 @@ $(function () {
 
         if (settings.hasFolderPath) {
             viewModel.displayFolder(settings.folderPath);
+
+            //fetch displayed folder structure
+            (function (displayedFolder) {
+                var folders = viewModel.mediaFolders();
+                for (var x = 0; x < folders.length; x++) {
+                    var folder = folders[x];
+                    if (displayedFolder.indexOf(folder.folderPath()) === 0) {
+                        folder.fetchChildren(displayedFolder);
+                        folder.isExpanded(true);
+                        break;
+                    }
+                }
+            })(settings.folderPath);
+
             History.pushState({
                 action: 'displayFolder',
                 folderPath: settings.folderPath

src/Orchard.Web/Modules/Orchard.MediaLibrary/Styles/orchard-medialibrary-admin.css

@@ -65,8 +65,10 @@
 #media-library-main-navigation {
     vertical-align: top;
     min-width: 220px; /*Width of left column*/
+    max-width: 220px;
     height: 85vh;
     overflow-y: scroll;
+    overflow-x: auto;
     border-right: 1px solid #e0e0e0;
 }
     #media-library-main-navigation > ul { /* sub-navigations, e.g. folders */
@@ -128,6 +130,7 @@
 
     .media-library-folder-title {
         display: inline-block;
+        white-space: nowrap;
     }
 
 #media-library-main-list-wrapper {

src/Orchard.Web/Modules/Orchard.MediaLibrary/Views/Admin/Index.cshtml

@@ -104,12 +104,12 @@ var mediaLibrarySettings = {
 //]]>
 </script>
 <script type="text/html" id="media-folder-template">
-    <li data-bind="visible: isVisible()">
+    <li>
         <div class="media-library-folder" data-bind="css: { 'in-progress': $root.pendingRequest() }">
             <div class="media-library-folder-title" data-bind="click: folderClicked, attr: { 'data-media-path': folderPath() }, css: {selected: isSelected()}">
                 <a href="#" class="media-library-navigation-folder-link"><i data-bind="    css: {'icon-folder-open-alt': isExpanded(), 'icon-folder-close-alt': !isExpanded()}"></i><span data-bind="    text: name"></span></a>
             </div>
-            <ul data-bind="template: { name: 'media-folder-template', foreach: childFolders, afterRender: afterRenderMediaFolderTemplate}, visible: childFolders().length > 0">
+            <ul data-bind="template: { name: 'media-folder-template', foreach: childFolders, afterRender: afterRenderMediaFolderTemplate}, visible: isExpanded()">
             </ul>
         </div>
     </li>