Initial button addition

keybraker · Dec 3, 2023 · 20c0956 · 20c0956
1 parent 6b8bd28
commit 20c0956
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 0 deletions.
diff --git a/src/background.ts b/src/background.ts
@@ -96,3 +96,12 @@ chrome.runtime.onMessage.addListener(
         }
     }
 );
+
+chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
+    if (request.action === "toggleVisibility") {
+        state.visible = !state.visible;
+        localStorage.setItem("ssf-sponsored-visibility", `${state.visible}`);
+        // this.updateDisplayText(sponsoredButtonToggle, isProduct);
+        toggleContentVisibility(state);
+    }
+});
diff --git a/src/popup/popup.css b/src/popup/popup.css
@@ -95,4 +95,30 @@
   white-space: wrap;
   overflow: hidden;
   text-overflow: ellipsis;
+}
+
+.flagger-toggle-list {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  margin: 8px 0px 16px 8px !important;
+  padding: 11px 8px !important;
+  border: 1px solid #bbbbbb !important;
+  border-radius: 5px !important;
+  background: transparent !important;
+  color: #707070 !important;
+  white-space: nowrap !important;
+}
+
+.flagger-toggle-list svg,
+.flagger-toggle-product svg {
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+
+.flagger-toggle-list:hover,
+.flagger-toggle-list.flagger-toggle-list-active {
+  border: 1px solid var(--custom-light-red, #ff0000);
+  background-color: #ffcdd2;
+  color: var(--custom-light-red, #ff0000);
 }
diff --git a/src/popup/popup.html b/src/popup/popup.html
@@ -17,6 +17,17 @@
       <p><strong><br>Skroutz Sponsored Flagger</strong></p>
     </div>
 
+    <button class="flagger-toggle-list" id="sponsored-flagger-button" type="button">
+      <svg width="16" height="16" viewBox="0 0 16 16" class="bi">
+        <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" fill="currentColor">
+        </path>
+      </svg>
+      <span style="margin-right: 6px;"></span>
+      <span>
+        Sponsored Stores
+      </span>
+    </button>
+
     <div class="content">
       <div class="content-item">
           <span class="item-label"><strong>Sponsored products</strong> flagged</span>

diff --git a/src/popup/popup.js b/src/popup/popup.js
@@ -4,9 +4,18 @@ function updateCounts(sponsored, sponsoredShelf, video) {
     document.getElementById("videoCount").textContent = video || 0;
 }
 
+function changeState() {
+    document.getElementById('sponsored-flagger-button')
+        .addEventListener('click', function() {
+            chrome.runtime.sendMessage({action: "toggleVisibility"});
+        });
+}
+
 chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
     if (!tabs || tabs.length === 0) {
         updateCounts();
+        changeState();
+
         return;
     }
 
@@ -18,3 +27,5 @@ chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
         }
     );
 });
+
+