From 35a7156138f97b9a4571637e434aa24bc0a5b1d8 Mon Sep 17 00:00:00 2001 From: fschneider 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 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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/ PDF.js viewer - + @@ -42,7 +42,7 @@ http://sourceforge.net/adobe/cmap/wiki/License/