From 34c16291be0d5f2fee4c3a5e8d7db847facbd854 Mon Sep 17 00:00:00 2001
From: Cyperghost <olaf_schmitz_1@t-online.de>
Date: Thu, 20 Jun 2024 13:24:54 +0200
Subject: [PATCH] Combine the CSS of Attachment and FileProcessorFormField to
 fileList

---
 .../shared_fileProcessorFormField.tpl         |  4 +-
 .../Core/Component/Attachment/Entry.ts        | 14 ++--
 .../Core/Component/Attachment/List.ts         |  4 +-
 .../Builder/Field/Controller/FileProcessor.ts | 50 ++++++++-------
 .../Core/Component/Attachment/Entry.js        | 14 ++--
 .../Core/Component/Attachment/List.js         |  4 +-
 .../Builder/Field/Controller/FileProcessor.js | 49 +++++++-------
 .../install/files/style/ui/attachment.scss    | 64 -------------------
 wcfsetup/install/files/style/ui/fileList.scss | 63 ++++++++++++++++++
 .../install/files/style/ui/uploadHandler.scss |  5 --
 10 files changed, 138 insertions(+), 133 deletions(-)
 create mode 100644 wcfsetup/install/files/style/ui/fileList.scss

diff --git a/com.woltlab.wcf/templates/shared_fileProcessorFormField.tpl b/com.woltlab.wcf/templates/shared_fileProcessorFormField.tpl
index e3d89dbbac..678d5bb0d6 100644
--- a/com.woltlab.wcf/templates/shared_fileProcessorFormField.tpl
+++ b/com.woltlab.wcf/templates/shared_fileProcessorFormField.tpl
@@ -7,9 +7,9 @@
 		{/if}
 	</div>
 {else}
-	<ul class="fileUpload__fileList">
+	<ul class="fileList">
 		{foreach from=$files item=file}
-			<li class="fileUpload__fileList__item">
+			<li class="fileList__item">
 				{unsafe:$file->toHtmlElement()}
 			</li>
 		{/foreach}
