Skip to content

W
web-ui
Commit 358873f2 by Earvin Paguia
Options

Change the UI of pdf and tiff Viewer

parent 34fae9e8
Showing with 120 additions and 67 deletions
WebGde/WebContent/index.html
...@@ -132,10 +132,8 @@ ...@@ -132,10 +132,8 @@
<div id="TiffViewerModal"> <div id="TiffViewerModal">
<div id='prevDivContainer' title="previous"> <div >
<div id='prevDiv'>
<div id="prev"></div>
</div>
</div> </div>
<!-- Modal content --> <!-- Modal content -->
...@@ -168,11 +166,10 @@ ...@@ -168,11 +166,10 @@
</div> </div>
<div id="TiffModalFooter"> <div id="TiffModalFooter">
</div>
<div id='prevDiv'>
<div id="prev"></div>
</div> </div>
<div id='nextDivContainer' title="next">
<div id='nextDiv'> <div id='nextDiv'>
...@@ -181,6 +178,14 @@ ...@@ -181,6 +178,14 @@
</div> </div>
</div>
<div >
</div>
......
WebGde/WebContent/src/accessFile/accessFile.js
...@@ -72,8 +72,9 @@ async function accessFile() { ...@@ -72,8 +72,9 @@ async function accessFile() {
const TiffViewer_Header = document.getElementById("TiffModalHeader"); const TiffViewer_Header = document.getElementById("TiffModalHeader");
const TiffViewer_filedetail = document.createElement("div"); const TiffViewer_filedetail = document.createElement("div");
TiffViewer_filedetail.id = "TiffViewerImageName"; TiffViewer_filedetail.id = "TiffViewerImageName";
TiffViewer_filedetail.style.textAlign = "center"; /* TiffViewer_filedetail.style.textAlign = "center";*/
TiffViewer_filedetail.textContent = "Filename: " + idQuery.result.name; TiffViewer_filedetail.textContent = "Filename: " + idQuery.result.name;
TiffViewer_filedetail.title = "Filename: " + idQuery.result.name;
TiffViewer_Header.append(TiffViewer_filedetail); TiffViewer_Header.append(TiffViewer_filedetail);
displayPdf(idQuery.result.path); displayPdf(idQuery.result.path);
} else { } else {
...@@ -91,8 +92,9 @@ async function accessFile() { ...@@ -91,8 +92,9 @@ async function accessFile() {
const TiffViewer_Header = document.getElementById("TiffModalHeader"); const TiffViewer_Header = document.getElementById("TiffModalHeader");
const TiffViewer_filedetail = document.createElement("div"); const TiffViewer_filedetail = document.createElement("div");
TiffViewer_filedetail.id = "TiffViewerImageName"; TiffViewer_filedetail.id = "TiffViewerImageName";
TiffViewer_filedetail.style.textAlign = "center"; /*TiffViewer_filedetail.style.textAlign = "center";*/
TiffViewer_filedetail.textContent = "Filename: " + idQuery.result.name; TiffViewer_filedetail.textContent = "Filename: " + idQuery.result.name;
TiffViewer_filedetail.title = "Filename: " + idQuery.result.name;
TiffViewer_Header.append(TiffViewer_filedetail); TiffViewer_Header.append(TiffViewer_filedetail);
displayPdf(idQuery.result.path); displayPdf(idQuery.result.path);
} else { } else {
...@@ -182,8 +184,9 @@ async function accessFile() { ...@@ -182,8 +184,9 @@ async function accessFile() {
const TiffViewer_Header = document.getElementById("TiffModalHeader"); const TiffViewer_Header = document.getElementById("TiffModalHeader");
const TiffViewer_filedetail = document.createElement("div"); const TiffViewer_filedetail = document.createElement("div");
TiffViewer_filedetail.id = "TiffViewerImageName"; TiffViewer_filedetail.id = "TiffViewerImageName";
TiffViewer_filedetail.style.textAlign = "center";
TiffViewer_filedetail.textContent = "Filename: " + filename; TiffViewer_filedetail.textContent = "Filename: " + filename;
TiffViewer_filedetail.title = "Filename: " + filename;
TiffViewer_Header.append(TiffViewer_filedetail); TiffViewer_Header.append(TiffViewer_filedetail);
displayPdf(img); displayPdf(img);
} else { } else {
...@@ -546,8 +549,9 @@ function refreshImage() { ...@@ -546,8 +549,9 @@ function refreshImage() {
const TiffViewer_Header = document.getElementById("TiffModalHeader"); const TiffViewer_Header = document.getElementById("TiffModalHeader");
const TiffViewer_filedetail = document.createElement("div"); const TiffViewer_filedetail = document.createElement("div");
TiffViewer_filedetail.id = "TiffViewerImageName"; TiffViewer_filedetail.id = "TiffViewerImageName";
TiffViewer_filedetail.style.textAlign = "center";
TiffViewer_filedetail.textContent = "Filename: " + idQuery.result.name; TiffViewer_filedetail.textContent = "Filename: " + idQuery.result.name;
TiffViewer_filedetail.title = "Filename: " + idQuery.result.name;
TiffViewer_Header.append(TiffViewer_filedetail); TiffViewer_Header.append(TiffViewer_filedetail);
displayPdf(idQuery.result.path); displayPdf(idQuery.result.path);
} else { } else {
......
WebGde/WebContent/src/pdfviewer/pdfv.js
...@@ -6,6 +6,8 @@ var displayPdf = function(doc) { ...@@ -6,6 +6,8 @@ var displayPdf = function(doc) {
container.setAttribute('id', 'pdf-container'); container.setAttribute('id', 'pdf-container');
// Get the next and previous buttons // Get the next and previous buttons
let pdfHeader = document.getElementById("TiffModalHeader");
let centerContainer = document.createElement("div"); let centerContainer = document.createElement("div");
centerContainer.classList.add("footerCenterContainer"); centerContainer.classList.add("footerCenterContainer");
...@@ -61,8 +63,7 @@ var displayPdf = function(doc) { ...@@ -61,8 +63,7 @@ var displayPdf = function(doc) {
nextButton.classList.add("multiPagePdf_ButtonClass") nextButton.classList.add("multiPagePdf_ButtonClass")
nextButton.textContent = '>'; nextButton.textContent = '>';
let pageZoomInfoContainer = document.createElement("div");
pageZoomInfoContainer.classList.add("pageZoomInfoContainer");
var pageInfo = document.createElement('span'); var pageInfo = document.createElement('span');
pageInfo.setAttribute('id', 'page-info'); pageInfo.setAttribute('id', 'page-info');
...@@ -86,14 +87,14 @@ var displayPdf = function(doc) { ...@@ -86,14 +87,14 @@ var displayPdf = function(doc) {
flipVerticalButton.append(flipVerticalIcon); flipVerticalButton.append(flipVerticalIcon);
flipHorizontalButton.append(flipHorizontalIcon); flipHorizontalButton.append(flipHorizontalIcon);
pageZoomInfoContainer.appendChild(pageInfo);
pageZoomInfoContainer.appendChild(zoomInfo);
pageButtonInfoContainer.append(prevButton); pageButtonInfoContainer.append(prevButton);
pageButtonInfoContainer.append(pageZoomInfoContainer); pageButtonInfoContainer.append(pageInfo);
pageButtonInfoContainer.append(nextButton); pageButtonInfoContainer.append(nextButton);
pageButtonInfoContainer.append(zoomInfo);
buttonAndPageContainer.append(pageButtonInfoContainer); pdfHeader.append(pageButtonInfoContainer);
footer.appendChild(controllsContainer); footer.appendChild(controllsContainer);
......
WebGde/WebContent/src/tiffViewer/tiffViewer.js
...@@ -256,6 +256,7 @@ function TIFFViewer(xhr, TiffViewerImageName) { ...@@ -256,6 +256,7 @@ function TIFFViewer(xhr, TiffViewerImageName) {
let ofTotal = JSON.parse(sessionStorage.getItem("dir_files")).length; let ofTotal = JSON.parse(sessionStorage.getItem("dir_files")).length;
document.getElementById("totalPageValue").innerHTML = Current_page + ' of ' + ofTotal; document.getElementById("totalPageValue").innerHTML = Current_page + ' of ' + ofTotal;
...@@ -267,10 +268,14 @@ function TIFFViewer(xhr, TiffViewerImageName) { ...@@ -267,10 +268,14 @@ function TIFFViewer(xhr, TiffViewerImageName) {
let multiTiffButtonDiv = document.createElement("div"); let multiTiffButtonDiv = document.createElement("div");
multiTiffButtonDiv.classList.add("multiTiffButtonDiv") multiTiffButtonDiv.classList.add("multiTiffButtonDiv")
multiTiffButtonDiv.append(TiffViewer_Pbtn); multiTiffButtonDiv.append(TiffViewer_Pbtn);
multiTiffButtonDiv.append(TiffViewer_pagedetail);
multiTiffButtonDiv.append(TiffViewer_Nbtn); multiTiffButtonDiv.append(TiffViewer_Nbtn);
multiTiffDiv.append(TiffViewer_pagedetail); multiTiffButtonDiv.append(zoom);
multiTiffDiv.append(multiTiffButtonDiv);
TiffViewer_Fit.append(FitIcon) TiffViewer_Fit.append(FitIcon)
...@@ -285,15 +290,18 @@ function TIFFViewer(xhr, TiffViewerImageName) { ...@@ -285,15 +290,18 @@ function TIFFViewer(xhr, TiffViewerImageName) {
TiffViewer_Header.append(TiffViewer_detailcont); TiffViewer_Header.append(TiffViewer_detailcont);
TiffViewer_Body.append(multiTiffDiv); TiffViewer_Body.append(multiTiffDiv);
TiffViewer_Body.append(TiffViewer_filecont); TiffViewer_Body.append(TiffViewer_filecont);
TiffViewer_Footer.append(zoom, TiffViewer_btncont); TiffViewer_Footer.append(TiffViewer_btncont);
//append Contents to containers //append Contents to containers
TiffViewer_detailcont.append(TiffViewer_filedetail); TiffViewer_detailcont.append(TiffViewer_filedetail);
TiffViewer_detailcont.append(multiTiffButtonDiv);
TiffViewer_filecont.appendChild(TiffViewer_scrncont); TiffViewer_filecont.appendChild(TiffViewer_scrncont);
TiffViewer_scrncont.appendChild(TiffViewer_imgcont); TiffViewer_scrncont.appendChild(TiffViewer_imgcont);
TiffViewer_btncont.append(TiffViewer_Fscrn, TiffViewer_Fit, TiffViewer_hflip, TiffViewer_vflip, TiffViewer_Rrotate, TiffViewer_Lrotate, TiffViewer_zoomIn, TiffViewer_zoomOut); TiffViewer_btncont.append(TiffViewer_Fscrn, TiffViewer_Fit, TiffViewer_hflip, TiffViewer_vflip, TiffViewer_Rrotate, TiffViewer_Lrotate, TiffViewer_zoomIn, TiffViewer_zoomOut);
//get Content placeholders //get Content placeholders
const wrapper = document.querySelector("#TiffViewer_Screen"), const wrapper = document.querySelector("#TiffViewer_Screen"),
header = wrapper.querySelector("#TiffViewer_ImageContainer"); header = wrapper.querySelector("#TiffViewer_ImageContainer");
...@@ -302,7 +310,8 @@ function TIFFViewer(xhr, TiffViewerImageName) { ...@@ -302,7 +310,8 @@ function TIFFViewer(xhr, TiffViewerImageName) {
TiffViewer_file.append(TiffViewerImageName); //Append Filename to div placeholder TiffViewer_file.append(TiffViewerImageName); //Append Filename to div placeholder
TiffViewer_file.style.display = "block"; //Show Filename TiffViewer_file.style.display = "block"; //Show Filename
let fileName = document.getElementById("TiffViewerImageName");
fileName.title = "Filename: " + TiffViewerImageName;
var tiff = new Tiff({ var tiff = new Tiff({
buffer: buffer buffer: buffer
}); //get TIFF data via buffer }); //get TIFF data via buffer
...@@ -310,8 +319,8 @@ function TIFFViewer(xhr, TiffViewerImageName) { ...@@ -310,8 +319,8 @@ function TIFFViewer(xhr, TiffViewerImageName) {
//if TIFF page is greater than one, display Previous and TiffViewer_NextButton buttons //if TIFF page is greater than one, display Previous and TiffViewer_NextButton buttons
if (TiffViewer_pages > 1) { if (TiffViewer_pages > 1) {
document.getElementById("TiffViewer_PrevButton").style.display = "block"; document.getElementById("TiffViewer_PrevButton").style.display = "inline-block";
document.getElementById("TiffViewer_NextButton").style.display = "block"; document.getElementById("TiffViewer_NextButton").style.display = "inline-block";
var TiffViewer_PageCount = document.getElementById("TiffViewer_PageCount"); var TiffViewer_PageCount = document.getElementById("TiffViewer_PageCount");
var pageappend = TiffViewer_current + " / " + TiffViewer_pages; var pageappend = TiffViewer_current + " / " + TiffViewer_pages;
TiffViewer_PageCount.append(pageappend); //display of page number TiffViewer_PageCount.append(pageappend); //display of page number
......
WebGde/WebContent/style.css
...@@ -251,12 +251,21 @@ main#viewer { ...@@ -251,12 +251,21 @@ main#viewer {
margin-right: 20px; margin-right: 20px;
} }
.multiTiffViewer_ButtonClass { .multiTiffViewer_ButtonClass {
display: inline-block;
background-color: #000000a1; background-color: #000000a1;
border: none; border: none;
font-size: 14px; font-size: 14px;
color: white; color: white;
font-weight: 600; font-weight: 600;
padding: 2px 8px; padding: 2px 7px 2px 8px;
margin-right: 2px !important;
cursor: pointer;
}
#TiffViewer_PageCount {
margin-right: 7px;
margin-left: 7px;
} }
.multiPagePdf_ButtonClass { .multiPagePdf_ButtonClass {
...@@ -273,8 +282,7 @@ main#viewer { ...@@ -273,8 +282,7 @@ main#viewer {
.buttonAndPageContainer { .buttonAndPageContainer {
position: fixed; position: fixed;
top: 0px; top: 12px;
margin-top: 8vh;
width: 70%; width: 70%;
} }
...@@ -319,10 +327,10 @@ img.tiffViewerIcons { ...@@ -319,10 +327,10 @@ img.tiffViewerIcons {
} }
.viewerSizeLabel { .viewerSizeLabel {
padding: 4px;
color: white; color: white;
position: absolute; position: absolute;
right: 5px; display: inline-block;
top: 10px;
} }
.popup .popupLogoutText { .popup .popupLogoutText {
...@@ -383,12 +391,17 @@ textarea{ ...@@ -383,12 +391,17 @@ textarea{
} }
.multiTiffButtonDiv { .multiTiffButtonDiv {
display: inline-flex; padding: 14px 17px 15px 17px;
position: absolute; display: block;
color: white;
text-align: center;
top: 0;
right: 0; right: 0;
left: 0;
position: absolute;
} }
#TiffButtonRight{ #TiffButtonRight {
display: inline-flex; display: inline-flex;
padding: 2px 16px; padding: 2px 16px;
z-index: 1; z-index: 1;
...@@ -398,8 +411,7 @@ textarea{ ...@@ -398,8 +411,7 @@ textarea{
height: 45px; height: 45px;
flex-wrap: wrap; flex-wrap: wrap;
align-content: center; align-content: center;
/* margin-top: -50px; */ right: -1%;
right: -9%;
} }
.buttonRightClass { .buttonRightClass {
...@@ -457,10 +469,10 @@ div#nextDivContainer { ...@@ -457,10 +469,10 @@ div#nextDivContainer {
#nextDiv { #nextDiv {
background-color: #000000a1; background-color: #000000a1;
width: 50px; width: 35px;
display: flex; display: flex;
top: 50%; top: 13%;
height: 50px; height: 35px;
position: absolute; position: absolute;
border-radius: 83%; border-radius: 83%;
cursor: pointer; cursor: pointer;
...@@ -480,40 +492,61 @@ div#prevDivContainer { ...@@ -480,40 +492,61 @@ div#prevDivContainer {
transition: all 0.2s ease-out 100ms; transition: all 0.2s ease-out 100ms;
z-index: 1; z-index: 1;
background-color: #000000a1; background-color: #000000a1;
width: 50px; width: 35px;
top: 50%; top: 13%;
height: 50px; height: 35px;
position: absolute; position: absolute;
border-radius: 83%; border-radius: 83%;
cursor: pointer; cursor: pointer;
margin-left: 1.5%; margin-left: 1.5%;
} }
#prev {
#prev {position: absolute;margin: auto;top: 58%;margin-left: 29%;width: 16px;height: 3px;background-color: #ffffff;box-shadow: 0 3px 5px rgb(0 0 0 / 20%);animation: arrow 700ms linear infinite;transform: rotate(48deg);cursor: pointer;} position: absolute;
margin: auto;
top: 57%;
margin-left: 31%;
width: 11px;
height: 3px;
background-color: #ffffff;
box-shadow: 0 3px 5px rgb(0 0 0 / 20%);
animation: arrow 700ms linear infinite;
transform: rotate(48deg);
cursor: pointer;
}
#prev::after { #prev::after {
content: ''; content: '';
position: absolute; position: absolute;
width: 105%; width: 104%;
height: 3px; height: 3px;
right: 7px; right: 5px;
background-color: #ffffff; background-color: #ffffff;
top: -7px; top: -5px;
transform: rotate(-94deg); transform: rotate(-94deg);
} }
#next {
#next {position: absolute;margin: auto;top: 37%;margin-left: 38%;width: 16px;height: 3px;background-color: #ffffff;box-shadow: 0 3px 5px rgb(0 0 0 / 20%);animation: arrow 700ms linear infinite;transform: rotate(-140deg);cursor: pointer;} position: absolute;
margin: auto;
top: 38%;
margin-left: 39%;
width: 11px;
height: 3px;
background-color: #ffffff;
box-shadow: 0 3px 5px rgb(0 0 0 / 20%);
animation: arrow 700ms linear infinite;
transform: rotate(-140deg);
cursor: pointer;
}
#next::after { #next::after {
content: ''; content: '';
position: absolute; position: absolute;
width: 105%; width: 104%;
height: 3px; height: 3px;
right: 7px; right: 5px;
background-color: #ffffff; background-color: #ffffff;
top: -7px; top: -5px;
transform: rotate(-94deg); transform: rotate(-94deg);
} }
...@@ -530,8 +563,15 @@ div#prevDivContainer { ...@@ -530,8 +563,15 @@ div#prevDivContainer {
} }
#TiffViewerImageName { #TiffViewerImageName {
padding: 17px; display: inline-block !important;
width: 37%;
text-align: left !important;
padding: 19px 0px 19px 17px;
color: white; color: white;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
cursor: default;
} }
#totalPageDiv { #totalPageDiv {
...@@ -563,13 +603,8 @@ div#prevDivContainer { ...@@ -563,13 +603,8 @@ div#prevDivContainer {
} }
#TiffViewerDetailscontainer { #TiffViewerDetailscontainer {
/* overflow: hidden; */
height: auto; height: auto;
width: auto; width: auto;
position: relative;
justify-content: space-around;
display: flex;
align-items: center;
} }
/* #TiffViewer_ButtonContainer>.TiffViewer_ButtonClass:not(:last-child) { /* #TiffViewer_ButtonContainer>.TiffViewer_ButtonClass:not(:last-child) {
...@@ -684,11 +719,8 @@ vertical-align: middle; ...@@ -684,11 +719,8 @@ vertical-align: middle;
/* Modal Content */ /* Modal Content */
.TiffModalContent { .TiffModalContent {
/* border: 1px solid #888;
width: 90%;
*/
height: calc(100% - 80px); height: calc(100% - 80px);
width: 86%; width: 100%;
position: relative; position: relative;
display: inline-block; display: inline-block;
justify-content: center; justify-content: center;
...@@ -736,8 +768,6 @@ vertical-align: middle; ...@@ -736,8 +768,6 @@ vertical-align: middle;
#TiffModalHeader { #TiffModalHeader {
width: 100%; width: 100%;
padding: 0px 8.05%;
left: -8%;
position: absolute; position: absolute;
height: 50px; height: 50px;
display: inline-block; display: inline-block;
...@@ -750,14 +780,16 @@ vertical-align: middle; ...@@ -750,14 +780,16 @@ vertical-align: middle;
width: 100%; width: 100%;
position: absolute; position: absolute;
display: inline-block; display: inline-block;
margin-top: 11vh; margin-top: 9vh;
overflow: auto; overflow: auto;
} }
.pageButtonInfoContainer { .pageButtonInfoContainer {
padding: 14px 17px 15px 17px;
display: inline-block;
color: white;
text-align: center;
position: absolute; position: absolute;
right: 44px;
margin-right: 8vw;
} }
.nextPrevContainer { .nextPrevContainer {
...@@ -767,8 +799,10 @@ vertical-align: middle; ...@@ -767,8 +799,10 @@ vertical-align: middle;
} }
.footerCenterContainer { .footerCenterContainer {
padding-top: 8px;
margin: auto; margin: auto;
display: table; display: table;
height: 100%;
} }
.pageZoomInfoContainer { .pageZoomInfoContainer {
...@@ -782,7 +816,7 @@ span#page-info { ...@@ -782,7 +816,7 @@ span#page-info {
} }
#TiffModalFooter { #TiffModalFooter {
height: 38px; height: 45px;
bottom: 0px; bottom: 0px;
position: fixed; position: fixed;
width: 70%; width: 70%;
...@@ -808,7 +842,7 @@ span#page-info { ...@@ -808,7 +842,7 @@ span#page-info {
position: absolute; position: absolute;
display: flex; display: flex;
top: 6%; top: 6%;
right: 32%; right: 40%;
bottom: 0px; bottom: 0px;
height: 100%; height: 100%;
z-index: 9999999; z-index: 9999999;
......
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