feat: adds Drop Shadow setting to remove drop shadow

javalent · Feb 2, 2022 · d6d598e · d6d598e
1 parent a381c78
commit d6d598e
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 36 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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) {