Merge branch 'v8/8.8' into v8/dev

src/Umbraco.Web.UI.Client/src/common/services/servervalidationmgr.service.js

@@ -464,7 +464,7 @@ function serverValidationManager($timeout) {
      * @ngdoc function
      * @name addErrorsForModelState
      * @methodOf umbraco.services.serverValidationManager
-     * @param {any} modelState
+     * @param {any} modelState the modelState object
      * @param {any} parentValidationPath optional parameter specifying a nested element's UDI for which this property belongs (for complex editors)
      * @description
      * This wires up all of the server validation model state so that valServer and valServerField directives work

src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.controller.js

@@ -17,6 +17,7 @@ angular.module("umbraco")
             vm.changeSearch = changeSearch;
             vm.submitFolder = submitFolder;
             vm.enterSubmitFolder = enterSubmitFolder;
+            vm.focalPointChanged = focalPointChanged;
             vm.changePagination = changePagination;
 
             vm.clickHandler = clickHandler;
@@ -241,7 +242,7 @@ angular.module("umbraco")
 
                 return getChildren(folder.id);
             }
-            
+
             function toggleListView() {
                 vm.showMediaList = !vm.showMediaList;
             }
@@ -370,7 +371,7 @@ angular.module("umbraco")
             }
 
             function openDetailsDialog() {
-                
+
                 const dialog = {
                     view: "views/common/infiniteeditors/mediapicker/overlays/mediacropdetails.html",
                     size: "small",
@@ -378,7 +379,7 @@ angular.module("umbraco")
                     target: $scope.target,
                     disableFocalPoint: $scope.disableFocalPoint,
                     submit: function (model) {
-                        
+
                         $scope.model.selection.push($scope.target);
                         $scope.model.submit($scope.model);
 
@@ -546,6 +547,19 @@ angular.module("umbraco")
                 }
             }
 
+            /**
+             * Called when the umbImageGravity component updates the focal point value
+             * @param {any} left
+             * @param {any} top
+             */
+            function focalPointChanged(left, top) {
+                // update the model focalpoint value
+                $scope.target.focalPoint = {
+                    left: left,
+                    top: top
+                };
+            }
+
             function submit() {
                 if ($scope.model && $scope.model.submit) {
                     $scope.model.submit($scope.model);

src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/overlays/mediacropdetails.controller.js

@@ -6,7 +6,15 @@
 
             vm.submit = submit;
             vm.close = close;
-            vm.cropSet = cropSet;
+            vm.hasCrops = cropSet() === true;
+
+            vm.disableFocalPoint = false;
+            if(typeof $scope.model.disableFocalPoint === "boolean") {
+                vm.disableFocalPoint = $scope.model.disableFocalPoint
+            }
+            else {
+                vm.disableFocalPoint = ($scope.model.disableFocalPoint !== undefined && $scope.model.disableFocalPoint !== "0") ? true : false;
+            }
 
             if (!$scope.model.target.coordinates && !$scope.model.target.focalPoint) {
                 $scope.model.target.focalPoint = { left: .5, top: .5 };
@@ -59,6 +67,6 @@
 
             function cropSet() {
                 var model = $scope.model;
-                return (model.cropSize || {}).width && model.target.thumbnail;
+                return (model.cropSize || {}).width !== undefined && (model.cropSize || {}).height !== undefined;
             }
         });

src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/overlays/mediacropdetails.html

@@ -25,8 +25,7 @@
             </div>
 
             <div class="umb-control-group" ng-if="model.target">
-
+                <div ng-if="vm.hasCrops === false && vm.disableFocalPoint">
-                <div ng-if="vm.cropSet() === false">
                     <h5>
                         <localize key="general_preview">Preview</localize>
                     </h5>
@@ -34,7 +33,20 @@
                     <img ng-src="{{model.target.thumbnail}}" alt="{{model.target.name}}" />
                 </div>
 
-                <div ng-if="vm.cropSet()">
+                <div ng-if="vm.hasCrops === false && vm.disableFocalPoint == false">
+                    <h5>
+                        <localize key="@general_focalPoint">Focal point</localize>
+                    </h5>
+
+                    <div ng-if="model.target.image">
+                        <umb-image-gravity src="model.target.image"
+                                           center="model.target.focalPoint"
+                                           on-value-changed="vm.focalPointChanged(left, top)">
+                        </umb-image-gravity>
+                    </div>
+                </div>
+
+                <div ng-if="vm.hasCrops">
                     <h5>
                         <localize key="@general_cropSection">Crop section</localize>
                     </h5>

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

@@ -64,8 +64,6 @@ angular.module('umbraco').controller("Umbraco.PropertyEditors.MediaPickerControl
                             trashed: true
                         };
 
-                        mediaItem.found = found ? true : false;
-
                         return mediaItem;
                     });
 
@@ -200,7 +198,6 @@ angular.module('umbraco').controller("Umbraco.PropertyEditors.MediaPickerControl
                 multiPicker: multiPicker,
                 onlyImages: onlyImages,
                 disableFolderSelect: disableFolderSelect,
-
                 submit: function (model) {
 
                     editorService.close();
@@ -221,6 +218,7 @@ angular.module('umbraco').controller("Umbraco.PropertyEditors.MediaPickerControl
                         }
 
                     });
+
                     sync();
                     reloadUpdatedMediaItems(model.updatedMediaNodes);
                     setDirty();

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

@@ -37,7 +37,7 @@
                 </umb-file-icon>
 
                 <div class="umb-sortable-thumbnails__actions" data-element="sortable-thumbnail-actions">
-                    <button type="button" aria-label="Edit media" ng-if="allowEditMedia && media.found" class="umb-sortable-thumbnails__action btn-reset" data-element="action-edit" ng-click="vm.editItem(media)">
+                    <button type="button" aria-label="Edit media" ng-if="allowEditMedia && !media.trashed" class="umb-sortable-thumbnails__action btn-reset" data-element="action-edit" ng-click="vm.editItem(media)">
                         <i class="icon icon-edit" aria-hidden="true"></i>
                     </button>
                     <button type="button" aria-label="Remove" class="umb-sortable-thumbnails__action -red btn-reset" data-element="action-remove" ng-click="vm.remove($index)">