Skip to content

erp5
erp5
Commit f391d5ff authored by Romain Courteaud's avatar Romain Courteaud
Browse files
Options

erp5_document_scanner: patch cropperjs 

Always render cropper when resizing

erp5_document_scanner: limit video/image height

erp5_document_scanner: add related less file

erp5_document_scanner: disable the black layer around the image

erp5_document_scanner: fix the image/video size

erp5_document_scanner: restore cropbox data when resizing

erp5_document_scanner: improve image review
parent c1cf25d6
Hide whitespace changes
Inline Side-by-side
Showing with 45 additions and 47 deletions
bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_css.css
View file @ f391d5ff
......@@ -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 {
background-color: rgba(0, 0, 0, 0.5);
}
div[data-gadget-url$="gadget_document_scanner.html"] .page-number {
display: inline;
}
......@@ -98,15 +94,20 @@ 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"] .img-container,
div[data-gadget-url$="gadget_document_scanner.html"] .camera-input {
/* Never limit the container height here */
position: relative;
width: 100%;
max-height: 500px;
}
div[data-gadget-url$="gadget_document_scanner.html"] .img-container img {
max-width: 100%;
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
View file @ f391d5ff
......@@ -244,7 +244,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>982.61223.17950.60723</string> </value>
<value> <string>982.62807.48775.28757</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -262,7 +262,7 @@
</tuple>
<state>
<tuple>
<float>1585822646.11</float>
<float>1585922346.12</float>
<string>UTC</string>
</tuple>
</state>
......
bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_js.js
View file @ f391d5ff
......@@ -191,9 +191,10 @@
guides: true,
center: true,
background: false,
minContainerWidth: 0,
minContainerHeight: 0,
minContainerWidth: 1,
minContainerHeight: 1,
responsive: true,
restore: true,
// Avoid any cropper calculation or guessing
scalable: false,
rotatable: false,
......@@ -730,8 +731,8 @@
div = domsugar('div', {'class': 'camera'}, [
buildPageTitle(gadget, result_list[0][2]),
domsugar('div', {'class': 'img-container'}, [
domsugar('img', {src: gadget.state['blob_url_' + gadget.state.page]})
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?
domsugar('div', {'class': 'edit-picture'}, button_list),
......
bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_js.xml
View file @ f391d5ff
......@@ -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
View file @ f391d5ff
......@@ -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
View file @ f391d5ff
......@@ -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
View file @ f391d5ff
......@@ -13,16 +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 {
// Mimic cropper background
background-color: rgba(0, 0, 0, 0.5);
}
.page-number {
display: inline;
}
......@@ -100,9 +94,17 @@ div[data-gadget-url$="gadget_document_scanner.html"] {
height: calc(6em + 1px);
}
.img-container {
.review-img-container {
height: 70vh;
}
.img-container, .camera-input {
/* Never limit the container height here */
max-width: 100%;
position: relative;
width: 100%;
img, video {
height: 70vh;
}
}
.btn-thumbnail:before {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7