diff --git a/src/settings/settings.css b/src/settings/settings.css index cd1d68d..89c003c 100644 --- 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 index 8e5ee28..df1670e 100644 --- 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 index cf972f4..fb9016d 100644 --- 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(); }