From 35a7156138f97b9a4571637e434aa24bc0a5b1d8 Mon Sep 17 00:00:00 2001
From: fschneider <florian.schneider@student.tugraz.at>
Date: Wed, 12 Aug 2015 14:24:57 +0200
Subject: ToBeChanged
---
pdf-as-web/src/main/webapp/assets/css/style.css | 81 +++++++++--
.../src/main/webapp/assets/img/federohne.svg | 30 ++++
pdf-as-web/src/main/webapp/assets/js/dragNdrop.js | 32 ++---
.../src/main/webapp/assets/js/pdf.js/web/app.js | 6 +
.../main/webapp/assets/js/pdf.js/web/viewer.css | 151 +++++++++++----------
.../main/webapp/assets/js/pdf.js/web/viewer.html | 86 ++++++------
.../src/main/webapp/assets/js/pdf.js/web/viewer.js | 4 +-
pdf-as-web/src/main/webapp/index.jsp | 88 ++++++------
8 files changed, 296 insertions(+), 182 deletions(-)
create mode 100644 pdf-as-web/src/main/webapp/assets/img/federohne.svg
diff --git a/pdf-as-web/src/main/webapp/assets/css/style.css b/pdf-as-web/src/main/webapp/assets/css/style.css
index 751396fe..4b49b238 100644
--- a/pdf-as-web/src/main/webapp/assets/css/style.css
+++ b/pdf-as-web/src/main/webapp/assets/css/style.css
@@ -12,14 +12,75 @@ footer {
iframe {
border: none;
+ min-width:10em;
+}
+
+.methodChooseContainer {
+ width: 80px;
+ height: 130px;
+ text-align: center;
+}
+
+.methodChooseContainer div button {
+ margin-top:1em;
+}
+
+#methodContainer {
+ margin: 2em;
+}
+
+#ImageBox {
+ width: 80px;
+ height: 85px;
+}
+
+.BKUImage {
+ margin-top: 12px;
}
#navBar {
margin: 2em;
+ min-width: 25em;
+}
+
+#ViewerExternToolbar {
+ margin-bottom: 2em !important;
+ min-width: 25em;
+}
+
+#ViewerExternToolbar button {
+ margin-left:0.5em;
+ margin-right:0.5em;
+ width: 3em;
+ height: 3em;
}
-#placeContinue {
- margin: 1em;
+#ViewerExternToolbar div {
+ margin-left:0.5em;
+ margin-right:0.5em;
+ width: 3em;
+ height: 3em;
+ text-align: center;
+ font-size: 1em;
+}
+
+#ViewerExternToolbar img {
+ width: 3em;
+ height: 3em;
+}
+
+#ViewerExternToolbar img:hover {
+ cursor: hand;
+ cursor: pointer;
+}
+
+#ViewerExternToolbar span {
+ font-size: 2em;
+}
+
+#ViewerExternToolbar span:hover {
+ cursor: hand;
+ cursor: pointer;
}
#fileSelector {
@@ -60,6 +121,10 @@ iframe {
margin-bottom: 5em;
}
+#noSignatureWarning {
+ text-align:center;
+}
+
#btnSign {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
@@ -88,26 +153,22 @@ iframe {
}
.container {
- border-top-left-radius: 1em;
- border-top-right-radius: 1em;
border: 0.125em solid;
border-color: #66A3FF;
background: #E8F4FF;
box-shadow: 0em 0em 1em #333333;
- margin-bottom: 1em;
+ margin-bottom: 0em;
margin-left: 5em;
margin-right: 5em;
width: 100%;
}
.container h3 {
- border-top-left-radius: 0.5em;
- border-top-right-radius: 0.5em;
- background: #66A3FF;
- color: #FFFFFF;
+ font-style: bold;
+ color: #204a87;
text-align: center;
margin: -0.125em;
- margin-left: -0.7em;
+ margin-left: -0.6em;
margin-right: -0.7em;
height: 2em;
}
diff --git a/pdf-as-web/src/main/webapp/assets/img/federohne.svg b/pdf-as-web/src/main/webapp/assets/img/federohne.svg
new file mode 100644
index 00000000..1d050a7c
--- /dev/null
+++ b/pdf-as-web/src/main/webapp/assets/img/federohne.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="145pt" height="145pt" viewBox="0 0 145 145" version="1.1">
+<defs>
+<clipPath id="clip1">
+ <path d="M 74 28 L 115 28 L 115 122 L 74 122 Z M 74 28 "/>
+</clipPath>
+<clipPath id="clip2">
+ <path d="M 73.972656 121.53125 L 111.453125 122.707031 L 114.414062 28.527344 L 76.929688 27.347656 Z M 73.972656 121.53125 "/>
+</clipPath>
+<clipPath id="clip3">
+ <path d="M 89 30 L 112 30 L 112 66 L 89 66 Z M 89 30 "/>
+</clipPath>
+<clipPath id="clip4">
+ <path d="M 73.972656 121.53125 L 111.453125 122.707031 L 114.414062 28.527344 L 76.929688 27.347656 Z M 73.972656 121.53125 "/>
+</clipPath>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 37.535156 85.148438 C 37.40625 91.328125 37.429688 97.476562 36.8125 103.632812 C 36.234375 109.375 36.253906 117.410156 33.601562 122.550781 C 34.300781 122.363281 35 122.175781 35.699219 121.992188 C 28.667969 114.699219 46.378906 106.246094 48.644531 115.476562 C 49.132812 117.476562 49.570312 119.027344 51.023438 120.511719 C 51.375 120.875 52.753906 120.367188 53.03125 120.058594 C 54.832031 118.042969 55.421875 115.289062 57.777344 113.746094 C 57.136719 113.835938 56.496094 113.921875 55.859375 114.011719 C 56.644531 115.292969 57.691406 119.519531 59.90625 119.28125 C 63.667969 118.875 64.910156 116.777344 68.234375 120.617188 C 68.585938 121.023438 70.609375 120.257812 70.285156 119.882812 C 68.855469 118.234375 67.300781 116.464844 64.875 116.902344 C 59.835938 117.8125 61.121094 118.457031 58.03125 113.429688 C 57.742188 112.960938 56.4375 113.480469 56.117188 113.695312 C 53.207031 115.597656 52.082031 120.527344 50.816406 114.894531 C 50.035156 111.425781 48.324219 110.425781 44.890625 110.4375 C 38.964844 110.457031 27.242188 116.078125 33.648438 122.726562 C 34.007812 123.097656 35.535156 122.566406 35.746094 122.164062 C 37.875 118.035156 37.800781 112.523438 38.40625 107.992188 C 39.453125 100.183594 39.542969 92.421875 39.707031 84.566406 C 39.714844 84.238281 37.546875 84.523438 37.535156 85.148438 "/>
+<g clip-path="url(#clip1)" clip-rule="nonzero">
+<g clip-path="url(#clip2)" clip-rule="nonzero">
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 87.488281 91.382812 C 86.628906 90.953125 85.796875 90.332031 84.691406 90.929688 C 83.625 92.703125 82.304688 95.023438 80.804688 97.390625 C 79.773438 98.996094 77.558594 101.054688 77.023438 103.191406 C 76.691406 104.390625 76.875 106.03125 76.90625 107.128906 C 76.90625 107.128906 76.472656 114.117188 77.050781 115.496094 C 77.710938 113.933594 78.875 108.464844 79.769531 107.035156 C 76.859375 101.03125 85.867188 100.644531 83.671875 106.21875 C 81.363281 107.960938 79.457031 112.851562 79.5 115.105469 C 80.972656 112.957031 84.394531 109.191406 85.5 107.304688 C 86.027344 106.375 86.140625 104.722656 86.320312 103.382812 C 86.859375 99.363281 87.46875 95.039062 87.488281 91.382812 M 100.15625 72.550781 C 100.753906 70.890625 102.378906 67.378906 101.84375 66.128906 C 101.386719 65.03125 98.671875 63.386719 96.5 62.558594 C 94.128906 61.648438 91.597656 61.429688 90.003906 61.957031 C 87.84375 68.277344 85.386719 74.769531 83.589844 80.964844 C 83.015625 83 82.109375 85.207031 82.414062 87.375 C 85.917969 87.65625 89.136719 89.320312 92.316406 91.09375 C 94.976562 86 97.921875 78.667969 100.15625 72.550781 M 111.300781 42.328125 C 111.6875 39.671875 112.492188 36.453125 111.011719 34.085938 C 109.527344 31.722656 105.527344 30.265625 102.96875 31.101562 C 99.695312 32.1875 98.539062 35.773438 97.164062 38.5 C 93.859375 45.101562 90.363281 53.363281 89.160156 59.375 C 94.789062 58.609375 99.777344 60.640625 104.265625 65.125 C 105.640625 62.796875 106.527344 60.242188 107.351562 57.824219 C 109.113281 52.65625 110.503906 47.910156 111.300781 42.328125 M 113.304688 32.90625 C 114.707031 35.257812 114.011719 39.726562 113.570312 42.847656 C 112.300781 52.148438 108.453125 62.28125 105.25 70.132812 C 104.429688 70.851562 103.773438 70.777344 102.957031 71.308594 C 101.023438 76.203125 98.785156 83.152344 96.175781 88.886719 C 94.863281 91.875 93.945312 95.671875 89.933594 95.1875 C 88.835938 99.25 89.511719 103.757812 88.96875 107.96875 C 85.222656 111.261719 81.609375 114.785156 79.039062 118.46875 C 78.265625 119.589844 77.558594 120.996094 76.34375 121.605469 C 74.316406 121.082031 74.921875 118.855469 75.03125 117.390625 C 75.40625 112.910156 75.578125 107.675781 74.558594 102.828125 C 76.542969 99.164062 79.246094 95.675781 81.230469 92.039062 C 77.9375 90.011719 79.375 86.28125 80.167969 83.441406 C 81.859375 77.476562 84.371094 70.546875 86.378906 65.398438 C 86.261719 64.5 85.285156 64.40625 85.40625 63.480469 C 85.515625 60.507812 86.882812 57.703125 87.917969 54.855469 C 89.996094 49.191406 91.667969 44.140625 94.699219 38.140625 C 96.652344 34.265625 97.601562 31.136719 102.363281 28.410156 C 104.507812 27.734375 110.773438 28.609375 113.304688 32.90625 "/>
+</g>
+</g>
+<g clip-path="url(#clip3)" clip-rule="nonzero">
+<g clip-path="url(#clip4)" clip-rule="nonzero">
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 111.011719 34.089844 C 112.492188 36.453125 111.6875 39.671875 111.300781 42.328125 C 110.503906 47.914062 109.113281 52.65625 107.351562 57.824219 C 106.527344 60.242188 105.640625 62.800781 104.265625 65.121094 C 99.777344 60.640625 94.789062 58.609375 89.160156 59.375 C 90.363281 53.363281 93.859375 45.101562 97.160156 38.5 C 98.539062 35.773438 99.695312 32.1875 102.972656 31.101562 C 105.527344 30.265625 109.527344 31.722656 111.011719 34.089844 "/>
+</g>
+</g>
+</g>
+</svg>
diff --git a/pdf-as-web/src/main/webapp/assets/js/dragNdrop.js b/pdf-as-web/src/main/webapp/assets/js/dragNdrop.js
index edfc1e2e..dc420ecf 100644
--- a/pdf-as-web/src/main/webapp/assets/js/dragNdrop.js
+++ b/pdf-as-web/src/main/webapp/assets/js/dragNdrop.js
@@ -86,11 +86,22 @@ function registerEventListeners() {
$("#PlaceStepButton").click();
});
+
$("#placeContinue").bind("click", function(evt) {
-
+
$("#SignStepButton").click();
});
+ $("#placeSignatureExtern").bind("click", function(evt) {
+
+ $("#iFrame").contents().find("#placeSignature").click();
+ });
+
+ $("#delSignatureExtern").bind("click", function(evt) {
+
+ $("#iFrame").contents().find("#delSignature").click();
+ })
+
function toggleView(input)
{
console.log("toggleView : " + input);
@@ -153,25 +164,6 @@ function registerEventListeners() {
}
}
-/* $("#main").bind("drop", function(evt) {
- evt.preventDefault();
- evt.stopPropagation();
- var files = evt.originalEvent.dataTransfer.files;
- if(files == null || files.length === 0) {
- return;
- }
- else if(files[0].name.indexOf(".pdf") < 0)
- {
- window.alert("The file type must be PDF");
- return;
- }
-
- file = files[0];
- previewFile();
- }); */
-
-
-
$("#pdf-file").bind("change", function(evt) {
file_event = evt;
var files = evt.target.files;
diff --git a/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/app.js b/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/app.js
index da71e83d..47720d42 100644
--- a/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/app.js
+++ b/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/app.js
@@ -121,6 +121,12 @@ function displayPdf() {
fileReader.readAsArrayBuffer(file);
}
+/*$("#placeSignatureExtern").bind("click", function(evt) {
+ console.log("PLACE SIGNATURE EXTERN");
+ $("#placeSignature").click();
+
+}); */
+
//
//Attaches event handlers to the signature placement icons
//
diff --git a/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.css b/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.css
index 84e0f073..2eff3912 100644
--- a/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.css
+++ b/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.css
@@ -36,8 +36,8 @@
}
.textLayer .highlight {
- margin: -1px;
- padding: 1px;
+ margin: -0.063em;
+ padding: -0.063em;
background-color: rgb(180, 0, 170);
border-radius: 4px;
@@ -68,9 +68,9 @@
.pdfViewer .page {
direction: ltr;
- width: 816px;
- height: 1056px;
- margin: 1px auto -8px auto;
+ width: 51em;
+ height: 66em;
+ margin: 0.063em auto -0.5em auto;
position: relative;
overflow: visible;
border: 9px solid transparent;
@@ -80,7 +80,7 @@
}
.pdfViewer.removePageBorders .page {
- margin: 0px auto 10px auto;
+ margin: 0px auto 0.625em auto;
border: none;
}
@@ -102,7 +102,7 @@
.pdfViewer .page .annotLink > a:hover {
opacity: 0.2;
background: #ff0;
- box-shadow: 0px 2px 10px #ff0;
+ box-shadow: 0px 0.125em 0.625em #ff0;
}
:-webkit-full-screen .pdfViewer .page {
@@ -140,8 +140,8 @@
float: left;
max-width: 20em;
background-color: #FFFF99;
- box-shadow: 0px 2px 5px #333;
- border-radius: 2px;
+ box-shadow: 0px 0.125em 0.313em #333;
+ border-radius: 0.125em;
padding: 0.6em;
cursor: pointer;
}
@@ -178,7 +178,7 @@
html {
height: 100%;
/* Font size is needed to make the activity bar the correct size. */
- font-size: 10px;
+ font-size: 0.625em;
}
body {
@@ -320,7 +320,7 @@ html[dir='rtl'] .innerCenter {
position: absolute;
top: 0;
bottom: 0;
- width: 200px;
+ width: 12.5em;
visibility: hidden;
-webkit-transition-duration: 200ms;
-webkit-transition-timing-function: ease;
@@ -331,12 +331,12 @@ html[dir='rtl'] .innerCenter {
html[dir='ltr'] #sidebarContainer {
-webkit-transition-property: left;
transition-property: left;
- left: -200px;
+ left: -12.5em;
}
html[dir='rtl'] #sidebarContainer {
-webkit-transition-property: right;
transition-property: right;
- right: -200px;
+ right: -12.5em;
}
#outerContainer.sidebarMoving > #sidebarContainer,
@@ -356,7 +356,7 @@ html[dir='rtl'] #outerContainer.sidebarOpen > #sidebarContainer {
right: 0;
bottom: 0;
left: 0;
- min-width: 320px;
+ min-width: 10em;
-webkit-transition-duration: 200ms;
-webkit-transition-timing-function: ease;
transition-duration: 200ms;
@@ -365,47 +365,47 @@ html[dir='rtl'] #outerContainer.sidebarOpen > #sidebarContainer {
html[dir='ltr'] #outerContainer.sidebarOpen > #mainContainer {
-webkit-transition-property: left;
transition-property: left;
- left: 200px;
+ left: 12.5em;
}
html[dir='rtl'] #outerContainer.sidebarOpen > #mainContainer {
-webkit-transition-property: right;
transition-property: right;
- right: 200px;
+ right: 12.5em;
}
#sidebarContent {
- top: 32px;
+ top: 2em;
bottom: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
position: absolute;
- width: 200px;
+ width: 12.5em;
background-color: hsla(0,0%,0%,.1);
}
html[dir='ltr'] #sidebarContent {
left: 0;
- box-shadow: inset -1px 0 0 hsla(0,0%,0%,.25);
+ box-shadow: inset -0.063em 0 0 hsla(0,0%,0%,.25);
}
html[dir='rtl'] #sidebarContent {
right: 0;
- box-shadow: inset 1px 0 0 hsla(0,0%,0%,.25);
+ box-shadow: inset 0.063em 0 0 hsla(0,0%,0%,.25);
}
#viewerContainer {
overflow: auto;
-webkit-overflow-scrolling: touch;
position: absolute;
- top: 32px;
+ top: 2em;
right: 0;
bottom: 0;
left: 0;
outline: none;
}
html[dir='ltr'] #viewerContainer {
- box-shadow: inset 1px 0 0 hsla(0,0%,100%,.05);
+ box-shadow: inset 0.063em 0 0 hsla(0,0%,100%,.05);
}
html[dir='rtl'] #viewerContainer {
- box-shadow: inset -1px 0 0 hsla(0,0%,100%,.05);
+ box-shadow: inset -0.063em 0 0 hsla(0,0%,100%,.05);
}
.toolbar {
@@ -421,57 +421,58 @@ html[dir='rtl'] #viewerContainer {
}
#toolbarSidebar {
- width: 200px;
- height: 32px;
+ width: 12.5em;
+ height: 2em;
background-color: #424242; /* fallback */
background-image: url(images/texture.png),
linear-gradient(hsla(0,0%,30%,.99), hsla(0,0%,25%,.95));
}
html[dir='ltr'] #toolbarSidebar {
- box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25),
- inset 0 -1px 0 hsla(0,0%,100%,.05),
- 0 1px 0 hsla(0,0%,0%,.15),
- 0 0 1px hsla(0,0%,0%,.1);
+ box-shadow: inset -0.063em 0 0 rgba(0, 0, 0, 0.25),
+ inset 0 -0.063em 0 hsla(0,0%,100%,.05),
+ 0 0.063em 0 hsla(0,0%,0%,.15),
+ 0 0 0.063em hsla(0,0%,0%,.1);
}
html[dir='rtl'] #toolbarSidebar {
- box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25),
- inset 0 1px 0 hsla(0,0%,100%,.05),
- 0 1px 0 hsla(0,0%,0%,.15),
- 0 0 1px hsla(0,0%,0%,.1);
+ box-shadow: inset 0.063em 0 0 rgba(0, 0, 0, 0.25),
+ inset 0 0.063em 0 hsla(0,0%,100%,.05),
+ 0 0.063em 0 hsla(0,0%,0%,.15),
+ 0 0 0.063em hsla(0,0%,0%,.1);
}
#toolbarContainer, .findbar, .secondaryToolbar {
position: relative;
- height: 32px;
+ height: 2em;
background-color: #474747; /* fallback */
background-image: url(images/texture.png),
linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95));
}
html[dir='ltr'] #toolbarContainer, .findbar, .secondaryToolbar {
- box-shadow: inset 1px 0 0 hsla(0,0%,100%,.08),
- inset 0 1px 1px hsla(0,0%,0%,.15),
- inset 0 -1px 0 hsla(0,0%,100%,.05),
- 0 1px 0 hsla(0,0%,0%,.15),
- 0 1px 1px hsla(0,0%,0%,.1);
+ box-shadow: inset 0.063em 0 0 hsla(0,0%,100%,.08),
+ inset 0 0.063em 0.063em hsla(0,0%,0%,.15),
+ inset 0 -0.063em 0 hsla(0,0%,100%,.05),
+ 0 0.063em 0 hsla(0,0%,0%,.15),
+ 0 0.063em 0.063em hsla(0,0%,0%,.1);
}
html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
- box-shadow: inset -1px 0 0 hsla(0,0%,100%,.08),
- inset 0 1px 1px hsla(0,0%,0%,.15),
- inset 0 -1px 0 hsla(0,0%,100%,.05),
- 0 1px 0 hsla(0,0%,0%,.15),
- 0 1px 1px hsla(0,0%,0%,.1);
+ box-shadow: inset -0.063em 0 0 hsla(0,0%,100%,.08),
+ inset 0 0.063em 0.063em hsla(0,0%,0%,.15),
+ inset 0 -0.063em 0 hsla(0,0%,100%,.05),
+ 0 0.063em 0 hsla(0,0%,0%,.15),
+ 0 0.063em 0.063em hsla(0,0%,0%,.1);
}
#toolbarViewer {
- height: 32px;
+ height: 2em;
+ min-width: 5em;
}
#loadingBar {
position: relative;
width: 100%;
- height: 4px;
+ height: 0.25em;
background-color: #333;
- border-bottom: 1px solid #333;
+ border-bottom: 0.063em solid #333;
}
#loadingBar .progress {
@@ -509,7 +510,7 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
top: 0;
left: 0;
height: 100%;
- width: 50px;
+ width: 3.125em;
background-image: linear-gradient(to right, #999 0%, #fff 50%, #999 100%);
background-size: 100% 100%;
@@ -520,27 +521,27 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
}
.findbar, .secondaryToolbar {
- top: 32px;
+ top: 2em;
position: absolute;
z-index: 10000;
- height: 32px;
+ height: 2em;
- min-width: 16px;
- padding: 0px 6px 0px 6px;
- margin: 4px 2px 4px 2px;
+ min-width: 1em;
+ padding: 0px 0.375em 0px 0.375em;
+ margin: 0.25em 0.125em 0.25em 0.125em;
color: hsl(0,0%,85%);
- font-size: 12px;
- line-height: 14px;
+ font-size: 0.75em;
+ line-height: 0.875em;
text-align: left;
cursor: default;
}
html[dir='ltr'] .findbar {
- left: 68px;
+ left: 4.25em;
}
html[dir='rtl'] .findbar {
- right: 68px;
+ right: 4.25em;
}
.findbar label {
@@ -558,23 +559,23 @@ html[dir='rtl'] #findInput[data-status="pending"] {
}
.secondaryToolbar {
- padding: 6px;
+ padding: 0.375em;
height: auto;
z-index: 30000;
}
html[dir='ltr'] .secondaryToolbar {
- right: 4px;
+ right: 0.25em;
}
html[dir='rtl'] .secondaryToolbar {
- left: 4px;
+ left: 0.25em;
}
#secondaryToolbarButtonContainer {
- max-width: 200px;
- max-height: 400px;
+ max-width: 12.5em;
+ max-height: 25em;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
- margin-bottom: -4px;
+ margin-bottom: -0.25em;
}
.doorHanger,
@@ -1260,7 +1261,7 @@ html[dir='rtl'] .verticalToolbarSeparator {
}
.toolbarLabel {
- min-width: 16px;
+ min-width: 5em;
padding: 3px 6px 3px 2px;
margin: 4px 2px 4px 0;
border: 1px solid transparent;
@@ -1564,7 +1565,7 @@ html[dir='rtl'] .attachmentsItem > button {
text-align: left;
}
#documentPropertiesOverlay .row > * {
- min-width: 100px;
+ min-width: 5em;
}
html[dir='ltr'] #documentPropertiesOverlay .row > * {
text-align: left;
@@ -1948,14 +1949,14 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
@media all and (max-width: 770px) {
#sidebarContainer {
- top: 32px;
+ top: 2em;
z-index: 100;
}
.loadingInProgress #sidebarContainer {
- top: 37px;
+ top: 2.313em;
}
#sidebarContent {
- top: 32px;
+ top: 2em;
background-color: hsla(0,0%,0%,.7);
}
@@ -1968,11 +1969,11 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
html[dir='ltr'] .outerCenter {
float: left;
- left: 205px;
+ left: 12.813em;
}
html[dir='rtl'] .outerCenter {
float: right;
- right: 205px;
+ right: 12.813em;
}
#outerContainer .hiddenLargeView,
@@ -2013,12 +2014,12 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
html[dir='ltr'] #outerContainer.sidebarMoving .outerCenter,
html[dir='ltr'] #outerContainer.sidebarOpen .outerCenter,
html[dir='ltr'] .outerCenter {
- left: 156px;
+ left: 9.750em;
}
html[dir='rtl'] #outerContainer.sidebarMoving .outerCenter,
html[dir='rtl'] #outerContainer.sidebarOpen .outerCenter,
html[dir='rtl'] .outerCenter {
- right: 156px;
+ right: 9.750em;
}
.toolbarButtonSpacer {
width: 0;
@@ -2030,3 +2031,9 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
display: none;
}
}
+
+ @media all and (max-width: 320px) {
+ #toolbarContainer {
+ width: 21.5em;
+ }
+ }
diff --git a/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.html b/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.html
index 1f8a6a44..6db3039e 100644
--- a/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.html
+++ b/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.html
@@ -24,7 +24,7 @@ http://sourceforge.net/adobe/cmap/wiki/License/
<meta name="google" content="notranslate">
<title>PDF.js viewer</title>
- <link rel="stylesheet" href="viewer.css"/>
+ <link rel="stylesheet" href="viewer.css"/>
<script src="compatibility.js"></script>
@@ -42,7 +42,7 @@ http://sourceforge.net/adobe/cmap/wiki/License/
<script src="app.js"></script>
<style>
.black_overlay{
- display: block;
+ display: inline-block;
position: fixed;
top: 0%;
left: 0%;
@@ -62,7 +62,7 @@ http://sourceforge.net/adobe/cmap/wiki/License/
left: 32%;
width: 36%;
height: 30%;
- padding: 16px;
+ padding: 1em;
border: 4px solid orange;
background-color: white;
z-index:1002;
@@ -219,29 +219,59 @@ http://sourceforge.net/adobe/cmap/wiki/License/
<input type="number" id="pageNumber" class="toolbarField pageNumber" value="1" size="4" min="1" tabindex="15">
<span id="numPages" class="toolbarLabel"></span>
</div>
+
<div id="toolbarViewerRight">
+
+ <div class="splitToolbarButton">
+ <button id="zoomOut" class="toolbarButton zoomOut" title="Zoom Out" tabindex="21" data-l10n-id="zoom_out">
+ <span data-l10n-id="zoom_out_label">Zoom Out</span>
+ </button>
+ <div class="splitToolbarButtonSeparator"></div>
+ <button id="zoomIn" class="toolbarButton zoomIn" title="Zoom In" tabindex="22" data-l10n-id="zoom_in">
+ <span data-l10n-id="zoom_in_label">Zoom In</span>
+ </button>
+ </div>
+ <span id="scaleSelectContainer" class="dropdownToolbarButton">
+ <select id="scaleSelect" title="Zoom" tabindex="23" data-l10n-id="zoom">
+ <option id="pageAutoOption" title="" value="auto" selected="selected" data-l10n-id="page_scale_auto">Automatic Zoom</option>
+ <option id="pageActualOption" title="" value="page-actual" data-l10n-id="page_scale_actual">Actual Size</option>
+ <option id="pageFitOption" title="" value="page-fit" data-l10n-id="page_scale_fit">Fit Page</option>
+ <option id="pageWidthOption" title="" value="page-width" data-l10n-id="page_scale_width">Full Width</option>
+ <option id="customScaleOption" title="" value="custom"></option>
+ <option title="" value="0.5" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 50 }'>50%</option>
+ <option title="" value="0.75" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 75 }'>75%</option>
+ <option title="" value="1" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 100 }'>100%</option>
+ <option title="" value="1.25" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 125 }'>125%</option>
+ <option title="" value="1.5" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 150 }'>150%</option>
+ <option title="" value="2" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 200 }'>200%</option>
+ <option title="" value="3" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 300 }'>300%</option>
+ <option title="" value="4" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 400 }'>400%</option>
+ </select>
+ </span>
+
<button id="presentationMode" style="display:none;" class="toolbarButton presentationMode hiddenLargeView" title="Switch to Presentation Mode" tabindex="29" data-l10n-id="presentation_mode">
<span data-l10n-id="presentation_mode_label">Presentation Mode</span>
</button>
- <!-- ADDED -->
- <button id="placeSignature" class="toolbarButton placeSignature hiddenLargeView" title="Place Signature on current Page" tabindex="30" data-l10n-id="place_signature">
+ <button style="display:none;" id="placeSignature" class="toolbarButton placeSignature hiddenLargeView" title="Place Signature on current Page" tabindex="30" data-l10n-id="place_signature">
<span data-l10n-id="place_signature_label">Place Signature</span>
- </button>
+ </button>
+
- <!-- ADDED -->
- <button id="delSignature" class="toolbarButton delSignature hiddenLargeView" title="Remove Signature (If no Signature gets placed, one will be appended at the end of the document)" tabindex="31" data-l10n-id="del_signature">
+ <button style="display:none;" id="delSignature" class="toolbarButton delSignature hiddenLargeView" title="Remove Signature (If no Signature gets placed, one will be appended at the end of the document)" tabindex="31" data-l10n-id="del_signature">
<span data-l10n-id="place_signature_label">Remove Signature</span>
- </button>
+ </button>
+
- <button id="openFile" class="toolbarButton openFile hiddenLargeView" title="Open File" tabindex="32" data-l10n-id="open_file">
+ <button style="display:none;" id="openFile" class="toolbarButton openFile hiddenLargeView" title="Open File" tabindex="30" data-l10n-id="open_file">
<span data-l10n-id="open_file_label">Open</span>
- </button>
+ </button>
- <button id="print" class="toolbarButton print hiddenMediumView" title="Print" tabindex="33" data-l10n-id="print">
+
+ <button style="display:none;" id="print" class="toolbarButton print hiddenMediumView" title="Print" tabindex="33" data-l10n-id="print">
<span data-l10n-id="print_label">Print</span>
- </button>
+ </button>
<button id="download" style="display:none;" class="toolbarButton download hiddenMediumView" title="Download" tabindex="34" data-l10n-id="download">
<span data-l10n-id="download_label">Download</span>
@@ -255,35 +285,11 @@ http://sourceforge.net/adobe/cmap/wiki/License/
<button id="secondaryToolbarToggle" style="display: none;" class="toolbarButton" title="Tools" tabindex="36" data-l10n-id="tools">
<span data-l10n-id="tools_label">Tools</span>
</button>
- </div>
+ </div>
<div class="outerCenter">
<div class="innerCenter" id="toolbarViewerMiddle">
- <div class="splitToolbarButton">
- <button id="zoomOut" class="toolbarButton zoomOut" title="Zoom Out" tabindex="21" data-l10n-id="zoom_out">
- <span data-l10n-id="zoom_out_label">Zoom Out</span>
- </button>
- <div class="splitToolbarButtonSeparator"></div>
- <button id="zoomIn" class="toolbarButton zoomIn" title="Zoom In" tabindex="22" data-l10n-id="zoom_in">
- <span data-l10n-id="zoom_in_label">Zoom In</span>
- </button>
- </div>
- <span id="scaleSelectContainer" class="dropdownToolbarButton">
- <select id="scaleSelect" title="Zoom" tabindex="23" data-l10n-id="zoom">
- <option id="pageAutoOption" title="" value="auto" selected="selected" data-l10n-id="page_scale_auto">Automatic Zoom</option>
- <option id="pageActualOption" title="" value="page-actual" data-l10n-id="page_scale_actual">Actual Size</option>
- <option id="pageFitOption" title="" value="page-fit" data-l10n-id="page_scale_fit">Fit Page</option>
- <option id="pageWidthOption" title="" value="page-width" data-l10n-id="page_scale_width">Full Width</option>
- <option id="customScaleOption" title="" value="custom"></option>
- <option title="" value="0.5" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 50 }'>50%</option>
- <option title="" value="0.75" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 75 }'>75%</option>
- <option title="" value="1" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 100 }'>100%</option>
- <option title="" value="1.25" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 125 }'>125%</option>
- <option title="" value="1.5" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 150 }'>150%</option>
- <option title="" value="2" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 200 }'>200%</option>
- <option title="" value="3" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 300 }'>300%</option>
- <option title="" value="4" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 400 }'>400%</option>
- </select>
- </span>
+
+
</div>
</div>
</div>
diff --git a/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.js b/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.js
index af4fcd8d..7abe3a52 100644
--- a/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.js
+++ b/pdf-as-web/src/main/webapp/assets/js/pdf.js/web/viewer.js
@@ -3182,8 +3182,8 @@ var PDFPageView = (function PDFPageViewClosure() {
cssTransform: function PDFPageView_transform(canvas, redrawAnnotations) {
// Scale canvas, canvas wrapper, and page container.
- var width = this.viewport.width;
- var height = this.viewport.height;
+ var width = this.viewport.width / 50;
+ var height = this.viewport.height / 50;
var div = this.div;
canvas.style.width = canvas.parentNode.style.width = div.style.width =
Math.floor(width) + 'px';
diff --git a/pdf-as-web/src/main/webapp/index.jsp b/pdf-as-web/src/main/webapp/index.jsp
index 05bf379c..2272662e 100644
--- a/pdf-as-web/src/main/webapp/index.jsp
+++ b/pdf-as-web/src/main/webapp/index.jsp
@@ -107,12 +107,13 @@
</div>
-->
- <!-- Header -->
<div class="container">
+ <!-- Header -->
+<div class="center">
<div class="center" id="navBar">
<ul class="nav nav-wizard">
<li class="active" id="UploadStepButton"><a href="#"><span class="glyphicon glyphicon-open-file" aria-hidden="true"></span><span id="uploadNavText"> Upload</span></a></li>
- <li id="PlaceStepButton" style="pointer-events:none;"><a href="#"><span class="glyphicon glyphicon-screenshot" aria-hidden="true"></span><span id="placeNavText" style="display:none;"> Place</span></a></li>
+ <li id="PlaceStepButton" style="pointer-events:none;"><a href="#"><span class="glyphicon glyphicon-move" aria-hidden="true"></span><span id="placeNavText" style="display:none;"> Place</span></a></li>
<li id="SignStepButton" style="pointer-events:none;"><a href="#"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span><span id="signNavText" style="display:none;"> Sign</span></a></li>
<li id="FinishStepButton" style="pointer-events:none;"><a href="#"><span class="glyphicon glyphicon-save-file" aria-hidden="true"></span><span id="downloadNavText" style="display:none;"> Download</span></a></li>
</ul>
@@ -125,7 +126,7 @@
<div class="col-md-12">
- <div id="DropContainer" class="container">
+ <div id="DropContainer">
<h3 class="center">Upload your Document</h3>
<div class="center">
<div id="borderBox" class="center">
@@ -157,72 +158,81 @@
</div>
</div>
- <div id="ViewContainer" class="container" style="display: none;">
- <h3 class="center">Place your Signature<small></h3>
- <h6 class="center">(If no Signature is placed, one will be appended at the end of the Document)</h6>
- <div class="pull-right">
- <button id="placeContinue" class="btn btn-lg btn-primary">Continue</button>
- </div>
+ <div id="ViewContainer" style="display: none;">
+ <h3 class="center">Place your Signature</h3>
+ <h6 class="center" id="noSignatureWarning">(If no Signature is placed, one will be appended at the end of the Document)</h6>
+ <div class="center">
+ <div id="ViewerExternToolbar" class="center">
+ <div id="placeSignatureExtern">
+ <span class="glyphicon glyphicon-pencil"></span><!--<img src="assets/img/federohne.svg" title="Place Signature on current Page"> --><caption>Add</caption>
+ </div>
+ <div id="delSignatureExtern">
+ <span class="glyphicon glyphicon-ban-circle"></span><!-- <img src="assets/img/federohne.svg" title="Remove Signature from current Page"> --><caption>Remove</caption>
+ </div>
+ <div id="placeContinue">
+ <span class="glyphicon glyphicon-ok"></span><!-- <img src="assets/img/federohne.svg" title="Continue"> --><caption>Continue</caption>
+ </div>
+ </div>
+ </div>
<div id="content" class="center">
Loading your PDF, please wait...
</div>
</div>
- <div id="SignContainer" class="container" style="display: none;">
+ <div id="SignContainer" style="display: none;">
<h3 class="center">Choose your Sign Method</h3>
<fieldset>
- <table>
+ <div class="center">
+ <div id="methodContainer" class="row center">
<%
if (WebConfiguration.getHandyBKUURL() != null) {
%>
- <tr>
- <td><input type="radio" id="mobileBKU" name="connector" value="mobilebku" checked></td>
- <td><label for="mobileBKU">Handy</td>
- <td><label for="mobileBKU"><img src="assets/img/mobileBKU.png" alt="Sign via mobile BKU"/></td>
-
- </tr>
+
+ <div class="methodChooseContainer">
+ <div id="ImageBox"><img src="assets/img/mobileBKU.png" alt="Sign via mobile BKU"/></div>
+ <div><button class="btn btn-primary">Mobile<br>Phone</button></div>
+ <div style="display:none;"><input type="radio" id="mobileBKU" name="connector" value="mobilebku" checked></div>
+ </div>
<%
}
%>
<%
if (WebConfiguration.getLocalBKUURL() != null) {
%>
- <tr>
- <td><input type="radio" id="localBKU" name="connector" value="bku"></td>
- <td><label for="localBKU">Lokale BKU</label></td>
- <td><label for="localBKU"><img src="assets/img/onlineBKU.png" alt="Sign via local BKU" /></label></td>
-
- </tr>
+ <div class="methodChooseContainer">
+ <div id="ImageBox"><img class="BKUImage" src="assets/img/onlineBKU.png" alt="Sign via local BKU" /></div>
+ <div><button class="btn btn-primary">Lokale<br>BKU</button></div>
+ <div style="display:none;"><input type="radio" id="localBKU" name="connector" value="bku"></div>
+ </div>
<%
}
%>
<%
if (WebConfiguration.getOnlineBKUURL() != null) {
%>
- <tr>
- <td><input type="radio" id="onlineBKU" name="connector" value="onlinebku"></td>
- <td><label for="onlineBKU">Online BKU</label></td>
- <td><label for="onlineBKU"><img src="assets/img/onlineBKU.png" alt="Sign via online BKU"/></label></td>
-
- </tr>
+ <div class="methodChooseContainer">
+ <div id="ImageBox"><img class="BKUImage" src="assets/img/onlineBKU.png" alt="Sign via online BKU"/></div>
+ <div><button class="btn btn-primary">Online<br>BKU</button></div>
+ <div style="display:none;"><input type="radio" id="onlineBKU" name="connector" value="onlinebku"></div>
+ </div>
<%
}
%>
- <%
+ <!--<%
if(WebConfiguration.getKeystoreDefaultEnabled()) {
%>
- <tr>
- <td><input type="radio" id="jks" name="connector" value="jks"></td>
- <td><label for="jks">Server Keystore</label></td>
- <td><label for="jks"><img src="assets/img/onlineBKU.png" alt="Sign via Server Keystore"/></label></td>
- </tr>
+ <div id="ImageBox"><img class="BKUImage" src="assets/img/onlineBKU.png" alt="Sign via Server Keystore"/></div>
+ <div><button class="btn btn-primary">Server<br>Keystore</button></div>
+ <div style="display:none;"><input type="radio" id="jks" name="connector" value="jks"></div>
+ </div> -->
<%
}
- %>
- </table>
+ %>
+ </div>
+ </div>
</fieldset>
</div>
- <div id="DownloadContainer" class="container" style="display: none;">
+ <div id="DownloadContainer" style="display: none;">
<h3 class="center">Download your Document</h3>
<div id="btnSign">
@@ -233,6 +243,8 @@
</div>
</div>
+
+</div>
--
cgit v1.2.3