Add button to reset focal point on umb-image-gravity directive (#10923)

umbraco · Aug 31, 2021 · b9ca313 · b9ca313
1 parent d9135dd
commit b9ca313
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 2 deletions.
diff --git a/...braco.Web.UI.Client/src/common/directives/components/imaging/umbimagegravity.directive.js b/...braco.Web.UI.Client/src/common/directives/components/imaging/umbimagegravity.directive.js
@@ -25,6 +25,7 @@
         vm.style = {};
         vm.overlayStyle = {};
         vm.setFocalPoint = setFocalPoint;
+        vm.resetFocalPoint = resetFocalPoint;
 
         /** Sets the css style for the Dot */
         function updateStyle() {
@@ -39,6 +40,13 @@
 
         };
 
+        function resetFocalPoint() {
+            vm.onValueChanged({
+                left: 0.5,
+                top: 0.5
+            });
+        };
+
         function setFocalPoint(event) {
             $scope.$emit("imageFocalPointStart");
 

diff --git a/src/Umbraco.Web.UI.Client/src/common/mocks/services/localization.mocks.js b/src/Umbraco.Web.UI.Client/src/common/mocks/services/localization.mocks.js
@@ -139,6 +139,7 @@ angular.module('umbraco.mocks').
                   "content_publishStatus": "Publication Status",
                   "content_releaseDate": "Publish at",
                   "content_removeDate": "Clear Date",
+                  "content_resetFocalPoint": "Reset focal point",
                   "content_sortDone": "Sortorder is updated",
                   "content_sortHelp": "To sort the nodes, simply drag the nodes or click one of the column headers. You can select multiple nodes by holding the 'shift' or 'control' key while selecting",
                   "content_statistics": "Statistics",

diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -587,6 +587,15 @@
     vertical-align: top;
 }
 
+.umb-cropper-imageholder-buttons {
+    display: flex;
+    justify-content: space-between;
+}
+
+.media-crop-details-buttons {
+    text-align: right;
+}
+
 .umb-fileupload,
 .umb-cropper-gravity {
 

diff --git a/...aco.Web.UI.Client/src/views/common/infiniteeditors/mediaentryeditor/mediaentryeditor.html b/...aco.Web.UI.Client/src/views/common/infiniteeditors/mediaentryeditor/mediaentryeditor.html
@@ -86,6 +86,9 @@
                                 <button class="btn btn-link" ng-click="vm.openMedia()">
                                     <umb-icon icon="icon-out"></umb-icon> <localize key="mediaPicker_openMedia">Open media</localize>
                                 </button>
+                                <button type="button" ng-show="vm.model.enableFocalPointSetter && (vm.mediaEntry.focalPoint.left !== 0.5 && vm.mediaEntry.focalPoint.top !== 0.5)" class="btn btn-link" ng-click="vm.focalPointChanged(0.5, 0.5)">
+                                    <umb-icon icon="icon-axis-rotation"></umb-icon> <localize key="content_resetFocalPoint">Reset focal point</localize>
+                                </button>
                             </div>
                         </div>
 

diff --git a/...Web.UI.Client/src/views/common/infiniteeditors/mediapicker/overlays/mediacropdetails.html b/...Web.UI.Client/src/views/common/infiniteeditors/mediapicker/overlays/mediacropdetails.html
@@ -50,6 +50,11 @@ <h5>
                                            center="model.target.focalPoint"
                                            on-value-changed="vm.focalPointChanged(left, top)">
                         </umb-image-gravity>
+                        <div class="media-crop-details-buttons">
+                            <button type="button" ng-show="(model.target.focalPoint.left !== 0.5 && model.target.focalPoint.top !== 0.5)" class="btn btn-link btn-gravity-reset" ng-click="vm.focalPointChanged(0.5,0.5)">
+                                <umb-icon icon="icon-axis-rotation"></umb-icon> <localize key="content_resetFocalPoint">Reset focal point</localize>
+                            </button>
+                        </div>
                     </div>
                 </div>
 

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
@@ -45,8 +45,13 @@
                                        on-value-changed="focalPointChanged(left, top)"
                                        on-image-loaded="imageLoaded(isCroppable, hasDimensions)">
                     </umb-image-gravity>
-                    <button type="button" class="btn btn-link btn-crop-delete" ng-click="clear()"><umb-icon icon="icon-delete" class="red"></umb-icon> <localize key="content_uploadClear">Remove file</localize></button>
-                    <button type="button" class="sr-only" ng-click="vm.clear()"><localize key="content_uploadClearImageContext">Click here to remove the image from the media item</localize></button>
+                    <div class="umb-cropper-imageholder-buttons">
+                        <button type="button" class="btn btn-link btn-crop-delete" ng-click="clear()"><umb-icon icon="icon-delete" class="red"></umb-icon> <localize key="content_uploadClear">Remove file</localize></button>
+                        <button type="button" class="sr-only" ng-click="vm.clear()"><localize key="content_uploadClearImageContext">Click here to remove the image from the media item</localize></button>
+                        <button type="button" ng-show="(model.value.focalPoint.left !== 0.5 && model.value.focalPoint.top !== 0.5)" class="btn btn-link btn-gravity-reset" ng-click="focalPointChanged(0.5,0.5)">
+                            <umb-icon icon="icon-axis-rotation"></umb-icon> <localize key="content_resetFocalPoint">Reset focal point</localize>
+                        </button>
+                    </div>
                 </div>
 
 

diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
@@ -296,6 +296,7 @@
     <key alias="languagesToSchedule">Hvilke sprog vil du gerne planlægge?</key>
     <key alias="languagesToUnpublish">Vælg sproget du vil afpublicere. Afpublicering af et obligatorisk sprog vil afpublicere alle sprog.</key>
     <key alias="publishedLanguages">Udgivne sprog</key>
+    <key alias="resetFocalPoint">Nulstil fokuspunkt</key>
     <key alias="unpublishedLanguages">Ikke-udgivne sprog</key>
     <key alias="unmodifiedLanguages">Uændrede sprog</key>
     <key alias="untouchedLanguagesForFirstTime">Disse sprog er ikke blevet oprettet</key>

diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -302,6 +302,7 @@
     <key alias="notReadyToPublish">We are not ready to Publish</key>
     <key alias="readyToPublish">Ready to publish?</key>
     <key alias="readyToSave">Ready to Save?</key>
+    <key alias="resetFocalPoint">Reset focal point</key>
     <key alias="sendForApproval">Send for approval</key>
     <key alias="schedulePublishHelp">Select the date and time to publish and/or unpublish the content item.</key>
     <key alias="createEmpty">Create new</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
@@ -307,6 +307,7 @@
     <key alias="notReadyToPublish">We are not ready to Publish</key>
     <key alias="readyToPublish">Ready to publish?</key>
     <key alias="readyToSave">Ready to Save?</key>
+    <key alias="resetFocalPoint">Reset focal point</key>
     <key alias="sendForApproval">Send for approval</key>
     <key alias="schedulePublishHelp">Select the date and time to publish and/or unpublish the content item.</key>
     <key alias="createEmpty">Create new</key>