From 3887788b9d5759260e5c66b569e9fdcac003470c Mon Sep 17 00:00:00 2001
From: qcrao <qcrao91@gmail.com>
Date: Thu, 25 Jul 2024 12:22:47 +0800
Subject: [PATCH] opt deleting styles

---
 popup.css | 33 +++++++++++++++++++++++++++++++--
 popup.js  | 19 +++++++++++++------
 2 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/popup.css b/popup.css
index 09bf9f0..cfbe078 100644
--- a/popup.css
+++ b/popup.css
@@ -345,12 +345,12 @@ button#bulk-archive {
   text-shadow: 0 0 4px rgba(255, 255, 255, 0.5); /* 增强悬停时的光晕效果 */
 }
 
-/* Existing styles for the bulk delete button */
 button#bulk-delete {
   background-color: #e74c3c;
   color: white;
   position: relative;
   overflow: hidden;
+  transition: background-color 0.3s ease;
 }
 
 /* New styles for progress bar */
@@ -361,15 +361,44 @@ button#bulk-delete::before {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(255, 255, 255, 0.3);
+  background-color: #2ecc71; /* Bright green color for progress */
   transform: translateX(-100%);
   transition: transform 0.3s ease-out;
 }
 
+button#bulk-delete::after {
+  content: attr(data-progress) "%";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  font-weight: bold;
+  z-index: 1;
+}
+
 button#bulk-delete.progress {
   cursor: not-allowed;
+  background-color: #34495e; /* Darker background when in progress */
 }
 
 button#bulk-delete.progress::before {
   transform: translateX(var(--progress, -100%));
 }
+
+/* Add a pulsing animation to the progress bar */
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+button#bulk-delete.progress::before {
+  animation: pulse 2s infinite;
+}
diff --git a/popup.js b/popup.js
index 9ca4fd7..0444488 100644
--- a/popup.js
+++ b/popup.js
@@ -37,18 +37,25 @@ function addButtonListener(buttonId, scriptName) {
 function updateProgressBar(progress) {
   console.log("Updating progress bar:", progress);
   const bulkDeleteButton = document.getElementById("bulk-delete");
-  bulkDeleteButton.style.setProperty("--progress", `${progress}%`);
+  bulkDeleteButton.style.setProperty('--progress', `${progress}%`);
+  bulkDeleteButton.setAttribute('data-progress', progress);
+  
+  if (progress === 100 || progress === 0) {
+    bulkDeleteButton.disabled = false;
+    bulkDeleteButton.classList.remove("progress");
+    bulkDeleteButton.textContent = "Bulk Delete";  // Reset button text
+  } else {
+    bulkDeleteButton.textContent = "Deleting...";  // Change button text during deletion
+  }
 }
 
-chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
+// 在消息监听器中也添加文本重置
+chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
   console.log("Received message:", request);
   if (request.action === "updateProgress") {
     updateProgressBar(request.progress);
   } else if (request.action === "deleteComplete") {
-    const bulkDeleteButton = document.getElementById("bulk-delete");
-    bulkDeleteButton.disabled = false;
-    bulkDeleteButton.classList.remove("progress");
-    updateProgressBar(0);
+    updateProgressBar(0);  // This will reset the button text
   }
 });