Skip to content

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

erp5_document_scanner: unify video, cropper and image layout 

Limit the media height.

Patch cropperjs to force it rendering when resizing the window.
parent 40280248
Hide whitespace changes
Inline Side-by-side
Showing with 61 additions and 46 deletions
bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_css.css
View file @ 6b1d81a8
......@@ -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
View file @ 6b1d81a8
......@@ -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
View file @ 6b1d81a8
......@@ -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
View file @ 6b1d81a8
......@@ -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 @ 6b1d81a8
......@@ -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 @ 6b1d81a8
......@@ -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 @ 6b1d81a8
......@@ -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 {
......
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