From 8e2581f33bcbf4599e36ad82ca0ec12cdc30263c Mon Sep 17 00:00:00 2001 From: Ioannis Tsiakkas Date: Sat, 25 Nov 2023 15:54:14 +0200 Subject: [PATCH] Add hide action to mobile devices and new popup design (#22) --- src/decorators/BlockIndicator.ts | 48 +++++++------- src/popup/popup.css | 106 ++++++++++++++++++++----------- src/popup/popup.html | 47 ++++++++------ src/popup/popup.js | 4 +- 4 files changed, 122 insertions(+), 83 deletions(-) diff --git a/src/decorators/BlockIndicator.ts b/src/decorators/BlockIndicator.ts index 4072ec1..2e4fd69 100644 --- 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 index e9915e4..9a4e8e9 100644 --- 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 index 7182ac1..49be4ee 100644 --- a/src/popup/popup.html +++ b/src/popup/popup.html @@ -4,33 +4,44 @@ Skroutz Sponsored Flagger + -
-
-
Sponsored products flagged
-
...
+
+ -
-
Sponsored shelves flagged
-
...
+


Skroutz Sponsored Flagger

+
+ +
+
+ Sponsored products flagged + ... +
+
+ Sponsored shelves flagged + ...
-
-
Promotional videos flagged
-
...
+
+ Promotional videos flagged + ...
-
+

If you enjoy SSF
rate it on

- - Rate on Firefox Add-ons - - - Rate on Chrome Web Store - +
+ + Rate on Firefox Add-ons + + + Rate on Chrome Web Store + +
- diff --git a/src/popup/popup.js b/src/popup/popup.js index 482566a..16d392c 100644 --- 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; }