UI improvements for trash bin

DDMAL · Nov 27, 2023 · 1a42870 · 1a42870
1 parent abce990
commit 1a42870
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 8 deletions.
diff --git a/Neon-gh/dashboard.js b/Neon-gh/dashboard.js
diff --git a/css/dashboard.css b/css/dashboard.css
@@ -160,8 +160,17 @@
   height: 30px;
 }
 
+#info-badge {
+  height: 15px;
+  padding: 5px 0;
+  width: 100%;
+  text-align: center;
+  color: white;
+  opacity: 60%;
+  position: sticky;
+}
+
 .documents-container {
-  margin: 5vh 0;
   width: 90%;
 }
 
@@ -209,7 +218,12 @@
   margin: 0px;
 }
 
-#fs-back-btn {
+#fs-btn-container {
+  display: flex;
+  justify-content: space-between;
+}
+
+.fs-btn {
   font-size: 14px;
   font-weight: 900;
   letter-spacing: 3px;
@@ -218,14 +232,15 @@
   border-radius: 5px;
   color: #7ab2b7;
   opacity: 40%;
+  margin-right: 5px;
 }
 
-#fs-back-btn.active {
+.fs-btn.active {
   cursor: pointer;
   opacity: 100%;
 }
 
-#fs-back-btn.dragenter {
+.fs-btn.dragenter {
   background-color: #cafbff;
   border-radius: 5px;
   border-style: dashed;

diff --git a/dashboard.html b/dashboard.html
@@ -49,14 +49,21 @@
     <div class="main-section">
 
         <div id="main-section-content" class="main-section-content">
+            <div id="info-badge"></div>
 
             <div id="documents-container" class="documents-container">
                 <div id="fs-top-zone" class="fs-top-zone">
                     <div id="nav-path-container" class="fs-title nav-path-container"></div>
                     <div id="fs-search-container" class="fs-search-container"></div>
                 </div>
                 <div id="fs-middle-zone" class="fs-middle-zone">
-                    <button id="fs-back-btn" class="fs-back-btn">Back↵</button>
+                    <div id="fs-btn-container">
+                        <button id="fs-back-btn" class="fs-btn">Back↵</button>
+                        <div class="fs-trash-btn">
+                            <button id="fs-empty-btn" class="fs-btn">Empty</button>
+                            <button id="fs-delete-btn" class="fs-btn">Delete</button>
+                        </div>
+                    </div>
                     <div id="fs-results-title" class="fs-results-results"></div>
                 </div>
                 <div id="fs-content-container" class="fs-content-container"></div>
@@ -68,7 +75,7 @@
             <img id="add-folder-button" class="action-bar-item-container active" src="./Neon-gh/assets/img/new-folder.svg" title="folder">
             <img id="upload-new-doc-button" class="action-bar-item-container active" src="./Neon-gh/assets/img/new-doc.svg" title="upload">
             <div class="dividing-line action-bar-item-container active"></div>
-            <img id="remove-doc" class="action-bar-item-container" src="./Neon-gh/assets/img/remove-doc.svg" title="delete">
+            <img id="remove-doc" class="action-bar-item-container" src="./Neon-gh/assets/img/remove-doc.svg" title="move to trash">
             <img id="open-doc" class="action-bar-item-container" src="./Neon-gh/assets/img/open-doc.svg" title="open">
         </div>
     </div>
@@ -98,5 +105,13 @@
         </div>
     </div>
 
+    <!-- icons -->
+    <div class="preload-icons-container" hidden>
+        <img id="preload-folder-icon" src="./Neon-gh/assets/img/folder-icon.svg">
+        <img id="preload-file-icon" src="./Neon-gh/assets/img/folio-icon.svg">
+        <img id="preload-manuscript-icon" src="./Neon-gh/assets/img/manuscript-icon.svg">
+        <img id="preload-warning-icon" src="./Neon-gh/assets/img/warning-icon.svg">
+    </div>
+
   </body>
 </html>