Improve image cropper UX (#3149)

src/Umbraco.Web.UI.Client/src/less/property-editors.less

@@ -315,7 +315,7 @@ div.umb-codeeditor .umb-btn-toolbar {
 
 .umb-mediapicker .umb-sortable-thumbnails li {
     flex-direction: column;
-    margin: 0 5px 5px 0;
+    margin: 0 0 5px 5px;
     padding: 5px;
 }
 
@@ -574,6 +574,16 @@ div.umb-codeeditor .umb-btn-toolbar {
         }
     }
 
+    .imagecropper .umb-cropper__container .button-drawer {
+        display: flex;
+        justify-content: flex-end;
+        padding: 10px;
+
+        button {
+            margin-left: 4px;
+        }
+    }
+
     .umb-close-cropper {
         position: absolute;
         top: 3px;

src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.controller.js

@@ -36,12 +36,32 @@ angular.module('umbraco')
 
         //crop a specific crop
         $scope.crop = function (crop) {
-            $scope.currentCrop = crop;
+            // clone the crop so we can discard the changes
+            $scope.currentCrop = angular.copy(crop);
             $scope.currentPoint = undefined;
         };
 
         //done cropping
         $scope.done = function () {
+            if (!$scope.currentCrop) {
+                return;
+            }
+            // find the original crop by crop alias and update its coordinates
+            var editedCrop = _.find($scope.model.value.crops, function(crop) {
+                return crop.alias === $scope.currentCrop.alias;
+            });
+            editedCrop.coordinates = $scope.currentCrop.coordinates;
+            $scope.close();
+        };
+
+        //reset the current crop
+        $scope.reset = function() {
+            $scope.currentCrop.coordinates = undefined;
+            $scope.done();
+        }
+
+        //close crop overlay
+        $scope.close = function (crop) {
             $scope.currentCrop = undefined;
             $scope.currentPoint = undefined;
         };

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

@@ -18,8 +18,6 @@
             <div ng-if="currentCrop" style="float:left; max-width: 100%;" class="clearfix">
                 <div class="umb-cropper__container">
 
-                    <i ng-click="done()" class="icon icon-delete btn-round umb-close-cropper"></i>
-
                     <div>
                         <umb-image-crop height="{{currentCrop.height}}"
                                         width="{{currentCrop.width}}"
@@ -30,10 +28,11 @@
                         </umb-image-crop>
                     </div>
 
-                    <a href style="margin:auto; text-align: center; font-size: 11px;" class="btn btn-link red"
-                       ng-click="currentCrop.coordinates = undefined; done()">
-                        <localize key="imagecropper_reset">Reset</localize>
-                    </a>
+                    <div class="button-drawer">
+                        <button class="btn btn-link" ng-click="reset()"><localize key="imagecropper_reset">Reset this crop</localize></button>
+                        <button class="btn" ng-click="close()"><localize key="imagecropper_undoEditCrop">Undo edits</localize></button>
+                        <button class="btn btn-success" ng-click="done()"><localize key="imagecropper_updateEditCrop">Done</localize></button>
+                    </div>
                 </div>
             </div>
 

src/Umbraco.Web.UI/umbraco/config/lang/da.xml

@@ -991,6 +991,8 @@ Mange hilsner fra Umbraco robotten
   </area>
   <area alias="imagecropper">
     <key alias="reset">Nulstil</key>
+    <key alias="updateEditCrop">Acceptér</key>
+    <key alias="undoEditCrop">Fortryd</key>
   </area>
 
 

src/Umbraco.Web.UI/umbraco/config/lang/en.xml

@@ -1296,11 +1296,13 @@ To manage your website, simply open the Umbraco back office and start adding con
         <key alias="externalLinkPlaceholder">Enter the link</key>
     </area>
     <area alias="imagecropper">
-        <key alias="reset">Reset</key>
+        <key alias="reset">Reset crop</key>
         <key alias="defineCrop">Define crop</key>
         <key alias="defineCropDescription">Give the crop an alias and its default width and height</key>
         <key alias="saveCrop">Save crop</key>
         <key alias="addCrop">Add new crop</key>
+        <key alias="updateEditCrop">Done</key>
+        <key alias="undoEditCrop">Undo edits</key>
     </area>
     <area alias="rollback">
         <key alias="currentVersion">Current version</key>

src/Umbraco.Web.UI/umbraco/config/lang/en_us.xml

@@ -1294,11 +1294,13 @@ To manage your website, simply open the Umbraco back office and start adding con
         <key alias="externalLinkPlaceholder">Enter the link</key>
     </area>
     <area alias="imagecropper">
-        <key alias="reset">Reset</key>
+        <key alias="reset">Reset crop</key>
         <key alias="defineCrop">Define crop</key>
         <key alias="defineCropDescription">Give the crop an alias and its default width and height</key>
         <key alias="saveCrop">Save crop</key>
         <key alias="addCrop">Add new crop</key>
+        <key alias="updateEditCrop">Done</key>
+        <key alias="undoEditCrop">Undo edits</key>
     </area>
     <area alias="rollback">
         <key alias="currentVersion">Current version</key>