Skip to content

W
web-ui
Commit 680aff75 by Earvin Paguia
Options

Right pane, log out buttone

parent 37c8d285
Showing with 116 additions and 129 deletions
WebGde/WebContent/index.html
...@@ -43,66 +43,7 @@ ...@@ -43,66 +43,7 @@
</script> --> </script> -->
<body> <body>
<style>
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 350px;
height: 230px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: -240px;
left: 50%;
margin-left:0;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 0px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
</style>
<div id="no-config" style="display:none"> There is no config file found</div> <div id="no-config" style="display:none"> There is no config file found</div>
<div id="with-config" style="display:grid"> <div id="with-config" style="display:grid">
<!-- Creates the right pane of the window --> <!-- Creates the right pane of the window -->
...@@ -124,27 +65,28 @@ ...@@ -124,27 +65,28 @@
<!-- Space for the fields --> <!-- Space for the fields -->
<!-- <div class="sidebar" id="fields"> </div> --> <!-- <div class="sidebar" id="fields"> </div> -->
<div id='refreshBtn'> <div id='refreshBtn'>
<div id="help" class="popup" onclick="myFunction()">Help <div id="help" class="popup" onclick="myFunction()">i
<span class="popuptext" id="myPopup"> <div class="popuptext" id="myPopup">
Fit Content -> SHIFT F<br> •Fit Content -> SHIFT F<br>
Flip Horizontally -> CTRL SHIFT H<br> •Flip Horizontally -> CTRL SHIFT H<br>
Flip Vertically -> CTRL SHIFT V<br> •Flip Vertically -> CTRL SHIFT V<br>
Rotate to right -> SHIFT PAGE UP<br> •Rotate to right -> SHIFT PAGE UP<br>
Rotate to left -> SHIFT PAGE DOWN<br> •Rotate to left -> SHIFT PAGE DOWN<br>
Zoom in -> CTRL +<br> •Zoom in -> CTRL +<br>
Zoom out -> CTRL -<br> •Zoom out -> CTRL -<br>
Previous -> F11<br> •Previous -> F11<br>
Next -> F12<br> •Next -> F12<br>
Scroll Image to the Left -> CTRL LEFT ARROW<br> •Scroll Image to the Left -> CTRL LEFT ARROW<br>
Scroll Image to the Right -> CTRL RIGHT ARROW<br> •Scroll Image to the Right -> CTRL RIGHT ARROW<br>
Scroll Up Image -> CTRL UP ARROW<br> •Scroll Up Image -> CTRL UP ARROW<br>
Scroll Down Image -> CTRL DOWN ARROW<br> •Scroll Down Image -> CTRL DOWN ARROW<br>
</span> </div>
</div> </div>
<div id="usernameCont" class="popup" onclick="toggleLogout()"> <div id="userNameValue"></div>
<span id="userNameValue"></span> <div id="popupLogout" class="popupLogoutText" onclick="createEndSessionWindow()"></div>
<!-- <div id="usernameCont" class="popup" onclick="toggleLogout()">
<span id="popupLogout" class="popupLogoutText"><button id='endBtn'>End Session</button></span> <span id="popupLogout" class="popupLogoutText"><button id='endBtn'>End Session</button></span>
</div> </div> -->
<!-- <button id='refresh'>Refresh</button> --> <!-- <button id='refresh'>Refresh</button> -->
</div> </div>
<div id='pauseBtn'> <div id='pauseBtn'>
......
WebGde/WebContent/src/endSession/endSession.js
...@@ -19,18 +19,21 @@ function checkForm(form){ ...@@ -19,18 +19,21 @@ function checkForm(form){
if(inputsBlankCount==0 && selectsBlankCount==0) return true; if(inputsBlankCount==0 && selectsBlankCount==0) return true;
} }
endButton.addEventListener("click", function(){ /*endButton.addEventListener("click", function(){
let endWindow = document.getElementById('end_window'); let endWindow = document.getElementById('end_window');
endWindow.style.display = 'block'; endWindow.style.display = 'block';
}); });
createEndSessionWindow(); */
function createEndSessionWindow(){ function createEndSessionWindow(){
let overlay = document.createElement("div");
overlay.classList.add("genericPopup");
let endWindow = document.createElement('div'); let endWindow = document.createElement('div');
endWindow.id = 'end_window'; endWindow.id = 'end_window';
endWindow.style.display = 'none'; endWindow.classList.add("parent_Window")
document.body.appendChild(endWindow);
let endBodyDiv = document.createElement('div'); let endBodyDiv = document.createElement('div');
endBodyDiv.id = 'endBodyDiv'; endBodyDiv.id = 'endBodyDiv';
...@@ -43,6 +46,7 @@ function createEndSessionWindow(){ ...@@ -43,6 +46,7 @@ function createEndSessionWindow(){
endOkCnclDiv.id = 'endOkCnclCont'; endOkCnclDiv.id = 'endOkCnclCont';
let okEnd = document.createElement('button'); let okEnd = document.createElement('button');
okEnd.classList.add("emphasizeButton");
okEnd.innerHTML = 'ok'; okEnd.innerHTML = 'ok';
okEnd.id = 'okEndButtn'; okEnd.id = 'okEndButtn';
okEnd.onclick = async function () { okEnd.onclick = async function () {
...@@ -79,12 +83,11 @@ function createEndSessionWindow(){ ...@@ -79,12 +83,11 @@ function createEndSessionWindow(){
} }
let cancelEnd = document.createElement('button'); let cancelEnd = document.createElement('button');
cancelEnd.classList.add("normalButton");
cancelEnd.innerHTML = 'cancel'; cancelEnd.innerHTML = 'cancel';
cancelEnd.id = 'cnclEndButton'; cancelEnd.id = 'cnclEndButton';
cancelEnd.onclick = function () {
endWindow.style.display = 'none';
}
endOkCnclDiv.appendChild(okEnd); endOkCnclDiv.appendChild(okEnd);
endOkCnclDiv.appendChild(cancelEnd); endOkCnclDiv.appendChild(cancelEnd);
...@@ -94,5 +97,15 @@ function createEndSessionWindow(){ ...@@ -94,5 +97,15 @@ function createEndSessionWindow(){
endBodyDiv.appendChild(endOkCnclDiv); endBodyDiv.appendChild(endOkCnclDiv);
endWindow.appendChild(endBodyDiv); endWindow.appendChild(endBodyDiv);
cancelEnd.addEventListener("click", function () {
overlay.remove();
});
overlay.append(endWindow);
document.body.append(overlay);
} }
WebGde/WebContent/src/getFields/getFields.js
...@@ -22,6 +22,19 @@ const displayFields = async (parentID) => { ...@@ -22,6 +22,19 @@ const displayFields = async (parentID) => {
try { try {
document.getElementById("userNameValue").innerHTML = `User: ${sessionStorage.getItem("user_id")}`; document.getElementById("userNameValue").innerHTML = `User: ${sessionStorage.getItem("user_id")}`;
document.getElementById("elemIDValue").innerHTML = `Element ID: ${sessionStorage.getItem("element_id")}`; document.getElementById("elemIDValue").innerHTML = `Element ID: ${sessionStorage.getItem("element_id")}`;
let logOutDiv = document.getElementById("popupLogout");
logOutDiv.title = "Logout";
logOutDiv.classList.add("logOutButton")
let logoutIcon = document.createElement("img");
logoutIcon.classList.add("normalIcon");
logoutIcon.src = "/WebGde/assets/logout_icon.png";
logOutDiv.append(logoutIcon);
let div = document.getElementById(parentID) let div = document.getElementById(parentID)
if(!div) return { valid: false, error: `Element with ID '${parentID}' not found` } if(!div) return { valid: false, error: `Element with ID '${parentID}' not found` }
......
WebGde/WebContent/style.css
...@@ -15,19 +15,17 @@ html { ...@@ -15,19 +15,17 @@ html {
/* The actual popup */ /* The actual popup */
.popup .popuptext { .popup .popuptext {
visibility: hidden; visibility: hidden;
width: 350px; background-color: #000000d9;
height: 230px; color: #fff;
background-color: #555; border-radius: 6px;
color: #fff; position: absolute;
text-align: center; z-index: 1;
border-radius: 6px; width: 363px;
padding: 8px 0; padding: 18px 16px;
position: absolute; font-size: 13px;
z-index: 1; left: -3px;
bottom: -240px; top: 21px;
left: 50%;
margin-left:0;
} }
/* Popup arrow */ /* Popup arrow */
...@@ -89,7 +87,17 @@ button:hover{ ...@@ -89,7 +87,17 @@ button:hover{
overflow-y: hidden; overflow-y: hidden;
overflow-x: hidden; overflow-x: hidden;
} }
/* Logout Button */
.logOutButton {
position: absolute;
right: 0px;
top: 4px;
padding: 10px;
cursor: pointer;
}
.normalIcon {
width: 20px;
}
/* For the right pane */ /* For the right pane */
.sidebar { .sidebar {
position: absolute; position: absolute;
...@@ -105,6 +113,14 @@ button:hover{ ...@@ -105,6 +113,14 @@ button:hover{
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.SECTION2.inputField {
width: 100%;
height: 100%;
}
.SECTION3.inputField {
width: 100%;
height: 100%;
}
.select2 { .select2 {
width: 100% !important; width: 100% !important;
...@@ -231,6 +247,7 @@ img.tiffViewerIcons { ...@@ -231,6 +247,7 @@ img.tiffViewerIcons {
font-weight: 600; font-weight: 600;
font-size: 20px; font-size: 20px;
padding: 4px 0px 5px 8px; padding: 4px 0px 5px 8px;
text-align: left;
} }
#endDiv{ #endDiv{
width: 100%; width: 100%;
...@@ -257,11 +274,7 @@ img.tiffViewerIcons { ...@@ -257,11 +274,7 @@ img.tiffViewerIcons {
right: 5px; right: 5px;
top: 7px; top: 7px;
} }
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
.popup .popupLogoutText { .popup .popupLogoutText {
visibility: hidden; visibility: hidden;
width: 100px; width: 100px;
...@@ -357,6 +370,17 @@ textarea{ ...@@ -357,6 +370,17 @@ textarea{
padding: 3px; padding: 3px;
float:left; float:left;
margin-right: 10px; margin-right: 10px;
display: flex;
align-items: center;
top: 3px;
width: 13px;
height: 13px;
justify-content: center;
cursor: pointer;
border: 2px solid #b6b6b6;
border-radius: 200px;
font-size: 15px;
color: white;
} }
#usernameCont{ #usernameCont{
padding: 3px; padding: 3px;
...@@ -459,7 +483,9 @@ div#prevDivContainer { ...@@ -459,7 +483,9 @@ div#prevDivContainer {
#userNameValue { #userNameValue {
padding: 3px; padding: 3px;
margin-right: 10px; margin: auto;
width: 98px;
margin-top: 3px;
} }
#elemIDValue { #elemIDValue {
...@@ -765,17 +791,17 @@ select { ...@@ -765,17 +791,17 @@ select {
} }
.parent_Window { .parent_Window {
box-shadow: var(- -ds-shadow-overlay, 0 4px 8px -2px rgba(9, 30, 66, 0.25), box-shadow: var(- -ds-shadow-overlay, 0 4px 8px -2px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31));
0 0 1px rgba(9, 30, 66, 0.31)); width: 238px;
width: 238px; height: fit-content;
height: fit-content; margin: auto;
margin: auto; position: relative;
position: relative; background: white;
background: white; padding: 17px;
padding: 17px; border-radius: 1%;
border-radius: 1%; max-height: 90%;
max-height: 90%; padding-right: 22px;
padding-right: 22px; text-align: center;
} }
...@@ -795,7 +821,7 @@ select { ...@@ -795,7 +821,7 @@ select {
border: solid 1px black; border: solid 1px black;
width: fit-content; width: fit-content;
font-size: 14px; font-size: 14px;
padding: 4px; padding: 4.5px;
height: fit-content; height: fit-content;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
...@@ -837,6 +863,7 @@ select { ...@@ -837,6 +863,7 @@ select {
line-height: 20px; line-height: 20px;
padding: 6px; padding: 6px;
width: 180px; width: 180px;
text-align: left;
} }
#checkBoxCont>input{ #checkBoxCont>input{
...@@ -854,18 +881,9 @@ select { ...@@ -854,18 +881,9 @@ select {
#text-area{width: 91%;font-size: 11px;padding: 9px 9px;margin-left: 15px;margin-top: 5px;margin-bottom: 5px;height: 103px;} #text-area{width: 91%;font-size: 11px;padding: 9px 9px;margin-left: 15px;margin-top: 5px;margin-bottom: 5px;height: 103px;}
#end_window{ #end_window{
text-align:center; text-align: center;
height: 120px; height: 120px;
width: 400px; width: 400px;
border: 1px solid;
position: absolute;
top: calc(50% - 60px);
transform: translate(0, -50%);
left: calc(50% - 200px);
transform: translate(-50%, 0);
padding: 10px;
background-color: white;
z-index:999;
} }
#endOkCnclCont>button{ #endOkCnclCont>button{
...@@ -876,3 +894,4 @@ select { ...@@ -876,3 +894,4 @@ select {
.select2-container--default .select2-selection--single{ .select2-container--default .select2-selection--single{
border-radius:0px !important; border-radius:0px !important;
} }
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