design fixes

1 files changed, 52 insertions, 3 deletions

diff --git a/src/options.ts b/src/options.ts
index 4925de2a..1e2fa046 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -236,23 +236,59 @@ async function init() {
     }
 
     // Tab interaction
+    if (location.hash != "") {
+        const substr = location.hash.substring(1);
+        let menuItem = document.querySelector(`[data-for='${substr}']`);
+        if (menuItem == null)
+            menuItem = document.querySelector(`[data-for='segment-options']`);
+        menuItem.classList.add("selected");
+    } else {
+        document.querySelector(`[data-for='segment-options']`).classList.add("selected");
+    }
+
     const tabElements = document.getElementsByClassName("tab-heading");
     for (let i = 0; i < tabElements.length; i++) {
+        const tabFor = tabElements[i].getAttribute("data-for");
+
+        if (tabElements[i].classList.contains("selected"))
+            document.getElementById(tabFor).classList.remove("hidden");
+
         tabElements[i].addEventListener("click", () => {
+            location.hash = tabFor;
+
+            createStickyHeader();
+
             document.querySelectorAll(".tab-heading").forEach(element => { element.classList.remove("selected"); });
             optionsContainer.querySelectorAll(".option-group").forEach(element => { element.classList.add("hidden"); });
 
             tabElements[i].classList.add("selected");
-            document.getElementById(tabElements[i].getAttribute("data-for")).classList.remove("hidden");
+            document.getElementById(tabFor).classList.remove("hidden");
         });
     }
 
     document.getElementById("version").innerText = "v. " + chrome.runtime.getManifest().version;
 
+    window.onscroll = () => createStickyHeader();
+
     optionsContainer.classList.remove("hidden");
     optionsContainer.classList.add("animated");
 }
 
+function createStickyHeader() {
+    const container = document.getElementById("options-container");
+    const options = document.getElementById("options");
+
+    if (window.pageYOffset > 115) {
+        if (!container.classList.contains("sticky")) {
+            options.style.marginTop = options.offsetTop.toString()+"px";
+            container.classList.add("sticky");
+        }
+    } else {
+        options.style.marginTop = "unset";
+        container.classList.remove("sticky");
+    }
+}
+
 /**
  * Handle special cases where an option shouldn't show
  * 
@@ -294,6 +330,10 @@ function updateDisplayElement(element: HTMLElement) {
     switch (displayOption) {
         case "invidiousInstances":
             element.innerText = displayText.join(', ');
+            if (displayText.length > 1) {
+                const resetButton = element.parentElement.querySelector(".invidious-instance-reset");
+                resetButton.classList.remove("hidden");
+            }
             break;
     }
 }
@@ -309,6 +349,8 @@ function invidiousInstanceAddInit(element: HTMLElement, option: string) {
     const button = element.querySelector(".trigger-button");
 
     const setButton = element.querySelector(".text-change-set");
+    const cancelButton = element.querySelector(".text-change-reset");
+    const resetButton = element.querySelector(".invidious-instance-reset");
     setButton.addEventListener("click", async function() {
         if (textBox.value == "" || textBox.value.includes("/") || textBox.value.includes("http")) {
             alert(chrome.i18n.getMessage("addInvidiousInstanceError"));
@@ -326,19 +368,26 @@ function invidiousInstanceAddInit(element: HTMLElement, option: string) {
 
             invidiousOnClick(checkbox, "supportInvidious");
 
-            textBox.value = "";
+            resetButton.classList.remove("hidden");
 
             // Hide this section again
+            textBox.value = "";
             element.querySelector(".option-hidden-section").classList.add("hidden");
             button.classList.remove("disabled");
         }
     });
 
-    const resetButton = element.querySelector(".invidious-instance-reset");
+    cancelButton.addEventListener("click", async function() {
+        textBox.value = "";
+        element.querySelector(".option-hidden-section").classList.add("hidden");
+        button.classList.remove("disabled");
+    });
+
     resetButton.addEventListener("click", function() {
         if (confirm(chrome.i18n.getMessage("resetInvidiousInstanceAlert"))) {
             // Set to a clone of the default
             Config.config[option] = Config.defaults[option].slice(0);
+            resetButton.classList.add("hidden");
         }
     });
 }