From e7fddf621a59292ebc2440666a109e7d4aa0e0ea Mon Sep 17 00:00:00 2001 From: sameerasw Date: Wed, 23 Apr 2025 19:29:02 +0530 Subject: renamed data viewer to advanced settings and made teh features list collapsible. --- data-viewer/data-viewer.html | 4 +-- popup/popup.css | 18 ++++++++++++- popup/popup.html | 21 ++++++--------- popup/popup.js | 62 +++++++++++++++++++++++++++++++++++++++++++- 4 files changed, 88 insertions(+), 17 deletions(-) diff --git a/data-viewer/data-viewer.html b/data-viewer/data-viewer.html index 55f9121..305cb2e 100644 --- a/data-viewer/data-viewer.html +++ b/data-viewer/data-viewer.html @@ -4,7 +4,7 @@ - ZenInternet - Data Viewer + ZenInternet - Advanced Settings @@ -16,7 +16,7 @@
ZenInternet Logo -

ZenInternet Data Viewer

+

ZenInternet Settings

by @sameerasw
diff --git a/popup/popup.css b/popup/popup.css index 761b154..67eab43 100644 --- a/popup/popup.css +++ b/popup/popup.css @@ -250,6 +250,8 @@ input:checked + .slider:before { .collapsible-button { width: 100%; padding: 12px 16px; + margin-bottom: 10px; + border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: space-between; @@ -273,9 +275,23 @@ input:checked + .slider:before { display: none; } -.websites-list:not(.collapsed) + .collapsible-button i { +.features-list.collapsed { + display: none; +} + +#current-site-actions.collapsed { + display: none; +} + +.collapsible-button:hover { + background-color: rgba(255, 255, 255, 0.1); +} + +/* When features are expanded, rotate the chevron */ +.collapsible-button i.fa-chevron-up { transform: rotate(180deg); } + .websites-list { list-style: none; padding: 0; diff --git a/popup/popup.html b/popup/popup.html index edc9bce..bc53134 100644 --- a/popup/popup.html +++ b/popup/popup.html @@ -32,9 +32,12 @@
-

Current Site Features

-
-
+ + +
- - -
diff --git a/popup/popup.js b/popup/popup.js index 9a13ce2..44123ee 100644 --- a/popup/popup.js +++ b/popup/popup.js @@ -50,6 +50,11 @@ new (class ExtensionPopup { ); this.reloadButton.addEventListener("click", this.reloadPage.bind(this)); + // Add toggle features button event listener + document + .getElementById("toggle-features") + ?.addEventListener("click", this.toggleFeatures.bind(this)); + this.whitelistModeSwitch.addEventListener( "change", this.handleWhitelistModeChange.bind(this) @@ -242,8 +247,40 @@ new (class ExtensionPopup { const hasExampleSite = "example.com.css" in styles; const hasNoStyles = Object.keys(styles).length === 0; + // Only collapse if we found a specific theme for this site + // Otherwise keep it expanded to show the request theme button + const hasSpecificTheme = + currentSiteKey && currentSiteKey !== "example.com.css"; + + // Apply collapsed class based on whether we have a theme + const featuresList = document.getElementById("current-site-toggles"); + const actionsContainer = document.getElementById("current-site-actions"); + + if (hasSpecificTheme) { + featuresList.classList.add("collapsed"); + if (actionsContainer) actionsContainer.classList.add("collapsed"); + + // Update the icon to show collapsed state + const toggleButton = document.getElementById("toggle-features"); + if (toggleButton) { + const icon = toggleButton.querySelector("i"); + if (icon) icon.className = "fas fa-chevron-down"; + } + } else { + // Keep expanded when no theme was found or using default + featuresList.classList.remove("collapsed"); + if (actionsContainer) actionsContainer.classList.remove("collapsed"); + + // Update the icon to show expanded state + const toggleButton = document.getElementById("toggle-features"); + if (toggleButton) { + const icon = toggleButton.querySelector("i"); + if (icon) icon.className = "fas fa-chevron-up"; + } + } + // Disable the force styling toggle if we found a theme for this site - if (currentSiteKey && currentSiteKey !== "example.com.css") { + if (hasSpecificTheme) { // We found a specific theme for this site, no need for force styling // Disable the skip/enable toggle this.skipForceThemingSwitch.disabled = true; @@ -636,4 +673,27 @@ new (class ExtensionPopup { url: "https://addons.mozilla.org/en-US/firefox/addon/zen-internet/versions/", }); } + + // Toggle features section visibility + toggleFeatures() { + const featuresList = document.getElementById("current-site-toggles"); + const actionsContainer = document.getElementById("current-site-actions"); + const toggleButton = document.getElementById("toggle-features"); + + featuresList.classList.toggle("collapsed"); + if (actionsContainer) { + actionsContainer.classList.toggle( + "collapsed", + featuresList.classList.contains("collapsed") + ); + } + + // Update the icon + const icon = toggleButton.querySelector("i"); + if (featuresList.classList.contains("collapsed")) { + icon.className = "fas fa-chevron-down"; + } else { + icon.className = "fas fa-chevron-up"; + } + } })(); -- cgit v1.2.3