Skip to content

W
web-ui
Commit 680aff75 by Earvin Paguia
Options

Right pane, log out buttone

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