From fdc654058cd3859069c4cab250607350793f3e9b Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Mon, 11 Jan 2016 11:12:53 +0100
Subject: [PATCH 1/2] Fixes: U4-7694 Make media folders work as list view and
 media items - click folder to select and click folder name to open

---
 .../components/umbfoldergrid.directive.js     | 16 ++++++-------
 .../src/less/components/umb-folder-grid.less  | 24 +++++++------------
 .../src/views/components/umb-folder-grid.html |  6 ++---
 .../listview/layouts/grid/grid.html           |  4 ++--
 .../grid/grid.listviewlayout.controller.js    | 13 +++++++++-
 5 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbfoldergrid.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbfoldergrid.directive.js
index 06475e9c45..9f18f91e26 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbfoldergrid.directive.js
+++ b/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
       };
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less
index b82a18e3bb..14e343652d 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less
+++ b/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;
-}
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-folder-grid.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-folder-grid.html
index 9d658a31a8..df5eafbbca 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-folder-grid.html
+++ b/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>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html
index 5a4975ac18..bbc8edfdaa 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html
+++ b/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.clickFolderName"
+         on-click="vm.clickFolder">
       </umb-folder-grid>
 
       <umb-media-grid
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js
index e4f7cb3c8b..86ba02cb79 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js
@@ -22,12 +22,15 @@
 
       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.clickFolder = clickFolder;
+      vm.clickFolderName = clickFolderName;
 
       function activate() {
           vm.itemsWithoutFolders = filterOutFolders($scope.items);
@@ -97,6 +100,14 @@
          $location.path($scope.entityType + '/' + $scope.entityType + '/edit/' + item.id);
       }
 
+      function clickFolder(folder, $event, $index) {
+          listViewHelper.selectHandler(folder, $index, $scope.folders, $scope.selection, $event);
+      }
+
+      function clickFolderName(folder, $event, $index) {
+          $location.path($scope.entityType + '/' + $scope.entityType + '/edit/' + folder.id);
+      }
+
       activate();
 
    }

From cd4db879b7488d94d84ab20ca888f9112b848cfd Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Mon, 11 Jan 2016 11:21:35 +0100
Subject: [PATCH 2/2] better function names

---
 .../propertyeditors/listview/layouts/grid/grid.html |  4 ++--
 .../layouts/grid/grid.listviewlayout.controller.js  | 13 ++++---------
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html
index bbc8edfdaa..9e87d95359 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html
+++ b/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-click-name="vm.clickFolderName"
-         on-click="vm.clickFolder">
+         on-click-name="vm.openFolder"
+         on-click="vm.selectFolder">
       </umb-folder-grid>
 
       <umb-media-grid
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js
index 86ba02cb79..71a7caa345 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js
@@ -27,10 +27,9 @@
 
       vm.hoverMediaItemDetails = hoverMediaItemDetails;
       vm.selectItem = selectItem;
-      vm.selectFolder = selectFolder;
       vm.clickItem = clickItem;
-      vm.clickFolder = clickFolder;
-      vm.clickFolderName = clickFolderName;
+      vm.selectFolder = selectFolder;
+      vm.openFolder = openFolder;
 
       function activate() {
           vm.itemsWithoutFolders = filterOutFolders($scope.items);
@@ -92,19 +91,15 @@
          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 clickFolder(folder, $event, $index) {
+      function selectFolder(folder, $event, $index) {
           listViewHelper.selectHandler(folder, $index, $scope.folders, $scope.selection, $event);
       }
 
-      function clickFolderName(folder, $event, $index) {
+      function openFolder(folder, $event, $index) {
           $location.path($scope.entityType + '/' + $scope.entityType + '/edit/' + folder.id);
       }