disable the batch crop button when all images uncroppable

kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.html

@@ -1,16 +1,40 @@
-<div ng-click="ctrl.callBatchCrop(); $event.stopPropagation();"
-     gr-track-click="Full frame button"
-     confirmed="false"
-     needsConfirmation="false"
-     ng-if="!ctrl.allHaveFullCrops"
-     class="inner-clickable clickable">
-        <gr-icon-label gr-icon="crop" gr-loading="{{ctrl.cropping}}" ng-hide="ctrl.needsConfirmation">Crop<span ng-if="ctrl.cropping">ping</span> full frame<span ng-if="ctrl.cropping">…</span></gr-icon-label>
-        <gr-icon-label gr-icon="check_circle" ng-show="ctrl.needsConfirmation">Confirm full frame</gr-icon-label>
-</div>
-<div
-     gr-tooltip="Selected images have full frames"
-     gr-tooltip-position="bottom"
-     ng-if="ctrl.allHaveFullCrops"
-     class="inner-clickable inner-clickable--disabled">
-        <gr-icon-label gr-icon="crop">Crop full frame</gr-icon-label>
-</div>
+<span class="batch-export-original-images"
+      ng-if="ctrl.cropping || ctrl.canBatchCrop || ctrl.cropDisabled || ctrl.canSelectCrops"
+>
+  <div ng-click="ctrl.callBatchCrop(); $event.stopPropagation();"
+       gr-tooltip="{{!ctrl.allCroppable ? 'Not all selected images may be cropped' : '' }}"
+       gr-tooltip-updates
+       gr-tooltip-position="bottom"
+       gr-track-click="Full frame button"
+       confirmed="false"
+       needsConfirmation="false"
+       ng-if="ctrl.canBatchCrop"
+       class="inner-clickable clickable"
+  >
+    <gr-icon-label gr-icon="crop" gr-loading="{{ctrl.cropping}}" ng-hide="ctrl.needsConfirmation">Crop full frame</gr-icon-label>
+
+    <gr-icon-label gr-icon="check_circle" ng-show="ctrl.needsConfirmation">Confirm full frame</gr-icon-label>
+    <span ng-if="!ctrl.allCroppable" class="download-warning"><gr-icon>warning</gr-icon></span>
+  </div>
+
+  <div ng-if="ctrl.cropping">
+    <gr-icon-label gr-loading="{{ctrl.cropping}}" gr-icon="crop">Cropping full frame…</gr-icon-label>
+  </div>
+
+  <div
+      ng-if="ctrl.cropDisabled"
+      gr-tooltip="Selected images cannot be cropped"
+      class="inner-clickable inner-clickable--disabled"
+  >
+      <gr-icon-label gr-icon="crop">Crop full frame</gr-icon-label>
+  </div>
+
+  <div
+      ng-if="ctrl.canSelectCrops"
+      ng-click="ctrl.callBatchCrop(); $event.stopPropagation();"
+      class="inner-clickable clickable"
+      gr-tooltip="Choose full frame crops for content"
+  >
+      Select full frame crops
+  </div>
+</span>

kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.js

