Merge pull request #1006 from umbraco/temp-U4-7694

Fixes: U4-7694 Make media folders work as list view and media items - click folder to select and click folder name to open

src/Umbraco.Web.UI.Client/src/common/directives/components/umbfoldergrid.directive.js

@@ -5,17 +5,17 @@
 
       function link(scope, el, attr, ctrl) {
 
-         scope.clickFolder = function(folder) {
+         scope.clickFolder = function(folder, $event, $index) {
             if(scope.onClick) {
-               scope.onClick(folder);
+               scope.onClick(folder, $event, $index);
             }
          };
 
-         scope.selectFolder = function(folder, $event, $index) {
-            if(scope.onSelect) {
-               scope.onSelect(folder, $event, $index);
+         scope.clickFolderName = function(folder, $event, $index) {
+            if(scope.onClickName) {
+               scope.onClickName(folder, $event, $index);
+               $event.stopPropagation();
             }
-            $event.stopPropagation();
          };
 
       }
@@ -26,8 +26,8 @@
          templateUrl: 'views/components/umb-folder-grid.html',
          scope: {
             folders: '=',
-            onSelect: '=',
-            onClick: "="
+            onClick: "=",
+            onClickName: "="
          },
          link: link
       };

src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less

@@ -29,7 +29,7 @@
 
 .umb-folder-grid__folder:hover {
    text-decoration: none;
-   border: 1px solid @blue;
+   background-color: darken(@grayLighter, 5%);
 }
 
 .umb-folder-grid__folder-description {
@@ -39,12 +39,18 @@
 
 .umb-folder-grid__folder-icon {
    font-size: 20px;
-   color: @gray;
-   margin-right: 20px;
+   margin-right: 15px;
+   color: @black;
 }
 
 .umb-folder-grid__folder-name {
    font-size: 13px;
+   color: @black;
+   font-weight: bold;
+}
+
+.umb-folder-grid__folder-name:hover {
+   text-decoration: underline;
 }
 
 .umb-folder-grid__action {
@@ -63,19 +69,7 @@
    cursor: pointer;
 }
 
-.umb-folder-grid__action:hover {
-   background: @blue;
-   transition: background 0.1s;
-}
-
 .umb-folder-grid__action.-selected {
    opacity: 1;
    background: @blue;
 }
-
-.umb-folder-grid__folder:hover .umb-folder-grid__action:not(.-selected) {
-   opacity: 1;
-   animation: fadeIn;
-   animation-duration: 0.2s;
-   animation-timing-function: ease-in-out;
-}

src/Umbraco.Web.UI.Client/src/views/components/umb-folder-grid.html

@@ -4,14 +4,14 @@
       class="umb-folder-grid__folder"
       ng-repeat="folder in folders"
       ng-class="{'-selected': folder.selected}"
-      ng-click="clickFolder(folder)">
+      ng-click="clickFolder(folder, $event, $index)">
 
       <div class="umb-folder-grid__folder-description">
          <i class="umb-folder-grid__folder-icon {{ folder.icon }}"></i>
-         <div class="umb-folder-grid__folder-name">{{ folder.name }}</div>
+         <div ng-click="clickFolderName(folder, $event, $index)" class="umb-folder-grid__folder-name">{{ folder.name }}</div>
       </div>
 
-      <i class="icon-check umb-folder-grid__action" ng-click="selectFolder(folder, $event, $index)" ng-class="{'-selected': folder.selected}"></i>
+      <i class="icon-check umb-folder-grid__action" ng-class="{'-selected': folder.selected}"></i>
 
    </div>
 

src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html

@@ -38,8 +38,8 @@
       <umb-folder-grid
          ng-if="folders.length > 0"
          folders="folders"
-         on-select="vm.selectFolder"
-         on-click="vm.clickItem">
+         on-click-name="vm.openFolder"
+         on-click="vm.selectFolder">
       </umb-folder-grid>
 
       <umb-media-grid

src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js

@@ -22,12 +22,14 @@
 
       vm.dragEnter = dragEnter;
       vm.dragLeave = dragLeave;
-		vm.onFilesQueue = onFilesQueue;
+	  vm.onFilesQueue = onFilesQueue;
       vm.onUploadComplete = onUploadComplete;
+
       vm.hoverMediaItemDetails = hoverMediaItemDetails;
       vm.selectItem = selectItem;
-      vm.selectFolder = selectFolder;
       vm.clickItem = clickItem;
+      vm.selectFolder = selectFolder;
+      vm.openFolder = openFolder;
 
       function activate() {
           vm.itemsWithoutFolders = filterOutFolders($scope.items);
@@ -89,14 +91,18 @@
          listViewHelper.selectHandler(selectedItem, index, vm.itemsWithoutFolders, $scope.selection, $event);
       }
 
-      function selectFolder(selectedItem, $event, index) {
-         listViewHelper.selectHandler(selectedItem, index, $scope.folders, $scope.selection, $event);
-      }
-
       function clickItem(item) {
          $location.path($scope.entityType + '/' + $scope.entityType + '/edit/' + item.id);
       }
 
+      function selectFolder(folder, $event, $index) {
+          listViewHelper.selectHandler(folder, $index, $scope.folders, $scope.selection, $event);
+      }
+
+      function openFolder(folder, $event, $index) {
+          $location.path($scope.entityType + '/' + $scope.entityType + '/edit/' + folder.id);
+      }
+
       activate();
 
    }