erp5_document_scanner: Improve code to display a better Cropper area

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/rjs_gadget_document_scanner_css.css

@@ -33,6 +33,10 @@ div[data-gadget-url$="gadget_document_scanner.html"] .edit-picture {
   text-align: center;
 }
 
+div[data-gadget-url$="gadget_document_scanner.html"] .edit-picture {
+  padding-top: 0.5em;
+}
+
 div[data-gadget-url$="gadget_document_scanner.html"] .camera,
 div[data-gadget-url$="gadget_document_scanner.html"] .camera-input {
   display: inline-block;
@@ -67,7 +71,13 @@ div[data-gadget-url$="gadget_document_scanner.html"] > .camera > .thumbnail-list
 }
 
 div[data-gadget-url$="gadget_document_scanner.html"] .show-img {
-  width: 21%;
+  padding-left: 0.2em;
+}
+
+div[data-gadget-url$="gadget_document_scanner.html"] .thumbnail-list > button {
+  max-width: 25%;
+  display: inline;
+  float: left;
 }
 
 div[data-gadget-url$="gadget_document_scanner.html"] .upload-error {

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/rjs_gadget_document_scanner_css.xml

@@ -244,7 +244,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>981.42527.16024.21179</string> </value>
+                      <value> <string>981.53994.46343.31095</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -262,7 +262,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1575027025.78</float>
+                              <float>1581629502.14</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/rjs_gadget_document_scanner_js.js

@@ -60,6 +60,7 @@
     // creating Cropper is asynchronous
     return new RSVP.Promise(function (resolve, reject) {
       cropper = new Cropper(element, {
+        viewMode: 3,
         data: data,
         ready: function () {
           return new RSVP.Queue()
@@ -514,7 +515,7 @@
         throw new Error('Unhandled display step: ' + gadget.state.display_step);
       }
 
-      // Only refresh the thumbnail list
+      // Only refresh the thumbnail area
       // if display_step is not modified
       return buildPreviousThumbnailDom(gadget)
         .push(function (result) {
@@ -574,7 +575,7 @@
           .push(function () {
             var canvas = gadget.cropper.getCroppedCanvas();
             return new Promise(function (resolve) {
-              canvas.toBlob(resolve, 'image/jpeg', 0.85);
+              canvas.toBlob(resolve);
             });
           })
           .push(function (blob) {

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/rjs_gadget_document_scanner_js.xml

@@ -244,7 +244,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>981.53435.24231.47104</string> </value>
+                      <value> <string>981.54005.25628.18841</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -262,7 +262,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1581596045.41</float>
+                              <float>1581630274.1</float>
                               <string>UTC</string>
                             </tuple>
                           </state>