yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

got deleting working properly with the node animation and color changes.

Browse Source
This commit is contained in:
Shannon
2013-07-15 20:11:56 +10:00
parent 5738b5a4b8
commit b624f95e2a
8 changed files with 112 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/common/directives/umbtree.directive.js
View File

@@ -34,7 +34,7 @@ angular.module("umbraco.directives")
'</div>';
}
template += '<ul>' +
'<umb-tree-item ng-repeat="child in tree.root.children" node="child" callback="callback" section="{{section}}"></umb-tree-item>' +
'<umb-tree-item ng-repeat="child in tree.root.children" node="child" callback="callback" section="{{section}}" ng-animate="{leave: \'tree-node-delete-leave\'}"></umb-tree-item>' +
'</ul>' +
'</li>' +
'</ul>';

6
src/Umbraco.Web.UI.Client/src/common/directives/umbtreeitem.directive.js
View File

@@ -32,7 +32,7 @@ angular.module("umbraco.directives")
template: '<li><div ng-style="setTreePadding(node)" ng-class="{\'loading\': node.loading}">' +
'<ins ng-hide="node.hasChildren" style="background:none;width:18px;"></ins>' +
'<ins ng-show="node.hasChildren" ng-class="{\'icon-caret-right\': !node.expanded, \'icon-caret-down\': node.expanded}" ng-click="load(this, node)"></ins>' +
'<ins ng-show="node.hasChildren" ng-class="{\'icon-caret-right\': !node.expanded, \'icon-caret-down\': node.expanded, \'node-deleting\': node.isDeleting}" ng-click="load(this, node)"></ins>' +
'<i class="{{node | umbTreeIconClass:\'icon umb-tree-icon sprTree\'}}" style="{{node | umbTreeIconStyle}}"></i>' +
'<a ng-click="select(this, node, $event)" >{{node.name}}</a>' +
'<i class="umb-options" ng-click="options(this, node, $event)"><i></i><i></i><i></i></i>' +
@@ -127,8 +127,8 @@ angular.module("umbraco.directives")
scope.setTreePadding = function(node) {
return { 'padding-left': (node.level * 20) + "px" };
};
var template = '<ul ng-class="{collapsed: !node.expanded}"><umb-tree-item ng-repeat="child in node.children" callback="callback" node="child" section="{{section}}"></umb-tree-item></ul>';
var template = '<ul ng-class="{collapsed: !node.expanded}"><umb-tree-item ng-repeat="child in node.children" callback="callback" node="child" section="{{section}}" ng-animate="{leave: \'tree-node-delete-leave\'}"></umb-tree-item></ul>';
var newElement = angular.element(template);
$compile(newElement)(scope);
element.append(newElement);

2
src/Umbraco.Web.UI.Client/src/common/filters/treeiconclass.filter.js
View File

@@ -12,4 +12,4 @@ function treeIconClassFilter(iconHelper) {
return standardClasses + " icon-custom-file";
};
}
angular.module('umbraco.filters').filter("umbTreeIconClass", treeIconClassFilter);
angular.module('umbraco.filters').filter("umbTreeIconClass", treeIconClassFilter);

6
src/Umbraco.Web.UI.Client/src/common/services/tree.service.js
View File

@@ -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) {

90
src/Umbraco.Web.UI.Client/src/less/animations.less
View File

@@ -41,4 +41,92 @@
.slide-show.slide-show-active {
margin-left: 0;
}
}
.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;
}

4
src/Umbraco.Web.UI.Client/src/less/tree.less
View File

@@ -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}

9
src/Umbraco.Web.UI.Client/src/views/common/dialogs/legacydelete.controller.js
View File

@@ -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();
});

4
src/Umbraco.Web.UI.Client/src/views/content/contentdelete.controller.js
View File

@@ -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();
});