Merge pull request #4404 from guardian/an/teal-overquota-leased-warning

Update the validity warning message colour to change colour when leased
guardian · Jan 27, 2025 · 9bcbfaf · 9bcbfaf
2 parents 704c39b + 18ad079
commit 9bcbfaf
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 31 deletions.
diff --git a/kahuna/public/js/components/gr-info-panel/gr-info-panel.html b/kahuna/public/js/components/gr-info-panel/gr-info-panel.html
@@ -24,21 +24,21 @@
 
                     <div ng-switch-when="pay"
                          class="image-notice image-info__group status cost cost--pay"
-                         style="{{ctrl.stylePercentageLeased(cost)}}"
+                         ng-style="ctrl.stylePercentageLeased(cost, 'red')"
                     >
                         {{cost.count}} paid
                     </div>
 
                     <div ng-switch-when="overquota"
                          class="image-notice image-info__group status cost cost--pay"
-                         style="{{ctrl.stylePercentageLeased(cost)}}"
+                         ng-style="ctrl.stylePercentageLeased(cost, 'red')"
                     >
                         {{cost.count}} over quota
                     </div>
 
                     <div ng-switch-when="conditional"
                          class="image-notice image-info__group cost cost--conditional"
-                         style="{{ctrl.stylePercentageLeased(cost)}}"
+                         ng-style="ctrl.stylePercentageLeased(cost, 'orange')"
                     >
                         {{cost.count}} restricted
                     </div>

diff --git a/kahuna/public/js/components/gr-info-panel/gr-info-panel.js b/kahuna/public/js/components/gr-info-panel/gr-info-panel.js
@@ -26,30 +26,18 @@ export const grInfoPanel = angular.module('grInfoPanel', [
 ]);
 
 grInfoPanel.controller('GrInfoPanelCtrl', [
-  '$rootScope',
   '$scope',
-  '$window',
   '$q',
   'inject$',
-  'subscribe$',
-  'mediaApi',
-  'imageAccessor',
   'imageList',
   'selectedImagesList$',
-  'labelService',
   'editsService',
   function (
-    $rootScope,
     $scope,
-    $window,
     $q,
     inject$,
-    subscribe$,
-    mediaApi,
-    imageAccessor,
     imageList,
     selectedImagesList$,
-    labelService,
     editsService) {
 
     const ctrl = this;
@@ -70,10 +58,14 @@ grInfoPanel.controller('GrInfoPanelCtrl', [
         map(allEditable => allEditable.every(v => v === true));
       inject$($scope, selectionIsEditable$, ctrl, 'userCanEdit');
 
-      ctrl.stylePercentageLeased = cost => {
+      ctrl.stylePercentageLeased = (cost, alt) => {
         const imageIsOfThisTypeAndIsLeased = (img) => img.data.cost === cost.data && img.data?.leases?.data?.leases?.some(lease => lease.access === 'allow-use' && lease.active);
         const countLeased = ctrl.selectedImages.count(imageIsOfThisTypeAndIsLeased);
-        return `--pct-leased: ${Math.floor(100 * countLeased / cost.count)}`;
+        const percentageLeased = Math.floor(100 * countLeased / cost.count);
+
+        return {
+          'background-image': `linear-gradient(90deg, teal 0 ${percentageLeased}%, ${alt} ${percentageLeased}% 100%)`
+        };
       };
     };
   }

diff --git a/kahuna/public/js/components/gr-metadata-validity/gr-metadata-validity.html b/kahuna/public/js/components/gr-metadata-validity/gr-metadata-validity.html
@@ -1,7 +1,7 @@
 <div
     ng-if="ctrl.showInvalidReasons"
     class="image-notice image-info__group validity validity--invalid validity--point-up"
-    ng-class="{'validity--invalid': ctrl.isStrongWarning, 'validity--warning': !ctrl.isStrongWarning}"
+    ng-class="{'validity--invalid': ctrl.isStrongWarning, 'validity--warning': !ctrl.isStrongWarning && !ctrl.hasActiveAllowLease, 'validity--leased': !ctrl.isStrongWarning && ctrl.hasActiveAllowLease}"
 >
     <strong ng-if="!ctrl.isOverridden && !ctrl.isDeleted">{{ctrl.unusableTextHeader}}
         <gr-icon title="This image cannot be used in content, a lease is required.">help</gr-icon>
@@ -38,5 +38,5 @@
             {{ctrl.denySyndicationTextHeader}}
         </li>
     </ul>
-    
+
 </div>
diff --git a/kahuna/public/js/components/gr-metadata-validity/gr-metadata-validity.js b/kahuna/public/js/components/gr-metadata-validity/gr-metadata-validity.js
@@ -24,6 +24,7 @@ module.controller('grMetadataValidityCtrl', [ '$rootScope', '$window', function
             }
             ctrl.invalidReasons = image.data.invalidReasons;
             ctrl.isOverridden = ctrl.showInvalidReasons && image.data.valid;
+            ctrl.hasActiveAllowLease = ctrl.image.data.leases.data.leases.find(lease => lease.active && lease.access === 'allow-use');
             ctrl.isStrongWarning = ctrl.isDeleted || !ctrl.isOverridden || image.data.cost === "pay";
 
             ctrl.unusableTextHeader = $window._clientConfig.unusableTextHeader;

diff --git a/kahuna/public/stylesheets/main.css b/kahuna/public/stylesheets/main.css
@@ -1342,25 +1342,14 @@ textarea.ng-invalid {
 .cost--conditional {
     background-color: orange;
 }
+.validity--leased,
 .cost--leased {
   background-color: teal;
 }
 .cost--free {
     background-color: green;
 }
 
-.image-notice {
-  --pct-leased: 0;
-}
-
-.image-notice.cost--pay {
-  background-image: linear-gradient(90deg, teal 0 calc(var(--pct-leased) * 1%), red calc(var(--pct-leased) * 1%) 100%);
-}
-
-.image-notice.cost--conditional {
-  background-image: linear-gradient(90deg, teal 0 calc(var(--pct-leased) * 1%), orange calc(var(--pct-leased) * 1%) 100%);
-}
-
 .costs li {
     display: inline-block;
 }
@@ -1391,6 +1380,9 @@ textarea.ng-invalid {
 .validity--warning::before {
     border-bottom-color: orange;
 }
+.validity--leased::before {
+  border-bottom-color: teal;
+}
 
 /* ==========================================================================
    Results bar