From e7dbb6b226fcc325daa3e821d5d2f9bfe9143aba Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Mon, 29 Apr 2024 16:53:42 +0200 Subject: [PATCH] Add some basic styling for uploaded attachments --- .../Core/Component/Attachment/List.ts | 21 +++++++-- .../Core/Component/File/woltlab-core-file.ts | 18 +++++++- .../Core/Component/Attachment/List.js | 17 +++++-- .../Core/Component/File/woltlab-core-file.js | 15 ++++++- .../install/files/style/ui/attachment.scss | 44 +++++++++++++++++++ 5 files changed, 104 insertions(+), 11 deletions(-) diff --git a/ts/WoltLabSuite/Core/Component/Attachment/List.ts b/ts/WoltLabSuite/Core/Component/Attachment/List.ts index 1dd33f8c63..9ec565cd1c 100644 --- 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 11cfc1d024..200893b4b6 100644 --- 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 4d8df96bb2..e6c59bf815 100644 --- 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 af4bad8d47..21a4cb7fb9 100644 --- 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 6c30e974fb..c7ed608a63 100644 --- 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; -- 2.20.1