Use the user profile header template

diff --git a/com.woltlab.wcf/templates/userProfileHeader.tpl b/com.woltlab.wcf/templates/userProfileHeader.tpl
index 86b64a2049874cd04634fa95bf530f950f1b7a4e..3a9fe00d0b609434e056eeea36abdf757bb065d1 100644 (file)
--- 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 11294ca5daaaa38a87e32fe12befbd0ada6a9787..9a023ed64e5cb78db17f53951b61fa5f00fc49cb 100644 (file)
--- 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 8725f9882819f3fca847aa8f45c9c423cec3af31..bdcd0c0fef6dd847e3975a43c795bebf83b69605 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/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 056b795476805c062455c82be0d493fdf3504b61..473c26d5af111e783162b28ecf80256f26d5087b 100644 (file)
--- 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");