Netsyms/IPENtool
2
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

Make it look nicer

Browse Source
This commit is contained in:
Skylar Ittner 2021-07-15 11:13:08 -06:00
parent 8b600f287f
commit 391a319f6d
5 changed files with 56 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/css/bootstrap.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

28
src/css/main.css
View File

@ -14,6 +14,7 @@ html, body {
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: hidden;
} }
@ -26,33 +27,24 @@ html, body {
overflow: auto; overflow: auto;
} }
#page-canvas-container-container #shadowbox {
position: absolute;
left: 0px;
right: calc(100vw - 99%);
top: 0px;
bottom: 0px;
box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.5);
pointer-events: none;
}
#page-canvas-container .page-canvas { #page-canvas-container .page-canvas {
margin: 0.5em; margin: 0.5em;
box-shadow: 6px 6px 7px -1px rgba(0,0,0,0.5); box-shadow: inset 1px 1px rgba(255, 255, 255, 0.2), inset -1px -1px rgba(255, 255, 255, 0.1), 1px 3px 24px -1px rgba(0, 0, 0, 0.15);
height: 100%; height: 100%;
border: 1px solid gray; border: 2px solid rgba(255, 255, 255, 0);
} }
#page-canvas-container .page-canvas.active { #page-canvas-container .page-canvas.active {
margin: 0.5em; margin: 0.5em;
box-shadow: 0px 0px 7px 0px rgba(0,255,0,0.8); box-shadow: inset 1px 1px rgba(255, 255, 255, 0.7), inset -1px -1px rgba(255, 255, 255, 0.6), 1px 3px 24px -1px rgba(0, 0, 0, 0.55);
height: 100%; height: 100%;
border: 1px solid blue; border: 2px solid var(--bs-green);
} }
#page-canvas-container #placementguidebox { #page-canvas-container #placementguidebox {
opacity: 0.5; opacity: 0.5;
position: fixed; position: absolute;
float: left; float: left;
padding: 0; padding: 0;
pointer-events: none; pointer-events: none;
@ -89,6 +81,14 @@ html, body {
height: 200px; height: 200px;
} }
#toolbar-bin .card {
margin: 0.25rem;
}
#page-canvas-container-card {
margin: 0.25rem;
}
@media (min-width: 800px) and (max-width: 991px) { @media (min-width: 800px) and (max-width: 991px) {
.modal-dialog.modal-lg { .modal-dialog.modal-lg {
max-width: 700px; max-width: 700px;

34
src/index.html
View File

@ -8,7 +8,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
<title>IPENtool</title> <title>IPENtool</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css" /> <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css" />
<link rel="stylesheet" href="css/main.css" /> <link rel="stylesheet" href="css/main.css" />
<link rel="icon" href="img/icon.svg" /> <link rel="icon" href="img/icon.svg" />
@ -149,10 +149,10 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
</div> </div>
</div> </div>
<div class="card d-flex flex-column h-100"> <div class="d-flex flex-column h-100">
<div class="card-body"> <div class="d-flex flex-wrap" id="toolbar-bin">
<div class="btn-toolbar d-inline-block" role="toolbar"> <div class="card d-inline-block">
<div class="btn-group me-2 mb-2" role="group" aria-label="First group"> <div class="card-body p-1">
<div class="btn btn-primary" onclick="addPDF();"><i class="fas fa-file-pdf"></i> Add PDF</div> <div class="btn btn-primary" onclick="addPDF();"><i class="fas fa-file-pdf"></i> Add PDF</div>
<div class="btn btn-primary" onclick="savePDF();"><i class="fas fa-save"></i> Save Signed PDF</div> <div class="btn btn-primary" onclick="savePDF();"><i class="fas fa-save"></i> Save Signed PDF</div>
<div class="btn btn-primary" onclick="closePDF(true);"><i class="fas fa-trash"></i> Close PDF</div> <div class="btn btn-primary" onclick="closePDF(true);"><i class="fas fa-trash"></i> Close PDF</div>
@ -160,15 +160,16 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
<div class="btn btn-primary" onclick="openSettingsModal();"><i class="fas fa-cog"></i> Settings</div> <div class="btn btn-primary" onclick="openSettingsModal();"><i class="fas fa-cog"></i> Settings</div>
</div> </div>
</div> </div>
<div class="d-inline-block"><span id="lockstatus" title="Private key locked"><i class="fas fa-lock"></i></span> <span id="statustext"></span></div> <div class="card d-inline-block">
<div class="btn-toolbar" role="toolbar"> <div class="card-body p-1">
<div class="btn-group me-2 mb-2" role="group" aria-label="Second group">
<div class="btn btn-primary" onclick="pdfZoom('fitheight');"><i class="fas fa-arrows-alt-v"></i> Fit Height</div> <div class="btn btn-primary" onclick="pdfZoom('fitheight');"><i class="fas fa-arrows-alt-v"></i> Fit Height</div>
<div class="btn btn-primary" onclick="pdfZoom('fitwidth');"><i class="fas fa-arrows-alt-h"></i> Fit Width</div> <div class="btn btn-primary" onclick="pdfZoom('fitwidth');"><i class="fas fa-arrows-alt-h"></i> Fit Width</div>
<div class="btn btn-primary" onclick="pdfZoom('out');"><i class="fas fa-search-minus"></i> Zoom Out</div> <div class="btn btn-primary" onclick="pdfZoom('out');"><i class="fas fa-search-minus"></i> Zoom Out</div>
<div class="btn btn-primary" onclick="pdfZoom('in');"><i class="fas fa-search-plus"></i> Zoom In</div> <div class="btn btn-primary" onclick="pdfZoom('in');"><i class="fas fa-search-plus"></i> Zoom In</div>
</div> </div>
<div class="btn-group me-2 mb-2" role="group" aria-label="Third group"> </div>
<div class="card d-inline-block">
<div class="card-body p-1">
<div class="btn btn-primary" onclick="activateStampDrawTool()"><i class="fas fa-stamp"></i> Stamp/Seal</div> <div class="btn btn-primary" onclick="activateStampDrawTool()"><i class="fas fa-stamp"></i> Stamp/Seal</div>
<div class="btn btn-primary" onclick="activateClientSignaturePad()"><i class="fas fa-file-signature"></i> Sign (Client)</div> <div class="btn btn-primary" onclick="activateClientSignaturePad()"><i class="fas fa-file-signature"></i> Sign (Client)</div>
<div class="btn btn-primary" onclick="activateNotarySignatureTool()"><i class="fas fa-file-signature"></i> Sign (Notary)</div> <div class="btn btn-primary" onclick="activateNotarySignatureTool()"><i class="fas fa-file-signature"></i> Sign (Notary)</div>
@ -176,16 +177,23 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
<div class="btn btn-primary" onclick="activateNotaryCertificateTool()"><i class="fas fa-sticky-note"></i> Add Certificate</div> <div class="btn btn-primary" onclick="activateNotaryCertificateTool()"><i class="fas fa-sticky-note"></i> Add Certificate</div>
<div class="btn btn-primary" onclick="disableGuideBox()">Cancel</div> <div class="btn btn-primary" onclick="disableGuideBox()">Cancel</div>
</div> </div>
<div class="btn-group mb-2" role="group" aria-label="Fourth group"> </div>
<div class="card d-inline-block">
<div class="card-body p-1">
<div class="btn btn-primary" onclick="addPage()"><i class="fas fa-plus"></i> Append Blank Page</div> <div class="btn btn-primary" onclick="addPage()"><i class="fas fa-plus"></i> Append Blank Page</div>
</div> </div>
</div> </div>
<div class="card d-inline-block">
<div class="card-body p-1 h-100 d-flex align-items-center">
<span id="lockstatus" title="Private key locked"><i class="fas fa-lock"></i></span> <span id="statustext"></span>
</div> </div>
<div class="card-body flex-grow-1 w-100 h-100 p-0 position-relative" id="page-canvas-container-container"> </div>
<div id="page-canvas-container" class="p-0 m-0"> </div>
<div class="card flex-grow-1" id="page-canvas-container-card">
<div id="page-canvas-container" class="card-body p-0 m-0">
<canvas id="placementguidebox" width="1000" height="1000"></canvas> <canvas id="placementguidebox" width="1000" height="1000"></canvas>
</div> </div>
<div id="shadowbox"></div>
</div> </div>
</div> </div>

10
src/js/drawtools.js
View File

@ -198,10 +198,14 @@ function disableGuideBox() {
activeDrawImage = null; activeDrawImage = null;
} }
$("#page-canvas-container").on("mousemove", function (evt) { $("#page-canvas-container").on("mousemove", function (e) {
var posx = 0;
var posy = 0;
posx = e.pageX + $("#page-canvas-container").scrollLeft() - $("#page-canvas-container").offset().left;
posy = e.pageY + $("#page-canvas-container").scrollTop() - $("#page-canvas-container").offset().top;
$("#placementguidebox").css({ $("#placementguidebox").css({
left: evt.pageX, left: posx,
top: evt.pageY top: posy
}); });
}); });

4
src/js/pdf.js
View File

@ -368,11 +368,11 @@ function pdfZoom(str) {
$("#page-canvas-container .page-canvas").css("width", widthpx + "px"); $("#page-canvas-container .page-canvas").css("width", widthpx + "px");
break; break;
case "fitwidth": case "fitwidth":
$("#page-canvas-container .page-canvas").css("width", "100%"); $("#page-canvas-container .page-canvas").css("width", "calc(100% - 1rem)");
$("#page-canvas-container .page-canvas").css("height", "auto"); $("#page-canvas-container .page-canvas").css("height", "auto");
break; break;
case "fitheight": case "fitheight":
$("#page-canvas-container .page-canvas").css("height", "100%"); $("#page-canvas-container .page-canvas").css("height", "calc(100% - 1rem)");
$("#page-canvas-container .page-canvas").css("width", "auto"); $("#page-canvas-container .page-canvas").css("width", "auto");
break; break;
} }