From a2e0ade2f848f35f71dba72d9a8b4e60814bd06a Mon Sep 17 00:00:00 2001
From: Andrew Nowak <andrew.nowak@guardian.co.uk>
Date: Tue, 8 Nov 2022 09:54:19 +0000
Subject: [PATCH 1/9] disable the batch crop button when all images uncroppable

---
 .../gr-batch-export-original-images.html      | 30 +++++++----
 .../gr-batch-export-original-images.js        | 16 +++++-
 .../js/components/gr-tooltip/gr-tooltip.js    | 50 ++++++++++++-------
 3 files changed, 67 insertions(+), 29 deletions(-)

diff --git a/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.html b/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.html
index 048e31e2f6..46ea9c1ed3 100644
--- a/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.html
+++ b/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.html
@@ -1,16 +1,28 @@
 <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.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>
+     ng-if="!ctrl.allHaveFullCrops && !ctrl.noneCroppable && !ctrl.cropping"
+     class="inner-clickable clickable"
+>
+  <gr-icon-label gr-icon="crop" gr-loading="{{ctrl.cropping}}" ng-hide="ctrl.needsConfirmation">Crop full frame</gr-icon-label>
+  <span ng-if="!ctrl.allCroppable" class="download-warning"><gr-icon>warning</gr-icon></span>
+
+  <gr-icon-label gr-icon="check_circle" ng-show="ctrl.needsConfirmation">Confirm full frame</gr-icon-label>
+</div>
+
+<div ng-if="ctrl.cropping">
+  <gr-icon-label gr-loading="{{ctrl.cropping}}" gr-icon="crop">Cropping 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>
+    ng-if="!ctrl.allHaveFullCrops && !ctrl.cropping && ctrl.noneCroppable"
+    gr-tooltip="{{ctrl.allHaveFullCrops ? 'Selected images have full frames' : 'Selected images cannot be cropped'}}"
+    gr-tooltip-updates
+    class="inner-clickable inner-clickable--disabled"
+>
+    <gr-icon-label gr-icon="crop">Crop full frame</gr-icon-label>
 </div>
diff --git a/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.js b/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.js
index 68bdaafa5f..d0d56521b1 100644
--- a/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.js
+++ b/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.js
@@ -16,8 +16,19 @@ batchExportOriginalImages.controller('grBatchExportOriginalImagesCtrl', [
             )
         );
 
+        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();
+          const croppableImages = croppable();
+
+          ctrl.allCroppable = croppableImages.size === ctrl.images.size;
+          ctrl.noneCroppable = croppableImages.size === 0;
         }, true);
 
         ctrl.callBatchCrop = function() {
@@ -68,7 +79,10 @@ batchExportOriginalImages.directive('grBatchExportOriginalImages', [function() {
             images: '=',
             cropping: '=',
             needsConfirmation: '=',
-            confirmed: '='
+            confirmed: '=',
+            allCroppable: '=',
+            noneCroppable: '=',
+            allHaveFullCrops: '='
         },
         template: template
     };
diff --git a/kahuna/public/js/components/gr-tooltip/gr-tooltip.js b/kahuna/public/js/components/gr-tooltip/gr-tooltip.js
index 92f3b92048..cb181bbe8b 100644
--- a/kahuna/public/js/components/gr-tooltip/gr-tooltip.js
+++ b/kahuna/public/js/components/gr-tooltip/gr-tooltip.js
@@ -4,27 +4,39 @@ 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 (!hasTooltip && shouldHaveTooltip) {
+              element.addClass('titip-default')
+                .addClass(`titip-${position}`)
+                .attr('data-title', newTooltip);
+            } else if (hasTooltip && !shouldHaveTooltip) {
+              element.removeAttr('data-title');
+              element.removeClass('titip-default')
+                .removeClass(`titip-${position}`);
+            } else if (hasTooltip) {
+              element.attr('data-title', newTooltip);
             }
+          }));
+        }
+      }
     };
