From 83bf0fbf96736a121d46ca84f6b00c34dc1adbbb Mon Sep 17 00:00:00 2001
From: Ellpeck <me@ellpeck.de>
Date: Fri, 8 Apr 2022 14:23:05 +0200
Subject: [PATCH] allow collapsing settings sections Closes #17

---
 src/settings-tab.ts | 26 +++++++++++++++++---------
 styles.css          |  6 +++++-
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/settings-tab.ts b/src/settings-tab.ts
index 321a113..0b8c7a4 100644
--- a/src/settings-tab.ts
+++ b/src/settings-tab.ts
@@ -36,8 +36,17 @@ export class CustomFramesSettingTab extends PluginSettingTab {
 
         for (let frame of this.plugin.settings.frames) {
             let heading = this.containerEl.createEl("h3", { text: frame.displayName || "Unnamed Frame" });
+            let toggle = new ButtonComponent(this.containerEl)
+                .setButtonText("Show Settings")
+                .setClass("custom-frames-show")
+                .onClick(async () => {
+                    content.hidden = !content.hidden;
+                    toggle.setButtonText(content.hidden ? "Show Settings" : "Hide Settings");
+                });
+            let content = this.containerEl.createDiv();
+            content.hidden = true;
 
-            new Setting(this.containerEl)
+            new Setting(content)
                 .setName("Display Name")
                 .setDesc("The display name that this frame should have.")
                 .addText(t => {
@@ -48,7 +57,7 @@ export class CustomFramesSettingTab extends PluginSettingTab {
                         await this.plugin.saveSettings();
                     });
                 });
-            new Setting(this.containerEl)
+            new Setting(content)
                 .setName("Icon")
                 .setDesc(createFragment(f => {
                     f.createSpan({ text: "The icon that this frame's pane should have. The names of any " });
@@ -62,7 +71,7 @@ export class CustomFramesSettingTab extends PluginSettingTab {
                         await this.plugin.saveSettings();
                     });
                 });
-            new Setting(this.containerEl)
+            new Setting(content)
                 .setName("URL")
                 .setDesc("The URL that should be opened in this frame.")
                 .addText(t => {
@@ -72,7 +81,7 @@ export class CustomFramesSettingTab extends PluginSettingTab {
                         await this.plugin.saveSettings();
                     });
                 });
-            new Setting(this.containerEl)
+            new Setting(content)
                 .setName("Disable on Mobile")
                 .setDesc("Custom Frames is a lot more restricted on mobile devices and doesn't allow for the same types of content to be displayed. If a frame doesn't work as expected on mobile, it can be disabled.")
                 .addToggle(t => {
@@ -82,7 +91,7 @@ export class CustomFramesSettingTab extends PluginSettingTab {
                         await this.plugin.saveSettings();
                     });
                 });
-            new Setting(this.containerEl)
+            new Setting(content)
                 .setName("Page Zoom")
                 .setDesc("The zoom that this frame's page should be displayed with, as a percentage.")
                 .addText(t => {
@@ -93,7 +102,7 @@ export class CustomFramesSettingTab extends PluginSettingTab {
                         await this.plugin.saveSettings();
                     });
                 });
-            new Setting(this.containerEl)
+            new Setting(content)
                 .setName("Additional CSS")
                 .setDesc(createFragment(f => {
                     f.createSpan({ text: "A snippet of additional CSS that should be applied to this frame." });
@@ -109,8 +118,7 @@ export class CustomFramesSettingTab extends PluginSettingTab {
                         await this.plugin.saveSettings();
                     });
                 });
-
-            new ButtonComponent(this.containerEl)
+            new ButtonComponent(content)
                 .setButtonText("Remove Frame")
                 .onClick(async () => {
                     this.plugin.settings.frames.remove(frame);
@@ -125,13 +133,13 @@ export class CustomFramesSettingTab extends PluginSettingTab {
         info.createSpan({ text: "Note that Obsidian has to be restarted or reloaded to activate a newly added frame.", cls: "mod-warning" });
 
         let addDiv = this.containerEl.createDiv();
-        addDiv.addClass("custom-frames-add");
         let dropdown = new DropdownComponent(addDiv);
         dropdown.addOption("new", "Custom");
         for (let key of Object.keys(presets))
             dropdown.addOption(key, presets[key].displayName);
         new ButtonComponent(addDiv)
             .setButtonText("Add Frame")
+            .setClass("custom-frames-add")
             .onClick(async () => {
                 let option = dropdown.getValue();
                 if (option == "new") {
diff --git a/styles.css b/styles.css
index 5e89384..db61186 100644
--- a/styles.css
+++ b/styles.css
@@ -11,10 +11,14 @@
 	background-clip: content-box;
 }
 
-.custom-frames-add button {
+.custom-frames-add {
 	margin-left: 10px;
 }
 
+.custom-frames-show {
+	margin-bottom: 18px;
+}
+
 .custom-frames-support {
 	max-width: 50%;
 	width: 400px;