From: Cyperghost <olaf_schmitz_1@t-online.de>
Date: Thu, 12 Dec 2024 10:20:21 +0000 (+0100)
Subject: Use the user profile header template
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=ef27055fe28dada2d3b32bfb3bbad094492df195;p=GitHub%2FWoltLab%2FWCF.git

Use the user profile header template
---

diff --git a/com.woltlab.wcf/templates/userProfileHeader.tpl b/com.woltlab.wcf/templates/userProfileHeader.tpl
index 86b64a2049..e9dcca9213 100644
--- a/com.woltlab.wcf/templates/userProfileHeader.tpl
+++ b/com.woltlab.wcf/templates/userProfileHeader.tpl
@@ -28,15 +28,13 @@
 			{event name='beforeManageButtons'}
 			
 			{if $view->canEditCoverPhoto()}
-				<div class="dropdown">
-					<button type="button" class="button small dropdownToggle">{icon name='camera'} {lang}wcf.user.coverPhoto.edit{/lang}</button>
-					<ul class="dropdownMenu">
-						{if $view->canAddCoverPhoto()}
-							<li><button type="button" class="jsButtonUploadCoverPhoto jsStaticDialog" data-dialog-id="userProfileCoverPhotoUpload">{lang}wcf.user.coverPhoto.upload{/lang}</button></li>
-						{/if}
-						<li{if !$view->user->coverPhotoHash} style="display:none;"{/if}><button type="button" class="jsButtonDeleteCoverPhoto">{lang}wcf.user.coverPhoto.delete{/lang}</button></li>
-					</ul>
-				</div>
+				<ul class="userProfileManageCoverPhoto buttonGroup buttonList smallButtons">
+					<li>
+						<button type="button" data-edit-cover-photo="{link controller="UserCoverPhoto" id=$user->userID}{/link}" data-default-cover-photo="{$__wcf->styleHandler->getStyle()->getCoverPhotoUrl()}" class="button small">
+							{icon name='camera'} {lang}wcf.user.coverPhoto.management{/lang}
+						</button>
+					</li>
+				</ul>
 			{/if}
 
 			{if $view->canEditUser()}
