Fixes: U4-7570 Hide image, focal point and remove link until image has loaded

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');
+					});
+
 				}
 			};
 		});

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;
 						});
 					});
 

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
 // --------------------------------------------------

src/Umbraco.Web.UI.Client/src/views/components/imaging/umb-image-gravity.html

@@ -1,12 +1,12 @@
 <div class="umb-cropper-gravity">
-	<div class="gravity-container">
+	<div class="gravity-container" ng-show="loaded">
 		<div class="viewport">
-			<img ng-src="{{src}}" style="max-width: 100%; max-height: 100%" />
+			<img ng-src="{{src}}" style="max-width: 100%; max-height: 100%" ng-click="setFocalPoint($event)" draggable="false" />
 
 			<div class="overlay" ng-style="style()">
-				
+
 			</div>
-			
+
 		</div>
 	</div>
-</div>
+</div>

src/Umbraco.Web.UI.Client/src/views/components/imaging/umb-image-thumbnail.html

@@ -1,4 +1,5 @@
-<div class="umb-crop-thumbnail-container" 
-	ng-style="{height: height, width: width, overflow: 'hidden', position: 'relative'}">
+<div class="umb-crop-thumbnail-container"
+	ng-style="{height: height, width: width, overflow: 'hidden', position: 'relative'}"
+	ng-show="loaded">
 	<img ng-src="{{src}}" alt="{{}}" ng-style="preview" class="noScale" />
-</div>
+</div>

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;

src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.html

@@ -17,7 +17,7 @@
         <div class="imagecropper clearfix">
 
             <div ng-if="currentCrop" style="float:left;" class="clearfix">
-                <div style="position: relative; margin-bottom: 10px; width: 492px; border: 1px solid #f8f8f8;">
+                <div class="umb-cropper__container">
 
                     <i ng-click="done()" style="opacity: 0.5; position: absolute; top: 3px; right: 3px" class="icon icon-delete btn-round"></i>
 
@@ -37,11 +37,15 @@
                 </div>
             </div>
             <div ng-if="!currentCrop" class="umb-cropper-imageholder clearfix">
-                <umb-image-gravity src="imageSrc"
-                                   center="model.value.focalPoint" />
+                <umb-image-gravity
+                    src="imageSrc"
+                    center="model.value.focalPoint"
+                    on-image-loaded="imageLoaded">
+                </umb-image-gravity>
+                <a href class="btn btn-link btn-crop-delete" ng-show="imageIsLoaded" ng-click="clear()"><i class="icon-delete red"></i> <localize key="content_uploadClear">Remove file</localize></a>
             </div>
 
-            <ul class="umb-sortable-thumbnails cropList clearfix" ng-class="{'many':model.value.crops.length >= 4}">
+            <ul class="umb-sortable-thumbnails cropList clearfix">
                 <li ng-repeat=" (key,value) in model.value.crops" ng-class="{'current':currentCrop.alias === value.alias}">
                     <a href title="{{value.alias}}: {{value.width}}px x {{value.height}}px" ng-click="crop(value)">
                         <umb-image-thumbnail center="model.value.focalPoint"
@@ -59,7 +63,6 @@
 
 
         </div>
-        <a href class="btn btn-link btn-crop-delete" ng-click="clear()"><i class="icon-delete red"></i> <localize key="content_uploadClear">Remove file</localize></a>
 
     </div>
-</div>
+</div>