Merge pull request Lazarus-org#122 from FATEMEH-Z-HASHEMI/refactor/lo…

…g-iboard ⚡ 🎨 🔨 ✨ Improve upload page and style
FATEMEH-Z-HASHEMI · Oct 13, 2024 · 0cb7f51 · 0cb7f51
2 parents fa38374 + e86dd14
commit 0cb7f51
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 65 deletions.
diff --git a/django_logging/static/LogiBoard/css/app.css b/django_logging/static/LogiBoard/css/app.css
@@ -588,6 +588,10 @@ video {
   }
 }
 
+.static {
+  position: static;
+}
+
 .absolute {
   position: absolute;
 }
@@ -628,10 +632,6 @@ video {
   margin-left: 0.5rem;
 }
 
-.ml-auto {
-  margin-left: auto;
-}
-
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -664,10 +664,6 @@ video {
   margin-top: 1.25rem;
 }
 
-.mr-10 {
-  margin-right: 2.5rem;
-}
-
 .box-border {
   box-sizing: border-box;
 }
@@ -732,22 +728,6 @@ video {
   height: 100vh;
 }
 
-.h-3\/4 {
-  height: 75%;
-}
-
-.h-2 {
-  height: 0.5rem;
-}
-
-.h-1 {
-  height: 0.25rem;
-}
-
-.w-10\/12 {
-  width: 83.333333%;
-}
-
 .w-11\/12 {
   width: 91.666667%;
 }
@@ -792,10 +772,6 @@ video {
   width: 1px;
 }
 
-.w-2 {
-  width: 0.5rem;
-}
-
 .max-w-full {
   max-width: 100%;
 }
@@ -809,10 +785,6 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.cursor-default {
-  cursor: default;
-}
-
 .cursor-pointer {
   cursor: pointer;
 }
@@ -853,10 +825,6 @@ video {
   border-radius: 9999px;
 }
 
-.rounded-lg {
-  border-radius: 0.5rem;
-}
-
 .rounded-md {
   border-radius: 0.375rem;
 }
@@ -878,6 +846,11 @@ video {
   border-color: rgb(44 51 59 / var(--tw-border-opacity));
 }
 
