Merge pull request guardian#3174 from guardian/mk-chequerboard-fixes

Show chequerboard only if there is transparency and during cropping too
bbc · Mar 4, 2021 · 9e47156 · 9e47156
2 parents d346bdb + 44678ee
commit 9e47156
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/kahuna/public/js/directives/ui-crop-box/cropper-override.css b/kahuna/public/js/directives/ui-crop-box/cropper-override.css
@@ -9,6 +9,35 @@
 }
 
 .easel .cropper-canvas {
-    background-color: #000;
+    background-color: #bdbdbd;
+    background-image:
+      linear-gradient(45deg, white 25%, transparent 25%),
+      linear-gradient(135deg, white 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, white 75%),
+      linear-gradient(135deg, transparent 75%, white 75%);
+
+    background-size: 20px 20px;
+
+    background-position: 0 0, 10px 0, 10px -10px, 0px 10px;
     opacity: .5;
 }
+
+.easel .cropper-view-box :first-child {
+  display: block;
+  height: 100%;
+  outline: 1px solid #39f;
+  outline-color: rgba(51, 153, 255, 0.75);
+  overflow: hidden;
+  width: 100%;
+  background-color: #bdbdbd;
+  background-image:
+    linear-gradient(45deg, white 25%, transparent 25%),
+    linear-gradient(135deg, white 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, white 75%),
+    linear-gradient(135deg, transparent 75%, white 75%);
+
+  background-size: 20px 20px;
+
+  background-position: 0 0, 10px 0, 10px -10px, 0px 10px;
+}
+
diff --git a/kahuna/public/js/image/view.html b/kahuna/public/js/image/view.html
@@ -145,7 +145,7 @@
              ng-if="!ctrl.crop"
              draggable="true"
              ui-drag-data="ctrl.image | asImageDragData">
-          <img class="easel__image easel__image--checkered__background"
+          <img ng-class="{'easel__image':true,'easel__image--checkered__background': ctrl.image.data.optimisedPng }"
                alt="preview of original image"
                ng-src="{{:: ctrl.optimisedImageUri}}"
                grid:track-image="ctrl.image"