Add hide action to mobile devices and new popup design (#22)

keybraker · Nov 25, 2023 · 8e2581f · 8e2581f
1 parent 4f7565d
commit 8e2581f
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 83 deletions.
diff --git a/src/decorators/BlockIndicator.ts b/src/decorators/BlockIndicator.ts
@@ -14,20 +14,6 @@ const icons = {
     },
 } as IconSet;
 
-// export enum SponsoredFlagger {
-//   PRODUCT_PAGE,
-//   DESKTOP_PAGE,
-//   MOBILE_PAGE
-// }
-
-// function SponsoredFlaggerMapper(sponsoredFlagger: SponsoredFlagger) {
-//     switch(sponsoredFlagger) {
-//     case SponsoredFlagger.DESKTOP_PAGE: return "flagger-toggle-list-active";
-//     case SponsoredFlagger.MOBILE_PAGE: return "flagger-toggle-header-active";
-//     case SponsoredFlagger.PRODUCT_PAGE: default: return "flagger-toggle-product-active";
-//     }
-// }
-
 export class BlockIndicator {
     state: State;
 
@@ -36,16 +22,17 @@ export class BlockIndicator {
     }
 
     public addOrUpdate(): void {
-        const existingBlockIndicationButton = document.getElementById(
-            "sponsored-flagger-button"
-        ) as HTMLButtonElement | null;
+        const existingBlockIndicationButton = document.getElementById("sponsored-flagger-button") as HTMLButtonElement | null;
         if (existingBlockIndicationButton) {
             this.updateDisplayText(existingBlockIndicationButton, false);
             return;
         }
 
-        this.addButtonToFilters();
-        this.addButtonToOrderOptions();
+        // desktop
+        this.addButtonToFiltersDesktop();
+        this.addButtonToOrderOptionsDesktop();
+        // mobile
+        this.addButtonToFiltersMobile();
     }
 
     private createSvgIcon(icon: {
@@ -125,18 +112,18 @@ export class BlockIndicator {
         parentElement.insertBefore(newElement, referenceElement);
     }
 
-    private addButtonToFilters(existingButton?: HTMLButtonElement): void {
-        const liOfferElements = document.querySelector("div.sku-actions-wrapper");
-        if (liOfferElements) {
+    private addButtonToFiltersDesktop(existingButton?: HTMLButtonElement): void {
+        const actionWrapperDiv = document.querySelector("div.sku-actions-wrapper");
+        if (actionWrapperDiv) {
             this.insertElement(
-        liOfferElements.parentNode as Node,
+        actionWrapperDiv.parentNode as Node,
         existingButton ?? this.createSponsoredIndicatorButton(true),
-        liOfferElements
+        actionWrapperDiv
             );
         }
     }
 
-    private addButtonToOrderOptions(existingButton?: HTMLButtonElement): void {
+    private addButtonToOrderOptionsDesktop(existingButton?: HTMLButtonElement): void {
         const orderOptionsDiv = document.getElementById("order-options");
         if (orderOptionsDiv) {
             this.insertElement(
@@ -146,4 +133,15 @@ export class BlockIndicator {
             );
         }
     }
+
+    private addButtonToFiltersMobile(existingButton?: HTMLButtonElement): void {
+        const switchButtonWrapperDiv = document.querySelector("div.switch-btn-wrapper");
+        if (switchButtonWrapperDiv) {
+            this.insertElement(
+        switchButtonWrapperDiv.parentNode as Node,
+        existingButton ?? this.createSponsoredIndicatorButton(true),
+        switchButtonWrapperDiv
+            );
+        }
+    }
 }
diff --git a/src/popup/popup.css b/src/popup/popup.css
@@ -1,65 +1,97 @@
 .popup-body {
-  width: 225px !important;
+  font-family: 'Roboto', sans-serif;
+  width: 250px;
+  padding: 15px;
+  background-color: #f7f7f7;
+  color: #333;
+  border-radius: 8px;
+  border: 1px solid #bbbbbb;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
 }
 
 .content {
-  margin: 0 !important;
+  margin: 0;
+  padding: 0;
 }
 
-.content-flex {
-  display: flex !important;
-  justify-content: space-between !important;
-  align-items: center !important;
-  padding: 5px 0 !important;
-  border-bottom: 1px solid grey !important;
+.content-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #ddd;
 }
 
-.content-flex:first-child {
-  padding-top: 0 !important;
+.item-label {
+  font-size: 14px;
+  color: #555;
 }
 
-.content-flex:last-child {
-  border-bottom: none !important;
-  padding-bottom: 0 !important;
+.item-value {
+  background-color: #fff;
+  color: #333;
+  padding: 5px 10px;
+  border-radius: 20px;
+  border: 2px solid #333;
+  font-weight: bold;
 }
 
-dd.right-span.circle {
-  border-radius: 50% !important;
-  width: 14px !important;
-  height: 14px !important;
-  padding: 2px !important;
-  background: #fff !important;
-  border: 3px solid #000 !important;
+.rate-section {
+  text-align: center;
+  margin-top: 20px;
 }
 
-dt.left-span,
-dd.right-span {
-  text-align: center !important;
-  font: 12px Arial, sans-serif !important;
+.rate-section p {
+  font-size: 14px;
+  color: #555;
+  margin-bottom: 16px;
 }
 
-dd.right-span {
-  color: var(--custom-light-red, #ff0000) !important;
-  font-weight: bold !important;
+.icons {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.rate-section {
+.icon-link {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.rate-icon {
+  width: 32px;
+  height: auto;
+  margin: 0 5px;
+}
+
+.rate-icon:hover {
+  opacity: 0.8;
+}
+
+.label-section {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  margin-top: 20px;
+  justify-content: start;
+  margin-bottom: 20px;
 }
 
-.rate-section p {
-  margin: 0;
-  margin-right: 16px;
+.logo {
+  margin-right: 10px;
 }
 
-.rate-section img {
-  width: 24px;
+.rate-icon {
+  width: 32px;
   height: auto;
 }
 
-.rate-section a:not(:last-child) {
-  margin-right: 8px;
+.label-section p {
+  margin: 0;
+  font-weight: 700;
+  font-size: 1.2em;
+  color: #333;
+  flex: 1;
+  white-space: wrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
diff --git a/src/popup/popup.html b/src/popup/popup.html
@@ -4,33 +4,44 @@
     <meta charset="utf-8" />
     <title>Skroutz Sponsored Flagger</title>
     <link rel="stylesheet" href="popup.css" />
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
   </head>
   <body class="popup-body">
-    <dl class="content">
-      <div class="content-flex">
-        <dt class="left-span"><strong>Sponsored products</strong> flagged</dt>
-        <dd class="right-span circle" id="sponsoredCount">...</dd>
+    <div class="label-section">
+      <div class="logo">
+        <a href="https://github.com/keybraker/skroutz-sponsored-flagger" target="_blank" rel="noopener noreferrer" class="icon-link">
+            <img src="https://raw.githubusercontent.com/keybraker/skroutz-sponsored-flagger/main/src/assets/icons/48.png" alt="Skroutz sponsored flagger icon" class="rate-icon" />
+        </a>
       </div>
-      <div class="content-flex">
-        <dt class="left-span"><strong>Sponsored shelves</strong> flagged</dt>
-        <dd class="right-span circle" id="sponsoredShelfCount">...</dd>
+      <p><strong><br>Skroutz Sponsored Flagger</strong></p>
+    </div>
+
+    <div class="content">
+      <div class="content-item">
+          <span class="item-label"><strong>Sponsored products</strong> flagged</span>
+          <span class="item-value" id="sponsoredCount">...</span>
+      </div>
+      <div class="content-item">
+          <span class="item-label"><strong>Sponsored shelves</strong> flagged</span>
+          <span class="item-value" id="sponsoredShelfCount">...</span>
       </div>
-      <div class="content-flex">
-        <dt class="left-span"><strong>Promotional videos</strong> flagged</dt>
-        <dd class="right-span circle" id="videoCount">...</dd>
+      <div class="content-item">
+          <span class="item-label"><strong>Promotional videos</strong> flagged</span>
+          <span class="item-value" id="videoCount">...</span>
       </div>
-    </dl>
+    </div>
 
     <div class="rate-section">
       <p><strong>If you enjoy SSF<br>rate it on</strong></p>
-      <a href="https://addons.mozilla.org/en-US/firefox/addon/skroutz-sponsored-flagger/reviews/" target="_blank" rel="noopener noreferrer">
-        <img src="https://www.mozilla.org/media/protocol/img/logos/firefox/browser/logo.eb1324e44442.svg" alt="Rate on Firefox Add-ons" />
-      </a>
-      <a href="https://chrome.google.com/webstore/detail/skroutz-sponsored-flagger/amglnkndjeoojnjjeepeheobhneeogcl?hl=en&authuser=0" target="_blank" rel="noopener noreferrer">
-        <img src="https://www.google.com/chrome/static/images/chrome-logo-m100.svg" alt="Rate on Chrome Web Store" />
-      </a>
+      <div class="icons">
+        <a href="https://addons.mozilla.org/en-US/firefox/addon/skroutz-sponsored-flagger/reviews/" target="_blank" rel="noopener noreferrer" class="icon-link">
+            <img src="https://www.mozilla.org/media/protocol/img/logos/firefox/browser/logo.eb1324e44442.svg" alt="Rate on Firefox Add-ons" class="rate-icon" />
+        </a>
+        <a href="https://chrome.google.com/webstore/detail/skroutz-sponsored-flagger/amglnkndjeoojnjjeepeheobhneeogcl?hl=en&authuser=0" target="_blank" rel="noopener noreferrer" class="icon-link">
+            <img src="https://www.google.com/chrome/static/images/chrome-logo-m100.svg" alt="Rate on Chrome Web Store" class="rate-icon" />
+        </a>
+      </div>
     </div>
   </body>
-
   <script src="../popup.js"></script>
 </html>
diff --git a/src/popup/popup.js b/src/popup/popup.js
@@ -1,14 +1,12 @@
 function updateCounts(sponsored, sponsoredShelf, video) {
     document.getElementById("sponsoredCount").textContent = sponsored || 0;
-    document.getElementById("sponsoredShelfCount").textContent =
-    sponsoredShelf || 0;
+    document.getElementById("sponsoredShelfCount").textContent = sponsoredShelf || 0;
     document.getElementById("videoCount").textContent = video || 0;
 }
 
 chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
     if (!tabs || tabs.length === 0) {
         updateCounts();
-
         return;
     }