Ellpeck/ObsidianCustomFrames
1
0
Fork 0
mirror of https://github.com/Ellpeck/ObsidianCustomFrames.git synced 2024-11-22 17:48:34 +01:00
Code Issues Projects Releases Wiki Activity

allow collapsing settings sections

Browse source 
Closes #17
This commit is contained in:
Ell 2022-04-08 14:23:05 +02:00
parent 5616d76bb5
commit 83bf0fbf96
2 changed files with 22 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/settings-tab.ts
View file

@ -36,8 +36,17 @@ export class CustomFramesSettingTab extends PluginSettingTab {
for (let frame of this.plugin.settings.frames) { for (let frame of this.plugin.settings.frames) {
let heading = this.containerEl.createEl("h3", { text: frame.displayName || "Unnamed Frame" }); 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") .setName("Display Name")
.setDesc("The display name that this frame should have.") .setDesc("The display name that this frame should have.")
.addText(t => { .addText(t => {
@ -48,7 +57,7 @@ export class CustomFramesSettingTab extends PluginSettingTab {
await this.plugin.saveSettings(); await this.plugin.saveSettings();
}); });
}); });
new Setting(this.containerEl) new Setting(content)
.setName("Icon") .setName("Icon")
.setDesc(createFragment(f => { .setDesc(createFragment(f => {
f.createSpan({ text: "The icon that this frame's pane should have. The names of any " }); 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(); await this.plugin.saveSettings();
}); });
}); });
new Setting(this.containerEl) new Setting(content)
.setName("URL") .setName("URL")
.setDesc("The URL that should be opened in this frame.") .setDesc("The URL that should be opened in this frame.")
.addText(t => { .addText(t => {
@ -72,7 +81,7 @@ export class CustomFramesSettingTab extends PluginSettingTab {
await this.plugin.saveSettings(); await this.plugin.saveSettings();
}); });
}); });
new Setting(this.containerEl) new Setting(content)
.setName("Disable on Mobile") .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.") .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 => { .addToggle(t => {
@ -82,7 +91,7 @@ export class CustomFramesSettingTab extends PluginSettingTab {
await this.plugin.saveSettings(); await this.plugin.saveSettings();
}); });
}); });
new Setting(this.containerEl) new Setting(content)
.setName("Page Zoom") .setName("Page Zoom")
.setDesc("The zoom that this frame's page should be displayed with, as a percentage.") .setDesc("The zoom that this frame's page should be displayed with, as a percentage.")
.addText(t => { .addText(t => {
@ -93,7 +102,7 @@ export class CustomFramesSettingTab extends PluginSettingTab {
await this.plugin.saveSettings(); await this.plugin.saveSettings();
}); });
}); });
new Setting(this.containerEl) new Setting(content)
.setName("Additional CSS") .setName("Additional CSS")
.setDesc(createFragment(f => { .setDesc(createFragment(f => {
f.createSpan({ text: "A snippet of additional CSS that should be applied to this frame." }); 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(); await this.plugin.saveSettings();
}); });
}); });
new ButtonComponent(content)
new ButtonComponent(this.containerEl)
.setButtonText("Remove Frame") .setButtonText("Remove Frame")
.onClick(async () => { .onClick(async () => {
this.plugin.settings.frames.remove(frame); 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" }); 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(); let addDiv = this.containerEl.createDiv();
addDiv.addClass("custom-frames-add");
let dropdown = new DropdownComponent(addDiv); let dropdown = new DropdownComponent(addDiv);
dropdown.addOption("new", "Custom"); dropdown.addOption("new", "Custom");
for (let key of Object.keys(presets)) for (let key of Object.keys(presets))
dropdown.addOption(key, presets[key].displayName); dropdown.addOption(key, presets[key].displayName);
new ButtonComponent(addDiv) new ButtonComponent(addDiv)
.setButtonText("Add Frame") .setButtonText("Add Frame")
.setClass("custom-frames-add")
.onClick(async () => { .onClick(async () => {
let option = dropdown.getValue(); let option = dropdown.getValue();
if (option == "new") { if (option == "new") {

6
styles.css
View file

@ -11,10 +11,14 @@
background-clip: content-box; background-clip: content-box;
} }
.custom-frames-add button { .custom-frames-add {
margin-left: 10px; margin-left: 10px;
} }
.custom-frames-show {
margin-bottom: 18px;
}
.custom-frames-support { .custom-frames-support {
max-width: 50%; max-width: 50%;
width: 400px; width: 400px;