Add Toasts to Options (#65)

* Add toast to options * Update Toasts Container for Links
cssnr · May 4, 2024 · b4c7466 · b4c7466
1 parent ee520f9
commit b4c7466
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 9 deletions.
diff --git a/src/css/links.css b/src/css/links.css
@@ -11,11 +11,7 @@ a:visited {
     z-index: 10;
 }
 
-#toast-container {
-    margin-bottom: 60px;
-    margin-right: 70px;
-}
-
-.toast {
+.toast-container {
     max-width: 260px;
+    width: 100%;
 }
diff --git a/src/css/options.css b/src/css/options.css
@@ -4,6 +4,7 @@
     min-width: 360px;
 }
 
-.toast {
-    max-width: 260px;
+.toast-container {
+    max-width: 320px;
+    width: 100%;
 }
diff --git a/src/html/links.html b/src/html/links.html
@@ -104,7 +104,7 @@ <h5 class="modal-title">Keyboard Shortcuts <i class="fa-regular fa-keyboard ms-2
 </div>
 
 <div aria-live="polite" aria-atomic="true" class="">
-    <div id="toast-container" class="toast-container position-fixed bottom-0 end-0"></div>
+    <div id="toast-container" class="toast-container position-fixed bottom-0 end-0 p-3"></div>
 </div>
 
 <div class="d-none">

diff --git a/src/js/options.js b/src/js/options.js
@@ -92,6 +92,9 @@ async function addFilter(event) {
             console.debug('patterns:', patterns)
             await chrome.storage.sync.set({ patterns })
             updateTable(patterns)
+            showToast(`Added Filter: ${filter}`)
+        } else {
+            showToast(`Filter Exists: ${filter}`, 'warning')
         }
     }
     element.value = ''
@@ -279,11 +282,13 @@ async function deleteFilter(event, index = undefined) {
     }
     console.log(`index: ${index}`)
     if (index !== undefined) {
+        const name = patterns[index]
         patterns.splice(index, 1)
         await chrome.storage.sync.set({ patterns })
         console.debug('patterns:', patterns)
         updateTable(patterns)
         document.getElementById('add-filter').focus()
+        showToast(`Removed Filter: ${name}`, 'info')
     }
 }