diff --git a/bulkArchiveConversations.js b/bulkArchiveConversations.js index 0b2cea4..d4997d2 100644 --- a/bulkArchiveConversations.js +++ b/bulkArchiveConversations.js @@ -13,9 +13,20 @@ async function bulkArchiveConversations() { sendEventAsync("archive", selectedConversations.length); - for (const element of selectedConversations) { - await archiveConversation(element); + for (let i = 0; i < selectedConversations.length; i++) { + await archiveConversation(selectedConversations[i]); + const progress = Math.round(((i + 1) / selectedConversations.length) * 100); + chrome.runtime.sendMessage({ + action: "updateProgress", + buttonId: "bulk-archive", + progress: progress, + }); } + + chrome.runtime.sendMessage({ + action: "operationComplete", + buttonId: "bulk-archive", + }); } function getSelectedConversations() { diff --git a/bulkDeleteConversations.js b/bulkDeleteConversations.js index 95507dd..5689d94 100644 --- a/bulkDeleteConversations.js +++ b/bulkDeleteConversations.js @@ -21,11 +21,15 @@ async function bulkDeleteConversations() { const progress = Math.round(((i + 1) / selectedConversations.length) * 100); chrome.runtime.sendMessage({ action: "updateProgress", + buttonId: "bulk-delete", progress: progress, }); } - chrome.runtime.sendMessage({ action: "deleteComplete" }); + chrome.runtime.sendMessage({ + action: "operationComplete", + buttonId: "bulk-delete", + }); } function getSelectedConversations() { diff --git a/popup.css b/popup.css index cfbe078..3d21fa0 100644 --- a/popup.css +++ b/popup.css @@ -353,8 +353,17 @@ button#bulk-delete { transition: background-color 0.3s ease; } +button#bulk-archive { + background-color: #9b59b6; + color: white; + position: relative; + overflow: hidden; + transition: background-color 0.3s ease; +} + /* New styles for progress bar */ -button#bulk-delete::before { +button#bulk-delete::before, +button#bulk-archive::before { content: ""; position: absolute; top: 0; @@ -366,26 +375,34 @@ button#bulk-delete::before { transition: transform 0.3s ease-out; } -button#bulk-delete::after { +button#bulk-delete::after, +button#bulk-archive::after { content: attr(data-progress) "%"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - color: white; + color: rgb(149, 20, 20); font-weight: bold; - z-index: 1; + z-index: 100; } -button#bulk-delete.progress { +button#bulk-delete.progress, +button#bulk-archive.progress { cursor: not-allowed; background-color: #34495e; /* Darker background when in progress */ } -button#bulk-delete.progress::before { +button#bulk-delete.progress::before, +button#bulk-archive.progress::before { transform: translateX(var(--progress, -100%)); } +button#bulk-delete.progress::before, +button#bulk-archive.progress::before { + animation: pulse 2s infinite; +} + /* Add a pulsing animation to the progress bar */ @keyframes pulse { 0% { @@ -398,7 +415,3 @@ button#bulk-delete.progress::before { opacity: 1; } } - -button#bulk-delete.progress::before { - animation: pulse 2s infinite; -} diff --git a/popup.js b/popup.js index 92602db..e35ac22 100644 --- a/popup.js +++ b/popup.js @@ -21,7 +21,7 @@ function addButtonListener(buttonId, scriptName) { chrome.tabs.query({ active: true, currentWindow: true }, ([tab]) => { if (tab) { if (buttonId === "bulk-delete") { - const bulkDeleteButton = document.getElementById("bulk-delete"); + const bulkDeleteButton = document.getElementById(buttonId); bulkDeleteButton.disabled = true; bulkDeleteButton.classList.add("progress"); @@ -34,18 +34,20 @@ 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.setAttribute("data-progress", progress); +function updateProgressBar(buttonId, progress) { + console.log(`Updating progress bar for ${buttonId}:`, progress); + const button = document.getElementById(buttonId); + button.style.setProperty("--progress", `${progress}%`); + button.setAttribute("data-progress", progress); if (progress === 100 || progress === 0) { - bulkDeleteButton.disabled = false; - bulkDeleteButton.classList.remove("progress"); - bulkDeleteButton.textContent = "Bulk Delete"; // Reset button text + button.disabled = false; + button.classList.remove("progress"); + button.textContent = + buttonId === "bulk-delete" ? "Bulk Delete" : "Bulk Archive"; } else { - bulkDeleteButton.textContent = "Deleting..."; // Change button text during deletion + button.textContent = + buttonId === "bulk-delete" ? "Deleting..." : "Archiving..."; } } @@ -53,9 +55,12 @@ function updateProgressBar(progress) { 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") { - updateProgressBar(0); // This will reset the button text + updateProgressBar(request.buttonId, request.progress); + } else if (request.action === "operationComplete") { + const button = document.getElementById(request.buttonId); + button.disabled = false; + button.classList.remove("progress"); + updateProgressBar(request.buttonId, 0); } }); @@ -113,6 +118,9 @@ async function handleBulkArchive() { if (localIsPaid) { chrome.tabs.query({ active: true, currentWindow: true }, ([tab]) => { if (tab) { + const bulkArchiveButton = document.getElementById("bulk-archive"); + bulkArchiveButton.disabled = true; + bulkArchiveButton.classList.add("progress"); loadGlobalsThenExecute(tab.id, "bulkArchiveConversations.js"); } }); @@ -136,6 +144,10 @@ async function handleBulkArchive() { if (data.isPaid) { chrome.tabs.query({ active: true, currentWindow: true }, ([tab]) => { if (tab) { + const bulkArchiveButton = document.getElementById("bulk-archive"); + bulkArchiveButton.disabled = true; + bulkArchiveButton.classList.add("progress"); + loadGlobalsThenExecute(tab.id, "bulkArchiveConversations.js"); } });