From 2632ef740c5e581dbf1bda95f7461025a9b108f5 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 23 Feb 2016 13:55:05 +0100 Subject: [PATCH 1/3] Fixes: U4-7570 Hide image, focal point and remove link until image has loaded --- .../imaging/umbimagegravity.directive.js | 46 ++++++++++++++-- .../imaging/umbimagethumbnail.directive.js | 2 + .../src/less/property-editors.less | 52 ++++++++++--------- .../components/imaging/umb-image-gravity.html | 10 ++-- .../imaging/umb-image-thumbnail.html | 7 +-- .../imagecropper/imagecropper.controller.js | 5 ++ .../imagecropper/imagecropper.html | 15 +++--- 7 files changed, 94 insertions(+), 43 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/imaging/umbimagegravity.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/imaging/umbimagegravity.directive.js index 9e5944a460..4434407d54 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/imaging/umbimagegravity.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/imaging/umbimagegravity.directive.js @@ -14,7 +14,8 @@ angular.module("umbraco.directives") templateUrl: 'views/components/imaging/umb-image-gravity.html', scope: { src: '=', - center: "=" + center: "=", + onImageLoaded: "=" }, link: function(scope, element, attrs) { @@ -26,6 +27,8 @@ angular.module("umbraco.directives") top: 0 }; + scope.loaded = false; + //elements var $viewport = element.find(".viewport"); var $image = element.find("img"); @@ -42,6 +45,19 @@ angular.module("umbraco.directives") }; }; + scope.setFocalPoint = function(event) { + + scope.$emit("imageFocalPointStart"); + + var offsetX = event.offsetX - 10; + var offsetY = event.offsetY - 10; + + calculateGravity(offsetX, offsetY); + + lazyEndEvent(); + + }; + var setDimensions = function(){ scope.dimensions.width = $image.width(); scope.dimensions.height = $image.height(); @@ -54,9 +70,9 @@ angular.module("umbraco.directives") } }; - var calculateGravity = function(){ - scope.dimensions.left = $overlay[0].offsetLeft; - scope.dimensions.top = $overlay[0].offsetTop; + var calculateGravity = function(offsetX, offsetY){ + scope.dimensions.left = offsetX; + scope.dimensions.top = offsetY; scope.center.left = (scope.dimensions.left+10) / scope.dimensions.width; scope.center.top = (scope.dimensions.top+10) / scope.dimensions.height; @@ -80,7 +96,9 @@ angular.module("umbraco.directives") }, stop: function() { scope.$apply(function(){ - calculateGravity(); + var offsetX = $overlay[0].offsetLeft; + var offsetY = $overlay[0].offsetTop; + calculateGravity(offsetX, offsetY); }); lazyEndEvent(); @@ -91,8 +109,26 @@ angular.module("umbraco.directives") $image.load(function(){ $timeout(function(){ setDimensions(); + scope.loaded = true; + scope.onImageLoaded(); }); }); + + $(window).on('resize.umbImageGravity', function(){ + scope.$apply(function(){ + $timeout(function(){ + setDimensions(); + }); + var offsetX = $overlay[0].offsetLeft; + var offsetY = $overlay[0].offsetTop; + calculateGravity(offsetX, offsetY); + }); + }); + + scope.$on('$destroy', function() { + $(window).off('.umbImageGravity'); + }); + } }; }); diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/imaging/umbimagethumbnail.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/imaging/umbimagethumbnail.directive.js index c93747616f..c1892b6c05 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/imaging/umbimagethumbnail.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/imaging/umbimagethumbnail.directive.js @@ -26,6 +26,7 @@ angular.module("umbraco.directives") link: function(scope, element, attrs) { //// INIT ///// var $image = element.find("img"); + scope.loaded = false; $image.load(function(){ $timeout(function(){ @@ -52,6 +53,7 @@ angular.module("umbraco.directives") } setPreviewStyle(); + scope.loaded = true; }); }); 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 80647b5327..44ff153c14 100644 --- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less +++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less @@ -275,11 +275,12 @@ ul.color-picker li a { .umb-cropper{ position: relative; - padding: 10px; } .umb-cropper img, .umb-cropper-gravity img{ - position: absolute; + position: relative; + max-width: 100%; + height: auto; top: 0; left: 0; } @@ -293,6 +294,7 @@ ul.color-picker li a { left: 0; cursor: move; z-index: 6001; + position: absolute; } .umb-cropper .viewport{ @@ -304,8 +306,8 @@ ul.color-picker li a { .umb-cropper-gravity .viewport{ overflow: hidden; position: relative; - width: 400px; - height: 300px + width: 100%; + height: 100%; } @@ -372,15 +374,31 @@ ul.color-picker li a { } .gravity-container .viewport { - width: 494px; + max-width: 600px; + } + + .imagecropper { + display: flex; + align-items: flex-start; + flex-direction: row; + + @media (max-width: 768px) { + flex-direction: column; + float: left; + } + } + + .imagecropper .umb-cropper__container { + position: relative; + margin-bottom: 10px; + //width: 492px; + border: 1px solid #f8f8f8; } .imagecropper .umb-sortable-thumbnails { - border-left: 2px solid #f8f8f8; - margin-left: 4px; - padding-left: 2px; - float: left; - width: 100px; + display: flex; + flex-direction: row; + flex-wrap: wrap; } .imagecropper .umb-sortable-thumbnails li { @@ -428,20 +446,6 @@ ul.color-picker li a { text-align: left; } - .imagecropper .umb-sortable-thumbnails.many { - width: 210px; - } - - .imagecropper .umb-sortable-thumbnails.many li { - width: 85px; - float: left; - } - - .imagecropper .umb-sortable-thumbnails.many li:nth-child(2) { - margin-top: 0; - padding-top: 0; - } - // // folder-browser // -------------------------------------------------- diff --git a/src/Umbraco.Web.UI.Client/src/views/components/imaging/umb-image-gravity.html b/src/Umbraco.Web.UI.Client/src/views/components/imaging/umb-image-gravity.html index c878bf8189..21500e7c84 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/imaging/umb-image-gravity.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/imaging/umb-image-gravity.html @@ -1,12 +1,12 @@
-
+
- +
- +
- +
-
\ No newline at end of file +
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/imaging/umb-image-thumbnail.html b/src/Umbraco.Web.UI.Client/src/views/components/imaging/umb-image-thumbnail.html index 424f00cc9a..2f3861ae6c 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/imaging/umb-image-thumbnail.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/imaging/umb-image-thumbnail.html @@ -1,4 +1,5 @@ -
+
{{}} -
\ No newline at end of file +
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.controller.js index cce8dc2e7c..1e8db1a24b 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.controller.js @@ -5,6 +5,7 @@ angular.module('umbraco') function ($rootScope, $routeParams, $scope, $log, mediaHelper, cropperHelper, $timeout, editorState, umbRequestHelper, fileManager, angularHelper) { var config = angular.copy($scope.model.config); + $scope.imageIsLoaded = false; //move previously saved value to the editor if ($scope.model.value) { @@ -71,6 +72,10 @@ angular.module('umbraco') } }; + $scope.imageLoaded = function() { + $scope.imageIsLoaded = true; + }; + //on image selected, update the cropper $scope.$on("filesSelected", function (ev, args) { $scope.model.value = config; diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.html index 29148b32eb..7fdc12c5ba 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.html @@ -17,7 +17,7 @@
-
+
@@ -37,11 +37,15 @@
- + + + Remove file
-
-
\ No newline at end of file + From 3e73c2da43de028e7826bc1134e179aef8a379d6 Mon Sep 17 00:00:00 2001 From: Simon Busborg Date: Tue, 23 Feb 2016 16:31:10 +0100 Subject: [PATCH 2/3] Fixed width of cropper --- .../src/less/property-editors.less | 110 ++++++++++++------ .../imagecropper/imagecropper.html | 30 ++--- 2 files changed, 92 insertions(+), 48 deletions(-) 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 44ff153c14..4a82f742cf 100644 --- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less +++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less @@ -301,6 +301,8 @@ ul.color-picker li a { overflow: hidden; position: relative; margin: auto; + max-width: 100%; + height: auto; } .umb-cropper-gravity .viewport{ @@ -337,27 +339,38 @@ ul.color-picker li a { opacity: 0.8; } -.umb-cropper-gravity .overlay i{ +.umb-cropper-gravity .overlay i { font-size: 26px; line-height: 26px; opacity: 0.8 !important; } -.umb-cropper .crop-container{ +.umb-cropper .crop-container { text-align: center; } -.umb-cropper .crop-slider{ +.umb-cropper .crop-slider { vertical-align: middle; - padding: 10px 50px 10px 50px; + padding: 10px; border-top: 1px solid @grayLighter; margin-top: 10px; + + @media (min-width: 769px) { + padding: 10px 50px 10px 50px; + } } -.umb-cropper .crop-slider i{color: @gray;} -.umb-cropper .crop-slider input{ - margin-top: 7px; - width: 320px; +.umb-cropper .crop-slider i{ + color: @gray; +} + +.umb-cropper .crop-slider input { + margin-top: 7px; + width: ~"calc(100% - 45px)"; + + @media (min-width: 769px) { + width: 320px; + } } .umb-cropper-gravity .viewport, .umb-cropper-gravity, .umb-cropper-imageholder { display: inline-block; @@ -377,6 +390,10 @@ ul.color-picker li a { max-width: 600px; } + .gravity-container .viewport:hover { + cursor: pointer; + } + .imagecropper { display: flex; align-items: flex-start; @@ -385,14 +402,31 @@ ul.color-picker li a { @media (max-width: 768px) { flex-direction: column; float: left; + max-width: 100%; } } .imagecropper .umb-cropper__container { position: relative; margin-bottom: 10px; - //width: 492px; + max-width: 100%; border: 1px solid #f8f8f8; + + @media (min-width: 769px) { + width: 600px; + } + } + + .umb-close-cropper { + position: absolute; + top: 3px; + right: 3px; + cursor: pointer; + } + + .umb-close-cropper:hover { + opacity: .9; + background: @grayLighter; } .imagecropper .umb-sortable-thumbnails { @@ -402,43 +436,49 @@ ul.color-picker li a { } .imagecropper .umb-sortable-thumbnails li { - display: block; - } + display: flex; + flex-direction: column; + justify-content: space-between; - .imagecropper .umb-sortable-thumbnails li.current a, .imagecropper .umb-sortable-thumbnails li.current a:hover { - background: #eeeeee; - text-decoration: none; - } - - .imagecropper .umb-sortable-thumbnails li:first-of-type { + padding: 8px; margin-top: 0; - padding-top: 0; } - .imagecropper .umb-sortable-thumbnails li .crop-name, .imagecropper .umb-sortable-thumbnails li .crop-size { + .imagecropper .umb-sortable-thumbnails li.current { + border-color: @grayLight; + background: @grayLighter; + color: @black; + cursor: pointer; + } + + .imagecropper .umb-sortable-thumbnails li:hover, + .imagecropper .umb-sortable-thumbnails li.current:hover { + border-color: @grayLight; + background: @grayLighter; + color: @black; + + cursor: pointer; + + opacity: .95; + } + + .imagecropper .umb-sortable-thumbnails li .crop-name, + .imagecropper .umb-sortable-thumbnails li .crop-size { display: block; text-align: left; - font-size: 11px; + font-size: 13px; + line-height: 1; + } + + .imagecropper .umb-sortable-thumbnails li .crop-name { + font-weight: bold; + margin: 10px 0 5px; } .imagecropper .umb-sortable-thumbnails li .crop-size { font-size: 10px; font-style: italic; - color: #666; - } - - .imagecropper .umb-sortable-thumbnails li a { - display: block; - padding: 5px; - } - - .imagecropper .umb-sortable-thumbnails li a:hover { - background: #f8f8f8; - text-decoration: none; - } - - .imagecropper .umb-sortable-thumbnails li a:hover .crop-text { - text-decoration: none; + margin: 0 0 5px; } .btn-crop-delete { diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.html index 7fdc12c5ba..e274249b42 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.html @@ -16,10 +16,10 @@
-
+
- +
+ src="imageSrc"> +
+
From 981fb39af62abcfe4f868af0efdb219f3c373b11 Mon Sep 17 00:00:00 2001 From: Simon Busborg Date: Wed, 24 Feb 2016 09:14:13 +0100 Subject: [PATCH 3/3] Fixed crop slider --- .../src/less/property-editors.less | 23 ++++++++++++------- 1 file changed, 15 insertions(+), 8 deletions(-) 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 4a82f742cf..02badb9e7a 100644 --- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less +++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less @@ -350,27 +350,34 @@ ul.color-picker li a { } .umb-cropper .crop-slider { - vertical-align: middle; padding: 10px; border-top: 1px solid @grayLighter; margin-top: 10px; + display: flex; + align-items: center; + justify-content: center; + + flex-wrap: wrap; + @media (min-width: 769px) { padding: 10px 50px 10px 50px; } } -.umb-cropper .crop-slider i{ +.umb-cropper .crop-slider i { color: @gray; + flex: 0 0 25px; + padding: 0 5px; + box-sizing: border-box; +} + +.umb-cropper .crop-slider i:first-of-type { + text-align: right; } .umb-cropper .crop-slider input { - margin-top: 7px; - width: ~"calc(100% - 45px)"; - - @media (min-width: 769px) { - width: 320px; - } + flex: 0 1 auto; } .umb-cropper-gravity .viewport, .umb-cropper-gravity, .umb-cropper-imageholder { display: inline-block;