diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbimagecrop.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbimagecrop.directive.js index 7d6d3d975a..fbe6a0456c 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbimagecrop.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbimagecrop.directive.js @@ -9,12 +9,11 @@ angular.module("umbraco.directives") return { restrict: 'E', replace: true, - templateUrl: 'views/directives/umb-image-crop.html', + templateUrl: 'views/directives/imaging/umb-image-crop.html', scope: { - src: '@', - width: '@', - height: '@', - presets: '@', + src: '=', + width: '=', + height: '=', crop: "=" }, link: function(scope, element, attrs) { @@ -44,6 +43,7 @@ angular.module("umbraco.directives") }; }; + //elements var $viewport = element.find(".viewport"); var $image = element.find("img"); @@ -238,6 +238,7 @@ angular.module("umbraco.directives") if(scope.crop && scope.crop.top){ calculatePosition(scope.crop); }else{ + scope.crop = {}; fitImage(); } @@ -262,4 +263,4 @@ angular.module("umbraco.directives") }); } }; - }); + }); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbimagegravity.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbimagegravity.directive.js index d7afaaa58f..03f3dd7b7e 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbimagegravity.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbimagegravity.directive.js @@ -11,43 +11,25 @@ angular.module("umbraco.directives") return { restrict: 'E', replace: true, - templateUrl: 'views/directives/umb-image-gravity.html', + templateUrl: 'views/directives/imaging/umb-image-gravity.html', scope: { - src: '@', - width: '@', - height: '@', + src: '=', + width: "=", + height: "=", gravity: "=" }, link: function(scope, element, attrs) { - scope.scale = 100; - - //if image is over this, we re-calculate the editors global ratio - //this will not have an effect on the result, since that is returned in percentage - scope.maxHeight = 500; - scope.maxWidth = 600; - - scope.width = 400; - scope.height = 320; - - scope.dimensions = { - image: {}, - viewport:{}, - ratio: 1 - }; - - scope.style = function () { - return { - 'height': parseInt(scope.height, 10) + 'px', - 'width': parseInt(scope.width, 10) + 'px' - }; - }; - //elements var $viewport = element.find(".viewport"); var $image = element.find("img"); var $overlay = element.find(".overlay"); - var $container = element.find(".crop-container"); + + + var setDimensions = function(){ + scope.imagewidth = $image.width(); + scope.imageheight = $image.height(); + }; var setImageSize = function(width, height){ $image.width(width); @@ -55,23 +37,20 @@ angular.module("umbraco.directives") $viewport.width(width); $viewport.height(height); - - scope.dimensions.image.width = width; - scope.dimensions.image.height = height; }; - //when loading an image without any crop info, we center and fit it var fitImage = function(){ fitToViewPort($image); centerImage($image); + $log.log("centered and fitted"); }; //utill for centering scaled image var centerImage = function(img) { img.css({ 'position': 'absolute', - 'left': scope.dimensions.viewport.width / 2 - scope.dimensions.image.width / 2, - 'top': scope.dimensions.viewport.height / 2 - scope.dimensions.image.height / 2 + 'left': scope.width / 2 - scope.imageWidth / 2, + 'top': scope.height / 2 - scope.imageHeight / 2 }); }; @@ -79,29 +58,16 @@ angular.module("umbraco.directives") var fitToViewPort = function(img) { //returns size fitting the cropper var size = calculateAspectRatioFit( - scope.dimensions.image.width, - scope.dimensions.image.height, - scope.dimensions.viewport.width, - scope.dimensions.viewport.height, - true); + scope.imageWidth, + scope.imageHeight, + scope.width, + scope.height, + false); //sets the image size and updates the scope setImageSize(size.width, size.height); - - scope.minScale = size.ratio; - scope.maxScale = size.ratio * 3; - scope.currentScale = scope.minScale; - scope.scale = scope.currentScale; }; - var resizeImageToScale = function(img, ratio){ - //do stuff - var size = calculateSizeToRatio(scope.dimensions.image.originalWidth, scope.dimensions.image.originalHeight, ratio); - - setImageSize(size.width, size.height); - centerImage(img); - scope.currentScale = scope.scale; - }; //utill for getting either min/max aspect ratio to scale image after var calculateAspectRatioFit = function(srcWidth, srcHeight, maxWidth, maxHeight, maximize) { @@ -116,11 +82,6 @@ angular.module("umbraco.directives") return { width:srcWidth*ratio, height:srcHeight*ratio, ratio: ratio}; }; - //utill for scaling width / height given a ratio - var calculateSizeToRatio= function(srcWidth, srcHeight, ratio) { - return { width:srcWidth*ratio, height:srcHeight*ratio, ratio: ratio}; - }; - var calculateGravity = function(){ scope.gravity.left = $overlay[0].offsetLeft + 10; scope.gravity.top = $overlay[0].offsetTop + 10; @@ -135,18 +96,17 @@ angular.module("umbraco.directives") } }); + //// INIT ///// $image.load(function(){ + $timeout(function(){ $image.width("auto"); $image.height("auto"); - scope.dimensions.image.originalWidth = $image.width(); - scope.dimensions.image.originalHeight = $image.height(); - setDimensions(); - fitImage(); + scope.loaded = true; }); }); @@ -154,4 +114,4 @@ angular.module("umbraco.directives") } }; - }); + }); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbimagethumbnail.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbimagethumbnail.directive.js new file mode 100644 index 0000000000..b3ff344224 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbimagethumbnail.directive.js @@ -0,0 +1,31 @@ +/** +* @ngdoc directive +* @name umbraco.directives.directive:umbCropsy +* @restrict E +* @function +* @description +* Used by editors that require naming an entity. Shows a textbox/headline with a required validator within it's own form. +**/ +angular.module("umbraco.directives") + .directive('umbImageThumbnail', function ($timeout, localizationService, $log) { + return { + restrict: 'E', + replace: true, + templateUrl: 'views/directives/imaging/umb-image-thumbnail.html', + + scope: { + src: '=', + width: '=', + height: '=', + gravity: "=", + crop: "=" + }, + + link: function(scope, element, attrs) { + scope.marginLeft = 0-Math.abs( scope.width * scope.gravity.left); + scope.marginTop = 0-Math.abs( scope.width * scope.gravity.top); + + + } + }; + }); \ No newline at end of file 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 6291c1066c..fd37de89b8 100644 --- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less +++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less @@ -158,7 +158,8 @@ ul.color-picker li a { background: white; margin: 5px; position: relative; - text-align: center + text-align: center; + vertical-align: top; } .umb-sortable-thumbnails li:hover a{ @@ -173,6 +174,11 @@ ul.color-picker li a { display:block; } +.umb-sortable-thumbnails li img.noScale{ + max-width: none !important; + max-height: none !important; +} + .umb-sortable-thumbnails .icon-holder .icon{ font-size: 60px; line-height: 70px; @@ -188,28 +194,27 @@ ul.color-picker li a { // Cropper // ------------------------------------------------- -.umb-cropper .crop-container .viewport img { - position: absolute; - top: 0; - left: 0; -} +.umb-cropper img, .umb-cropper-gravity img{ + position: absolute; + top: 0; + left: 0; + } -.umb-cropper .overlay { + .umb-cropper .overlay, .umb-cropper-gravity .overlay { top: 0; left: 0; cursor: move; z-index: 6001; } -.umb-cropper .viewport { +.umb-cropper .viewport, .umb-cropper-gravity .viewport { overflow: hidden; position: relative; + border:1px solid @grayLight; width: 600px; - height: 400px; - border:1px solid #ccc; - background-image: url('images/viewport_background.gif'); -} + height: 480px; + } .umb-cropper .viewport:after { content: ""; @@ -227,15 +232,20 @@ ul.color-picker li a { box-shadow: inset 0 0 0 20px white,inset 0 0 0 21px rgba(0,0,0,.1),inset 0 0 20px 21px rgba(0,0,0,.2); } -.umb-cropper-gravity .pointer{ - width: 20px; - height: 20px; - - top: 0; - left: 0; - cursor: move; - z-index: 6001; +.umb-cropper-gravity .overlay{ + width: 26px; + height: 26px; + text-align: center; + border-radius: 20px; + opacity: 0.6; + background: white; } +.umb-cropper-gravity .overlay i{ + font-size: 26px; + line-height: 26px; + opacity: 0.8 !important; +} + // diff --git a/src/Umbraco.Web.UI.Client/src/views/directives/imaging/umb-image-gravity.html b/src/Umbraco.Web.UI.Client/src/views/directives/imaging/umb-image-gravity.html index 97acd321d2..198e8d3f98 100644 --- a/src/Umbraco.Web.UI.Client/src/views/directives/imaging/umb-image-gravity.html +++ b/src/Umbraco.Web.UI.Client/src/views/directives/imaging/umb-image-gravity.html @@ -1,4 +1,4 @@ -
+
@@ -6,12 +6,7 @@
-
-
-		{{gravity | json}}
-
-
\ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/directives/imaging/umb-image-thumbnail.html b/src/Umbraco.Web.UI.Client/src/views/directives/imaging/umb-image-thumbnail.html new file mode 100644 index 0000000000..fe7e299648 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/directives/imaging/umb-image-thumbnail.html @@ -0,0 +1,5 @@ +
+ +
\ No newline at end of file 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 91ab18dd07..9e31aadddb 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,5 +1,41 @@
+
+
+ +
+ +
+ +
+ + +
+