✨ Add an opt-in for displaying toasts

prateek3255 · Jul 17, 2021 · c08fbe0 · c08fbe0
1 parent 41ba5cc
commit c08fbe0
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git a/contentScripts/index.js b/contentScripts/index.js
@@ -38,7 +38,13 @@ export const executeUpdateScroll = (tabId, scrollId) => {
   executeScript(tabId, 'contentScripts/update.js');
 };
 
-export const showToast = (content, color) => {
+export const showToast = async (content, color) => {
+  const shouldShowToast = (await getItemFromStorage('show-toast-notification'))['show-toast-notification'];
+
+  if (!shouldShowToast) {
+    return;
+  }
+
   const svgIcon = `<svg xmlns="http://www.w3.org/2000/svg" version="1.0" preserveAspectRatio="xMidYMid meet" viewBox="76.35 55.28 100.15 138.72" style="height:25px; margin-right:14px;"><g transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)" fill="#4F80FF" stroke="none"><path d="M902 2000 c-54 -11 -96 -41 -115 -82 -19 -43 -32 -658 -17 -788 41 -338 209 -510 500 -510 247 0 398 121 472 375 22 78 23 91 23 497 0 405 -1 417 -21 445 -11 15 -38 37 -60 48 -37 19 -61 20 -389 22 -192 1 -369 -3 -393 -7z m416 -248 c8 -11 12 -55 12 -136 0 -131 -9 -156 -58 -156 -53 0 -62 22 -62 154 0 67 4 126 8 132 23 34 75 38 100 6z"></path></g></svg>`;
   document.body.innerHTML += `<div id="scrroll-in-snackbar" class="${color}">${svgIcon} ${content}</div>`;
 

diff --git a/popup/App.svelte b/popup/App.svelte
@@ -18,6 +18,8 @@
 
   let savedScrolls = [];
 
+  let showToastNotifications = false;
+
   $: controlImage = doesCurrentTabHasSavedScroll
     ? "icon-32.png"
     : "icon-32-inactive.png";
@@ -37,6 +39,10 @@
       }
     });
 
+    chrome.storage.local.get("show-toast-notification", (data) => {
+      showToastNotifications  = !!data["show-toast-notification"];
+    });
+
     // Check whether the current tab has a saved scrroll or not
     chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
       const fullUrl = tabs[0].url;
@@ -106,6 +112,10 @@
     window.close();
   }
 
+  function handleShowToastNotificationClick() {
+    showToastNotifications = !showToastNotifications;
+    chrome.storage.local.set({ "show-toast-notification": showToastNotifications });
+  }
 </script>
 
 <div class="controls">
@@ -172,6 +182,11 @@
   </div>
 </div>
 
+<div class="checkbox-container">
+  <input on:click={handleShowToastNotificationClick} checked={showToastNotifications} id="toast-checkbox" type="checkbox" />
+  <label for="toast-checkbox">Show toast notifications for every action performed with a scrroll (Experimental)</label>
+</div>
+
 {#if doesCurrentTabHasSavedScroll}
   <div>
     <h4 class="save-scroll-heading">Your saved scrrolls -</h4>
@@ -332,4 +347,16 @@
     color: #4e80ff;
   }
 
+  .checkbox-container {
+    display: flex;
+    align-items: flex-start;
+    margin: 12px 0px;
+  }
+
+  .checkbox-container label {
+    color: white;
+    font-family: "Roboto", sans-serif;
+    font-size: 13px;
+    margin-left: 8px;
+  }
 </style>