diff --git a/ts/WoltLabSuite/Core/Component/Attachment/Entry.ts b/ts/WoltLabSuite/Core/Component/Attachment/Entry.ts
index fc0ae3da68..a1a2eee7d5 100644
--- a/ts/WoltLabSuite/Core/Component/Attachment/Entry.ts
+++ b/ts/WoltLabSuite/Core/Component/Attachment/Entry.ts
@@ -56,7 +56,7 @@ function fileInitializationCompleted(element: HTMLElement, file: WoltlabCoreFile
       link.title = file.filename;
       link.textContent = file.filename;
 
-      const filename = element.querySelector(".attachment__item__filename")!;
+      const filename = element.querySelector(".fileList__item__filename")!;
       filename.innerHTML = "";
       filename.append(link);
 
@@ -95,7 +95,7 @@ function fileInitializationCompleted(element: HTMLElement, file: WoltlabCoreFile
   moreOptions.innerHTML = '<fa-icon name="ellipsis-vertical"></fa-icon>';
 
   const buttonList = document.createElement("div");
-  buttonList.classList.add("attachment__item__buttons");
+  buttonList.classList.add("fileList__item__buttons");
   insertButton.classList.add("button", "small");
   buttonList.append(insertButton, moreOptions);
 
@@ -179,7 +179,7 @@ function fileInitializationFailed(element: HTMLElement, file: WoltlabCoreFileEle
 }
 
 function markElementAsErroneous(element: HTMLElement, errorMessage: string): void {
-  element.classList.add("attachment__item--error");
+  element.classList.add("fileList__item--error");
 
   const errorElement = document.createElement("div");
   errorElement.classList.add("attachemnt__item__errorMessage");
@@ -190,18 +190,18 @@ function markElementAsErroneous(element: HTMLElement, errorMessage: string): voi
 
 export function createAttachmentFromFile(file: WoltlabCoreFileElement, editor: HTMLElement) {
   const element = document.createElement("li");
-  element.classList.add("attachment__item");
+  element.classList.add("fileList__item", "attachment__item");
 
   const fileWrapper = document.createElement("div");
-  fileWrapper.classList.add("attachment__item__file");
+  fileWrapper.classList.add("fileList__item__file");
   fileWrapper.append(file);
 
   const filename = document.createElement("div");
-  filename.classList.add("attachment__item__filename");
+  filename.classList.add("fileList__item__filename");
   filename.textContent = file.filename || file.dataset.filename!;
 
   const fileSize = document.createElement("div");
-  fileSize.classList.add("attachment__item__fileSize");
+  fileSize.classList.add("fileList__item__fileSize");
   fileSize.textContent = formatFilesize(file.fileSize || parseInt(file.dataset.fileSize!));
 
   element.append(fileWrapper, filename, fileSize);
diff --git a/ts/WoltLabSuite/Core/Component/Attachment/List.ts b/ts/WoltLabSuite/Core/Component/Attachment/List.ts
index 5e4c801e39..fd4e8535d1 100644
--- a/ts/WoltLabSuite/Core/Component/Attachment/List.ts
+++ b/ts/WoltLabSuite/Core/Component/Attachment/List.ts
@@ -31,10 +31,10 @@ export function setup(editorId: string): void {
     });
   }
 
-  let fileList = container.querySelector<HTMLElement>(".attachment__list");
+  let fileList = container.querySelector<HTMLElement>(".fileList");
   if (fileList === null) {
     fileList = document.createElement("ol");
-    fileList.classList.add("attachment__list");
+    fileList.classList.add("fileList");
     uploadButton.insertAdjacentElement("afterend", fileList);
   }
 
diff --git a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
index 6c8dbf4dfa..1d4901371f 100644
--- a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
+++ b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
@@ -42,14 +42,14 @@ export class FileProcessor {
   }
 
   get classPrefix(): string {
-    return this.showBigPreview ? "fileUpload__preview__" : "fileUpload__fileList__";
+    return this.showBigPreview ? "fileUpload__preview__" : "fileList__";
   }
 
   get showBigPreview(): boolean {
     return this.#singleFileUpload && this.#imageOnly;
   }
 
-  protected addButtons(element: WoltlabCoreFileElement): void {
+  protected addButtons(container: HTMLElement, element: WoltlabCoreFileElement): void {
     const buttons = document.createElement("ul");
     buttons.classList.add("buttonList");
     buttons.classList.add(this.classPrefix + "item__buttons");
@@ -60,7 +60,7 @@ export class FileProcessor {
       this.addReplaceButton(element, buttons);
     }
 
-    element.parentElement!.append(buttons);
+    container.append(buttons);
   }
 
   #markElementUploadHasFailed(container: HTMLElement, element: WoltlabCoreFileElement, reason: unknown): void {
@@ -161,36 +161,42 @@ export class FileProcessor {
     }
   }
 
-  async #registerFile(element: WoltlabCoreFileElement, elementContainer: HTMLElement | null = null): Promise<void> {
-    if (elementContainer === null) {
+  async #registerFile(element: WoltlabCoreFileElement, container: HTMLElement | null = null): Promise<void> {
+    if (container === null) {
       if (this.showBigPreview) {
-        elementContainer = this.#container.querySelector(".fileUpload__preview");
-        if (elementContainer === null) {
-          elementContainer = document.createElement("div");
-          elementContainer.classList.add("fileUpload__preview");
-          this.#uploadButton.insertAdjacentElement("beforebegin", elementContainer);
+        container = this.#container.querySelector(".fileUpload__preview");
+        if (container === null) {
+          container = document.createElement("div");
+          container.classList.add("fileUpload__preview");
+          this.#uploadButton.insertAdjacentElement("beforebegin", container);
         }
+        container.append(element);
       } else {
-        elementContainer = document.createElement("li");
-        elementContainer.classList.add("fileUpload__fileList__item");
-        this.#container.querySelector(".fileUpload__fileList")!.append(elementContainer);
+        container = document.createElement("li");
+        container.classList.add("fileList__item");
+        this.#container.querySelector(".fileList")!.append(container);
       }
-      elementContainer.append(element);
     }
 
-    // add filename and filesize information
     if (!this.showBigPreview) {
+      // create a new container for the file element
+      const fileContainer = document.createElement("div");
+      fileContainer.classList.add(this.classPrefix + "item__file");
+      fileContainer.append(element);
+      container.append(fileContainer);
+
+      // add filename and filesize information
       const filename = document.createElement("div");
       filename.classList.add(this.classPrefix + "item__filename");
       filename.textContent = element.filename || element.dataset.filename!;
 
-      elementContainer.append(filename);
+      container.append(filename);
 
       const fileSize = document.createElement("div");
       fileSize.classList.add(this.classPrefix + "item__fileSize");
       fileSize.textContent = formatFilesize(element.fileSize || parseInt(element.dataset.fileSize!));
 
-      elementContainer.append(fileSize);
+      container.append(fileSize);
     }
 
     try {
@@ -213,10 +219,10 @@ export class FileProcessor {
           tmpContainer.append(element);
           this.#uploadButton.insertAdjacentElement("afterend", tmpContainer);
 
-          elementContainer = tmpContainer;
+          container = tmpContainer;
         }
       }
-      this.#markElementUploadHasFailed(elementContainer, element, reason);
+      this.#markElementUploadHasFailed(container, element, reason);
       return;
     }
 
@@ -249,7 +255,7 @@ export class FileProcessor {
           previewImage.classList.add(this.classPrefix + "item__previewImage");
           filenameLink.append(previewImage);
 
-          const filenameContainer = elementContainer.querySelector("." + this.classPrefix + "item__filename")!;
+          const filenameContainer = container.querySelector("." + this.classPrefix + "item__filename")!;
           filenameContainer.innerHTML = "";
           filenameContainer.append(filenameLink);
 
@@ -262,8 +268,8 @@ export class FileProcessor {
     input.type = "hidden";
     input.name = this.#singleFileUpload ? this.#fieldId : this.#fieldId + "[]";
     input.value = element.fileId!.toString();
-    elementContainer.append(input);
+    container.append(input);
 
-    this.addButtons(element);
+    this.addButtons(container, element);
   }
 }
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/Entry.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/Entry.js
index 67e741e765..bf794ac4ad 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/Entry.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/Entry.js
@@ -43,7 +43,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/FileUtil", "WoltLabSui
                 link.classList.add("jsImageViewer");
                 link.title = file.filename;
                 link.textContent = file.filename;
-                const filename = element.querySelector(".attachment__item__filename");
+                const filename = element.querySelector(".fileList__item__filename");
                 filename.innerHTML = "";
                 filename.append(link);
                 Listener_1.default.trigger();
@@ -73,7 +73,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/FileUtil", "WoltLabSui
         moreOptions.setAttribute("aria-label", (0, Language_1.getPhrase)("wcf.global.button.more"));
         moreOptions.innerHTML = '<fa-icon name="ellipsis-vertical"></fa-icon>';
         const buttonList = document.createElement("div");
-        buttonList.classList.add("attachment__item__buttons");
+        buttonList.classList.add("fileList__item__buttons");
         insertButton.classList.add("button", "small");
         buttonList.append(insertButton, moreOptions);
         element.append(buttonList);
@@ -135,7 +135,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/FileUtil", "WoltLabSui
         markElementAsErroneous(element, errorMessage);
     }
     function markElementAsErroneous(element, errorMessage) {
-        element.classList.add("attachment__item--error");
+        element.classList.add("fileList__item--error");
         const errorElement = document.createElement("div");
         errorElement.classList.add("attachemnt__item__errorMessage");
         errorElement.textContent = errorMessage;
@@ -143,15 +143,15 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/FileUtil", "WoltLabSui
     }
     function createAttachmentFromFile(file, editor) {
         const element = document.createElement("li");
-        element.classList.add("attachment__item");
+        element.classList.add("fileList__item", "attachment__item");
         const fileWrapper = document.createElement("div");
-        fileWrapper.classList.add("attachment__item__file");
+        fileWrapper.classList.add("fileList__item__file");
         fileWrapper.append(file);
         const filename = document.createElement("div");
-        filename.classList.add("attachment__item__filename");
+        filename.classList.add("fileList__item__filename");
         filename.textContent = file.filename || file.dataset.filename;
         const fileSize = document.createElement("div");
-        fileSize.classList.add("attachment__item__fileSize");
+        fileSize.classList.add("fileList__item__fileSize");
         fileSize.textContent = (0, FileUtil_1.formatFilesize)(file.fileSize || parseInt(file.dataset.fileSize));
         element.append(fileWrapper, filename, fileSize);
         void file.ready
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/List.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/List.js
index 64aa59d3b7..1d0e01bd26 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/List.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/List.js
@@ -22,10 +22,10 @@ define(["require", "exports", "./Entry", "../Ckeditor/Event", "../File/woltlab-c
                 },
             });
         }
-        let fileList = container.querySelector(".attachment__list");
+        let fileList = container.querySelector(".fileList");
         if (fileList === null) {
             fileList = document.createElement("ol");
-            fileList.classList.add("attachment__list");
+            fileList.classList.add("fileList");
             uploadButton.insertAdjacentElement("afterend", fileList);
         }
         uploadButton.addEventListener("uploadStart", (event) => {
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.js
index dc01262bb4..4abc8d785e 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.js
@@ -35,12 +35,12 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
             });
         }
         get classPrefix() {
-            return this.showBigPreview ? "fileUpload__preview__" : "fileUpload__fileList__";
+            return this.showBigPreview ? "fileUpload__preview__" : "fileList__";
         }
         get showBigPreview() {
             return this.#singleFileUpload && this.#imageOnly;
         }
