fixes: U4-9471 Mini list view: show breadcrumb instead of back button

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

@@ -40,27 +40,50 @@ Use this directive to generate a list of breadcrumbs.
 
 @param {array} ancestors Array of ancestors
 @param {string} entityType The content entity type (member, media, content).
+@param {callback} Callback when an ancestor is clicked. It will override the default link behaviour.
 **/
 
-(function() {
-  'use strict';
+(function () {
+    'use strict';
 
-  function BreadcrumbsDirective() {
+    function BreadcrumbsDirective() {
 
-    var directive = {
-      restrict: 'E',
-      replace: true,
-      templateUrl: 'views/components/editor/umb-breadcrumbs.html',
-      scope: {
-        ancestors: "=",
-        entityType: "@"
-      }
-    };
+        function link(scope, el, attr, ctrl) {
 
-    return directive;
+            scope.allowOnOpen = false;
 
-  }
+            scope.open = function(ancestor) {
+                if(scope.onOpen && scope.allowOnOpen) {
+                    scope.onOpen({'ancestor': ancestor});
+                }
+            };
 
-  angular.module('umbraco.directives').directive('umbBreadcrumbs', BreadcrumbsDirective);
+            function onInit() {
+                if ("onOpen" in attr) {
+                    scope.allowOnOpen = true;
+                }
+            }
+            
+            onInit();
+
+        }
+
+        var directive = {
+            restrict: 'E',
+            replace: true,
+            templateUrl: 'views/components/editor/umb-breadcrumbs.html',
+            scope: {
+                ancestors: "=",
+                entityType: "@",
+                onOpen: "&"
+            },
+            link: link
+        };
+
+        return directive;
+
+    }
+
+    angular.module('umbraco.directives').directive('umbBreadcrumbs', BreadcrumbsDirective);
 
 })();

src/Umbraco.Web.UI.Client/src/less/components/umb-mini-list-view.less

@@ -1,11 +1,6 @@
-.umb-mini-list-view {
-
-}
-
 .umb-mini-list-view__title {
     display: flex;
     align-items: center;
-    margin-bottom: 10px;
 }
 
 .umb-mini-list-view__title-text {

src/Umbraco.Web.UI.Client/src/views/common/overlays/treepicker/treepicker.controller.js

@@ -466,7 +466,11 @@ angular.module("umbraco").controller("Umbraco.Overlays.TreePickerController",
 	        $scope.dialogTreeEventHandler.unbind("treeNodeSelect", nodeSelectHandler);
 	    });
 
-		/* Mini List View */
+		/* --- Mini List View --- */
+		$scope.miniListViews = [];
+		$scope.breadcrumb = [];
+		var miniListViewsHistory = [];
+		var goingForward = true;
 
 		$scope.goToPage = function(pageNumber, miniListView) {
 			// set new page number
@@ -481,17 +485,31 @@ angular.module("umbraco").controller("Umbraco.Overlays.TreePickerController",
             item.selected = item.selected === true ? false : true;
 		};
 
-		$scope.exitMiniListView = function(node) {
+		$scope.clickBreadcrumb = function(ancestor) {
 
+			var found = false;
 			goingForward = false;
 
-			if(miniListViewsHistory.length > 1) {
-				var prevMiniListViewIndex = miniListViewsHistory.length - 2;
-				var prevMiniListView = miniListViewsHistory[prevMiniListViewIndex];
-				$scope.miniListViews = [];
-				$scope.miniListViews.push(prevMiniListView);
-				miniListViewsHistory.splice(-1,1);
-			} else {
+			angular.forEach(miniListViewsHistory, function(historyItem, index){
+				if(parseInt(historyItem.node.id) === parseInt(ancestor.id)) {
+
+					// load the list view from history
+					$scope.miniListViews = [];
+					$scope.miniListViews.push(historyItem);
+					// remove from history
+					miniListViewsHistory.splice(index, miniListViewsHistory.length - index);
+					found = true;
+
+					// get ancestors
+					entityResource.getAncestors(historyItem.node.id, entityType)
+						.then(function (ancestors) {
+							$scope.breadcrumb = ancestors;
+						});
+				}
+			});
+
+			if(!found) {
+				// if we can't find the view in the history 
 				miniListViewsHistory = [];
 				$scope.miniListViews = [];
 			}
@@ -499,28 +517,19 @@ angular.module("umbraco").controller("Umbraco.Overlays.TreePickerController",
 		};
 
 		$scope.searchMiniListView = function(search, miniListView) {
-
 			// set search value
 			miniListView.pagination.filter = search;
 			// start loading animation list view
 			miniListView.loading = true;
-
 			searchMiniListView(miniListView);
-
 		};
 
 		$scope.test = function(node) {
 			openMiniListView(node);
 		};
 
-		$scope.miniListViews = [];
-		var miniListViewsHistory = [];
-		var goingForward = true;
-
-
 		var searchMiniListView = _.debounce(function (miniListView) {
 			$scope.$apply(function () {
-				// get children
 				getChildrenForMiniListView(miniListView);
 			});
 		}, 500);
@@ -557,8 +566,14 @@ angular.module("umbraco").controller("Umbraco.Overlays.TreePickerController",
 
 					// store in history so we quickly can navigate back
 					miniListViewsHistory.push(miniListView);
-
+					
 				});
+			
+			// get ancestors
+			entityResource.getAncestors(node.id, entityType)
+               .then(function (ancestors) {
+                   $scope.breadcrumb = ancestors;
+               });
 
 		}
 

src/Umbraco.Web.UI.Client/src/views/common/overlays/treepicker/treepicker.html

@@ -35,12 +35,21 @@
         </div>
 
     </div>
-
+    
     <div ng-repeat="miniListView in miniListViews" ng-animate="getMiniListViewAnimation()">
 
-        <a ng-if="!model.startNodeId" href="" class="umb-mini-list-view__back" ng-click="exitMiniListView(miniListView.node)">
-            <i class="icon-arrow-left" style="margin-right: 5px;"></i>Back
-        </a>
+        <div class="umb-mini-list-view__title">
+            <i class="umb-mini-list-view__title-icon {{ miniListView.node.icon }}"></i>
+            <h4 class="umb-mini-list-view__title-text">{{ miniListView.node.name }}</h4>
+        </div>
+
+        <umb-breadcrumbs
+            style="margin-bottom: 10px;"
+            ng-if="breadcrumb && breadcrumb.length > 0"
+            ancestors="breadcrumb"
+            entity-type="content"
+            on-open="clickBreadcrumb(ancestor)">
+        </umb-breadcrumbs>
 
         <umb-mini-list-view
             node="miniListView.node"

src/Umbraco.Web.UI.Client/src/views/components/editor/umb-breadcrumbs.html

@@ -1,10 +1,15 @@
 <ul class="umb-breadcrumbs">
-   <li class="umb-breadcrumbs__ancestor" ng-repeat="ancestor in ancestors">
+    <li class="umb-breadcrumbs__ancestor" ng-repeat="ancestor in ancestors">
+        
+        <!-- go to node on click -->
+        <a ng-if="!$last && !allowOnOpen" href="#/{{entityType}}/{{entityType}}/edit/{{ancestor.id}}" class="umb-breadcrumbs__ancestor-link" title="{{ancestor.name}}">{{ancestor.name}}</a>
 
-      <a ng-if="!$last" href="#/{{entityType}}/{{entityType}}/edit/{{ancestor.id}}" class="umb-breadcrumbs__ancestor-link" title="{{ancestor.name}}">{{ancestor.name}}</a>
-      <span ng-if="!$last" class="umb-breadcrumbs__seperator">&#47;</span>
+        <!-- use callback to handle click -->
+        <a ng-if="!$last && allowOnOpen" href="#" ng-click="open(ancestor)" class="umb-breadcrumbs__ancestor-link" title="{{ancestor.name}}" prevent-default>{{ancestor.name}}</a>
 
-      <span class="umb-breadcrumbs__ancestor-text" ng-if="$last" title="{{ancestor.name}}">{{ancestor.name}}</span>
+        <span ng-if="!$last" class="umb-breadcrumbs__seperator">&#47;</span>
 
-   </li>
-</ul>
+        <span class="umb-breadcrumbs__ancestor-text" ng-if="$last" title="{{ancestor.name}}">{{ancestor.name}}</span>
+
+    </li>
+</ul>

src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html

@@ -1,10 +1,5 @@
 <div>
 
-    <div class="umb-mini-list-view__title">
-        <i class="umb-mini-list-view__title-icon {{ node.icon }}"></i>
-        <h4 class="umb-mini-list-view__title-text">{{ node.name }}</h4>
-    </div>
-
     <div class="umb-table umb-table--condensed">
 
         <!-- Head -->