refactor(modal): adjust display for modal editing summary

Enveloppe · Oct 4, 2024 · 9364e7d · 9364e7d
1 parent 810d1a3
commit 9364e7d
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 14 deletions.
diff --git a/src/settings/modals/list_changed.ts b/src/settings/modals/list_changed.ts
@@ -11,7 +11,7 @@ export class ListChangedFiles extends Modal {
 
 	displayListOfFile(toDisplay: string[], contentEl: HTMLElement) {
 		if (!toDisplay.length) return;
-		const ul = contentEl.createEl("ul");
+		const ul = contentEl.createEl("ul", {cls: "list"});
 		toDisplay.forEach((file) => {
 			let emoji = "❓";
 			const ext = file.split(".").pop() ?? "";
@@ -61,33 +61,33 @@ export class ListChangedFiles extends Modal {
 				text: `🗑️ ${i18next.t("modals.listChangedFiles.deleted")}`,
 			});
 			this.displayListOfFile(this.listChanged.deleted, contentEl);
-
-			contentEl.createEl("h2", {
+
+			const span = contentEl.createDiv({cls: "error"});
+			span.createEl("h2", {
 				text: `❌ ${i18next.t("modals.listChangedFiles.error")}`,
-				cls: "error",
 			});
-			contentEl.createEl("h3", {
+			span.createEl("h3", {
 				text: `📤 ${i18next.t("modals.listChangedFiles.unpublished")}`,
 			});
-			this.displayListOfFile(this.listChanged.unpublished, contentEl);
-			contentEl.createEl("h3", {
+			this.displayListOfFile(this.listChanged.unpublished, span);
+			span.createEl("h3", {
 				text: `♻️ ${i18next.t("modals.listChangedFiles.notDeleted")}`,
 			});
-			this.displayListOfFile(this.listChanged.notDeleted, contentEl);
+			this.displayListOfFile(this.listChanged.notDeleted, span);
 		} else {
 			this.listChanged = this.listChanged as Deleted;
 			contentEl.createEl("h3", {
 				text: `🗑️ ${i18next.t("modals.listChangedFiles.deleted")}`,
 			});
 			this.displayListOfFile(this.listChanged.deleted, contentEl);
-			contentEl.createEl("h3", {
+			const span = contentEl.createSpan({cls: "error"});
+			span.createEl("h3", {
 				text: `❌ ${i18next.t("modals.listChangedFiles.error")}`,
-				cls: "error",
 			});
-			contentEl.createEl("h3", {
+			span.createEl("h3", {
 				text: `♻️ ${i18next.t("modals.listChangedFiles.notDeleted")}`,
 			});
-			this.displayListOfFile(this.listChanged.undeleted, contentEl);
+			this.displayListOfFile(this.listChanged.undeleted, span);
 		}
 	}
 

diff --git a/src/styles.css b/src/styles.css
@@ -331,9 +331,26 @@ span.enveloppe.icons {
 	color: var(--color-green);
 }
 
-.enveloppe.list-changed h2.error {
+.enveloppe.list-changed .error {
 	color: var(--text-error);
-	padding: 10px 10px;
+	border-radius: 5px;
+	background-color: rgba(var(--color-red-rgb), 0.1);
+	box-shadow: none;
+	margin-top: 3px;
+	padding-bottom: 10px;
+}
+
+.enveloppe.list-changed .error h3 {
+	margin-left: 1em;
+}
+
+.enveloppe.list-changed .error .list {
+	margin-left: 1em;
+}
+
+.enveloppe.list-changed .error h2 {
+	padding-top: 10px;
+	margin-left: 3px;
 }
 
 .enveloppe.list-changed .emoji {