From: Cyperghost <olaf_schmitz_1@t-online.de>
Date: Mon, 24 Jun 2024 08:18:04 +0000 (+0200)
Subject: Merge branch 'refs/heads/master' into upload-form-field-v2
X-Git-Tag: 6.1.0_Alpha_1~41^2~27
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=3f895d000a6e99732fc184358bc72a5182cc0e84;p=GitHub%2FWoltLab%2FWCF.git

Merge branch 'refs/heads/master' into upload-form-field-v2

# Conflicts:
#	wcfsetup/install/files/style/ui/attachment.scss
---

3f895d000a6e99732fc184358bc72a5182cc0e84
diff --cc ts/WoltLabSuite/Core/Component/Attachment/Entry.ts
index a1a2eee7d5,408b113141..64e75fd04e
--- a/ts/WoltLabSuite/Core/Component/Attachment/Entry.ts
+++ b/ts/WoltLabSuite/Core/Component/Attachment/Entry.ts
@@@ -188,12 -188,44 +188,44 @@@ function markElementAsErroneous(element
    element.append(errorElement);
  }
  
+ function trackUploadProgress(element: HTMLElement, file: WoltlabCoreFileElement): void {
+   const progress = document.createElement("progress");
+   progress.classList.add("attachment__item__progress__bar");
+   progress.max = 100;
+   const readout = document.createElement("span");
+   readout.classList.add("attachment__item__progress__readout");
+ 
+   file.addEventListener("uploadProgress", (event: CustomEvent<number>) => {
+     progress.value = event.detail;
+     readout.textContent = `${event.detail}%`;
+ 
+     if (progress.parentNode === null) {
+       element.classList.add("attachment__item--uploading");
+ 
+       const wrapper = document.createElement("div");
+       wrapper.classList.add("attachment__item__progress");
+       wrapper.append(progress, readout);
+ 
+       element.append(wrapper);
+     }
+   });
+ }
+ 
+ function removeUploadProgress(element: HTMLElement): void {
+   if (!element.classList.contains("attachment__item--uploading")) {
+     return;
+   }
+ 
+   element.classList.remove("attachment__item--uploading");
+   element.querySelector(".attachment__item__progress")?.remove();
+ }
+ 
  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");
diff --cc wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/Entry.js
index bf794ac4ad,a158f39795..95efe5dc16
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/Entry.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/Entry.js
@@@ -141,17 -141,42 +141,42 @@@ define(["require", "exports", "tslib", 
          errorElement.textContent = errorMessage;
          element.append(errorElement);
      }
+     function trackUploadProgress(element, file) {
+         const progress = document.createElement("progress");
+         progress.classList.add("attachment__item__progress__bar");
+         progress.max = 100;
+         const readout = document.createElement("span");
+         readout.classList.add("attachment__item__progress__readout");
+         file.addEventListener("uploadProgress", (event) => {
+             progress.value = event.detail;
+             readout.textContent = `${event.detail}%`;
+             if (progress.parentNode === null) {
+                 element.classList.add("attachment__item--uploading");
+                 const wrapper = document.createElement("div");
+                 wrapper.classList.add("attachment__item__progress");
+                 wrapper.append(progress, readout);
+                 element.append(wrapper);
+             }
+         });
+     }
+     function removeUploadProgress(element) {
+         if (!element.classList.contains("attachment__item--uploading")) {
+             return;
+         }
+         element.classList.remove("attachment__item--uploading");
+         element.querySelector(".attachment__item__progress")?.remove();
+     }
      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 --cc wcfsetup/install/files/style/ui/attachment.scss
index 6c30e974fb,fdce55b367..5d5cc9861c
--- a/wcfsetup/install/files/style/ui/attachment.scss
+++ b/wcfsetup/install/files/style/ui/attachment.scss
@@@ -136,6 -136,81 +136,17 @@@ 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;
 -}
 -
+ .attachment__item__progress {
+ 	align-items: center;
+ 	column-gap: 10px;
+ 	display: flex;
+ 	grid-area: buttons;
+ }
+ 
+ .attachment__item__progress__readout {
+ 	@include wcfFontSmall;
+ }
+ 
  .formAttachmentContent {
  	.formAttachmentList {
  		display: flex;