fix: settings ui fixes

javalent · May 4, 2023 · fd46a25 · fd46a25
1 parent 84215bf
commit fd46a25
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -76,28 +76,28 @@
     align-items: unset;
 }
 
-.has-invalid-message {
+.admonition-settings-modal .has-invalid-message {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr auto;
     grid-template-rows: 1fr 1fr;
     grid-template-areas:
         "text image"
         "inv inv";
 }
 
-input.is-invalid {
+.admonition-settings-modal input.is-invalid {
     border-color: #dc3545 !important;
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
     background-repeat: no-repeat;
     background-position: right calc(0.375em + 0.1875rem) center;
     background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
 }
 
-.admonition-type-setting input {
+.admonition-settings-modal .admonition-type-setting input {
     grid-column: span 2;
 }
 
-.invalid-feedback {
+.admonition-settings-modal .invalid-feedback {
     display: block;
     grid-area: inv;
     width: 100%;

diff --git a/src/settings.ts b/src/settings.ts
@@ -1037,9 +1037,11 @@ class SettingsModal extends Modal {
     admonitionPreview: HTMLElement;
     copy: boolean;
     originalType: string;
+    editing = false;
     constructor(public plugin: ObsidianAdmonition, admonition?: Admonition) {
         super(plugin.app);
         if (admonition) {
+            this.editing = true;
             this.color = admonition.color;
             this.icon = admonition.icon;
             this.type = admonition.type;
@@ -1052,6 +1054,8 @@ class SettingsModal extends Modal {
     }
 
     async display() {
+        this.containerEl.addClass("admonition-settings-modal");
+        this.titleEl.setText(`${this.editing ? "Edit" : "Add"} Admonition`);
         let { contentEl } = this;
 
         contentEl.empty();