Use the user profile header template

diff --git a/com.woltlab.wcf/templates/userProfileHeader.tpl b/com.woltlab.wcf/templates/userProfileHeader.tpl
index 86b64a2049874cd04634fa95bf530f950f1b7a4e..e9dcca9213dc8bb71499efa77aa97fe3e475d026 100644 (file)
--- 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 44e7782b2e1e34f4154b83754c08aa06d37c616c..1bd2e52b898bea8e0cff527911a6bdbeaed6ff47 100644 (file)
--- 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 71e10909f398db29103c55a0ed138562eca05558..f123518cb4d4b3ec63a073f2c27b65713dec93ef 100644 (file)
--- 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 a1ab2456da76400c34839247bf27667806b09dc5..df15562c2876ea7e277d837e7e120c46f7386879 100644 (file)
--- 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) => {