Add some basic styling for uploaded attachments

diff --git a/ts/WoltLabSuite/Core/Component/Attachment/List.ts b/ts/WoltLabSuite/Core/Component/Attachment/List.ts
index 1dd33f8c63a1a4de7f27b16100f04465cf4484c6..9ec565cd1c53265f85c1d50b90f847cb03988794 100644 (file)
--- a/ts/WoltLabSuite/Core/Component/Attachment/List.ts
+++ b/ts/WoltLabSuite/Core/Component/Attachment/List.ts
@@ -11,8 +11,17 @@ type FileProcessorData = {
 
 function upload(fileList: HTMLElement, file: WoltlabCoreFileElement, editorId: string): void {
   const element = document.createElement("li");
-  element.classList.add("attachment__list__item");
-  element.append(file);
+  element.classList.add("attachment__item");
+
+  const fileWrapper = document.createElement("div");
+  fileWrapper.classList.add("attachment__item__file");
+  fileWrapper.append(file);
+
+  const filename = document.createElement("div");
+  filename.classList.add("attachment__item__filename");
+  filename.textContent = file.filename!;
+
+  element.append(fileWrapper, filename);
   fileList.append(element);
 
   void file.ready.then(() => {
@@ -28,7 +37,9 @@ function upload(fileList: HTMLElement, file: WoltlabCoreFileElement, editorId: s
       return;
     }
 
-    element.append(
+    const buttonList = document.createElement("div");
+    buttonList.classList.add("attachment__item__buttons");
+    buttonList.append(
       getDeleteAttachButton(fileId, (data as FileProcessorData).attachmentID, editorId, element),
       getInsertAttachBbcodeButton(
         (data as FileProcessorData).attachmentID,
@@ -45,9 +56,11 @@ function upload(fileList: HTMLElement, file: WoltlabCoreFileElement, editorId: s
 
       const url = file.thumbnails.find((thumbnail) => thumbnail.identifier === "")?.link;
       if (url !== undefined) {
-        element.append(getInsertThumbnailButton((data as FileProcessorData).attachmentID, url, editorId));
+        buttonList.append(getInsertThumbnailButton((data as FileProcessorData).attachmentID, url, editorId));
       }
     }
+
+    element.append(buttonList);
   });
 }
 

diff --git a/ts/WoltLabSuite/Core/Component/File/woltlab-core-file.ts b/ts/WoltLabSuite/Core/Component/File/woltlab-core-file.ts
index 11cfc1d02454a1d8ae9bb09b6df8ffbebc72ed8b..200893b4b61dc791674325cca3344fa41997805f 100644 (file)
--- a/ts/WoltLabSuite/Core/Component/File/woltlab-core-file.ts
+++ b/ts/WoltLabSuite/Core/Component/File/woltlab-core-file.ts
@@ -1,3 +1,5 @@
+import { getExtensionByMimeType, getIconNameByFilename } from "WoltLabSuite/Core/FileUtil";
+
 const enum State {
   Initial,
   Uploading,
@@ -182,7 +184,21 @@ export class WoltlabCoreFileElement extends HTMLElement {
   }
 
   get iconName(): string | undefined {
-    return this.dataset.iconName;
+    if (this.mimeType === undefined) {
+      return undefined;
+    }
+
+    const fileExtension = getExtensionByMimeType(this.mimeType);
+    if (fileExtension === "") {
+      return undefined;
+    }
+
+    const iconName = getIconNameByFilename(fileExtension);
+    if (iconName === "") {
+      return undefined;
+    }
+
+    return `file-${iconName}`;
   }
 
   get previewUrl(): string | undefined {

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 4d8df96bb2e6f62f6d4e01c2c5e489ea3e990785..e6c59bf81522aea1b4161031655c72a92f8153fb 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/List.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/List.js
@@ -4,8 +4,14 @@ define(["require", "exports", "WoltLabSuite/Core/Api/Files/DeleteFile", "../Cked
     exports.setup = void 0;
     function upload(fileList, file, editorId) {
         const element = document.createElement("li");
-        element.classList.add("attachment__list__item");
-        element.append(file);
+        element.classList.add("attachment__item");
+        const fileWrapper = document.createElement("div");
+        fileWrapper.classList.add("attachment__item__file");
+        fileWrapper.append(file);
+        const filename = document.createElement("div");
+        filename.classList.add("attachment__item__filename");
+        filename.textContent = file.filename;
+        element.append(fileWrapper, filename);
         fileList.append(element);
         void file.ready.then(() => {
             const data = file.data;
@@ -18,7 +24,9 @@ define(["require", "exports", "WoltLabSuite/Core/Api/Files/DeleteFile", "../Cked
                 // TODO: error handling
                 return;
             }
-            element.append(getDeleteAttachButton(fileId, data.attachmentID, editorId, element), getInsertAttachBbcodeButton(data.attachmentID, file.isImage() && file.link ? file.link : "", editorId));
+            const buttonList = document.createElement("div");
+            buttonList.classList.add("attachment__item__buttons");
+            buttonList.append(getDeleteAttachButton(fileId, data.attachmentID, editorId, element), getInsertAttachBbcodeButton(data.attachmentID, file.isImage() && file.link ? file.link : "", editorId));
             if (file.isImage()) {
                 const thumbnail = file.thumbnails.find((thumbnail) => thumbnail.identifier === "tiny");
                 if (thumbnail !== undefined) {
@@ -26,9 +34,10 @@ define(["require", "exports", "WoltLabSuite/Core/Api/Files/DeleteFile", "../Cked
                 }
                 const url = file.thumbnails.find((thumbnail) => thumbnail.identifier === "")?.link;
                 if (url !== undefined) {
-                    element.append(getInsertThumbnailButton(data.attachmentID, url, editorId));
+                    buttonList.append(getInsertThumbnailButton(data.attachmentID, url, editorId));
                 }
             }
+            element.append(buttonList);
         });
     }
     function getDeleteAttachButton(fileId, attachmentId, editorId, element) {

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/File/woltlab-core-file.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/File/woltlab-core-file.js
index af4bad8d47e2ce15e3e96d102a3be969a93fd86c..21a4cb7fb9123b6f6df5741722396e6889bfe24e 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/File/woltlab-core-file.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/File/woltlab-core-file.js
@@ -1,4 +1,4 @@
-define(["require", "exports"], function (require, exports) {
+define(["require", "exports", "WoltLabSuite/Core/FileUtil"], function (require, exports, FileUtil_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.WoltlabCoreFileElement = exports.Thumbnail = void 0;
@@ -143,7 +143,18 @@ define(["require", "exports"], function (require, exports) {
             return this.#fileId;
         }
         get iconName() {
-            return this.dataset.iconName;
+            if (this.mimeType === undefined) {
+                return undefined;
+            }
+            const fileExtension = (0, FileUtil_1.getExtensionByMimeType)(this.mimeType);
+            if (fileExtension === "") {
+                return undefined;
+            }
+            const iconName = (0, FileUtil_1.getIconNameByFilename)(fileExtension);
+            if (iconName === "") {
+                return undefined;
+            }
+            return `file-${iconName}`;
         }
         get previewUrl() {
             return this.dataset.previewUrl;

diff --git a/wcfsetup/install/files/style/ui/attachment.scss b/wcfsetup/install/files/style/ui/attachment.scss
index 6c30e974fbdeb5b2d6de9a3c831c48614a645e48..c7ed608a63a5076d5572c862c8afe5f47c54fcd3 100644 (file)
--- a/wcfsetup/install/files/style/ui/attachment.scss
+++ b/wcfsetup/install/files/style/ui/attachment.scss
@@ -136,6 +136,50 @@ html[data-color-scheme="dark"] {
 }
 
 /* attachments tab in editor */
+.attachment__list {
+       display: grid;
+       gap: 10px;
+       grid-auto-flow: column;
+       // 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;
+       gap: 10px;
+       grid-template-areas:
+               "file filename"
+               "file buttons";
+       grid-template-columns: 64px auto;
+       padding: 10px;
+}
+
+.attachment__item__file {
+       grid-area: file;
+}
+
+.attachment__item__filename {
+       font-size: 12px;
+       grid-area: filename;
+       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;