erp5_document_scanner: unify video, cropper and image layout

Limit the media height.

Patch cropperjs to force it rendering when resizing the window.

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_css.css

@@ -15,13 +15,9 @@ div[data-gadget-url$="gadget_document_scanner.html"] .camera-output,
 div[data-gadget-url$="gadget_document_scanner.html"] .canvas {
   max-width: 100%;
   width: auto;
-  max-height: 500px;
   filter: brightness(1);
   text-align: center;
 }
-div[data-gadget-url$="gadget_document_scanner.html"] .camera-input {
-  min-height: 360px;
-}
 div[data-gadget-url$="gadget_document_scanner.html"] .page-number {
   display: inline;
 }
@@ -98,9 +94,23 @@ div[data-gadget-url$="gadget_document_scanner.html"] .new-btn {
   width: calc(6em + 1px);
   height: calc(6em + 1px);
 }
-div[data-gadget-url$="gadget_document_scanner.html"] .img-container {
+div[data-gadget-url$="gadget_document_scanner.html"] .review-img-container {
+  height: 70vh;
+}
+div[data-gadget-url$="gadget_document_scanner.html"] .review-img-container img {
+  max-height: 100%;
+}
+div[data-gadget-url$="gadget_document_scanner.html"] .img-container,
+div[data-gadget-url$="gadget_document_scanner.html"] .camera-input {
   /* Never limit the container height here */
-  max-width: 100%;
+  position: relative;
+  width: 100%;
+}
+div[data-gadget-url$="gadget_document_scanner.html"] .img-container img,
+div[data-gadget-url$="gadget_document_scanner.html"] .camera-input img,
+div[data-gadget-url$="gadget_document_scanner.html"] .img-container video,
+div[data-gadget-url$="gadget_document_scanner.html"] .camera-input video {
+  height: 70vh;
 }
 div[data-gadget-url$="gadget_document_scanner.html"] .btn-thumbnail:before {
   color: #000;

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_css.xml

@@ -244,7 +244,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>982.61113.55569.43315</string> </value>
+                      <value> <string>983.1627.17749.2013</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -262,7 +262,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1585816780.79</float>
+                              <float>1586178991.43</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_js.js

@@ -186,14 +186,19 @@
     // creating Cropper is asynchronous
     return new RSVP.Promise(function (resolve, reject) {
       cropper = new Cropper(element, {
-        // restrict the minimum canvas size to fill fit the container
-        viewMode: 3,
+        // restrict the minimum canvas size to fit within the container
+        viewMode: 2,
+        guides: true,
+        center: true,
+        background: false,
+        minContainerWidth: 1,
+        minContainerHeight: 1,
+        responsive: true,
+        restore: true,
         // Avoid any cropper calculation or guessing
         scalable: false,
-        // Please, DON'T touch on rotatable and checkOrientation. Removing it,
-        // we will not be able to fix orientation before crop.
-        rotatable: true,
-        checkOrientation: true,
+        rotatable: false,
+        checkOrientation: false,
         zoomable: false,
         movable: false,
         data: data,
@@ -726,7 +731,7 @@
 
         div = domsugar('div', {'class': 'camera'}, [
           buildPageTitle(gadget, result_list[0][2]),
-          domsugar('div', {'class': 'img-container'}, [
+          domsugar('div', {'class': 'review-img-container'}, [
             domsugar('img', {src: gadget.state['blob_url_' + gadget.state.display_index]})
           ]),
           // XXX TODO: why is the button rendering different from the other pages?

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_js.xml

@@ -244,7 +244,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>982.62865.31516.35805</string> </value>
+                      <value> <string>982.62866.16795.56132</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -262,7 +262,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1585921095.31</float>
+                              <float>1585922429.02</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

bt5/erp5_document_scanner/SkinTemplateItem/portal_skins/erp5_document_scanner/cropper.css.css

@@ -55,7 +55,8 @@
 }
 
 .cropper-modal {
-  background-color: #000;
+  /* Disable the black layer around the image
+  background-color: #000;*/
   opacity: 0.5;
 }
 

bt5/erp5_document_scanner/SkinTemplateItem/portal_skins/erp5_document_scanner/cropper.js.js

@@ -1793,38 +1793,31 @@
 
   var handlers = {
     resize: function resize() {
+      // Always render fully
+      // Otherwise, there are some display issue when increasing the window size (part of the canvas is hidden)
       var options = this.options,
           container = this.container,
           containerData = this.containerData;
       var minContainerWidth = Number(options.minContainerWidth) || MIN_CONTAINER_WIDTH;
       var minContainerHeight = Number(options.minContainerHeight) || MIN_CONTAINER_HEIGHT;
 
-      if (this.disabled || containerData.width <= minContainerWidth || containerData.height <= minContainerHeight) {
-        return;
-      }
-
       var ratio = container.offsetWidth / containerData.width; // Resize when width changed or height changed
 
-      if (ratio !== 1 || container.offsetHeight !== containerData.height) {
-        var canvasData;
-        var cropBoxData;
+      var canvasData;
+      var cropBoxData;
 
-        if (options.restore) {
-          canvasData = this.getCanvasData();
-          cropBoxData = this.getCropBoxData();
-        }
+      canvasData = this.getCanvasData();
+      cropBoxData = this.getCropBoxData();
 
-        this.render();
+      this.render();
+
+      this.setCanvasData(forEach(canvasData, function (n, i) {
+        canvasData[i] = n * ratio;
+      }));
+      this.setCropBoxData(forEach(cropBoxData, function (n, i) {
+        cropBoxData[i] = n * ratio;
+      }));
 
-        if (options.restore) {
-          this.setCanvasData(forEach(canvasData, function (n, i) {
-            canvasData[i] = n * ratio;
-          }));
-          this.setCropBoxData(forEach(cropBoxData, function (n, i) {
-            cropBoxData[i] = n * ratio;
-          }));
-        }
-      }
     },
     dblclick: function dblclick() {
       if (this.disabled || this.options.dragMode === DRAG_MODE_NONE) {

bt5/erp5_document_scanner/SkinTemplateItem/portal_skins/erp5_document_scanner/documentscannercss.less.txt

@@ -13,15 +13,10 @@ div[data-gadget-url$="gadget_document_scanner.html"] {
   .photo, .video, .camera-output, .canvas {
     max-width: 100%;
     width: auto;
-    max-height: 500px;
     filter: brightness(1);
     text-align: center;
   }
 
-  .camera-input {
-    min-height: 360px;
-  }
-
   .page-number {
     display: inline;
   }
@@ -99,9 +94,20 @@ div[data-gadget-url$="gadget_document_scanner.html"] {
     height: calc(6em + 1px);
   }
 
-  .img-container {
+  .review-img-container {
+      height: 70vh;
+      img {
+        max-height: 100%;
+      }
+  }
+
+  .img-container, .camera-input {
     /* Never limit the container height here */
-    max-width: 100%;
+    position: relative;
+    width: 100%;
+    img, video {
+      height: 70vh;
+    }
   }
 
   .btn-thumbnail:before {

[Gabriel Monnerat]

@romain, shouldn't we use min-height?

Here, height is too big:

With min-height

(I will also test a bit more on mobile)

[Gabriel Monnerat]

@romain, shouldn't we use min-height

Here, height is too big:

With min-height

(I will also test a bit more on mobile)

[Romain Courteaud]

The goal is to ensure that the action button (capture, crop, delete, etc) are always located at the same height position.

Using min-height will not all this, because the button position will always be different (original video height will be different than the cropped image height).

Just to make things clear, you say it is too big because the "thumbnail" are not visible? If so, I don't believe it is critical, because the common use case for the end user will not to review every image every time.

I agree that the value 70vh is arbitrary. But it was for now the best we found with @tb

[Gabriel Monnerat]

@romain

Just to make things clear, you say it is too big because the "thumbnail" are not visible?

Yes,, the space between Page 1 and video and video and Capture are too big. Then, a need scroll a bit.

But, testing on mobile this not so big.

For sure, it is not critical.