mirror of
https://github.com/Ellpeck/ObsidianCustomFrames.git
synced 2024-11-22 09:43:30 +01:00
parent
5616d76bb5
commit
83bf0fbf96
2 changed files with 22 additions and 10 deletions
|
@ -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") {
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue