Skip to content

erp5
erp5
Commit 9e5652f2 authored by Gabriel Monnerat's avatar Gabriel Monnerat
Browse files
Options

erp5_document_scanner: improve UI

parent 8e4c732e
Hide whitespace changes
Inline Side-by-side
Showing with 32 additions and 10 deletions
erp5_document_scanner/SkinTemplateItem/portal_skins/erp5_document_scanner/gadget_document_scanner.css.css
View file @ 9e5652f2
...@@ -20,7 +20,16 @@ ...@@ -20,7 +20,16 @@
min-height: 390px; min-height: 390px;
} }
.camera-input, .camera-output { .page-number {
display: inline;
}
.camera-header {
font-size: 12pt;
font-weight: 400;
}
.camera-input, .camera-output, .camera-header {
text-align: center; text-align: center;
} }
...@@ -53,8 +62,4 @@ ...@@ -53,8 +62,4 @@
font-size: 16px; font-size: 16px;
font-family: "Lucida Grande", "Arial", sans-serif; font-family: "Lucida Grande", "Arial", sans-serif;
width: 760px; width: 760px;
}
.camera {
margin-top: 1em;
} }
\ No newline at end of file
erp5_document_scanner/SkinTemplateItem/portal_skins/erp5_document_scanner/gadget_document_scanner.html.html
View file @ 9e5652f2
...@@ -11,6 +11,9 @@ ...@@ -11,6 +11,9 @@
</head> </head>
<body> <body>
<div class="camera"> <div class="camera">
<div class="camera-header">
<h4>Page <label class="page-number">1</label></h4>
</div>
<div class="camera-input" style="display: none"> <div class="camera-input" style="display: none">
<video class="video">Webcam is not available</video> <video class="video">Webcam is not available</video>
<button type="button" class="startbutton">Take a picture!</button> <button type="button" class="startbutton">Take a picture!</button>
......
erp5_document_scanner/SkinTemplateItem/portal_skins/erp5_document_scanner/gadget_document_scanner.js.js
View file @ 9e5652f2
...@@ -47,6 +47,14 @@ ...@@ -47,6 +47,14 @@
}); });
} }
function setPageOne(root) {
root.querySelector(".page-number").innerText = "1";
}
function setPageTwo(root) {
root.querySelector(".page-number").innerText = "2";
}
function drawCanvas(gadget, img) { function drawCanvas(gadget, img) {
var ratio, x, y; var ratio, x, y;
canvas.width = imageWidth; canvas.width = imageWidth;
...@@ -263,7 +271,7 @@ ...@@ -263,7 +271,7 @@
}, false, true)*/ }, false, true)*/
.onEvent("click", function (evt) { .onEvent("click", function (evt) {
var gadget; var root;
if (evt.target.name === "grayscale") { if (evt.target.name === "grayscale") {
return this.getElement() return this.getElement()
.push(function () { .push(function () {
...@@ -274,8 +282,12 @@ ...@@ -274,8 +282,12 @@
evt.preventDefault(); evt.preventDefault();
return this.getElement() return this.getElement()
.push(function (el) { .push(function (el) {
root = el;
el.querySelector(".camera-input").style.display = "none"; el.querySelector(".camera-input").style.display = "none";
return takePicture(el); return takePicture(el);
})
.push(function () {
return setPageTwo(root);
}); });
} }
if (evt.target.className === "reset-button") { if (evt.target.className === "reset-button") {
...@@ -285,6 +297,7 @@ ...@@ -285,6 +297,7 @@
el.querySelector(".camera-input").style.display = ""; el.querySelector(".camera-input").style.display = "";
el.querySelector(".camera-output").style.display = "none"; el.querySelector(".camera-output").style.display = "none";
cropper.destroy(); cropper.destroy();
return setPageOne(el);
}); });
} }
if (evt.target.className === "capture-button") { if (evt.target.className === "capture-button") {
...@@ -292,7 +305,7 @@ ...@@ -292,7 +305,7 @@
preferredCroppedCanvasData = cropper.getData(); preferredCroppedCanvasData = cropper.getData();
return this.getElement() return this.getElement()
.push(function (el) { .push(function (el) {
gadget = el; root = el;
return cropper.getCroppedCanvas(); return cropper.getCroppedCanvas();
}) })
.push(function (canvas) { .push(function (canvas) {
...@@ -312,10 +325,11 @@ ...@@ -312,10 +325,11 @@
photo.src = base64data; photo.src = base64data;
photoInput.value = realData; photoInput.value = realData;
gadget.querySelector(".camera-input").style.display = "none"; root.querySelector(".camera-input").style.display = "none";
gadget.querySelector(".camera-output").style.display = ""; root.querySelector(".camera-output").style.display = "";
gadget.querySelector(".capture-button").style.display = "none"; root.querySelector(".capture-button").style.display = "none";
cropper.destroy(); cropper.destroy();
return setPageTwo(root);
}); });
} }
}, false, false); }, false, false);
......
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