+.bg-\[rgb\(1\2c 0\2c 4\)\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(1 0 4 / var(--tw-bg-opacity));
+}
+
 .bg-back-0 {
   --tw-bg-opacity: 1;
   background-color: rgb(213 244 255 / var(--tw-bg-opacity));
@@ -905,26 +878,10 @@ video {
   padding: 1rem;
 }
 
-.pb-2 {
-  padding-bottom: 0.5rem;
-}
-
 .pl-2 {
   padding-left: 0.5rem;
 }
 
-.pl-8 {
-  padding-left: 2rem;
-}
-
-.pr-8 {
-  padding-right: 2rem;
-}
-
-.pt-2 {
-  padding-top: 0.5rem;
-}
-
 .text-center {
   text-align: center;
 }
@@ -968,11 +925,6 @@ video {
   color: rgb(44 51 59 / var(--tw-text-opacity));
 }
 
-.text-neutral-50 {
-  --tw-text-opacity: 1;
-  color: rgb(250 250 250 / var(--tw-text-opacity));
-}
-
 .text-rose-800 {
   --tw-text-opacity: 1;
   color: rgb(159 18 57 / var(--tw-text-opacity));

diff --git a/django_logging/static/LogiBoard/js/scripts.js b/django_logging/static/LogiBoard/js/scripts.js
@@ -1,4 +1,5 @@
 const mainupload = document.getElementById("main-upload");
+const dropZone = document.getElementById('drop-zone');
 
 let folderTree = {};
 let interval;
@@ -26,6 +27,33 @@ document.getElementById('file-input').addEventListener('change', (event) => {
 document.getElementById('drag-drop-area').style.display = "block";
 document.getElementById('upload-area').style.display = "none";
 
+['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+    dropZone.addEventListener(eventName, preventDefaults, false);
+});
+
+function preventDefaults(e) {
+    e.preventDefault();
+    e.stopPropagation();
+}
+
+['dragenter', 'dragover'].forEach(eventName => {
+    dropZone.addEventListener(eventName, () => dropZone.classList.add('highlight'), false);
+});
+
+['dragleave', 'drop'].forEach(eventName => {
+    dropZone.addEventListener(eventName, () => dropZone.classList.remove('highlight'), false);
+});
+
+dropZone.addEventListener('drop', (e) => {
+    const file = e.dataTransfer.files[0];
+    if (file && validFileTypes.includes(file.type)) {
+        resetProgress();
+        uploadFile(file);
+    } else {
+        alert("Only ZIP files are allowed!");
+    }
+});
+
 function uploadFile(file) {
     document.getElementById('drag-drop-area').style.display = "none";
     document.getElementById('upload-area').style.display = "flex";
@@ -102,6 +130,14 @@ function displayFolderContents(folder, container, zip, path) {
             fileElement.innerHTML = `<img src="${icons[isFile ? getIcon(item) : 'folder']}" class="inline-block w-5 h-5 mr-2" alt="">${item}`;
 
             fileElement.addEventListener('click', async () => {
+
+                const previouslySelected = document.querySelector('.selected-file');
+                if (previouslySelected) {
+                    previouslySelected.classList.remove('selected-file');
+                }
+
+                fileElement.classList.add('selected-file');
+
                 if (isFile) {
                     const fileData = await zip.file(itemPath).async('blob');
                     renderFile(fileData, item);

diff --git a/django_logging/templates/log_iboard.html b/django_logging/templates/log_iboard.html
@@ -48,6 +48,9 @@
             transition: transform 0.4s ease;
             animation: uploadIcon 2.5s infinite;
         }
+        .highlight {
+            background-color: #edeaf7;
+        }
         @keyframes blinkBorder {
             0% {
                 border-color: #d8daf6;
@@ -110,7 +113,10 @@
             grid-template-columns: 5fr 0.2fr 3fr;
         }
         #send-another:hover{
-            color:rgb(141, 18, 18)
+            color:rgb(141, 18, 18);
+        }
+        #open:hover{
+            background-color: rgb(141, 18, 18);
         }
         #back-link{
             height: 85vh;
@@ -125,6 +131,16 @@
         #file-structure{
             overflow-y: auto;
         }
+        .selected-file {
+            background-color: #2c2f33;
+            color: #ffffff;
+            border-radius: 5px;
+            padding-left: 5px;
+            display: flex;
+            align-items: center;
+            flex-direction: row;
+            box-shadow: rgba(50, 50, 93, 0.296) 0 50px 100px -20px, rgba(0, 0, 0, 0.29) 0 30px 60px -30px, rgba(10, 37, 64, 0.257) 0 -2px 6px 0 inset;
+        }
     </style>
 
 </head>
@@ -179,10 +195,10 @@ <h3  id="send-another" class="mt-4 cursor-pointer" style="transition: 0.3s ease;
 
             <div class="flex flex-col items-center justify-evenly">
 
-                    <button id="open" class="flex flex-row items-center justify-center bg-gray-0 rounded-xl shadow-2xl cursor-pointer" style="transition: 0.4s ease; padding: 5px 20px ">
-                        <img src="{%static 'LogiBoard/imgs/open-50.png' %}" alt="open-icon" class="w-4 h-4">
-                        Open Link
-                    </button>
+                <button id="open" class="flex flex-row items-center justify-center bg-[rgb(1,0,4)] rounded-xl shadow-2xl cursor-pointer"style="transition: 0.4s ease; padding: 5px 20px ;">
+                    <img src="{%static 'LogiBoard/imgs/open-50.png' %}" alt="open-icon" class="w-4 h-4">
+                    <p class="text-sm text-white ml-2">Open Link</p>
+                </button>
 
             </div>
 
@@ -199,9 +215,7 @@ <h3  id="send-another" class="mt-4 cursor-pointer" style="transition: 0.3s ease;
             <div id="file-display" class="p-4 bg-black" style="overflow-y: auto; height: 100%; font-size: 12px;"></div>
         </span>
     </div>
-
-
-    <!-- All image paths that used in scripts -->
+                                                                 <!-- All image paths that used in scripts -->
     <div id="image-paths"
          data-stop-icon="{% static 'LOGiBoard/imgs/stop-50.png' %}"
          data-pause-icon="{% static 'LOGiBoard/imgs/pause-50.png' %}"