Skip to content

W
web-ui
Commit 358873f2 by Earvin Paguia
Options

Change the UI of pdf and tiff Viewer

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