From 2ba5627e2cc11aec98e034fa10fd20576c3c37cf Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 7 Feb 2017 15:57:53 +0100 Subject: [PATCH] fixes: U4-9471 Mini list view: show breadcrumb instead of back button --- .../editor/umbbreadcrumbs.directive.js | 53 +++++++++++++------ .../less/components/umb-mini-list-view.less | 5 -- .../treepicker/treepicker.controller.js | 53 ++++++++++++------- .../overlays/treepicker/treepicker.html | 17 ++++-- .../components/editor/umb-breadcrumbs.html | 17 +++--- .../views/components/umb-mini-list-view.html | 5 -- 6 files changed, 96 insertions(+), 54 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbbreadcrumbs.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbbreadcrumbs.directive.js index f2797425c5..61906bbf74 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbbreadcrumbs.directive.js +++ b/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); })(); diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-mini-list-view.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-mini-list-view.less index ebd56ca287..92871abd34 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-mini-list-view.less +++ b/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 { diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/treepicker/treepicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/overlays/treepicker/treepicker.controller.js index bd6264cefb..bdcd942474 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/treepicker/treepicker.controller.js +++ b/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; + }); } diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/treepicker/treepicker.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/treepicker/treepicker.html index dfbe021d54..a4b3c75982 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/treepicker/treepicker.html +++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/treepicker/treepicker.html @@ -35,12 +35,21 @@ - +
- - Back - +
+ +

{{ miniListView.node.name }}

+
+ + + -
  • +
  • + + + {{ancestor.name}} - {{ancestor.name}} - / + + {{ancestor.name}} - {{ancestor.name}} + / -
    • - + {{ancestor.name}} + + + \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html index 403d076789..db3c6b1f3e 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html @@ -1,10 +1,5 @@
    -
    - -

    {{ node.name }}

    -
    -