From bd51742b947c834569e6cc41d420f20c20dff5dd Mon Sep 17 00:00:00 2001
From: Andrew <mcdeweykp@gmail.com>
Date: Fri, 20 Aug 2021 13:46:01 -0400
Subject: [PATCH] Added better context menu

---
 app/frontend/static/assets/css/crafty.css     | 58 +++++++++++-
 .../static/assets/css/shared/style.css        | 56 ++++++------
 .../templates/panel/server_files.html         | 90 +++++++++++--------
 3 files changed, 135 insertions(+), 69 deletions(-)

diff --git a/app/frontend/static/assets/css/crafty.css b/app/frontend/static/assets/css/crafty.css
index ea94ad5c..c0812602 100644
--- a/app/frontend/static/assets/css/crafty.css
+++ b/app/frontend/static/assets/css/crafty.css
@@ -79,4 +79,60 @@ body { background-color: var(--dark) !important; /* Firefox */ }
 
 .actions_serverlist > a > i {
   cursor: pointer;
-}
\ No newline at end of file
+}
+                  /* The Overlay (background) */
+                  .overlay {
+                    /* Height & width depends on how you want to reveal the overlay (see JS below) */
+                    height: 0;
+                    width: 100vw;
+                    position: fixed; /* Stay in place */
+                    z-index: 1031; /* Sit on top */
+                    left: 0;
+                    top: 0;
+                    background-color: rgb(0,0,0); /* Black fallback color */
+                    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
+                    overflow-x: hidden; /* Disable horizontal scroll */
+                    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
+                  }
+
+                  /* Position the content inside the overlay */
+                  .overlay-content {
+                    position: relative;
+                    top: 25%; /* 25% from the top */
+                    width: 100%; /* 100% width */
+                    text-align: center; /* Centered text/links */
+                    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
+                  }
+
+                  /* The navigation links inside the overlay */
+                  .overlay a {
+                    padding: 8px;
+                    text-decoration: none;
+                    font-size: 36px;
+                    color: #818181;
+                    display: block; /* Display block instead of inline */
+                    transition: 0.3s; /* Transition effects on hover (color) */
+                  }
+
+                  /* When you mouse over the navigation links, change their color */
+                  .overlay a:hover, .overlay a:focus {
+                    color: #f1f1f1;
+                  }
+
+                  /* Position the close button (top right corner) */
+                  .overlay .closebtn {
+                    position: absolute;
+                    top: 20px;
+                    right: 45px;
+                    font-size: 60px;
+                  }
+
+                  /* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
+                  @media screen and (max-height: 450px) {
+                    .overlay a {font-size: 20px}
+                    .overlay .closebtn {
+                      font-size: 40px;
+                      top: 15px;
+                      right: 35px;
+                    }
+                  }
\ No newline at end of file
diff --git a/app/frontend/static/assets/css/shared/style.css b/app/frontend/static/assets/css/shared/style.css
index a7093450..35a40ab2 100755
--- a/app/frontend/static/assets/css/shared/style.css
+++ b/app/frontend/static/assets/css/shared/style.css
@@ -16188,41 +16188,35 @@ body.avgrund-active {
     border-radius: 2px; }
 
 /* Context Menu */
-.context-menu-icon:before {
-  color: #000;
-  font: normal normal normal 15px/1 "Material Design Icons"; }
+    .context-menu {
+        position: absolute;
+        text-align: center;
+        background: lightgray;
+        border: 1px solid black;
+        display: none;
+    }
 
-.context-menu-icon.context-menu-icon-cut:before {
-  content: '\F190'; }
+    .context-menu ul {
+        padding: 0px;
+        margin: 0px;
+        min-width: 150px;
+        list-style: none;
+    }
 
-.context-menu-icon.context-menu-icon-edit:before {
-  content: '\F3EF'; }
+    .context-menu ul li {
+        padding-bottom: 7px;
+        padding-top: 7px;
+        border: 1px solid black;
+    }
 
