From 828965b9023585a1da82404fe2ca4c5f99169ee1 Mon Sep 17 00:00:00 2001 From: perploug Date: Tue, 24 Sep 2013 12:15:15 +0200 Subject: [PATCH 1/4] umb photo folder directive --- .../html/umbphotofolder.directive.js | 147 ++++++++++++++++++ .../directives/html/umb-photo-folder.html | 8 + .../common/services/umb-image-helper.spec.js | 8 +- 3 files changed, 159 insertions(+), 4 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/html/umbphotofolder.directive.js create mode 100644 src/Umbraco.Web.UI.Client/src/views/directives/html/umb-photo-folder.html diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/html/umbphotofolder.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/html/umbphotofolder.directive.js new file mode 100644 index 0000000000..50bbca7574 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/html/umbphotofolder.directive.js @@ -0,0 +1,147 @@ +/** +* @ngdoc directive +* @name umbraco.directives.directive:umbPhotoFolder +* @restrict E +**/ +angular.module("umbraco.directives.html") +.directive('umbPhotoFolder', function ($compile, $log, $timeout, imageHelper) { + + return { + restrict: 'E', + replace: true, + require: '?ngModel', + terminate: true, + templateUrl: 'views/directives/html/umb-photo-folder.html', + link: function(scope, element, attrs, ngModel) { + + element.ready(function(){ + var wat = 1; + + }); + + ngModel.$render = function() { + + if(ngModel.$modelValue){ + + $timeout(function(){ + + var photos = ngModel.$modelValue; + var rows = []; + + scope.baseline = element.attr('baseline') | 0; + scope.minWidth = element.attr('minwidth') | 420; + scope.minHeight = element.attr('minheight') | 200; + scope.border = element.attr('border') | 5; + + scope.lastWidth = Math.max(element.width(), scope.minWidth); + + // get row width - this is fixed. + var w = scope.lastWidth; + + + // initial height - effectively the maximum height +/- 10%; + var h = Math.max(scope.minHeight,Math.floor(w / 5)); + + + // store relative widths of all images (scaled to match estimate height above) + var ws = []; + $.each(photos, function(key, val) { + val.width_n = $.grep(val.properties, function(val, index) {return (val.alias === "umbracoWidth");})[0].value; + val.height_n = $.grep(val.properties, function(val, index) {return (val.alias === "umbracoHeight");})[0].value; + val.url_n = imageHelper.getThumbnail({ imageModel: val, scope: scope }); + + var wt = parseInt(val.width_n, 10); + var ht = parseInt(val.height_n, 10); + + if( ht !== h ) { + wt = Math.floor(wt * (h / ht)); + } + + ws.push(wt); + }); + + + var rowNum = 0; + var limit = photos.length; + + while(scope.baseline < limit) + { + rowNum++; + // number of images appearing in this row + var c = 0; + // total width of images in this row - including margins + var tw = 0; + + // calculate width of images and number of images to view in this row. + while( (tw * 1.1 < w) && (scope.baseline + c < limit)) + { + tw += ws[scope.baseline + c++] + scope.border * 2; + } + + // Ratio of actual width of row to total width of images to be used. + var r = w / tw; + // image number being processed + var i = 0; + // reset total width to be total width of processed images + tw = 0; + + // new height is not original height * ratio + var ht = Math.floor(h * r); + + var row = {}; + row.photos = []; + row.style = {}; + row.style = {"height": ht + scope.border * 2, "width": scope.lastWidth}; + rows.push(row); + + while( i < c ) + { + var photo = photos[scope.baseline + i]; + // Calculate new width based on ratio + var wt = Math.floor(ws[scope.baseline + i] * r); + // add to total width with margins + tw += wt + scope.border * 2; + + // Create image, set src, width, height and margin + var purl = photo.url_n; + photo.style = {"width": wt, "height": ht, "margin": scope.border+"px", "cursor": "pointer"}; + row.photos.push(photo); + i++; + } + + // set row height to actual height + margins + scope.baseline += c; + + // if total width is slightly smaller than + // actual div width then add 1 to each + // photo width till they match + i = 0; + while( tw < w ) + { + row.photos[i].style.width++; + i = (i + 1) % c; + tw++; + } + + // if total width is slightly bigger than + // actual div width then subtract 1 from each + // photo width till they match + i = 0; + while( tw > w ) + { + row.photos[i].style.width--; + i = (i + 1) % c; + tw--; + } + } + + //populate the scope + scope.rows = rows; + + }, 500); //end timeout + } //end if modelValue + + }; //end $render + } + }; +}); diff --git a/src/Umbraco.Web.UI.Client/src/views/directives/html/umb-photo-folder.html b/src/Umbraco.Web.UI.Client/src/views/directives/html/umb-photo-folder.html new file mode 100644 index 0000000000..0e4131f3ad --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/directives/html/umb-photo-folder.html @@ -0,0 +1,8 @@ +
+
+ +
+
\ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/test/unit/common/services/umb-image-helper.spec.js b/src/Umbraco.Web.UI.Client/test/unit/common/services/umb-image-helper.spec.js index 1fc20de3f2..886ebbd0c9 100644 --- a/src/Umbraco.Web.UI.Client/test/unit/common/services/umb-image-helper.spec.js +++ b/src/Umbraco.Web.UI.Client/test/unit/common/services/umb-image-helper.spec.js @@ -1,4 +1,4 @@ -describe('icon helper tests', function () { +describe('image helper tests', function () { var umbImageHelper; beforeEach(module('umbraco.services')); @@ -29,9 +29,9 @@ describe('icon helper tests', function () { var image2 = "a-png.png"; var image3 = "thisisagif.blah.gif"; - expect(umbImageHelper.getThumbnailFromPath(image1)).toBe("a-jpeg_thumb.jpg"); - expect(umbImageHelper.getThumbnailFromPath(image2)).toBe("a-png_thumb.jpg"); - expect(umbImageHelper.getThumbnailFromPath(image3)).toBe("thisisagif.blah_thumb.jpg"); + expect(umbImageHelper.getThumbnailFromPath(image1)).toBe("a-jpeg_big-thumb.jpg"); + expect(umbImageHelper.getThumbnailFromPath(image2)).toBe("a-png_big-thumb.jpg"); + expect(umbImageHelper.getThumbnailFromPath(image3)).toBe("thisisagif.blah_big-thumb.jpg"); }); }); From e9f69e39abeb9e7daecc6210965bd7e37320d0c8 Mon Sep 17 00:00:00 2001 From: perploug Date: Tue, 24 Sep 2013 14:47:06 +0200 Subject: [PATCH 2/4] Adds folder icons to the photo folder directive --- .../html/umbphotofolder.directive.js | 49 ++++++++++++------- .../src/less/property-editors.less | 44 +++++++++++++++-- .../common/dialogs/mediapicker.controller.js | 16 ++++++ .../src/views/common/dialogs/mediapicker.html | 9 ++++ .../directives/html/umb-photo-folder.html | 28 +++++++++-- .../folderbrowser/folderbrowser.controller.js | 2 +- .../mediapicker/mediapicker.html | 2 +- 7 files changed, 122 insertions(+), 28 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/html/umbphotofolder.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/html/umbphotofolder.directive.js index 50bbca7574..814db432d0 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/html/umbphotofolder.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/html/umbphotofolder.directive.js @@ -28,11 +28,11 @@ angular.module("umbraco.directives.html") var photos = ngModel.$modelValue; var rows = []; - scope.baseline = element.attr('baseline') | 0; - scope.minWidth = element.attr('minwidth') | 420; - scope.minHeight = element.attr('minheight') | 200; - scope.border = element.attr('border') | 5; - + scope.baseline = element.attr('baseline') ? parseInt(element.attr('baseline'),10) : 0; + scope.minWidth = element.attr('min-width') ? parseInt(element.attr('min-width'),10) : 420; + scope.minHeight = element.attr('min-height') ? parseInt(element.attr('min-height'),10) : 200; + scope.border = element.attr('border') ? parseInt(element.attr('border'),10) : 5; + scope.clickHandler = scope.$eval(element.attr('on-click')); scope.lastWidth = Math.max(element.width(), scope.minWidth); // get row width - this is fixed. @@ -46,24 +46,30 @@ angular.module("umbraco.directives.html") // store relative widths of all images (scaled to match estimate height above) var ws = []; $.each(photos, function(key, val) { - val.width_n = $.grep(val.properties, function(val, index) {return (val.alias === "umbracoWidth");})[0].value; - val.height_n = $.grep(val.properties, function(val, index) {return (val.alias === "umbracoHeight");})[0].value; - val.url_n = imageHelper.getThumbnail({ imageModel: val, scope: scope }); - - var wt = parseInt(val.width_n, 10); - var ht = parseInt(val.height_n, 10); - - if( ht !== h ) { - wt = Math.floor(wt * (h / ht)); - } - - ws.push(wt); + + val.width_n = $.grep(val.properties, function(val, index) {return (val.alias === "umbracoWidth");})[0]; + val.height_n = $.grep(val.properties, function(val, index) {return (val.alias === "umbracoHeight");})[0]; + + //val.url_n = imageHelper.getThumbnail({ imageModel: val, scope: scope }); + + if(val.width_n && val.height_n){ + var wt = parseInt(val.width_n.value, 10); + var ht = parseInt(val.height_n.value, 10); + + if( ht !== h ) { + wt = Math.floor(wt * (h / ht)); + } + + ws.push(wt); + }else{ + //if its files or folders, we make them square + ws.push(scope.minHeight); + } }); var rowNum = 0; var limit = photos.length; - while(scope.baseline < limit) { rowNum++; @@ -103,7 +109,12 @@ angular.module("umbraco.directives.html") tw += wt + scope.border * 2; // Create image, set src, width, height and margin - var purl = photo.url_n; + //var purl = photo.url_n; + photo.thumbnail = imageHelper.getThumbnail({ imageModel: photo, scope: scope }); + if(!photo.thumbnail){ + photo.thumbnail = "none"; + } + photo.style = {"width": wt, "height": ht, "margin": scope.border+"px", "cursor": "pointer"}; row.photos.push(photo); i++; diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less index 756560931a..7206b272bb 100644 --- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less +++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less @@ -32,14 +32,52 @@ ul.color-picker li a { border:none; } + // // Media picker // -------------------------------------------------- .umb-mediapicker .add-link{ display: inline-block; - height: 100px; - width: 100px; + height: 120px; + width: 120px; + text-align: center; + color: @grayLight; + border: 2px @grayLight dashed !important; + line-height: 120px; +} + + +// +// folder-browser +// -------------------------------------------------- +.umb-folderbrowser .add-link{ + display: inline-block; + height: 120px; + width: 120px; text-align: center; border: 1px @grayLight dashed; - line-height: 100px + line-height: 120px } + +// +// Photo folder styling +// -------------------------------------------------- + +.umb-photo-folder .umb-non-thumbnail{ + text-align: center; + color: @gray; + font-size: 12px; +} + +.umb-photo-folder .umb-non-thumbnail i{ + color: @grayLight; + font-size: 60px; + line-height: 80px; + display: block +} + + +.umb-photo-folder .selected img{ + opacity:0.5; +} + diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.controller.js index a813f76d67..8c02df4bbd 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.controller.js @@ -55,6 +55,22 @@ angular.module("umbraco") $scope.gotoFolder($scope.options.formData.currentFolder); }); + $scope.clickHandler = function(image, ev){ + if (image.contentTypeAlias.toLowerCase() == 'folder') { + $scope.options.formData.currentFolder = image.id; + $scope.gotoFolder(image.id); + }else if (image.contentTypeAlias.toLowerCase() == 'image') { + eventsService.publish("Umbraco.Dialogs.MediaPickerController.Select", image).then(function(image){ + if(dialogOptions && dialogOptions.multipicker){ + $scope.select(image); + image.cssclass = ($scope.dialogData.selection.indexOf(image) > -1) ? "selected" : ""; + }else{ + $scope.submit(image); + } + }); + } + }; + $scope.selectMediaItem = function(image) { if (image.contentTypeAlias.toLowerCase() == 'folder') { $scope.options.formData.currentFolder = image.id; diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.html b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.html index 68660a25ee..cb433fbaed 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.html +++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.html @@ -57,6 +57,14 @@ data-file-upload="options" data-file-upload-progress="" data-ng-class="{'fileupl
+ + +
diff --git a/src/Umbraco.Web.UI.Client/src/views/directives/html/umb-photo-folder.html b/src/Umbraco.Web.UI.Client/src/views/directives/html/umb-photo-folder.html index 0e4131f3ad..61c87f25dd 100644 --- a/src/Umbraco.Web.UI.Client/src/views/directives/html/umb-photo-folder.html +++ b/src/Umbraco.Web.UI.Client/src/views/directives/html/umb-photo-folder.html @@ -1,8 +1,28 @@
- + + +
+ + {{img.name}} +
+ + {{img.name}} + + + +
\ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/folderbrowser/folderbrowser.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/folderbrowser/folderbrowser.controller.js index 3feb64ecd2..86243dfd17 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/folderbrowser/folderbrowser.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/folderbrowser/folderbrowser.controller.js @@ -40,7 +40,7 @@ angular.module("umbraco") $scope.images = data; //update the thumbnail property _.each($scope.images, function(img) { - img.thumbnail = imageHelper.getThumbnail({ imageModel: img, scope: $scope }); + //img.thumbnail = imageHelper.getThumbnail({ imageModel: img, scope: $scope }); }); // prettify the look and feel diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html index fc2e061b49..8632339a56 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html @@ -1,7 +1,7 @@
    -
  • +
  • From 5c8d027383951c591565da6fa20e4e90feffc4a7 Mon Sep 17 00:00:00 2001 From: perploug Date: Tue, 24 Sep 2013 16:02:58 +0200 Subject: [PATCH 3/4] Media delete dialog, missing D attr validation --- .../src/common/resources/media.resource.js | 31 +++++++++++++ .../src/views/content/delete.html | 4 ++ .../src/views/directives/umb-confirm.html | 13 ++---- .../src/views/media/delete.html | 10 +++++ .../views/media/media.delete.controller.js | 43 +++++++++++++++++++ src/Umbraco.Web/Editors/MediaController.cs | 34 +++++++++++++++ 6 files changed, 125 insertions(+), 10 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/views/media/delete.html create mode 100644 src/Umbraco.Web.UI.Client/src/views/media/media.delete.controller.js diff --git a/src/Umbraco.Web.UI.Client/src/common/resources/media.resource.js b/src/Umbraco.Web.UI.Client/src/common/resources/media.resource.js index fc138fe28c..ceceebacc3 100644 --- a/src/Umbraco.Web.UI.Client/src/common/resources/media.resource.js +++ b/src/Umbraco.Web.UI.Client/src/common/resources/media.resource.js @@ -88,6 +88,37 @@ function mediaResource($q, $http, umbDataFormatter, umbRequestHelper) { [{ id: id }])), 'Failed to retreive data for media id ' + id); }, + + /** + * @ngdoc method + * @name umbraco.resources.mediaResource#deleteById + * @methodOf umbraco.resources.mediaResource + * + * @description + * Deletes a media item with a given id + * + * ##usage + * 
    +         * mediaResource.deleteById(1234)
+         *    .then(function() {
+         *        alert('its gone!');
+         *    });
+         *
    + * + * @param {Int} id id of media item to delete + * @returns {Promise} resourcePromise object. + * + */ + deleteById: function(id) { + return umbRequestHelper.resourcePromise( + $http.delete( + umbRequestHelper.getApiUrl( + "mediaApiBaseUrl", + "DeleteById", + [{ id: id }])), + 'Failed to delete item ' + id); + }, + /** * @ngdoc method * @name umbraco.resources.mediaResource#getByIds diff --git a/src/Umbraco.Web.UI.Client/src/views/content/delete.html b/src/Umbraco.Web.UI.Client/src/views/content/delete.html index 9b8aed9e2e..d3e44fce25 100644 --- a/src/Umbraco.Web.UI.Client/src/views/content/delete.html +++ b/src/Umbraco.Web.UI.Client/src/views/content/delete.html @@ -1,6 +1,10 @@
    +

    + Are you sure you want to delete {{currentNode.name}} ? +

    + diff --git a/src/Umbraco.Web.UI.Client/src/views/directives/umb-confirm.html b/src/Umbraco.Web.UI.Client/src/views/directives/umb-confirm.html index 1bb51d078e..d9f4f18e53 100644 --- a/src/Umbraco.Web.UI.Client/src/views/directives/umb-confirm.html +++ b/src/Umbraco.Web.UI.Client/src/views/directives/umb-confirm.html @@ -1,13 +1,6 @@

    {{caption}}

    - - - + + Cancel + Ok
    \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/media/delete.html b/src/Umbraco.Web.UI.Client/src/views/media/delete.html new file mode 100644 index 0000000000..dcbedf8ed7 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/media/delete.html @@ -0,0 +1,10 @@ +
    +
    + +

    + Are you sure you want to delete {{currentNode.name}} ? +

    + + +
    +
    diff --git a/src/Umbraco.Web.UI.Client/src/views/media/media.delete.controller.js b/src/Umbraco.Web.UI.Client/src/views/media/media.delete.controller.js new file mode 100644 index 0000000000..3b06e080bc --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/media/media.delete.controller.js @@ -0,0 +1,43 @@ +/** + * @ngdoc controller + * @name Umbraco.Editors.ContentDeleteController + * @function + * + * @description + * The controller for deleting content + */ +function MediaDeleteController($scope, mediaResource, treeService, navigationService) { + + $scope.performDelete = function() { + + //mark it for deletion (used in the UI) + $scope.currentNode.loading = true; + + mediaResource.deleteById($scope.currentNode.id).then(function () { + $scope.currentNode.loading = false; + + //get the root node before we remove it + var rootNode = treeService.getTreeRoot($scope.currentNode); + + //TODO: Need to sync tree, etc... + treeService.removeNode($scope.currentNode); + + //ensure the recycle bin has child nodes now + var recycleBin = treeService.getDescendantNode(rootNode, -21); + if(recycleBin){ + recycleBin.hasChildren = true; + } + + navigationService.hideMenu(); + + },function() { + $scope.currentNode.loading = false; + }); + }; + + $scope.cancel = function() { + navigationService.hideDialog(); + }; +} + +angular.module("umbraco").controller("Umbraco.Editors.Media.DeleteController", MediaDeleteController); diff --git a/src/Umbraco.Web/Editors/MediaController.cs b/src/Umbraco.Web/Editors/MediaController.cs index d1e72831ad..fc4c83b416 100644 --- a/src/Umbraco.Web/Editors/MediaController.cs +++ b/src/Umbraco.Web/Editors/MediaController.cs @@ -126,6 +126,40 @@ namespace Umbraco.Web.Editors .Select(Mapper.Map>); } + /// + /// Moves an item to the recycle bin, if it is already there then it will permanently delete it + /// + /// + /// + /// + /// The CanAccessContentAuthorize attribute will deny access to this method if the current user + /// does not have Delete access to this node. + /// + + [EnsureUserPermissionForMedia("id")] + public HttpResponseMessage DeleteById(int id) + { + //TODO: We need to check if the user is allowed to do this! + + var foundMedia = Services.MediaService.GetById(id); + if (foundMedia == null) + { + return HandleContentNotFound(id, false); + } + + //if the current item is in the recycle bin + if (foundMedia.IsInRecycleBin() == false) + { + Services.MediaService.MoveToRecycleBin(foundMedia, UmbracoUser.Id); + } + else + { + Services.MediaService.Delete(foundMedia, UmbracoUser.Id); + } + + return Request.CreateResponse(HttpStatusCode.OK); + } + /// /// Saves content /// From 3dd583b1d301fbe9573db52b30204ee5f596cd77 Mon Sep 17 00:00:00 2001 From: perploug Date: Tue, 24 Sep 2013 16:03:09 +0200 Subject: [PATCH 4/4] Fixes broken table drag n drop --- src/Umbraco.Web.UI.Client/src/less/dragdrop.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/dragdrop.less b/src/Umbraco.Web.UI.Client/src/less/dragdrop.less index 61ea911956..74e968051b 100644 --- a/src/Umbraco.Web.UI.Client/src/less/dragdrop.less +++ b/src/Umbraco.Web.UI.Client/src/less/dragdrop.less @@ -2,7 +2,7 @@ body.dragging, body.dragging * { cursor: move !important; } -.dragged { +li.dragged { position: absolute; opacity: 0.5; z-index: 2000;