create view trash option

sugarlabs · Jan 15, 2025 · 40ecf20 · 40ecf20
1 parent 8c0b5a3
commit 40ecf20
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 24 deletions.
diff --git a/css/activities.css b/css/activities.css
@@ -107,6 +107,8 @@
 
 .button-container {
   position: sticky;
+  display: flex;
+  justify-content: space-between;
   top: 0;
   z-index: 10;
   display: flex;
@@ -117,17 +119,6 @@
   border-bottom: 1px solid #d9d9d9;
 }
 
-.restore-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 90px;
-  height: 35px;
-  cursor: pointer;
-  background-color: white;
-  border-radius: 8px;
-}
-
 .trash-item {
   padding: 2px 12px;
   margin: 1px 0;
@@ -146,6 +137,27 @@
   vertical-align: middle;
 }
 
+#restoreLastIcon, #restoreAllIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  cursor: pointer;
+  color: white;
+  background-color: transparent;
+  transition: background-color 0.3s;
+}
+
+#restoreLastIcon:hover, #restoreAllIcon:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.material-icons.md-48 {
+  font-size: 32px;
+}
+
+
 .hidden {
   display: none;
 }

diff --git a/js/activity.js b/js/activity.js
@@ -3460,31 +3460,33 @@ class Activity {
             trashView.id = 'trashView';
             trashView.classList.add('trash-view');
 
-            // Sticky buttons
+            // Sticky icons
             const buttonContainer = document.createElement('div');
             buttonContainer.classList.add('button-container');
 
-            const restoreLastBtn = document.createElement('button');
-            restoreLastBtn.textContent = "Restore last";
-            restoreLastBtn.classList.add('restore-button');
-            restoreLastBtn.addEventListener('click', () => {
+            const restoreLastIcon = document.createElement('a');
+            restoreLastIcon.id = 'restoreLastIcon';
+            restoreLastIcon.classList.add('restore-last-icon');
+            restoreLastIcon.innerHTML = '<i class="material-icons md-48">restore_from_trash</i>';
+            restoreLastIcon.addEventListener('click', () => {
                 const lastId = this.blocks.trashStacks[this.blocks.trashStacks.length - 1];
                 if (lastId) this._restoreTrashById(lastId);
                 trashView.classList.add('hidden');
             });
 
-            const restoreAllBtn = document.createElement('button');
-            restoreAllBtn.textContent = "Restore all";
-            restoreAllBtn.classList.add('restore-button');
-            restoreAllBtn.addEventListener('click', () => {
+            const restoreAllIcon = document.createElement('a');
+            restoreAllIcon.id = 'restoreAllIcon';
+            restoreAllIcon.classList.add('restore-all-icon');
+            restoreAllIcon.innerHTML = '<i class="material-icons md-48">delete_sweep</i>';
+            restoreAllIcon.addEventListener('click', () => {
                 while (this.blocks.trashStacks.length > 0) {
                     this._restoreTrashById(this.blocks.trashStacks[0]);
                 }
                 trashView.classList.add('hidden');
             });
 
-            buttonContainer.appendChild(restoreLastBtn);
-            buttonContainer.appendChild(restoreAllBtn);
+            buttonContainer.appendChild(restoreLastIcon);
+            buttonContainer.appendChild(restoreAllIcon);
             trashView.appendChild(buttonContainer);
 
             // Render trash items
@@ -3514,7 +3516,7 @@ class Activity {
                     trashView.classList.add('hidden');
                 });
                 handleClickOutsideTrashView(trashView);
-
+                
                 trashView.appendChild(listItem);
             });
 
@@ -3524,7 +3526,7 @@ class Activity {
             } else {
                 trashList.appendChild(trashView);
             }
-        };
+        };  
 
         /*
          * Open aux menu