diff --git a/src/main.ts b/src/main.ts index 84a1c46..ca00e9c 100644 --- a/src/main.ts +++ b/src/main.ts @@ -320,34 +320,41 @@ class PluginsAnnotationsSettingTab extends PluginSettingTab { display(): void { const { containerEl } = this; - const plugins_pane = createFragment((frag) => { + const createPluginsPaneFragment = (): DocumentFragment => { + return createFragment((frag) => { const em = frag.createEl('em'); const link = frag.createEl('a', { href: '#', text: 'Community plugins'}); link.onclick = () => { this.app.setting.openTabById('community-plugins'); }; - em.appendChild(link) + em.appendChild(link); }); + }; containerEl.empty(); new Setting(containerEl).setName('Annotations').setHeading(); const instructions = createFragment((frag) => { - frag.appendText('Please enter your personal annotations about the installed plugins directly in the '); - frag.appendChild(plugins_pane); - frag.appendText(' pane.'); - }); + const p = frag.createEl('p'); + p.appendText('To add or edit your personal annotations for installed plugins, go to the '); + p.appendChild(createPluginsPaneFragment()); + p.appendText(' pane and click over the ediable annotation field.'); + frag.appendChild(p); + }); - containerEl.appendChild(instructions); + // Append instructions right after the Annotations heading + const instructions_div = containerEl.createDiv(); + instructions_div.classList.add('setting-item'); + instructions_div.appendChild(instructions); new Setting(containerEl).setName('Display').setHeading(); - + new Setting(containerEl) .setName('Hide empty annotations:') .setDesc(createFragment((frag) => { frag.appendText('If this option is enabled, only annotations set by the user will be shown. If you want to insert an annotation to a plugin for the first time, hover with the mouse over the chosen plugin in the '); - frag.appendChild(plugins_pane); + frag.appendChild(createPluginsPaneFragment()); frag.appendText(' pane. The annotation field will appear automatically.'); })) .addToggle(toggle => toggle @@ -357,7 +364,6 @@ class PluginsAnnotationsSettingTab extends PluginSettingTab { await this.plugin.debouncedSaveAnnotations(); })); - new Setting(containerEl) .setName('Delete placeholder text when inserting a new annotation:') .setDesc('If this option is enabled, the placeholder text will be deleted automatically when you start typing a new annotation. If disabled, the placeholder text will be selected for easier replacement. This is a minor customization.') diff --git a/styles/styles.css b/styles/styles.css index bb3e1dc..acc5ad5 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1,24 +1,35 @@ /* styles.css */ /* @settings - name: Plugins Annotations stylesheet id: plugins-annotations-stylesheet settings: - - + - + id: plugin-comment-font-size + title: Annotation Font Size + description: The font size of the annotation text. + type: variable-number + min: 6 + max: 60 + format: px + - + id: plugin-comment-color + title: Annotations color + description: The color of the personal annotations. + type: variable-color + format: hex */ /* Make sure the input field takes the full width of its parent */ .plugin-comment { width: 100%; box-sizing: border-box; /* Ensure padding is included in the element's total width and height */ + color: var(--plugin-comment-color,var(--text-muted)); } .plugin-comment-annotation.plugin-comment-placeholder { color: #CCCCCC; /* Standard placeholder color */ font-style: italic; - font-size: 20px; } .plugin-comment.plugin-comment-placeholder {