From b624f95e2a37435bf3f1bb91fa7cbdf74704f936 Mon Sep 17 00:00:00 2001 From: Shannon Date: Mon, 15 Jul 2013 20:11:56 +1000 Subject: [PATCH] got deleting working properly with the node animation and color changes. --- .../common/directives/umbtree.directive.js | 2 +- .../directives/umbtreeitem.directive.js | 6 +- .../common/filters/treeiconclass.filter.js | 2 +- .../src/common/services/tree.service.js | 6 +- .../src/less/animations.less | 90 ++++++++++++++++++- src/Umbraco.Web.UI.Client/src/less/tree.less | 4 + .../common/dialogs/legacydelete.controller.js | 9 +- .../views/content/contentdelete.controller.js | 4 +- 8 files changed, 112 insertions(+), 11 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/umbtree.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/umbtree.directive.js index fc629f974a..fccba47c0a 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/umbtree.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/umbtree.directive.js @@ -34,7 +34,7 @@ angular.module("umbraco.directives") ''; } template += '' + '' + ''; diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/umbtreeitem.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/umbtreeitem.directive.js index 61109c5da3..ca0e5d31a0 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/umbtreeitem.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/umbtreeitem.directive.js @@ -32,7 +32,7 @@ angular.module("umbraco.directives") template: '
  • ' + '' + - '' + + '' + '' + '{{node.name}}' + '' + @@ -127,8 +127,8 @@ angular.module("umbraco.directives") scope.setTreePadding = function(node) { return { 'padding-left': (node.level * 20) + "px" }; }; - - var template = '
    '; + + var template = '
    '; var newElement = angular.element(template); $compile(newElement)(scope); element.append(newElement); diff --git a/src/Umbraco.Web.UI.Client/src/common/filters/treeiconclass.filter.js b/src/Umbraco.Web.UI.Client/src/common/filters/treeiconclass.filter.js index 2b727b6f43..c13c9c980a 100644 --- a/src/Umbraco.Web.UI.Client/src/common/filters/treeiconclass.filter.js +++ b/src/Umbraco.Web.UI.Client/src/common/filters/treeiconclass.filter.js @@ -12,4 +12,4 @@ function treeIconClassFilter(iconHelper) { return standardClasses + " icon-custom-file"; }; } -angular.module('umbraco.filters').filter("umbTreeIconClass", treeIconClassFilter); \ No newline at end of file +angular.module('umbraco.filters').filter("umbTreeIconClass", treeIconClassFilter); diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tree.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tree.service.js index 99083e6cd5..e7ecf60a97 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/tree.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/tree.service.js @@ -26,7 +26,11 @@ function treeService($q, treeResource, iconHelper) { return { removeNode: function(treeNode) { - var asdf = treeNode; + if (treeNode.parent == null) { + throw "Cannot remove a node that doesn't have a parent"; + } + //remove the current item from it's siblings + treeNode.parent.children.splice(treeNode.parent.children.indexOf(treeNode), 1); }, getTree: function (options) { diff --git a/src/Umbraco.Web.UI.Client/src/less/animations.less b/src/Umbraco.Web.UI.Client/src/less/animations.less index 1dcd9a63eb..9966ae0081 100644 --- a/src/Umbraco.Web.UI.Client/src/less/animations.less +++ b/src/Umbraco.Web.UI.Client/src/less/animations.less @@ -41,4 +41,92 @@ .slide-show.slide-show-active { margin-left: 0; -} \ No newline at end of file +} + +.tree-node-delete-leave { + -webkit-animation: leave 600ms cubic-bezier(0.445, 0.050, 0.550, 0.950); + -moz-animation: leave 600ms cubic-bezier(0.445, 0.050, 0.550, 0.950); + -o-animation: leave 600ms cubic-bezier(0.445, 0.050, 0.550, 0.950); + animation: leave 600ms cubic-bezier(0.445, 0.050, 0.550, 0.950); + display: block; + position: relative; +} +@-webkit-keyframes leave { + to { + opacity: 0; + height: 0px; + bottom: -70px; + } + 25% { + bottom: 15px; + } + from { + opacity: 1; + height: 30px; + bottom: 0px; + } +} +@-moz-keyframes leave { + to { + opacity: 0; + height: 0px; + bottom: -70px; + } + 25% { + bottom: 15px; + } + from { + opacity: 1; + height: 30px; + bottom: 0px; + } +} +@-ms-keyframes leave { + to { + opacity: 0; + height: 0px; + bottom: -70px; + } + 25% { + bottom: 15px; + } + from { + opacity: 1; + height: 30px; + bottom: 0px; + } +} +@-o-keyframes leave { + to { + opacity: 0; + height: 0px; + bottom: -70px; + } + 25% { + bottom: 15px; + } + from { + opacity: 1; + height: 30px; + bottom: 0px; + } +} +@keyframes leave { + to { + opacity: 0; + height: 0px; + bottom: -70px; + } + 25% { + bottom: 15px; + } + from { + opacity: 1; + height: 30px; + bottom: 0px; + } +} + +.tree-node-delete-leave * { + color:@red !important; +} diff --git a/src/Umbraco.Web.UI.Client/src/less/tree.less b/src/Umbraco.Web.UI.Client/src/less/tree.less index f18e33637a..23201b8b11 100644 --- a/src/Umbraco.Web.UI.Client/src/less/tree.less +++ b/src/Umbraco.Web.UI.Client/src/less/tree.less @@ -128,6 +128,10 @@ li.root > div > i.umb-options { top: 10px; } +.umb-tree li.node-deleting *{ + color: @red; +} + .hide-options .umb-options{display: none !important} .hide-header h5{display: none !important} diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/legacydelete.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/legacydelete.controller.js index cd6fb62219..4719c75c4a 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/legacydelete.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/legacydelete.controller.js @@ -6,16 +6,19 @@ * @description * The controller for deleting content */ -function LegacyDeleteController($scope, legacyResource) { +function LegacyDeleteController($scope, legacyResource, treeService) { $scope.performDelete = function() { - legacyResource.deleteItem({ + //mark it for deletion (used in the UI) + $scope.currentNode.isDeleting = true; + + legacyResource.deleteItem({ nodeId: $scope.currentNode.id, nodeType: $scope.currentNode.nodetype }).then(function () { //TODO: Need to sync tree, etc... - alert("Deleted!"); + treeService.removeNode($scope.currentNode); $scope.hideMenu(); }); diff --git a/src/Umbraco.Web.UI.Client/src/views/content/contentdelete.controller.js b/src/Umbraco.Web.UI.Client/src/views/content/contentdelete.controller.js index 1e274d3a1c..4edd23aeb4 100644 --- a/src/Umbraco.Web.UI.Client/src/views/content/contentdelete.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/content/contentdelete.controller.js @@ -10,9 +10,11 @@ function ContentDeleteController($scope, contentResource, treeService) { $scope.performDelete = function() { + //mark it for deletion (used in the UI) + $scope.currentNode.isDeleting = true; + contentResource.deleteById($scope.currentNode.id).then(function () { //TODO: Need to sync tree, etc... - alert("Deleted!"); treeService.removeNode($scope.currentNode); $scope.hideMenu(); });