Skip to content

Commit

Permalink
Rename Button and Delete Menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@tsemachh
tsemachh committed Jan 9, 2025
1 parent 2d1b73e commit 592e045
Show file tree
Hide file tree
Showing 3 changed files with 162 additions and 8 deletions.
20 changes: 16 additions & 4 deletions src/popup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,9 @@ <h3 class="text-base font-semibold">Manage Recordings</h3>
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div id="exportImportMenu" class="origin-top-right absolute right-0 mt-1 w-32 rounded-md shadow-lg bg-white dark:bg-gray-700 ring-1 ring-black ring-opacity-5 focus:outline-none hidden" role="menu" aria-orientation="vertical" aria-labelledby="exportImportDropdown">
<div id="exportImportMenu" class="origin-top-right absolute right-0 mt-1 w-20 rounded-md shadow-lg bg-white dark:bg-gray-700 ring-1 ring-black ring-opacity-5 focus:outline-none hidden" role="menu" aria-orientation="vertical" aria-labelledby="exportImportDropdown">
<div class="py-1" role="none">
<button id="renameRecording" class="text-white bg-blue-500 px-2 py-1 rounded text-xs w-full text-left hover:bg-blue-600 mb-1" role="menuitem">Rename</button>
<button id="duplicateRecording" class="text-white bg-blue-500 px-2 py-1 rounded text-xs w-full text-left hover:bg-blue-600 mb-1" role="menuitem">Duplicate</button>
<button id="exportRecording" class="text-white bg-blue-500 px-2 py-1 rounded text-xs w-full text-left hover:bg-blue-600 mb-1" role="menuitem">Export</button>
<button id="importRecording" class="text-white bg-blue-500 px-2 py-1 rounded text-xs w-full text-left hover:bg-blue-600 mb-1" role="menuitem">Import</button>
Expand All @@ -59,10 +60,10 @@ <h3 class="text-base font-semibold">Manage Recordings</h3>
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div id="deleteMenu" class="origin-top-right absolute right-0 mt-1 w-40 rounded-md shadow-lg bg-white dark:bg-gray-700 ring-1 ring-black ring-opacity-5 focus:outline-none hidden" role="menu" aria-orientation="vertical" aria-labelledby="deleteDropdown">
<div id="deleteMenu" class="origin-top-right absolute right-0 mt-1 w-15 rounded-md shadow-lg bg-white dark:bg-gray-700 ring-1 ring-black ring-opacity-5 focus:outline-none hidden" role="menu" aria-orientation="vertical" aria-labelledby="deleteDropdown">
<div class="py-1" role="none">
<button id="deleteRecord" class="text-white bg-red-500 px-2 py-1 rounded text-xs w-full text-left hover:bg-red-600 mb-1" role="menuitem">Delete Selected</button>
<button id="removeAllRecordings" class="text-white bg-red-500 px-2 py-1 rounded text-xs w-full text-left hover:bg-red-600" role="menuitem">Remove All</button>
<button id="deleteRecord" class="text-white bg-red-500 px-2 py-1 rounded text-xs w-full text-left hover:bg-red-600 mb-1" role="menuitem">Delete</button>
<button id="removeAllRecordings" class="text-white bg-red-500 px-2 py-1 rounded text-xs w-full text-left hover:bg-red-600" role="menuitem">Delete All</button>
</div>
</div>
</div>
Expand Down Expand Up @@ -108,6 +109,17 @@ <h3 class="text-lg font-bold mb-2 dark:text-white">API Call Details</h3>
</div>
</div>

<div id="renameDialog" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center p-4">
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg w-[90%] h-[220px] border dark:border-gray-600 flex flex-col space-y-4">
<h3 class="text-lg font-bold mb-2 dark:text-white">Rename Recording</h3>
<input type="text" id="newRecordingName" class="w-full p-2 mb-4 border rounded dark:bg-gray-700 dark:text-white flex-grow" placeholder="Enter new name">
<div class="flex justify-end mt-auto">
<button id="cancelRename" class="bg-gray-500 text-white px-4 py-2 rounded mr-2">Cancel</button>
<button id="confirmRename" class="bg-blue-500 text-white px-4 py-2 rounded">Rename</button>
</div>
</div>
</div>