@@ -10,14 +10,33 @@ batchExportOriginalImages.controller('grBatchExportOriginalImagesCtrl', [
     function($q, $scope, $rootScope, $state, mediaCropper) {
         let ctrl = this;
 
-        const checkForFullCrops = () => ctrl.images.every(
+        const checkForFullCrops = () => ctrl.images.filter(
             image => image.data.exports.some(
               crop => crop.specification.type === 'full'
             )
+        ).size;
+
+        const croppable = () => ctrl.images.filter(
+          image => image.data.valid && image.data.softDeletedMetadata === undefined &&
+            image.data.exports.every(
+              crop => crop.specification.type !== 'full'
+            )
         );
 
-        $scope.$watch('ctrl.images', () => {
-          ctrl.allHaveFullCrops = checkForFullCrops();
+        $scope.$watchGroup(['ctrl.images', 'ctrl.cropping'], () => {
+          const numberWithFullCrops = checkForFullCrops();
+          const allHaveFullCrops = numberWithFullCrops === ctrl.images.size;
+          const someHaveFullCrops = numberWithFullCrops > 0;
+          const croppableImages = croppable();
+
+          ctrl.allCroppable = croppableImages.size === ctrl.images.size;
+          ctrl.noneCroppable = croppableImages.size === 0;
+
+          const pageIsEmbedded = window.parent !== window;
+
+          ctrl.canBatchCrop = !ctrl.cropping && !allHaveFullCrops && !ctrl.noneCroppable;
+          ctrl.canSelectCrops = !ctrl.cropping && !ctrl.canBatchCrop && someHaveFullCrops && pageIsEmbedded;
+          ctrl.cropDisabled = !ctrl.cropping && !ctrl.canBatchCrop && !ctrl.canSelectCrops && ctrl.noneCroppable && !allHaveFullCrops;
         }, true);
 
         ctrl.callBatchCrop = function() {
@@ -35,15 +54,17 @@ batchExportOriginalImages.controller('grBatchExportOriginalImagesCtrl', [
               if (!ctrl.cropping) {
                 cropImages();
               }
+
             }
         };
 
+
         function cropImages() {
           ctrl.cropping = true;
           ctrl.needsConfirmation = false;
 
           const cropImages = trackAll($q, $rootScope, "crop", ctrl.images, async (image) => {
-            const crop = await mediaCropper.createFullCrop(image);
+            const crop = image.data.exports.find(crop => crop.specification.type === 'full') || await mediaCropper.createFullCrop(image);
             return {
               image,
               crop
@@ -68,7 +89,10 @@ batchExportOriginalImages.directive('grBatchExportOriginalImages', [function() {
             images: '=',
             cropping: '=',
             needsConfirmation: '=',
-            confirmed: '='
+            confirmed: '=',
+            allCroppable: '=',
+            noneCroppable: '=',
+            allHaveFullCrops: '='
         },
         template: template
     };

kahuna/public/js/components/gr-downloader/gr-downloader.css

@@ -1,6 +1,7 @@
 gr-downloader .download {
     display: inline-flex;
     height: 100%;
+    padding: 0 10px;
 }
 
 button .download:hover {
@@ -37,5 +38,6 @@ button .download:hover {
 }
 
 .download-button {
-  height: 36px;
+  display: inline-flex;
+  align-items: center;
 }

kahuna/public/js/components/gr-downloader/gr-downloader.html

@@ -1,7 +1,7 @@
 <span class="download"
       ng-if="!ctrl.isDeleted">
     <button type="button"
-            class="download-button side-padded"
+            class="download-button"
             title="Download images"
             ng-disabled="ctrl.downloading"
             ng-if="ctrl.multipleSelectedAllValid"
@@ -11,7 +11,7 @@
         </gr-icon-label>
     </button>
     <button type="button"
-            class="download-button side-padded"
+            class="download-button"
             aria-label="Download images"
             ng-disabled="ctrl.downloading"
             gr-tooltip="Not all selected images are available to download"
@@ -25,14 +25,14 @@
     <a ng-if="ctrl.singleImageSelected"
        href="{{ ctrl.firstImageUris.uris.downloadUri }}" download rel="noopener" target="_blank"
        aria-label="Download image"
-       class="side-padded"
+       class=""
     >
         <gr-icon-label gr-icon="file_download" class="download-icon-label">
             Download
         </gr-icon-label>
     </a>
     <button ng-if="ctrl.singleImageSelected && ctrl.crop && ctrl.canDownloadCrop"
-            class="drop-menu clickable inner-clickable button-right-side side-padded"
+            class="drop-menu clickable inner-clickable button-right-side"
             aria-label="Download selected crop"
             ng-click="showExpandedDownload = !showExpandedDownload">
         <span>▾</span>

kahuna/public/js/components/gr-tooltip/gr-tooltip.js

@@ -4,27 +4,41 @@ import 'titip/dist/css/titip.css';
 export const tooltip = angular.module('grTooltip', []);
 
 tooltip.directive('grTooltip', [
-    'onValChange',
-    function (onValChange) {
-        return {
-            restrict: 'A',
-            link: function ($scope, element, attrs) {
-              if (!attrs.grTooltip) {
-                return;
-              }
+  'onValChange',
+  function (onValChange) {
+    return {
+      restrict: 'A',
+      link: function ($scope, element, attrs) {
 
-                const position = attrs.grTooltipPosition || 'bottom';
-                element.attr('data-title', attrs.grTooltip)
-                    .addClass(`titip-default`)
-                    .addClass(`titip-${position}`);
+        const position = attrs.grTooltipPosition || 'bottom';
+        if (attrs.grTooltip) {
+          element.attr('data-title', attrs.grTooltip)
+            .addClass(`titip-default`)
+            .addClass(`titip-${position}`);
+        }
 
-                const autoUpdates = angular.isDefined(attrs.grTooltipUpdates);
+        const autoUpdates = angular.isDefined(attrs.grTooltipUpdates);
 
-                if (autoUpdates) {
-                    $scope.$watch(() => attrs.grTooltip, onValChange(newTooltip => {
-                        element.attr('data-title', newTooltip);
-                    }));
-                }
+        if (autoUpdates) {
+          $scope.$watch(() => attrs.grTooltip, onValChange(newTooltip => {
+            const hasTooltip = angular.isDefined(element.attr('data-title'));
+            const shouldHaveTooltip = angular.isDefined(newTooltip) && newTooltip !== '';
+
+            if (shouldHaveTooltip) {
+              element.attr('data-title', newTooltip);
+            } else if (hasTooltip) {
+              element.removeAttr('data-title');
+            }
+
+            if (!hasTooltip && shouldHaveTooltip) {
+              element.addClass('titip-default')
+                .addClass(`titip-${position}`);
+            } else if (hasTooltip && !shouldHaveTooltip) {
+              element.removeClass('titip-default')
+                .removeClass(`titip-${position}`);
             }
+          }));
+        }
+      }
     };
-}]);
+  }]);

kahuna/public/stylesheets/main.css

@@ -651,11 +651,14 @@ button[disabled],
 .inner-clickable {
     height: 100%;
     display: inline-flex;
+    gap: 2px;
     align-items: center;
 }
 
 .inner-clickable--disabled {
-  opacity: 0.7;
+  color: #9e9e9e;
+  fill: #9e9e9e;
+  cursor: default;
 }
 
 .button-right-side {
@@ -1413,10 +1416,17 @@ textarea.ng-invalid {
     margin-left: auto;
 }
 
-.results-toolbar__right gr-downloader gr-icon-label, .results-toolbar__right gr-delete-image gr-icon-label {
+.results-toolbar__right gr-downloader gr-icon-label,
+.results-toolbar__right gr-delete-image gr-icon-label,
+.results-toolbar__right gr-batch-export-original-images gr-icon-label {
   padding: 0px;
 }
 
+gr-batch-export-original-images .batch-export-original-images {
+  padding: 0 10px;
+  height: 100%;
+}
+
 .results-toolbar-item {
     vertical-align: middle;
     border-width: 0 1px;