-        addButtons(element) {
+        addButtons(container, element) {
             const buttons = document.createElement("ul");
             buttons.classList.add("buttonList");
             buttons.classList.add(this.classPrefix + "item__buttons");
@@ -48,7 +48,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
             if (this.#singleFileUpload) {
                 this.addReplaceButton(element, buttons);
             }
-            element.parentElement.append(buttons);
+            container.append(buttons);
         }
         #markElementUploadHasFailed(container, element, reason) {
             if (reason instanceof Error) {
@@ -135,33 +135,38 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
                 element.parentElement.remove();
             }
         }
-        async #registerFile(element, elementContainer = null) {
-            if (elementContainer === null) {
+        async #registerFile(element, container = null) {
+            if (container === null) {
                 if (this.showBigPreview) {
-                    elementContainer = this.#container.querySelector(".fileUpload__preview");
-                    if (elementContainer === null) {
-                        elementContainer = document.createElement("div");
-                        elementContainer.classList.add("fileUpload__preview");
-                        this.#uploadButton.insertAdjacentElement("beforebegin", elementContainer);
+                    container = this.#container.querySelector(".fileUpload__preview");
+                    if (container === null) {
+                        container = document.createElement("div");
+                        container.classList.add("fileUpload__preview");
+                        this.#uploadButton.insertAdjacentElement("beforebegin", container);
                     }
+                    container.append(element);
                 }
                 else {
-                    elementContainer = document.createElement("li");
-                    elementContainer.classList.add("fileUpload__fileList__item");
-                    this.#container.querySelector(".fileUpload__fileList").append(elementContainer);
+                    container = document.createElement("li");
+                    container.classList.add("fileList__item");
+                    this.#container.querySelector(".fileList").append(container);
                 }
-                elementContainer.append(element);
             }
-            // add filename and filesize information
             if (!this.showBigPreview) {
+                // create a new container for the file element
+                const fileContainer = document.createElement("div");
+                fileContainer.classList.add(this.classPrefix + "item__file");
+                fileContainer.append(element);
+                container.append(fileContainer);
+                // add filename and filesize information
                 const filename = document.createElement("div");
                 filename.classList.add(this.classPrefix + "item__filename");
                 filename.textContent = element.filename || element.dataset.filename;
-                elementContainer.append(filename);
+                container.append(filename);
                 const fileSize = document.createElement("div");
                 fileSize.classList.add(this.classPrefix + "item__fileSize");
                 fileSize.textContent = (0, FileUtil_1.formatFilesize)(element.fileSize || parseInt(element.dataset.fileSize));
-                elementContainer.append(fileSize);
+                container.append(fileSize);
             }
             try {
                 await element.ready;
@@ -181,10 +186,10 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
                         const tmpContainer = document.createElement("div");
                         tmpContainer.append(element);
                         this.#uploadButton.insertAdjacentElement("afterend", tmpContainer);
-                        elementContainer = tmpContainer;
+                        container = tmpContainer;
                     }
                 }
-                this.#markElementUploadHasFailed(elementContainer, element, reason);
+                this.#markElementUploadHasFailed(container, element, reason);
                 return;
             }
             if (this.showBigPreview) {
@@ -215,7 +220,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
                         previewImage.loading = "lazy";
                         previewImage.classList.add(this.classPrefix + "item__previewImage");
                         filenameLink.append(previewImage);
-                        const filenameContainer = elementContainer.querySelector("." + this.classPrefix + "item__filename");
+                        const filenameContainer = container.querySelector("." + this.classPrefix + "item__filename");
                         filenameContainer.innerHTML = "";
                         filenameContainer.append(filenameLink);
                         Listener_1.default.trigger();
@@ -226,8 +231,8 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
             input.type = "hidden";
             input.name = this.#singleFileUpload ? this.#fieldId : this.#fieldId + "[]";
             input.value = element.fileId.toString();
-            elementContainer.append(input);
-            this.addButtons(element);
+            container.append(input);
+            this.addButtons(container, element);
         }
     }
     exports.FileProcessor = FileProcessor;
