From afa3e9b5ebbbed65479443011e6b2962913e5c66 Mon Sep 17 00:00:00 2001
From: Kenn Jacobsen <post@kennjacobsen.dk>
Date: Tue, 9 Oct 2018 22:54:51 +0200
Subject: [PATCH] Improve image cropper UX (#3149)

---
 .../src/less/property-editors.less            | 12 +++++++++-
 .../imagecropper/imagecropper.controller.js   | 22 ++++++++++++++++++-
 .../imagecropper/imagecropper.html            | 11 +++++-----
 src/Umbraco.Web.UI/umbraco/config/lang/da.xml |  2 ++
 src/Umbraco.Web.UI/umbraco/config/lang/en.xml |  4 +++-
 .../umbraco/config/lang/en_us.xml             |  4 +++-
 6 files changed, 45 insertions(+), 10 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 d14a1abae9..e3a8128671 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/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;
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 bc2dd91722..47442495f7 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
@@ -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;
         };
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 18f528fbd2..a8f513f006 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
@@ -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>
 
diff --git a/src/Umbraco.Web.UI/umbraco/config/lang/da.xml b/src/Umbraco.Web.UI/umbraco/config/lang/da.xml
index 0e9fc09bcd..2ce6a31786 100644
--- a/src/Umbraco.Web.UI/umbraco/config/lang/da.xml
+++ b/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>
 
 
diff --git a/src/Umbraco.Web.UI/umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/umbraco/config/lang/en.xml
index 47a3dc74f4..89ba5e0828 100644
--- a/src/Umbraco.Web.UI/umbraco/config/lang/en.xml
+++ b/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>
diff --git a/src/Umbraco.Web.UI/umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/umbraco/config/lang/en_us.xml
index a9db9768cf..a42d4d0c60 100644
--- a/src/Umbraco.Web.UI/umbraco/config/lang/en_us.xml
+++ b/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>