diff --git a/src/Umbraco.Core/Models/ContentExtensions.cs b/src/Umbraco.Core/Models/ContentExtensions.cs index 00b44e74ac..7e3f5d6d1d 100644 --- a/src/Umbraco.Core/Models/ContentExtensions.cs +++ b/src/Umbraco.Core/Models/ContentExtensions.cs @@ -435,8 +435,9 @@ namespace Umbraco.Core.Models if (fileStream.CanSeek) fileStream.Seek(0, 0); using (var originalImage = Image.FromStream(fileStream)) { - // Make default thumbnail + // Make default thumbnails Resize(fs, fileName, extension, 100, "thumb", originalImage); + Resize(fs, fileName, extension, 500, "big-thumb", originalImage); //Look up Prevalues for this upload datatype - if it is an upload datatype if (property.PropertyType.PropertyEditorAlias == Constants.PropertyEditors.UploadFieldAlias) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/editors/umbsort.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/editors/umbsort.directive.js index 73bfc5bd3b..d6f645a4b0 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/editors/umbsort.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/editors/umbsort.directive.js @@ -33,6 +33,11 @@ angular.module("umbraco.directives") scope.opts.nested= cfg.nested || true, scope.opts.drop= cfg.drop || true, scope.opts.drag= cfg.drag || true, + scope.opts.clone = cfg.clone || "
  • "; + scope.opts.mode = cfg.mode || "list"; + + scope.opts.itemSelectorFull = $.trim(scope.opts.itemPath + " " + scope.opts.itemSelector); + /* scope.opts.isValidTarget = function(item, container) { if(container.el.is(".umb-" + scope.opts.group + "-container")){ @@ -46,25 +51,30 @@ angular.module("umbraco.directives") element.addClass("umb-" + cfg.group + "-container"); scope.opts.onDrag = function (item, position) { - item.css({ - left: position.left - adjustment.left, - top: position.top - adjustment.top - }); + if(scope.opts.mode === "list"){ + item.css({ + left: position.left - adjustment.left, + top: position.top - adjustment.top + }); + } }; scope.opts.onDrop = function (item, targetContainer, _super) { - var clonedItem = $('
  • ').css({height: 0}); - item.after(clonedItem); - clonedItem.animate({'height': item.height()}); - item.animate(clonedItem.position(), function () { - clonedItem.detach(); - _super(item); - }); + if(scope.opts.mode === "list"){ + //list mode + var clonedItem = $(scope.opts.clone).css({height: 0}); + item.after(clonedItem); + clonedItem.animate({'height': item.height()}); + + item.animate(clonedItem.position(), function () { + clonedItem.detach(); + _super(item); + }); + } - - var children = $("li", targetContainer.el); + var children = $(scope.opts.itemSelectorFull, targetContainer.el); var targetIndex = children.index(item); var targetScope = $(targetContainer.el[0]).scope(); @@ -110,10 +120,6 @@ angular.module("umbraco.directives") umbSortContextInternal.sourceScope.opts.onReleaseHandler.call(this, item, _args); } } - - - - }; scope.changeIndex = function(from, to){ @@ -138,7 +144,7 @@ angular.module("umbraco.directives") }; scope.opts.onDragStart = function (item, container, _super) { - var children = $("li", container.el); + var children = $(scope.opts.itemSelectorFull, container.el); var offset = item.offset(); umbSortContextInternal.sourceIndex = children.index(item); diff --git a/src/Umbraco.Web.UI.Client/src/common/services/util.service.js b/src/Umbraco.Web.UI.Client/src/common/services/util.service.js index f3d9f1498a..21e81d1ac3 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/util.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/util.service.js @@ -156,7 +156,7 @@ function imageHelper() { getThumbnailFromPath: function(imagePath) { var ext = imagePath.substr(imagePath.lastIndexOf('.')); - return imagePath.substr(0, imagePath.lastIndexOf('.')) + "_thumb" + ".jpg"; + return imagePath.substr(0, imagePath.lastIndexOf('.')) + "_big-thumb" + ".jpg"; }, detectIfImageByExtension: function(imagePath) { var lowered = imagePath.toLowerCase(); diff --git a/src/Umbraco.Web.UI.Client/src/less/dragdrop.less b/src/Umbraco.Web.UI.Client/src/less/dragdrop.less index afae4d4da3..61ea911956 100644 --- a/src/Umbraco.Web.UI.Client/src/less/dragdrop.less +++ b/src/Umbraco.Web.UI.Client/src/less/dragdrop.less @@ -9,21 +9,22 @@ body.dragging, body.dragging * { } .umb-sort li{ - display: block; + display: block; margin: 5px; padding: 5px; border: 1px solid #CCC; background: @grayLighter; } -.umb-sort li.placeholder { +.umb-sort .placeholder { position: relative; margin: 0; padding: 0; border: none; } -.umb-sort li.placeholder:before { - position: absolute; + +.umb-sort .placeholder:before { + position: absolute; content: ""; width: 0; height: 0; diff --git a/src/Umbraco.Web.UI.Client/src/less/modals.less b/src/Umbraco.Web.UI.Client/src/less/modals.less index 2e642457ca..0569a29aa2 100644 --- a/src/Umbraco.Web.UI.Client/src/less/modals.less +++ b/src/Umbraco.Web.UI.Client/src/less/modals.less @@ -149,7 +149,7 @@ }*/ .umb-thumbnails > li { - margin: 0 20px 20px 0; + margin: 1px; text-align: center; } @@ -184,7 +184,7 @@ .umb-thumbnails > li.folder a { width: 100px; height: 100px; - display: block + display: block; } .umb-thumbnails > li.folder a:hover { diff --git a/src/Umbraco.Web.UI.Client/src/views/content/content.sort.controller.js b/src/Umbraco.Web.UI.Client/src/views/content/content.sort.controller.js index d40c97f599..7c92367b46 100644 --- a/src/Umbraco.Web.UI.Client/src/views/content/content.sort.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/content/content.sort.controller.js @@ -21,7 +21,15 @@ function ContentSortController($scope, contentResource, treeService) { $scope.sortOptions ={ group: "pages", + containerSelector: 'table', + itemPath: '> tbody', + itemSelector: 'tr', + placeholder: '', + clone: "", + mode: "table", onSortHandler: function(item, args){ + + args.scope.changeIndex(args.oldIndex, args.newIndex); } }; diff --git a/src/Umbraco.Web.UI.Client/src/views/content/sort.html b/src/Umbraco.Web.UI.Client/src/views/content/sort.html index c86851929a..5538c14f21 100644 --- a/src/Umbraco.Web.UI.Client/src/views/content/sort.html +++ b/src/Umbraco.Web.UI.Client/src/views/content/sort.html @@ -1,11 +1,26 @@
    + + + + + + + + + + + +
    Name
    {{page.name}}
    + {{ pagesToSort | json}}
    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 a8b4d3f6c5..3feb64ecd2 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 @@ -5,15 +5,20 @@ angular.module("umbraco") var fn = $parse(attr.umbUploadPreview), file = fn(scope); if (file.preview) { - element.append(file.preview); + element.append(file.preview); } } }; }) .controller("Umbraco.Editors.FolderBrowserController", - function ($rootScope, $scope, assetsService, $routeParams, $timeout, umbRequestHelper, mediaResource, imageHelper) { + function ($rootScope, $scope, assetsService, $routeParams, $timeout, $element, umbRequestHelper, mediaResource, imageHelper) { var dialogOptions = $scope.$parent.dialogOptions; + $scope.minWidth = 480; + $scope.minHeight = 200; + $scope.lastWidth = 0; + $scope.baseline = 0; + $scope.filesUploading = []; $scope.options = { @@ -37,12 +42,18 @@ angular.module("umbraco") _.each($scope.images, function(img) { img.thumbnail = imageHelper.getThumbnail({ imageModel: img, scope: $scope }); }); + + // prettify the look and feel + $scope.lastWidth = Math.max($element.find(".umb-photo-folder-max-width").width(), $scope.minWidth); + $scope.baseLine = 0; + $scope.processPhotos($scope.images); }); }; $scope.$on('fileuploadstop', function(event, files){ $scope.loadChildren($scope.options.formData.currentFolder); $scope.queue = []; + $scope.filesUploading = []; }); $scope.$on('fileuploadprocessalways', function(e,data) { @@ -67,10 +78,136 @@ angular.module("umbraco") $scope.dragClearTimeout = $timeout(function () { $scope.dropping = null; $scope.dragClearTimeout = null; - }, 100); + }, 300); }) //init load $scope.loadChildren($routeParams.id); + + $scope.processPhotos = function(photos) { + // divs to contain the images + var d = $element.find(".umb-photo-folder"); + baseLine = $scope.baseLine; + minWidth = $scope.minWidth; + minHeight = $scope.minHeight; + lastWidth = $scope.lastWidth; + + if( baseLine === 0 ) { + d.empty(); + } + + // get row width - this is fixed. + var w = lastWidth; + + // initial height - effectively the maximum height +/- 10%; + var h = Math.max(minHeight,Math.floor(w / 5)); + // margin width + var border = 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(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) && (baseLine + c < limit)) + { + tw += ws[baseLine + c++] + border * 2; + } + + // skip the last row +// if( baseLine + c >= limit ) return; + + var d_row = $("
    ", {"class" : "picrow"}); + d.append(d_row); + + + // 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); + d_row.height(ht + border * 2); + d_row.width(lastWidth); + + while( i < c ) + { + var photo = photos[baseLine + i]; + // Calculate new width based on ratio + var wt = Math.floor(ws[baseLine + i] * r); + // add to total width with margins + tw += wt + border * 2; + + // Create image, set src, width, height and margin + var purl = photo.url_n; + + var img = $( + '', + { + "class": "umb-photo", + src: purl, + width: wt, + height: ht, + }).css("margin", border + "px").css("cursor", "pointer"); + img.data("name", photo.name); + img.data("author", photo.owner.name); + img.data("date", photo.updateDate); + img.click(function() {location.href="#/media/media/edit/" + photo.id;}); + d_row.append(img); + + i++; + } + + // set row height to actual height + margins + 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 ) + { + var img1 = d_row.find("img:nth-child(" + (i + 1) + ")"); + img1.width(img1.width() + 1); + 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 ) + { + var img2 = d_row.find("img:nth-child(" + (i + 1) + ")"); + img2.width(img2.width() - 1); + i = (i + 1) % c; + tw--; + } + } + + }; } ); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/folderbrowser/folderbrowser.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/folderbrowser/folderbrowser.html index 0640fd9e96..9251977c9c 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/folderbrowser/folderbrowser.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/folderbrowser/folderbrowser.html @@ -1,25 +1,44 @@
    -
    +
    +

    Drop your files here...

    -
    DROP HERE
    - -
    - NOW UPLOADING... -
      -
    • -
      -
      • -
    +
    +
      +
    • +
      +

      {{file.name}}

      +
      +
      • +
    +
    + +
    +
    + +