-}]);
+  }]);

From 501bcc682b288c265316d316847f7198b5947acf Mon Sep 17 00:00:00 2001
From: Andrew Nowak <andrew.nowak@guardian.co.uk>
Date: Thu, 10 Nov 2022 10:30:02 +0000
Subject: [PATCH 2/9] warning triangle at end even on confirm

---
 .../gr-batch-export-original-images.html                        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.html b/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.html
index 46ea9c1ed3..b23ed28f24 100644
--- a/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.html
+++ b/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.html
@@ -9,9 +9,9 @@
      class="inner-clickable clickable"
 >
   <gr-icon-label gr-icon="crop" gr-loading="{{ctrl.cropping}}" ng-hide="ctrl.needsConfirmation">Crop full frame</gr-icon-label>
-  <span ng-if="!ctrl.allCroppable" class="download-warning"><gr-icon>warning</gr-icon></span>
 
   <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">

From bb163b367a75cfe1cdbc4504e93e6cec59b23c3e Mon Sep 17 00:00:00 2001
From: Andrew Nowak <andrew.nowak@guardian.co.uk>
Date: Thu, 10 Nov 2022 10:44:46 +0000
Subject: [PATCH 3/9] slightly simpler tolltip update logic

---
 kahuna/public/js/components/gr-tooltip/gr-tooltip.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/kahuna/public/js/components/gr-tooltip/gr-tooltip.js b/kahuna/public/js/components/gr-tooltip/gr-tooltip.js
