From d6d598eee14a894c0ef06b6291a51f21f0c67967 Mon Sep 17 00:00:00 2001 From: Jeremy Valentine <38669521+valentine195@users.noreply.github.com> Date: Tue, 1 Feb 2022 22:07:10 -0500 Subject: [PATCH] feat: adds Drop Shadow setting to remove drop shadow --- src/@types/index.ts | 1 + src/assets/main.css | 22 ++++++++++++ src/main.ts | 9 ++++- src/settings.ts | 83 ++++++++++++++++++++++++++------------------- 4 files changed, 79 insertions(+), 36 deletions(-) diff --git a/src/@types/index.ts b/src/@types/index.ts index 67cfc0f..ec7b785 100644 --- a/src/@types/index.ts +++ b/src/@types/index.ts @@ -34,6 +34,7 @@ export interface ISettingsData { parseTitles: boolean; allowMSSyntax: boolean; livePreviewMS: boolean; + dropShadow: boolean; } export type AdmonitionIconDefinition = { diff --git a/src/assets/main.css b/src/assets/main.css index 1c44753..be06dcf 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -317,6 +317,28 @@ input.is-invalid { border-bottom: 1px solid var(--background-modifier-border); } +/** No drop shadow */ +.admonition.no-drop { + box-shadow: none; +} +.admonition.no-drop > .admonition-title.no-title + .admonition-content-holder { + margin-top: 0; + margin-bottom: 0; +} + +.admonition.no-drop .admonition .admonition-content-holder { + border-right: 1px solid rgba(var(--admonition-color), 0.2); + border-bottom: 1px solid rgba(var(--admonition-color), 0.2); +} +.admonition.no-drop + .admonition + .admonition-title.no-title + + .admonition-content-holder { + border-top: 1px solid rgba(var(--admonition-color), 0.2); + margin-top: 0; + margin-bottom: 0; +} + /** Live Preview */ .is-live-preview .admonition { margin-top: var(--admonition-margin-top-lp); diff --git a/src/main.ts b/src/main.ts index d4bd1a1..3562665 100644 --- a/src/main.ts +++ b/src/main.ts @@ -125,7 +125,8 @@ const DEFAULT_APP_SETTINGS: ISettingsData = { injectColor: true, parseTitles: true, allowMSSyntax: true, - livePreviewMS: true + livePreviewMS: true, + dropShadow: true }; export default class ObsidianAdmonition extends Plugin { @@ -1318,6 +1319,9 @@ ${editor.getDoc().getSelection()}\n--- admonition\n` if (collapse) { titleEl.createDiv("collapser").createDiv("handle"); } + if (!this.data.dropShadow) { + admonition.addClass("no-drop"); + } return admonition; } getAdmonitionContentElement( @@ -1447,6 +1451,9 @@ ${editor.getDoc().getSelection()}\n--- admonition\n` if (collapse) { titleEl.createDiv("collapser").createDiv("handle"); } + if (!this.data.dropShadow) { + admonition.addClass("no-drop"); + } return admonition; } } diff --git a/src/settings.ts b/src/settings.ts index e4f9fdd..b8c4120 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -47,6 +47,44 @@ export default class AdmonitionSetting extends PluginSettingTab { this.containerEl.addClass("admonition-settings"); this.containerEl.createEl("h2", { text: t("Admonition Settings") }); + const admonitionEl = this.containerEl.createDiv( + "admonitions-nested-settings" + ); + new Setting(admonitionEl) + .setName(t("Add New")) + .setDesc(t("Add a new Admonition type.")) + .addButton((button: ButtonComponent): ButtonComponent => { + let b = button + .setTooltip(t("Add Additional")) + .setButtonText("+") + .onClick(async () => { + let modal = new SettingsModal(this.plugin); + + modal.onClose = async () => { + if (modal.saved) { + this.plugin.addAdmonition({ + type: modal.type, + color: modal.color, + icon: modal.icon, + command: false, + title: modal.title, + injectColor: modal.injectColor, + noTitle: modal.noTitle, + copy: modal.copy + }); + this.display(); + } + }; + + modal.open(); + }); + + return b; + }); + + this.additionalEl = admonitionEl.createDiv("additional"); + await this.buildTypes(); + this.buildAdmonitions( this.containerEl.createEl("details", { cls: "admonitions-nested-settings", @@ -88,6 +126,16 @@ export default class AdmonitionSetting extends PluginSettingTab { new Setting(summary).setHeading().setName("Admonitions"); summary.createDiv("collapser").createDiv("handle"); + new Setting(containerEl) + .setName("Add Drop Shadow") + .setDesc("A drop shadow will be added to admonitions.") + .addToggle((t) => { + t.setValue(this.plugin.data.dropShadow).onChange(async (v) => { + this.plugin.data.dropShadow = v; + this.display(); + await this.plugin.saveSettings(); + }); + }); new Setting(containerEl) .setName(t("Collapsible by Default")) .setDesc( @@ -185,41 +233,6 @@ export default class AdmonitionSetting extends PluginSettingTab { await this.buildTypes(); }) ); - - new Setting(containerEl) - .setName(t("Add New")) - .setDesc(t("Add a new Admonition type.")) - .addButton((button: ButtonComponent): ButtonComponent => { - let b = button - .setTooltip(t("Add Additional")) - .setButtonText("+") - .onClick(async () => { - let modal = new SettingsModal(this.plugin); - - modal.onClose = async () => { - if (modal.saved) { - this.plugin.addAdmonition({ - type: modal.type, - color: modal.color, - icon: modal.icon, - command: false, - title: modal.title, - injectColor: modal.injectColor, - noTitle: modal.noTitle, - copy: modal.copy - }); - this.display(); - } - }; - - modal.open(); - }); - - return b; - }); - - this.additionalEl = containerEl.createDiv("additional"); - await this.buildTypes(); } buildAdvanced(containerEl: HTMLDetailsElement) {