<script src="popup.js"></script>
</body>
</html>
Expand Down
79 changes: 78 additions & 1 deletion src/popup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,11 @@ document.addEventListener('DOMContentLoaded', () => {
const deleteDropdown = document.getElementById('deleteDropdown');
const deleteMenu = document.getElementById('deleteMenu');
const duplicateRecordingBtn = document.getElementById('duplicateRecording'); // Added
const renameRecordingBtn = document.getElementById('renameRecording');
const renameDialog = document.getElementById('renameDialog');
const newRecordingNameInput = document.getElementById('newRecordingName');
const cancelRenameBtn = document.getElementById('cancelRename');
const confirmRenameBtn = document.getElementById('confirmRename');


let isRecording = false;
Expand Down Expand Up @@ -194,13 +199,14 @@ document.addEventListener('DOMContentLoaded', () => {
importAllRecordingsInput.disabled = isRecording || isReplaying; // Added
removeAllRecordingsBtn.disabled = isRecording || isReplaying;
duplicateRecordingBtn.disabled = !isRecordingSelected || isRecording || isReplaying; // Added
renameRecordingBtn.disabled = !isRecordingSelected || isRecording || isReplaying; // Added

exportImportDropdown.disabled = isRecording || isReplaying;
exportAllRecordingsBtn.disabled = isRecording || isReplaying;
importAllRecordingsInput.disabled = isRecording || isReplaying; // Updated
deleteDropdown.disabled = !isRecordingSelected || isRecording || isReplaying;

[recordingSelect, exportImportDropdown, deleteDropdown, deleteRecordBtn, removeAllRecordingsBtn, replayButton, duplicateRecordingBtn].forEach(el => { // Updated
[recordingSelect, exportImportDropdown, deleteDropdown, deleteRecordBtn, removeAllRecordingsBtn, replayButton, duplicateRecordingBtn, renameRecordingBtn].forEach(el => { // Updated
if (el.disabled) {
el.classList.add('disabled');
} else {
Expand Down Expand Up @@ -727,5 +733,76 @@ document.addEventListener('DOMContentLoaded', () => {
}
});
}

// Add this new function to handle the renaming process
function renameRecording(oldName, newName) {
chrome.storage.local.get(oldName, (result) => {
if (chrome.runtime.lastError) {
console.error('Rename recording error:', chrome.runtime.lastError);
alert('Failed to rename recording. Please check the console for errors.');
} else if (result[oldName]) {
const updatedRecording = result[oldName];
updatedRecording.name = newName;

chrome.storage.local.set({ [newName]: updatedRecording }, () => {
if (chrome.runtime.lastError) {
console.error('Save renamed recording error:', chrome.runtime.lastError);
alert('Failed to save renamed recording. Please check the console for errors.');
} else {
chrome.storage.local.remove(oldName, () => {
if (chrome.runtime.lastError) {
console.error('Remove old recording error:', chrome.runtime.lastError);
alert('Failed to remove old recording. Please check the console for errors.');
} else {
console.log('Recording renamed');
loadRecordings();
recordingSelect.value = newName;
updateApiPreview();
chrome.storage.local.set({ 'lastUsedRecord': newName });
alert(`Recording renamed successfully to "${newName}"`);
renameDialog.classList.add('hidden');
exportImportMenu.classList.add('hidden');
}
});
}
});
} else {
alert('No recording found with the name: ' + oldName);
}
});
}

// Add event listener for the rename button
renameRecordingBtn.addEventListener('click', () => {
const currentRecording = recordingSelect.value;
if (currentRecording) {
newRecordingNameInput.value = currentRecording;
renameDialog.classList.remove('hidden');
} else {
alert('Please select a recording to rename.');
}
});

// Add event listeners for the rename dialog buttons
cancelRenameBtn.addEventListener('click', () => {
renameDialog.classList.add('hidden');
});

confirmRenameBtn.addEventListener('click', () => {
const oldName = recordingSelect.value;
const newName = newRecordingNameInput.value.trim();
if (newName && newName !== oldName) {
renameRecording(oldName, newName);
} else {
alert('Please enter a new name for the recording.');
}
});

// Close rename dialog when clicking outside
renameDialog.addEventListener('click', (e) => {
if (e.target === renameDialog) {
renameDialog.classList.add('hidden');
}
});
});

71 changes: 68 additions & 3 deletions src/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -279,7 +279,7 @@ body.dark {
}

#exportImportMenu {
min-width: 120px;
min-width: 100px;
padding: 0.5rem;
z-index: 1;
}
Expand Down Expand Up @@ -318,7 +318,72 @@ body.dark {
background-color: #1d4ed8;
}

.delete-menu-z-index {
z-index: 10;
#deleteMenu{
min-width: 100px;
padding: 0.5rem;
z-index: 1;
}

/* Rename Dialog Styles */
#renameDialog {
height: 240px;
}
#renameDialog .bg-white {
background-color: #ffffff;
}

#renameDialog.dark .bg-white,
#renameDialog.dark .dark\:bg-gray-800 {
background-color: #1a1a1a;
}

#renameDialog .text-gray-900 {
color: #1a202c;
}

#renameDialog.dark .text-gray-900 {
color: #e2e8f0;
}

#renameDialog input {
font-size: 14px;
resize: none;
}

#renameDialog.dark input {
color: #e2e8f0;
background-color: #2a2a2a;
}

#renameDialog button {
transition: background-color 0.3s;
}

#renameDialog button:hover {
opacity: 0.9;
}

#renameDialog.dark .dark\:text-white {
color: #ffffff;
}

#renameDialog.dark .dark\:border-gray-600 {
border-color: #4a5568;
}

/* Ensure the rename dialog takes 90% of the popup width */
#renameDialog > div {
max-width: 90%;
width: 90%;
}

/* Style the input to take up more vertical space */
#renameDialog input[type="text"] {
height: 120px;
padding: 8px;
}

#renameDialog .flex-col {
justify-content: space-between;
}

0 comments on commit 592e045

Please sign in to comment.