Ellpeck/ObsidianCustomFrames
1
0
Fork 0
mirror of https://github.com/Ellpeck/ObsidianCustomFrames.git synced 2024-12-22 13:19:24 +01:00
Code Issues Projects Releases Wiki Activity

allow adding custom icons to frames, and cleaned up settings menu

Browse source
This commit is contained in:
Ell 2022-03-23 15:26:30 +01:00
parent 7664d04f15
commit a7815a157f
2 changed files with 39 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
README.md
View file

@ -8,16 +8,16 @@ An Obsidian plugin that turns web apps into panes using iframes with custom styl
![A screenshot of the plugin's settings](https://raw.githubusercontent.com/Ellpeck/ObsidianCustomFrames/master/settings.png)
## Usage
To use this plugin, simply go into its settings and add a new frame, either from a preset shipped with the plugin, or a custom one that you can edit yourself. Each frame's tab can be opened using the 'Custom Frames: Open' command.
To use this plugin, simply go into its settings and add a new frame, either from a preset shipped with the plugin, or a custom one that you can edit yourself. Each frame's pane can be opened using the 'Custom Frames: Open' command.
## Presets
By default, Custom Frames comes with a few presets that allow you to get new tabs for popular sites up and running quickly.
- Google Keep, optimized for a narrow side tab
By default, Custom Frames comes with a few presets that allow you to get new panes for popular sites up and running quickly.
- Google Keep, optimized for a narrow pane on the side
If you create a frame that you think other people would like, don't hesitate to create a pull request with [a new preset](https://github.com/Ellpeck/ObsidianCustomFrames/blob/master/main.ts#L8).
## Roadmap
- Allow setting a custom icon for each tab
- ~~Allow setting a custom icon for each pane~~
- Allow displaying custom frames in Markdown code blocks
- Possibly allow executing custom JavaScript in iframes (though security implications still need to be explored)

41
main.ts
View file

@ -8,6 +8,7 @@ const presets: Record<string, CustomFrame> = {
"keep": {
url: "https://keep.google.com",
displayName: "Google Keep",
icon: "files",
minimumWidth: 370,
customCss: `/* hide the menu bar and the "Keep" text */
.PvRhvb-qAWA2, .gb_2d.gb_Zc {
@ -24,6 +25,7 @@ interface CustomFramesSettings {
interface CustomFrame {
url: string;
displayName: string;
icon: string;
minimumWidth: number;
customCss: string;
}
@ -127,7 +129,7 @@ class CustomFrameView extends ItemView {
}
getIcon(): string {
return "documents";
return this.frame.icon ? `lucide-${this.frame.icon}` : "documents";
}
}
@ -143,11 +145,11 @@ class CustomFramesSettingTab extends PluginSettingTab {
display(): void {
this.containerEl.empty();
this.containerEl.createEl("h2", { text: "Custom Frames Settings" });
this.containerEl.createEl("p", { text: "Note that Obsidian has to be restarted or reloaded for most of these settings to take effect." });
this.containerEl.createEl("p", { text: "Note that Obsidian has to be restarted or reloaded for most of these settings to take effect.", cls: "mod-warning" });
new Setting(this.containerEl)
.setName("Frame Padding")
.setDesc("The padding that should be left around the inside of custom frame tabs, in pixels.")
.setDesc("The padding that should be left around the inside of custom frame panes, in pixels.")
.addText(t => {
t.inputEl.type = "number";
t.setValue(String(this.plugin.settings.padding));
@ -171,6 +173,22 @@ class CustomFramesSettingTab extends PluginSettingTab {
await this.plugin.saveSettings();
});
});
new Setting(this.containerEl)
.setName("Icon")
.setDesc(createFragment(f => {
f.createSpan({ text: "The icon that this frame's pane should have." });
f.createEl("br");
f.createSpan({ text: "The names of any " });
f.createEl("a", { text: "Lucide icons", href: "https://lucide.dev/" });
f.createSpan({ text: " can be used." });
}))
.addText(t => {
t.setValue(frame.icon);
t.onChange(async v => {
frame.icon = v;
await this.plugin.saveSettings();
});
});
new Setting(this.containerEl)
.setName("URL")
.setDesc("The URL that should be opened in this frame.")
@ -183,7 +201,11 @@ class CustomFramesSettingTab extends PluginSettingTab {
});
new Setting(this.containerEl)
.setName("Minimum Width")
.setDesc("The width that this frame's tab should be adjusted to automatically if it is lower. Set to 0 to disable. Note that this is only applied on Desktop devices.")
.setDesc(createFragment(f => {
f.createSpan({ text: "The width that this frame's pane should be adjusted to automatically if it is lower. Set to 0 to disable." });
f.createEl("br");
f.createEl("em", { text: "Note that this is only applied on Desktop devices." });
}))
.addText(t => {
t.inputEl.type = "number";
t.setValue(String(frame.minimumWidth));
@ -194,7 +216,11 @@ class CustomFramesSettingTab extends PluginSettingTab {
});
new Setting(this.containerEl)
.setName("Additional CSS")
.setDesc("A snippet of additional CSS that should be applied to this frame. Note that this is only applied on Desktop devices.")
.setDesc(createFragment(f => {
f.createSpan({ text: "A snippet of additional CSS that should be applied to this frame." });
f.createEl("br");
f.createEl("em", { text: "Note that this is only applied on Desktop devices." });
}))
.addTextArea(t => {
t.inputEl.rows = 5;
t.inputEl.cols = 50;
@ -215,7 +241,9 @@ class CustomFramesSettingTab extends PluginSettingTab {
}
this.containerEl.createEl("hr");
this.containerEl.createEl("p", { text: "Create a new frame, either from a preset shipped with the plugin, or a custom one that you can edit yourself. After restarting or reloading Obsidian, each frame's tab can be opened using the 'Custom Frames: Open' command." });
let info = this.containerEl.createEl("p", { text: "Create a new frame, either from a preset shipped with the plugin, or a custom one that you can edit yourself. Each frame's pane can be opened using the 'Custom Frames: Open' command." });
info.createEl("br");
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");
@ -231,6 +259,7 @@ class CustomFramesSettingTab extends PluginSettingTab {
this.plugin.settings.frames.push({
url: "",
displayName: "",
icon: "",
minimumWidth: 0,
customCss: ""
});