made settings sections collapsable

nostrize · Sep 1, 2024 · 2438bc2 · 2438bc2
1 parent c3f956d
commit 2438bc2
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 24 deletions.
diff --git a/src/settings/settings.css b/src/settings/settings.css
@@ -57,6 +57,45 @@ label span {
   flex-direction: column;
 }
 
+.input-container.collapsed {
+  display: none;
+}
+
+.input-container.expanded {
+  display: flex;
+}
+
+.section .indicator {
+  float: right;
+  font-weight: bold;
+  transition: transform 0.3s ease-out;
+}
+
+.section.expanded .indicator {
+  transform: rotate(90deg); /* Rotate the indicator when expanded */
+}
+
+.section h2 {
+  margin: 0;
+  padding: 10px 10px 10px 40px;
+  position: relative;
+}
+
+.section h2::before {
+  content: '▶'; /* The default arrow indicator */
+  position: absolute;
+  left: 10px; /* Adjust this value to position the indicator inside the section */
+  transition: transform 0.3s ease-out;
+}
+
+.section:has(.input-container.collapsed) h2::before {
+  transform: rotate(0deg); /* Indicator points right when collapsed */
+}
+
+.section:has(.input-container.expanded) h2::before {
+  transform: rotate(90deg); /* Indicator points down when expanded */
+}
+
 .input-container input {
   width: 100%;
   max-width: 100%;

diff --git a/src/settings/settings.html b/src/settings/settings.html
@@ -7,30 +7,10 @@
   <link rel="stylesheet" href="nostrize-settings.css">
 </head>
 <body>
-  <div class="section" id="debug-settings">
-    <h2>Debug Settings</h2>
-
-    <div class="input-container">
-      <label>
-        <input type="checkbox" id="log" /> 
-        <span>Enable Logging</span>
-      </label>
-
-      <div><hr /></div>
-
-      <label for="namespace">Namespace
-        <span class="help-icon">❓</span>
-        <span class="tooltip">This helps in identifying Nostrize logs.</span>
-      </label>
-
-      <input type="text" id="namespace" placeholder="Namespace" />
-    </div>
-  </div>
-
-  <div class="section" id="nostr-settings">
+  <div class="section collapsable" id="nostr-settings">
     <h2>Nostr Settings</h2>
 
-    <div class="input-container">
+    <div class="input-container collapsed">
       <label for="mode">Mode
         <span class="help-icon">❓</span>
         <span class="tooltip">Choose the mode for Nostr. 'Anonymous' generates new keys everytime for event signing, while 'NIP-07' gets your nostr public key and signs events using browser extensions like alby or nos2x</span>
@@ -60,9 +40,27 @@ <h2>Nostr Settings</h2>
     </div>
   </div>
 
-  <div class="section" id="misc-container">
-    <h2>Misc</h2>
+  <div class="section collapsable" id="debug-settings">
+    <h2>Debug Settings</h2>
+
+    <div class="input-container collapsed">
+      <label>
+        <input type="checkbox" id="log" /> 
+        <span>Enable Logging</span>
+      </label>
+
+      <div><hr /></div>
+
+      <label for="namespace">Namespace
+        <span class="help-icon">❓</span>
+        <span class="tooltip">This helps in identifying Nostrize logs.</span>
+      </label>
+
+      <input type="text" id="namespace" placeholder="Namespace" />
+    </div>
+  </div>
 
+  <div class="sections" id="misc-container">
     <div class="input-container" id="misc-container">
       <div>
         <button id="reset-settings">Reset settings</button>

diff --git a/src/settings/settings.js b/src/settings/settings.js
@@ -122,6 +122,19 @@ async function settingsPage() {
   document.getElementById("reset-settings").onclick = resetSettings;
   document.getElementById("save-settings").onclick = saveSettings;
 
+  document.querySelectorAll(".section.collapsable").forEach((collapsable) => {
+    const header = collapsable.querySelector("h2");
+
+    header.addEventListener("click", () => {
+      header.classList.toggle("collapsed");
+      header.classList.toggle("expanded");
+
+      const inputContainer = collapsable.querySelector(".input-container");
+      inputContainer.classList.toggle("collapsed");
+      inputContainer.classList.toggle("expanded");
+    });
+  });
+
   // Load the state initially
   loadState();
 }