add gutters to 5:3 & 3:5 cropping box, to show what will be clipped i…

…f those are used in 5:4 & 4:5 spaces (with explainer)

kahuna/public/js/crop/controller.js

@@ -3,6 +3,7 @@ import angular from 'angular';
 import '../components/gr-keyboard-shortcut/gr-keyboard-shortcut';
 import {radioList} from '../components/gr-radio-list/gr-radio-list';
 import {cropUtil} from "../util/crop";
+import {landscape, portrait} from "../util/constants/cropOptions";
 
 const crop = angular.module('kahuna.crop.controller', [
   'gr.keyboardShortcut',
@@ -63,6 +64,10 @@ crop.controller('ImageCropCtrl', [
 
       ctrl.cropType = storageCropType || defaultCrop.key;
 
+      // TODO add GNM only check to both of these
+      ctrl.shouldShowVerticalWarningGutters = ctrl.cropType === landscape.key; // the 5:3 one
+      ctrl.shouldShowHorizontalWarningGutters = ctrl.cropType === portrait.key; // the 3:5 one
+
       ctrl.image = image;
       ctrl.optimisedImageUri = optimisedImageUri;
 

kahuna/public/js/crop/view.html

@@ -101,7 +101,8 @@
     Please try to use a larger crop or an alternative image.
 </div>
 
-<div class="easel" role="main" aria-label="Image cropper">
+<div class="easel" role="main" aria-label="Image cropper"
+     ng-class="{'vertical-warning-gutters': ctrl.shouldShowVerticalWarningGutters, 'horizontal-warning-gutters': ctrl.shouldShowHorizontalWarningGutters}">
     <div class="easel__canvas">
         <div class="easel__image-container" oncontextmenu="return false;">
             <img class="easel__image easel__image--cropper"

kahuna/public/js/directives/ui-crop-box/cropper-override.css

@@ -41,3 +41,65 @@
   background-position: 0 0, 10px 0, 10px -10px, 0px 10px;
 }
 
+/* GUTTERS to show what will be clipped if the 5:3/3:5 crop is used in 5:4/4:5 space */
+.easel.vertical-warning-gutters .cropper-view-box::before {
+  display: block;
+  content: '';
+  position: absolute;
+  z-index: 999;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 12.5%;
+  background: repeating-linear-gradient(-45deg,  gray,  gray 1px,  transparent 3px,  transparent 6px);
+}
+.easel.vertical-warning-gutters .cropper-view-box::after {
+  display: block;
+  content: '';
+  position: absolute;
+  z-index: 999;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 12.5%;
+  background: repeating-linear-gradient(45deg,  gray,  gray 1px,  transparent 3px,  transparent 6px);
+}
+.easel.horizontal-warning-gutters .cropper-view-box::before {
+  display: block;
+  content: '';
+  position: absolute;
+  z-index: 999;
+  left: 0;
+  top: 0;
+  right: 0;
+  height: 12.5%;
+  background: repeating-linear-gradient(-45deg,  gray,  gray 1px,  transparent 3px,  transparent 6px);
+}
+.easel.horizontal-warning-gutters .cropper-view-box::after {
+  display: block;
+  content: '';
+  position: absolute;
+  z-index: 999;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 12.5%;
+  background: repeating-linear-gradient(45deg,  gray,  gray 1px,  transparent 3px,  transparent 6px);
+}
+.easel.vertical-warning-gutters .easel__image::after {
+  display: block;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transform: translateX(100%);
+  content: 'Although this is 5:3 crop, it might be used 5:4 so please ensure there is nothing important in the striped sides as these might be clipped'
+}
+.easel.horizontal-warning-gutters .easel__image::after {
+  display: block;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transform: translateX(100%);
+  content: 'Although this is 3:5 crop, it might be used 4:5 so please ensure there is nothing important in the striped top/bottom as these might be clipped'
+}
+