From e9f69e39abeb9e7daecc6210965bd7e37320d0c8 Mon Sep 17 00:00:00 2001 From: perploug Date: Tue, 24 Sep 2013 14:47:06 +0200 Subject: [PATCH] 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 @@
    -
  • +