diff --git a/wcfsetup/install/files/style/ui/attachment.scss b/wcfsetup/install/files/style/ui/attachment.scss
index 0af744b190..6c30e974fb 100644
--- a/wcfsetup/install/files/style/ui/attachment.scss
+++ b/wcfsetup/install/files/style/ui/attachment.scss
@@ -136,70 +136,6 @@ html[data-color-scheme="dark"] {
 }
 
 /* attachments tab in editor */
-.attachment__list {
-	display: grid;
-	gap: 10px;
-	grid-auto-flow: row;
-	// TODO: use container queries to make this more dynamic?
-	grid-template-columns: repeat(3, 1fr);
-}
-
-.attachment__list:not(:empty) {
-	margin-top: 20px;
-}
-
-.attachment__item {
-	border: 1px solid var(--wcfContentBorderInner);
-	border-radius: var(--wcfBorderRadius);
-	box-shadow: var(--wcfBoxShadowCard);
-	display: grid;
-	grid-template-areas:
-		"file filename"
-		"file fileSize"
-		"file buttons";
-	grid-template-columns: 80px auto;
-	padding: 10px;
-}
-
-.attachment__item--error {
-	border-color: var(--wcfStatusErrorBorder);
-}
-
-.attachment__item--error .attachment__item__file {
-	color: var(--wcfStatusErrorText);
-}
-
-.attachment__item__file {
-	display: flex;
-	grid-area: file;
-	justify-content: center;
-	margin-right: 10px;
-}
-
-.attachment__item__filename {
-	font-size: 12px;
-	grid-area: filename;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.attachment__item__fileSize {
-	color: var(--wcfContentDimmedText);
-	font-size: 12px;
-	grid-area: fileSize;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.attachment__item__buttons {
-	column-gap: 5px;
-	display: flex;
-	grid-area: buttons;
-	justify-content: end;
-}
-
 .formAttachmentContent {
 	.formAttachmentList {
 		display: flex;
diff --git a/wcfsetup/install/files/style/ui/fileList.scss b/wcfsetup/install/files/style/ui/fileList.scss
new file mode 100644
index 0000000000..cb0e140cf0
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/fileList.scss
@@ -0,0 +1,63 @@
+.fileList {
+	display: grid;
+	gap: 10px;
+	grid-auto-flow: row;
+	// TODO: use container queries to make this more dynamic?
+	grid-template-columns: repeat(3, 1fr);
+}
+
+.fileList:not(:empty) {
+	margin-top: 20px;
+}
+
+.fileList__item {
+	border: 1px solid var(--wcfContentBorderInner);
+	border-radius: var(--wcfBorderRadius);
+	box-shadow: var(--wcfBoxShadowCard);
+	display: grid;
+	grid-template-areas:
+		"file filename"
+		"file fileSize"
+		"file buttons";
+	grid-template-columns: 80px auto;
+	padding: 10px;
+}
+
+.fileList__item--error {
+	border-color: var(--wcfStatusErrorBorder);
+}
+
+.fileList__item--error .fileList__item__file {
+	color: var(--wcfStatusErrorText);
+}
+
+.fileList__item__file {
+	display: flex;
+	grid-area: file;
+	justify-content: center;
+	margin-right: 10px;
+}
+
+.fileList__item__filename {
+	font-size: 12px;
+	grid-area: filename;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.fileList__item__fileSize {
+	color: var(--wcfContentDimmedText);
+	font-size: 12px;
+	grid-area: fileSize;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.fileList__item__buttons {
+	column-gap: 5px;
+	display: flex;
+	grid-area: buttons;
+	justify-content: end;
+}
diff --git a/wcfsetup/install/files/style/ui/uploadHandler.scss b/wcfsetup/install/files/style/ui/uploadHandler.scss
index 8cc952798d..f09220b2a2 100644
--- a/wcfsetup/install/files/style/ui/uploadHandler.scss
+++ b/wcfsetup/install/files/style/ui/uploadHandler.scss
@@ -69,7 +69,6 @@
 	flex-direction: column;
 
 	woltlab-core-file {
-
 		img {
 			max-width: 100%;
 			max-height: 100%;
@@ -80,7 +79,3 @@
 .fileUpload__preview__buttons {
 	margin-top: 5px;
 }
-
-.fileUpload__fileList {
-
-}
-- 
2.20.1