Commit 6b1d81a8 authored by Romain Courteaud's avatar Romain Courteaud

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
......@@ -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;
  • @romain, shouldn't we use min-height?

    Here, height is too big:

    image

    With min-height

    image

    (I will also test a bit more on mobile)

    Edited by Gabriel Monnerat
Please register or sign in to reply
  • @romain, shouldn't we use min-height

    Here, height is too big:

    image

    With min-height

    image

    (I will also test a bit more on mobile)

  • 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

  • @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.

Please register or sign in to reply
}
div[data-gadget-url$="gadget_document_scanner.html"] .btn-thumbnail:before {
color: #000;
......
......@@ -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>
......
......@@ -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?
......
......@@ -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>
......
......@@ -55,7 +55,8 @@
}
.cropper-modal {
background-color: #000;
/* Disable the black layer around the image
background-color: #000;*/
opacity: 0.5;
}
......
......@@ -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;
if (options.restore) {
canvasData = this.getCanvasData();
cropBoxData = this.getCropBoxData();
}
this.render();
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) {
......
......@@ -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