From: Cyperghost <olaf_schmitz_1@t-online.de>
Date: Thu, 12 Dec 2024 11:01:12 +0000 (+0100)
Subject: Use the user profile header template
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=e378feddaca7db59c01984dfe7fbd65d91a1e1ec;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..3a9fe00d0b 100644
--- a/com.woltlab.wcf/templates/userProfileHeader.tpl
+++ b/com.woltlab.wcf/templates/userProfileHeader.tpl
@@ -39,6 +39,12 @@
 				</div>
 			{/if}
 
+			{if $view->user->canEditAvatar()}
+				<button type="button" data-edit-avatar="{link controller="UserAvatar" id=$view->user->userID}{/link}" class="button small">
+					{icon name='circle-user' type='solid'} {lang}wcf.user.avatar.edit{/lang}
+				</button>
+			{/if}
+
 			{if $view->canEditUser()}
 				<button type="button" class="jsButtonEditProfile button small">{icon name='pencil'} <span>{lang}wcf.user.editProfile{/lang}</span></button>
 			{/if}
@@ -51,7 +57,7 @@
 		<div class="userProfileHeader__avatar">
 			<div class="userProfileHeader__avatarBorder">
 				{if $view->user->userID == $__wcf->user->userID}
-					<a href="{link controller='AvatarEdit'}{/link}" class="userProfileHeader__avatarEditLink jsTooltip" title="{lang}wcf.user.avatar.edit{/lang}">{unsafe:$view->user->getAvatar()->getImageTag(128)}</a>
+					<button type="button" data-edit-avatar="{link controller="UserAvatar" id=$view->user->userID}{/link}" class="userProfileHeader__avatarEditLink jsTooltip" title="{lang}wcf.user.avatar.edit{/lang}">{unsafe:$view->user->getAvatar()->getImageTag(128)}</button>
 				{else}
 					{unsafe:$view->user->getAvatar()->getImageTag(128)}
 				{/if}
diff --git a/ts/WoltLabSuite/Core/Component/User/Avatar.ts b/ts/WoltLabSuite/Core/Component/User/Avatar.ts
index 11294ca5da..9a023ed64e 100644
--- a/ts/WoltLabSuite/Core/Component/User/Avatar.ts
+++ b/ts/WoltLabSuite/Core/Component/User/Avatar.ts
@@ -12,16 +12,12 @@ import { promiseMutex } from "WoltLabSuite/Core/Helper/PromiseMutex";
 import { wheneverFirstSeen } from "WoltLabSuite/Core/Helper/Selector";
 import { dialogFactory } from "WoltLabSuite/Core/Component/Dialog";
 import { show as showNotification } from "WoltLabSuite/Core/Ui/Notification";
-import UiCloseOverlay from "WoltLabSuite/Core/Ui/CloseOverlay";
 
 interface Result {
   avatar: string;
 }
 
 async function editAvatar(button: HTMLElement): Promise<void> {
-  // If the user is editing their own avatar, the control panel is open and can overlay the dialog.
-  UiCloseOverlay.execute();
-
   const { ok, result } = await dialogFactory().usingFormBuilder().fromEndpoint<Result>(button.dataset.editAvatar!);
 
   if (ok) {
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Bootstrap.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Bootstrap.js
index 8725f98828..bdcd0c0fef 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/Image/Viewer"], resolve_13, reject_13); }).then(tslib_1.__importStar).then(({ setupLegacy }) => setupLegacy());
         });
         (0, LazyLoader_1.whenFirstSeen)(".jsEnablesOptions", () => {
-            void new Promise((resolve_13, reject_13) => { require(["./Component/Option/Enable"], resolve_13, reject_13); }).then(tslib_1.__importStar).then(({ setup }) => setup());
+            void new Promise((resolve_14, reject_14) => { require(["./Component/Option/Enable"], 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/Avatar.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/User/Avatar.js
index 056b795476..473c26d5af 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/User/Avatar.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/User/Avatar.js
@@ -7,14 +7,11 @@
  * @since     6.2
  * @woltlabExcludeBundle all
  */
-define(["require", "exports", "tslib", "WoltLabSuite/Core/Helper/PromiseMutex", "WoltLabSuite/Core/Helper/Selector", "WoltLabSuite/Core/Component/Dialog", "WoltLabSuite/Core/Ui/Notification", "WoltLabSuite/Core/Ui/CloseOverlay"], function (require, exports, tslib_1, PromiseMutex_1, Selector_1, Dialog_1, Notification_1, CloseOverlay_1) {
+define(["require", "exports", "WoltLabSuite/Core/Helper/PromiseMutex", "WoltLabSuite/Core/Helper/Selector", "WoltLabSuite/Core/Component/Dialog", "WoltLabSuite/Core/Ui/Notification"], function (require, exports, PromiseMutex_1, Selector_1, Dialog_1, Notification_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.setup = setup;
-    CloseOverlay_1 = tslib_1.__importDefault(CloseOverlay_1);
     async function editAvatar(button) {
-        // If the user is editing their own avatar, the control panel is open and can overlay the dialog.
-        CloseOverlay_1.default.execute();
         const { ok, result } = await (0, Dialog_1.dialogFactory)().usingFormBuilder().fromEndpoint(button.dataset.editAvatar);
         if (ok) {
             const avatarForm = document.getElementById("avatarForm");