index cb181bbe8b..50fa954129 100644
--- a/kahuna/public/js/components/gr-tooltip/gr-tooltip.js
+++ b/kahuna/public/js/components/gr-tooltip/gr-tooltip.js
@@ -24,16 +24,18 @@ tooltip.directive('grTooltip', [
             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}`)
-                .attr('data-title', newTooltip);
+                .addClass(`titip-${position}`);
             } else if (hasTooltip && !shouldHaveTooltip) {
-              element.removeAttr('data-title');
               element.removeClass('titip-default')
                 .removeClass(`titip-${position}`);
-            } else if (hasTooltip) {
-              element.attr('data-title', newTooltip);
             }
           }));
         }

From f1e6097f07ddc9afc06f9214b856c91aad6ff51e Mon Sep 17 00:00:00 2001
From: Andrew Nowak <andrew.nowak@guardian.co.uk>
Date: Thu, 10 Nov 2022 16:01:58 +0000
Subject: [PATCH 4/9] also allow users to select full frames when embedded in
 other tool

---
 .../gr-batch-export-original-images.html             | 12 ++++++++++--
 .../gr-batch-export-original-images.js               |  4 +++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.html b/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.html
index b23ed28f24..18195228cf 100644
--- a/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.html
+++ b/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.html
@@ -20,9 +20,17 @@
 
 <div
     ng-if="!ctrl.allHaveFullCrops && !ctrl.cropping && ctrl.noneCroppable"
-    gr-tooltip="{{ctrl.allHaveFullCrops ? 'Selected images have full frames' : 'Selected images cannot be cropped'}}"
-    gr-tooltip-updates
+    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.allHaveFullCrops && ctrl.pageIsEmbedded"
+    ng-click="ctrl.callBatchCrop(); $event.stopPropagation();"
+    class="inner-clickable clickable"
+    gr-tooltip="Choose full frame crops for content"
+>
+    Select full frame crops
+</div>
diff --git a/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.js b/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.js
index d0d56521b1..50627e1bf3 100644
--- a/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.js
+++ b/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.js
@@ -49,12 +49,14 @@ batchExportOriginalImages.controller('grBatchExportOriginalImagesCtrl', [
             }
         };
 
+        ctrl.pageIsEmbedded = window.parent !== window;
+
         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

From 3f83e60c59fd8a12026e2273bf902398089dec56 Mon Sep 17 00:00:00 2001
From: Andrew Nowak <andrew.nowak@guardian.co.uk>
Date: Fri, 18 Nov 2022 18:07:46 +0000
Subject: [PATCH 5/9] make padding behave sensibly

---
 .../gr-batch-export-original-images.html      | 66 ++++++++++---------
 .../gr-batch-export-original-images.js        |  1 +
 .../gr-downloader/gr-downloader.css           |  1 +
 .../gr-downloader/gr-downloader.html          |  8 +--
 kahuna/public/stylesheets/main.css            |  8 ++-
 5 files changed, 47 insertions(+), 37 deletions(-)

diff --git a/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.html b/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.html
index 18195228cf..4cd8fa93be 100644
--- a/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.html
+++ b/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.html
@@ -1,36 +1,38 @@
-<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.allHaveFullCrops && !ctrl.noneCroppable && !ctrl.cropping"
-     class="inner-clickable clickable"
->
-  <gr-icon-label gr-icon="crop" gr-loading="{{ctrl.cropping}}" ng-hide="ctrl.needsConfirmation">Crop full frame</gr-icon-label>
+<span class="batch-export-original-images">
+  <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.allHaveFullCrops && !ctrl.noneCroppable && !ctrl.cropping"
+       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>
+    <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.cropping">
+    <gr-icon-label gr-loading="{{ctrl.cropping}}" gr-icon="crop">Cropping full frame…</gr-icon-label>
+  </div>
 
-<div
-    ng-if="!ctrl.allHaveFullCrops && !ctrl.cropping && ctrl.noneCroppable"
-    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.allHaveFullCrops && !ctrl.cropping && ctrl.noneCroppable"
+      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.allHaveFullCrops && ctrl.pageIsEmbedded"
-    ng-click="ctrl.callBatchCrop(); $event.stopPropagation();"
-    class="inner-clickable clickable"
-    gr-tooltip="Choose full frame crops for content"
->
-    Select full frame crops
-</div>
+  <div
+      ng-if="ctrl.allHaveFullCrops && ctrl.pageIsEmbedded"
+      ng-click="ctrl.callBatchCrop(); $event.stopPropagation();"
+      class="inner-clickable clickable"
+      gr-tooltip="Choose full frame crops for content"
+  >
+      Select full frame crops
+  </div>
+</span>
diff --git a/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.js b/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.js
index 50627e1bf3..d41a42a15d 100644
--- a/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.js
+++ b/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.js
@@ -46,6 +46,7 @@ batchExportOriginalImages.controller('grBatchExportOriginalImagesCtrl', [
               if (!ctrl.cropping) {
                 cropImages();
               }
+
             }
         };
 
diff --git a/kahuna/public/js/components/gr-downloader/gr-downloader.css b/kahuna/public/js/components/gr-downloader/gr-downloader.css
index 0daed8ef13..1e842e395c 100644
--- a/kahuna/public/js/components/gr-downloader/gr-downloader.css
+++ b/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 {
diff --git a/kahuna/public/js/components/gr-downloader/gr-downloader.html b/kahuna/public/js/components/gr-downloader/gr-downloader.html
index dd4a277554..112eb7788c 100644
--- a/kahuna/public/js/components/gr-downloader/gr-downloader.html
+++ b/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>
diff --git a/kahuna/public/stylesheets/main.css b/kahuna/public/stylesheets/main.css
index fdb1de0bf6..03b2e1a28b 100644
--- a/kahuna/public/stylesheets/main.css
+++ b/kahuna/public/stylesheets/main.css
@@ -1413,10 +1413,16 @@ 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;
+}
+
 .results-toolbar-item {
     vertical-align: middle;
     border-width: 0 1px;

From ac22190034a30f40404b4659e34882f38bf59d2f Mon Sep 17 00:00:00 2001
From: Andrew Nowak <andrew.nowak@guardian.co.uk>
Date: Mon, 21 Nov 2022 14:24:13 +0000
Subject: [PATCH 6/9] hide the slot if no contents to show

---
 .../gr-batch-export-original-images.html                    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.html b/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.html
index 4cd8fa93be..878b4b41bd 100644
--- a/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.html
+++ b/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.html
@@ -1,4 +1,6 @@
-<span class="batch-export-original-images">
+<span class="batch-export-original-images"
+      ng-if="ctrl.cropping || ctrl.pageIsEmbedded || !ctrl.noneCroppable"
+>
   <div ng-click="ctrl.callBatchCrop(); $event.stopPropagation();"
        gr-tooltip="{{!ctrl.allCroppable ? 'Not all selected images may be cropped' : '' }}"
        gr-tooltip-updates
@@ -28,7 +30,7 @@
   </div>
 
   <div
-      ng-if="ctrl.allHaveFullCrops && ctrl.pageIsEmbedded"
+      ng-if="ctrl.allHaveFullCrops && !ctrl.cropping && ctrl.pageIsEmbedded"
       ng-click="ctrl.callBatchCrop(); $event.stopPropagation();"
       class="inner-clickable clickable"
       gr-tooltip="Choose full frame crops for content"

From f72018528a4d2361a3409f99ae25504645c6ccc5 Mon Sep 17 00:00:00 2001
From: Andrew Nowak <andrew.nowak@guardian.co.uk>
Date: Mon, 21 Nov 2022 14:54:25 +0000
Subject: [PATCH 7/9] move boolean logic into controller

much easier to follow whats going on this way
---
 .../gr-batch-export-original-images.html                 | 8 ++++----
 .../gr-batch-export-original-images.js                   | 9 +++++++--
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.html b/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.html
index 878b4b41bd..c942dfceac 100644
--- a/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.html
+++ b/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.html
@@ -1,5 +1,5 @@
 <span class="batch-export-original-images"
-      ng-if="ctrl.cropping || ctrl.pageIsEmbedded || !ctrl.noneCroppable"
+      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' : '' }}"
@@ -8,7 +8,7 @@
        gr-track-click="Full frame button"
        confirmed="false"
        needsConfirmation="false"
-       ng-if="!ctrl.allHaveFullCrops && !ctrl.noneCroppable && !ctrl.cropping"
+       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>
@@ -22,7 +22,7 @@
   </div>
 
   <div
-      ng-if="!ctrl.allHaveFullCrops && !ctrl.cropping && ctrl.noneCroppable"
+      ng-if="ctrl.cropDisabled"
       gr-tooltip="Selected images cannot be cropped"
       class="inner-clickable inner-clickable--disabled"
   >
@@ -30,7 +30,7 @@
   </div>
 
   <div
-      ng-if="ctrl.allHaveFullCrops && !ctrl.cropping && ctrl.pageIsEmbedded"
+      ng-if="ctrl.canSelectCrops"
       ng-click="ctrl.callBatchCrop(); $event.stopPropagation();"
       class="inner-clickable clickable"
       gr-tooltip="Choose full frame crops for content"
diff --git a/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.js b/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.js
index d41a42a15d..213814023f 100644
--- a/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.js
+++ b/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.js
@@ -23,12 +23,18 @@ batchExportOriginalImages.controller('grBatchExportOriginalImagesCtrl', [
             )
         );
 
-        $scope.$watch('ctrl.images', () => {
+        $scope.$watchGroup(['ctrl.images', 'ctrl.cropping'], () => {
           ctrl.allHaveFullCrops = checkForFullCrops();
           const croppableImages = croppable();
 
           ctrl.allCroppable = croppableImages.size === ctrl.images.size;
           ctrl.noneCroppable = croppableImages.size === 0;
+
+          const pageIsEmbedded = window.parent !== window;
+
+          ctrl.canBatchCrop = !ctrl.allHaveFullCrops && !ctrl.cropping && !ctrl.noneCroppable;
+          ctrl.cropDisabled = !ctrl.allHaveFullCrops && !ctrl.cropping && ctrl.noneCroppable;
+          ctrl.canSelectCrops = ctrl.allHaveFullCrops && !ctrl.cropping && pageIsEmbedded;
         }, true);
 
         ctrl.callBatchCrop = function() {
@@ -50,7 +56,6 @@ batchExportOriginalImages.controller('grBatchExportOriginalImagesCtrl', [
             }
         };
 
-        ctrl.pageIsEmbedded = window.parent !== window;
 
         function cropImages() {
           ctrl.cropping = true;

From 6260b5fd34fc63bc51ecb5353495170cec447f13 Mon Sep 17 00:00:00 2001
From: Andrew Nowak <andrew.nowak@guardian.co.uk>
Date: Mon, 21 Nov 2022 16:23:38 +0000
Subject: [PATCH 8/9] keep the download button centred

---
 kahuna/public/js/components/gr-downloader/gr-downloader.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/kahuna/public/js/components/gr-downloader/gr-downloader.css b/kahuna/public/js/components/gr-downloader/gr-downloader.css
index 1e842e395c..8c84239b3b 100644
--- a/kahuna/public/js/components/gr-downloader/gr-downloader.css
+++ b/kahuna/public/js/components/gr-downloader/gr-downloader.css
@@ -38,5 +38,6 @@ button .download:hover {
 }
 
 .download-button {
-  height: 36px;
+  display: inline-flex;
+  align-items: center;
 }

From 658dcb84769ea1d65529deda4e191cbb7f72b3cb Mon Sep 17 00:00:00 2001
From: Andrew Nowak <andrew.nowak@guardian.co.uk>
Date: Mon, 21 Nov 2022 15:27:09 +0000
Subject: [PATCH 9/9] Prefer select crops button to disabled button in iframe

---
 .../gr-batch-export-original-images.js             | 14 ++++++++------
 kahuna/public/stylesheets/main.css                 |  6 +++++-
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.js b/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.js
index 213814023f..5785022741 100644
--- a/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.js
+++ b/kahuna/public/js/components/gr-batch-export-original-images/gr-batch-export-original-images.js
@@ -10,11 +10,11 @@ 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 &&
@@ -24,7 +24,9 @@ batchExportOriginalImages.controller('grBatchExportOriginalImagesCtrl', [
         );
 
         $scope.$watchGroup(['ctrl.images', 'ctrl.cropping'], () => {
-          ctrl.allHaveFullCrops = checkForFullCrops();
+          const numberWithFullCrops = checkForFullCrops();
+          const allHaveFullCrops = numberWithFullCrops === ctrl.images.size;
+          const someHaveFullCrops = numberWithFullCrops > 0;
           const croppableImages = croppable();
 
           ctrl.allCroppable = croppableImages.size === ctrl.images.size;
@@ -32,9 +34,9 @@ batchExportOriginalImages.controller('grBatchExportOriginalImagesCtrl', [
 
           const pageIsEmbedded = window.parent !== window;
 
-          ctrl.canBatchCrop = !ctrl.allHaveFullCrops && !ctrl.cropping && !ctrl.noneCroppable;
-          ctrl.cropDisabled = !ctrl.allHaveFullCrops && !ctrl.cropping && ctrl.noneCroppable;
-          ctrl.canSelectCrops = ctrl.allHaveFullCrops && !ctrl.cropping && pageIsEmbedded;
+          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() {
diff --git a/kahuna/public/stylesheets/main.css b/kahuna/public/stylesheets/main.css
index 03b2e1a28b..e21ef54417 100644
--- a/kahuna/public/stylesheets/main.css
+++ b/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 {
@@ -1421,6 +1424,7 @@ textarea.ng-invalid {
 
 gr-batch-export-original-images .batch-export-original-images {
   padding: 0 10px;
+  height: 100%;
 }
 
 .results-toolbar-item {