-.context-menu-icon.context-menu-icon-copy:before {
-  content: '\F18F'; }
-
-.context-menu-icon.context-menu-icon-paste:before {
-  content: '\F613'; }
-
-.context-menu-icon.context-menu-icon-delete:before {
-  content: '\F6CB'; }
-
-.context-menu-icon.context-menu-icon-quit:before {
-  content: '\F156'; }
-
-.context-menu-list {
-  -webkit-box-shadow: none;
-  box-shadow: none;
-  border: 1px solid #dee2e6; }
-  .context-menu-list .context-menu-item span {
-    color: #000;
-    font-size: 0.75rem;
-    font-family: "roboto", sans-serif; }
-  .context-menu-list .context-menu-item.context-menu-hover {
-    background: #000; }
-    .context-menu-list .context-menu-item.context-menu-hover span {
-      color: #fff; }
+    .context-menu ul li a {
+        text-decoration: none;
+        color: black;
+    }
 
+    .context-menu ul li:hover {
+        background: darkgray;
+    }
 /* Clockpicker */
 .clockpicker-popover {
   background-color: #dee2e6; }
diff --git a/app/frontend/templates/panel/server_files.html b/app/frontend/templates/panel/server_files.html
index 54eca51b..959b3004 100644
--- a/app/frontend/templates/panel/server_files.html
+++ b/app/frontend/templates/panel/server_files.html
@@ -72,7 +72,6 @@
                 <div id="files-tree-nav" class="overlay">
 
                   <!-- Button to close the overlay navigation -->
-                  <a href="javascript:void(0)" class="closebtn" onclick="document.getElementById('files-tree-nav').style.height = '0%';">&times;</a>
 
                   <!-- Overlay content -->
                   <div id="files-tree-nav-content" class="overlay-content">
@@ -83,55 +82,65 @@
                     <a onclick="deleteDirE(event)" href="javascript:void(0)" id="deleteDir" href="#">{{ translate('serverFiles', 'delete') }}</a>
                     <a onclick="uploadFilesE(event)" href="javascript:void(0)" id="upload" href="#">Upload Files</a>
                     <a onclick="unzipFilesE(event)" href="javascript:void(0)" id="unzip" href="#">Unzip</a>
+                    <a href="javascript:void(0)" class="closebtn" style="color: red;" onclick="document.getElementById('files-tree-nav').style.display = 'none';">Close</a>
                   </div>
 
                 </div>
                 <style>
                   /* The Overlay (background) */
                   .overlay {
-                    /* Height & width depends on how you want to reveal the overlay (see JS below) */
-                    height: 0;
-                    width: 100vw;
-                    position: fixed; /* Stay in place */
-                    z-index: 1031; /* Sit on top */
-                    left: 0;
-                    top: 0;
-                    background-color: rgb(0,0,0); /* Black fallback color */
-                    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
-                    overflow-x: hidden; /* Disable horizontal scroll */
-                    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
+                  display: none;
+                  flex-direction: column;
+                  background-color: #fff;
+                  border-radius: 10px;
+                  box-shadow: 0 10px 20px rgb(64 64 64 / 5%);
+                  padding: 10px 0;
+                  z-index: 10000;
+                  overflow: scroll;
+
                   }
 
                   /* Position the content inside the overlay */
                   .overlay-content {
-                    position: relative;
-                    top: 25%; /* 25% from the top */
-                    width: 100%; /* 100% width */
-                    text-align: center; /* Centered text/links */
-                    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
+                  overflow: scroll;
+                   display: flex;
+                    flex-direction: column;
+                    background-color: #fff;
+                    border-radius: 10px;
+                    box-shadow: 0 10px 20px rgb(64 64 64 / 5%);
+                    padding: 10px 0;
                   }
 
                   /* The navigation links inside the overlay */
                   .overlay a {
-                    padding: 8px;
-                    text-decoration: none;
-                    font-size: 36px;
-                    color: #818181;
-                    display: block; /* Display block instead of inline */
-                    transition: 0.3s; /* Transition effects on hover (color) */
+                      font: inherit;
+                      border: 0;
+                      padding: 10px 30px 10px 15px;
+                      width: 100%;
+                      display: flex;
+                      align-items: center;
+                      position: relative;
+                      text-decoration: unset;
+                      color: #000;
+                      font-weight: 500;
+                      transition: 0.5s linear;
+                      -webkit-transition: 0.5s linear;
+                      -moz-transition: 0.5s linear;
+                      -ms-transition: 0.5s linear;
+                      -o-transition: 0.5s linear;
                   }
 
                   /* When you mouse over the navigation links, change their color */
                   .overlay a:hover, .overlay a:focus {
-                    color: #f1f1f1;
+                     background:#f1f3f7;
+                      color: #4b00ff;
                   }
 
                   /* Position the close button (top right corner) */
-                  .overlay .closebtn {
-                    position: absolute;
-                    top: 20px;
-                    right: 45px;
-                    font-size: 60px;
+                  .overlay .closebtn .closebtn:hover {
+                    background-color: red;
+                    color: red;
+                    z-index: 10000;
                   }
 
                   /* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@@ -653,15 +662,22 @@
             $('#deleteFile').hide();
             $('#upload').show();
           }
+                      if(event.target.textContent.endsWith('.zip')){
+             $('#unzip').show();
+             console.log(event.target.textContent)
+            }else{
+            $('#unzip').hide();}
+
 
 
           document.getElementById('files-tree-nav-content')
             .setAttribute('data-path', ctxmenuPath);
-
           document.getElementById('files-tree-nav-content')
             .setAttribute('data-name', ctxmenuName);
-
-          document.getElementById("files-tree-nav").style.height = "100%";
+          document.getElementById("files-tree-nav").style.display = "flex";
+          document.getElementById("files-tree-nav").style.position = "fixed";
+          document.getElementById("files-tree-nav").style.top = event.clientY + 'px';
+          document.getElementById("files-tree-nav").style.left = event.clientX + 'px';
         })
       }
     }
@@ -675,7 +691,7 @@
 
         createFile(path, result, function () {
           getTreeView()
-          document.getElementById('files-tree-nav').style.height = '0%';
+          document.getElementById('files-tree-nav').style.display = 'none';
         });
       })
     }
@@ -688,7 +704,7 @@
 
         createDir(path, result, function () {
           getTreeView()
-          document.getElementById('files-tree-nav').style.height = '0%';
+          document.getElementById('files-tree-nav').style.display = 'none';
         });
       })
     }
@@ -701,7 +717,7 @@
 
         renameItem(path, result, function () {
           getTreeView()
-          document.getElementById('files-tree-nav').style.height = '0%';
+          document.getElementById('files-tree-nav').style.display = 'none';
         });
       })
     }
@@ -732,7 +748,7 @@
             if (!result) return;
             deleteFile(path, function () {
               getTreeView()
-              document.getElementById('files-tree-nav').style.height = '0%';
+              document.getElementById('files-tree-nav').style.display = 'none';
             });
           }
       });
@@ -760,7 +776,7 @@
             if (!result) return;
             deleteDir(path, function () {
               getTreeView()
-              document.getElementById('files-tree-nav').style.height = '0%';
+              document.getElementById('files-tree-nav').style.display = 'none';
             });
           }
       });