Combine the CSS of Attachment and FileProcessorFormField to fileList

diff --git a/com.woltlab.wcf/templates/shared_fileProcessorFormField.tpl b/com.woltlab.wcf/templates/shared_fileProcessorFormField.tpl
index e3d89dbbac22f8787d57f4a4a16f143ff10c1149..678d5bb0d6ddfd263908ea89f614dcb429d20f68 100644 (file)
--- 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 fc0ae3da68a5ddf5742d711ed5d720676db610ad..a1a2eee7d5dcb0930634389bc131ee16ade696da 100644 (file)
--- 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 5e4c801e39cd4f9af74fc5504d2b482a5dac1391..fd4e8535d1e49b738421adf4517a4ab41aa0f13f 100644 (file)
--- 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 6c8dbf4dfa4b85ddc9a677e8e212c24638b99fa4..1d4901371f5990b2e6d3a0399d4510cc16a0d8f1 100644 (file)
--- 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 67e741e7653965a2fe72d7366e8adf2da7bff735..bf794ac4ad0d071efdcd852ccb76d856f4d3389f 100644 (file)
--- 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 64aa59d3b719d3a40054cedd0aae2ba34e10208c..1d0e01bd26ff9af83f2d9f6cf915d6ab3f7d1a5b 100644 (file)
--- 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 dc01262bb48865f253405bd93faa57beb81dd0a1..4abc8d785e645850b7efe4f3125f61c4ff05b7f8 100644 (file)
--- 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 0af744b1902861a3d80473bfa9af2ee1749df21f..6c30e974fbdeb5b2d6de9a3c831c48614a645e48 100644 (file)
--- 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 (file)
index 0000000..cb0e140
--- /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 8cc952798dd2b243509110adff40844cafdb462e..f09220b2a29340ecdfddc70a0f010c389b6b820c 100644 (file)
--- 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 {
-
-}