V8: Add custom crop indication to image cropper (#5626)

Thanks!  So sorry it's taken so long.

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

@@ -672,7 +672,8 @@
     }
 
     .imagecropper .umb-sortable-thumbnails li .crop-name,
-    .imagecropper .umb-sortable-thumbnails li .crop-size {
+    .imagecropper .umb-sortable-thumbnails li .crop-size,
+    .imagecropper .umb-sortable-thumbnails li .crop-annotation {
         display: block;
         text-align: left;
         font-size: 13px;
@@ -684,17 +685,28 @@
         margin: 10px 0 5px;
     }
 
-    .imagecropper .umb-sortable-thumbnails li .crop-size {
+    .imagecropper .umb-sortable-thumbnails li .crop-size,
+    .imagecropper .umb-sortable-thumbnails li .crop-annotation {
         font-size: 10px;
         font-style: italic;
         margin: 0 0 5px;
     }
 
+    .imagecropper .umb-sortable-thumbnails li .crop-annotation {
+        color: @gray-6;
+    }
+
     .btn-crop-delete {
         display: block;
         text-align: left;
     }
 
+    .imagecropper .cropList-container {
+        h5 {
+            margin-left: 10px;
+            margin-top: 0;
+        }
+    }
 //
 // folder-browser
 // --------------------------------------------------

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

@@ -13,6 +13,7 @@ angular.module('umbraco')
         $scope.clear = clear;
         $scope.reset = reset;
         $scope.close = close;
+        $scope.isCustomCrop = isCustomCrop;
         $scope.focalPointChanged = focalPointChanged;
         //declare a special method which will be called whenever the value has changed from the server
         $scope.model.onValueChanged = onValueChanged;
@@ -201,6 +202,10 @@ angular.module('umbraco')
             $scope.imageCropperForm.$setDirty();
         };
         
+        function isCustomCrop(crop) {
+            return !!crop.coordinates;
+        }
+
         var unsubscribe = $scope.$on("formSubmitting", function () {
             $scope.currentCrop = null;
             $scope.currentPoint = null;

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

@@ -60,6 +60,7 @@
                         <div class="crop-information">
                             <span class="crop-name crop-text">{{value.alias}}</span>
                             <span class="crop-size crop-text">{{value.width}}px x {{value.height}}px</span>
+                            <span class="crop-annotation crop-text"><localize key="imagecropper_customCrop" ng-show="isCustomCrop(value)">User defined</localize>&nbsp;</span>
                         </div>
                     </li>
                 </ul>

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

@@ -1086,6 +1086,7 @@ Mange hilsner fra Umbraco robotten
     <key alias="addCrop">Tilføj ny beskæring</key>
     <key alias="updateEditCrop">Acceptér</key>
     <key alias="undoEditCrop">Fortryd</key>
+    <key alias="customCrop">Brugerdefineret</key>
   </area>
   <area alias="rollback">
     <key alias="headline">Vælg en version at sammenligne med den nuværende version</key>

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

@@ -1318,6 +1318,7 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="addCrop">Add new crop</key>
     <key alias="updateEditCrop">Done</key>
     <key alias="undoEditCrop">Undo edits</key>
+    <key alias="customCrop">User defined</key>
   </area>
   <area alias="rollback">
     <key alias="headline">Select a version to compare with the current version</key>

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

@@ -1316,11 +1316,12 @@ 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 crop</key>
+    <key alias="reset">Reset crop</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>
+    <key alias="updateEditCrop">Done</key>
+    <key alias="undoEditCrop">Undo edits</key>
+    <key alias="customCrop">User defined</key>
   </area>
   <area alias="rollback">
     <key alias="headline">Select a version to compare with the current version</key>