diff --git a/ts/WoltLabSuite/Core/Component/User/CoverPhoto.ts b/ts/WoltLabSuite/Core/Component/User/CoverPhoto.ts
index 44e7782b2e..1bd2e52b89 100644
--- a/ts/WoltLabSuite/Core/Component/User/CoverPhoto.ts
+++ b/ts/WoltLabSuite/Core/Component/User/CoverPhoto.ts
@@ -32,7 +32,7 @@ async function editCoverPhoto(button: HTMLElement): Promise<void> {
   const dialog = dialogFactory().fromHtml(json.dialog).withoutControls();
   const coverPhotoElement = getCoverPhotoElement();
   const coverPhotoNotice = document.getElementById("coverPhotoNotice");
-  const oldCoverPhoto = coverPhotoElement?.style.backgroundImage;
+  const oldCoverPhoto = getCoverPhotoUrl(coverPhotoElement);
 
   dialog.addEventListener("afterClose", () => {
     const file = dialog.querySelector<WoltlabCoreFile>("woltlab-core-file");
@@ -48,8 +48,8 @@ async function editCoverPhoto(button: HTMLElement): Promise<void> {
       return;
     }
 
-    if (coverPhotoElement && coverPhotoUrl) {
-      coverPhotoElement.style.backgroundImage = coverPhotoStyle;
+    if (coverPhotoElement instanceof HTMLImageElement && coverPhotoUrl) {
+      coverPhotoElement.src = coverPhotoUrl;
     } else {
       // ACP cover photo management
       if (!coverPhotoElement && coverPhotoUrl) {
@@ -78,8 +78,19 @@ async function editCoverPhoto(button: HTMLElement): Promise<void> {
   dialog.show(json.title);
 }
 
+function getCoverPhotoUrl(coverPhotoElement: HTMLElement | null): string | undefined {
+  if (coverPhotoElement instanceof HTMLImageElement) {
+    return coverPhotoElement.src;
+  } else {
+    return coverPhotoElement?.style.backgroundImage;
+  }
+}
+
 function getCoverPhotoElement(): HTMLElement | null {
-  return document.querySelector<HTMLElement>(".userProfileCoverPhoto") ?? document.getElementById("coverPhotoPreview");
+  return (
+    document.querySelector<HTMLElement>(".userProfileHeader__coverPhotoImage") ??
+    document.getElementById("coverPhotoPreview")
+  );
 }
 
 export function setup(): void {
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Bootstrap.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Bootstrap.js
index 71e10909f3..f123518cb4 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Bootstrap.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Bootstrap.js
@@ -157,7 +157,7 @@ define(["require", "exports", "tslib", "./Core", "./Date/Picker", "./Devtools",
             void new Promise((resolve_13, reject_13) => { require(["./Component/Option/Enable"], resolve_13, reject_13); }).then(tslib_1.__importStar).then(({ setup }) => setup());
         });
         (0, LazyLoader_1.whenFirstSeen)("[data-edit-cover-photo]", () => {
-            void new Promise((resolve_13, reject_13) => { require(["./Component/User/CoverPhoto"], resolve_13, reject_13); }).then(tslib_1.__importStar).then(({ setup }) => setup());
+            void new Promise((resolve_14, reject_14) => { require(["./Component/User/CoverPhoto"], resolve_14, reject_14); }).then(tslib_1.__importStar).then(({ setup }) => setup());
         });
         // Move the reCAPTCHA widget overlay to the `pageOverlayContainer`
         // when widget form elements are placed in a dialog.
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/User/CoverPhoto.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/User/CoverPhoto.js
index a1ab2456da..df15562c28 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/User/CoverPhoto.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/User/CoverPhoto.js
@@ -19,7 +19,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Helper/PromiseMutex",
         const dialog = (0, Dialog_1.dialogFactory)().fromHtml(json.dialog).withoutControls();
         const coverPhotoElement = getCoverPhotoElement();
         const coverPhotoNotice = document.getElementById("coverPhotoNotice");
-        const oldCoverPhoto = coverPhotoElement?.style.backgroundImage;
+        const oldCoverPhoto = getCoverPhotoUrl(coverPhotoElement);
         dialog.addEventListener("afterClose", () => {
             const file = dialog.querySelector("woltlab-core-file");
             const coverPhotoUrl = file?.link ?? defaultCoverPhoto ?? "";
@@ -31,8 +31,8 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Helper/PromiseMutex",
                 // nothing changed
                 return;
             }
-            if (coverPhotoElement && coverPhotoUrl) {
-                coverPhotoElement.style.backgroundImage = coverPhotoStyle;
+            if (coverPhotoElement instanceof HTMLImageElement && coverPhotoUrl) {
+                coverPhotoElement.src = coverPhotoUrl;
             }
             else {
                 // ACP cover photo management
@@ -52,8 +52,17 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Helper/PromiseMutex",
         });
         dialog.show(json.title);
     }
+    function getCoverPhotoUrl(coverPhotoElement) {
+        if (coverPhotoElement instanceof HTMLImageElement) {
+            return coverPhotoElement.src;
+        }
+        else {
+            return coverPhotoElement?.style.backgroundImage;
+        }
+    }
     function getCoverPhotoElement() {
-        return document.querySelector(".userProfileCoverPhoto") ?? document.getElementById("coverPhotoPreview");
+        return (document.querySelector(".userProfileHeader__coverPhotoImage") ??
+            document.getElementById("coverPhotoPreview"));
     }
     function setup() {
         (0, Selector_1.wheneverFirstSeen)("[data-edit-cover-photo]", (button) => {