Manage cover photo in acp

diff --git a/ts/WoltLabSuite/Core/Component/User/CoverPhoto.ts b/ts/WoltLabSuite/Core/Component/User/CoverPhoto.ts
index 66535e6b27e1e41cdf8cd7306dd0f179108e6d22..b76b176ea937cc544cc39080d0c9fbaecececbb4 100644 (file)
--- a/ts/WoltLabSuite/Core/Component/User/CoverPhoto.ts
+++ b/ts/WoltLabSuite/Core/Component/User/CoverPhoto.ts
@@ -16,6 +16,8 @@ import { show as showNotification } from "WoltLabSuite/Core/Ui/Notification";
 import * as FormBuilderManager from "WoltLabSuite/Core/Form/Builder/Manager";
 import WoltlabCoreFile from "WoltLabSuite/Core/Component/File/woltlab-core-file";
 import { fire as fireEvent } from "WoltLabSuite/Core/Event/Handler";
+import { getPhrase } from "WoltLabSuite/Core/Language";
+import DomUtil from "WoltLabSuite/Core/Dom/Util";
 
 type ResponseGetForm = {
   dialog: string;
@@ -26,7 +28,9 @@ type ResponseGetForm = {
 async function editCoverPhoto(button: HTMLElement, defaultCoverPhoto?: string): Promise<void> {
   const json = (await prepareRequest(button.dataset.editCoverPhoto!).get().fetchAsJson()) as ResponseGetForm;
   const dialog = dialogFactory().fromHtml(json.dialog).withoutControls();
-  const oldCoverPhoto = document.querySelector<HTMLElement>(".userProfileCoverPhoto")?.style.backgroundImage;
+  const coverPhotoElement = getCoverPhotoElement();
+  const coverPhotoNotice = document.getElementById("coverPhotoNotice");
+  const oldCoverPhoto = coverPhotoElement?.style.backgroundImage;
 
   dialog.addEventListener("afterClose", () => {
     const file = dialog.querySelector<WoltlabCoreFile>("woltlab-core-file");
@@ -36,13 +40,32 @@ async function editCoverPhoto(button: HTMLElement, defaultCoverPhoto?: string):
       FormBuilderManager.unregisterForm(json.formId);
     }
 
-    if (oldCoverPhoto === `url("${coverPhotoUrl}")`) {
+    if (oldCoverPhoto === coverPhotoUrl || oldCoverPhoto === `url("${coverPhotoUrl}")`) {
       // nothing changed
       return;
     }
 
-    const photo = document.querySelector<HTMLElement>(".userProfileCoverPhoto");
-    photo!.style.setProperty("background-image", `url(${coverPhotoUrl})`, "");
+    if (coverPhotoElement && coverPhotoUrl) {
+      coverPhotoElement.style.setProperty("background-image", `url(${coverPhotoUrl})`, "");
+    } else {
+      // ACP cover photo management
+      if (!coverPhotoElement && coverPhotoUrl) {
+        coverPhotoNotice!.parentElement!.appendChild(
+          DomUtil.createFragmentFromHtml(
+            `<div id="coverPhotoPreview" style="background-image: url(${coverPhotoUrl});"></div>`,
+          ),
+        );
+        coverPhotoNotice!.remove();
+      } else if (coverPhotoElement && !coverPhotoUrl) {
+        coverPhotoElement.parentElement!.appendChild(
+          DomUtil.createFragmentFromHtml(
+            `<woltlab-core-notice id="coverPhotoNotice" type="info">${getPhrase("wcf.user.coverPhoto.noImage")}</woltlab-core-notice>`,
+          ),
+        );
+        coverPhotoElement.remove();
+      }
+    }
+
     showNotification();
     fireEvent("com.woltlab.wcf.user", "coverPhoto", {
       url: coverPhotoUrl,
@@ -52,6 +75,10 @@ async function editCoverPhoto(button: HTMLElement, defaultCoverPhoto?: string):
   dialog.show(json.title);
 }
 
+function getCoverPhotoElement(): HTMLElement | null {
+  return document.querySelector<HTMLElement>(".userProfileCoverPhoto") ?? document.getElementById("coverPhotoPreview");
+}
+
 export function setup(defaultCoverPhoto?: string): void {
   wheneverFirstSeen("[data-edit-cover-photo]", (button) => {
     button.addEventListener(

diff --git a/wcfsetup/install/files/acp/templates/userAdd.tpl b/wcfsetup/install/files/acp/templates/userAdd.tpl
index 62ab6118f6dba15864885b0cb777ebd14bde0ab6..eb7b38bb4ea6c073de727f7e98ef807c1f7b6034 100644 (file)
--- a/wcfsetup/install/files/acp/templates/userAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/userAdd.tpl
@@ -722,24 +722,30 @@
                                                <p class="sectionDescription">{lang}wcf.acp.user.coverPhoto.description{/lang}</p>
                                        </header>
 
-                                       {if $userCoverPhoto}
+                                       <dl>
+                                               <dt></dt>
+                                               <dd>
+                                                       {if $userCoverPhoto}
+                                                               <div id="coverPhotoPreview" style="background-image: url({$userCoverPhoto->getURL()})"></div>
+                                                       {else}
+                                                               <woltlab-core-notice id="coverPhotoNotice" type="info">{lang}wcf.user.coverPhoto.noImage{/lang}</woltlab-core-notice>
+                                                       {/if}
+                                               </dd>
+                                       </dl>
+
+                                       {if $__wcf->session->getPermission('admin.user.canDisableCoverPhoto')}
                                                <dl>
                                                        <dt></dt>
                                                        <dd>
-                                                               <div id="coverPhotoPreview" style="background-image: url({$userCoverPhoto->getURL()})"></div>
+                                                               <button type="button" class="button" data-edit-cover-photo="{link controller="UserCoverPhoto" forceFrontend=true id=$user->userID}{/link}">
+                                                                       {lang}wcf.user.coverPhoto.management{/lang}
+                                                               </button>
                                                        </dd>
                                                </dl>
 
-                                               {if $__wcf->session->getPermission('admin.user.canDisableCoverPhoto')}
-                                                       <dl>
-                                                               <dt></dt>
-                                                               <dd>
-                                                                       <label><input type="checkbox" id="deleteCoverPhoto" name="deleteCoverPhoto" value="1"{if $deleteCoverPhoto == 1} checked{/if}> {lang}wcf.acp.user.deleteCoverPhoto{/lang}</label>
-                                                               </dd>
-                                                       </dl>
-                                               {/if}
-                                       {else}
-                                               <woltlab-core-notice type="info">{lang}wcf.user.coverPhoto.noImage{/lang}</woltlab-core-notice>
+                                               <script data-relocate="true">
+                                                       {jsphrase name='wcf.user.coverPhoto.noImage'}
+                                               </script>
                                        {/if}
 
                                        {event name='coverPhotoFields'}

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 837059daa38f322de6656668809d775100c7ffbe..ec5e70a8e63133d69600f79f97cebe1080d3b57c 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/User/CoverPhoto.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/User/CoverPhoto.js
@@ -7,27 +7,42 @@
  * @since     6.2
  * @woltlabExcludeBundle all
  */
-define(["require", "exports", "tslib", "WoltLabSuite/Core/Helper/PromiseMutex", "WoltLabSuite/Core/Helper/Selector", "WoltLabSuite/Core/Component/Dialog", "WoltLabSuite/Core/Ajax/Backend", "WoltLabSuite/Core/Ui/Notification", "WoltLabSuite/Core/Form/Builder/Manager", "WoltLabSuite/Core/Event/Handler"], function (require, exports, tslib_1, PromiseMutex_1, Selector_1, Dialog_1, Backend_1, Notification_1, FormBuilderManager, Handler_1) {
+define(["require", "exports", "tslib", "WoltLabSuite/Core/Helper/PromiseMutex", "WoltLabSuite/Core/Helper/Selector", "WoltLabSuite/Core/Component/Dialog", "WoltLabSuite/Core/Ajax/Backend", "WoltLabSuite/Core/Ui/Notification", "WoltLabSuite/Core/Form/Builder/Manager", "WoltLabSuite/Core/Event/Handler", "WoltLabSuite/Core/Language", "WoltLabSuite/Core/Dom/Util"], function (require, exports, tslib_1, PromiseMutex_1, Selector_1, Dialog_1, Backend_1, Notification_1, FormBuilderManager, Handler_1, Language_1, Util_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.setup = setup;
     FormBuilderManager = tslib_1.__importStar(FormBuilderManager);
+    Util_1 = tslib_1.__importDefault(Util_1);
     async function editCoverPhoto(button, defaultCoverPhoto) {
         const json = (await (0, Backend_1.prepareRequest)(button.dataset.editCoverPhoto).get().fetchAsJson());
         const dialog = (0, Dialog_1.dialogFactory)().fromHtml(json.dialog).withoutControls();
-        const oldCoverPhoto = document.querySelector(".userProfileCoverPhoto")?.style.backgroundImage;
+        const coverPhotoElement = getCoverPhotoElement();
+        const coverPhotoNotice = document.getElementById("coverPhotoNotice");
+        const oldCoverPhoto = coverPhotoElement?.style.backgroundImage;
         dialog.addEventListener("afterClose", () => {
             const file = dialog.querySelector("woltlab-core-file");
             const coverPhotoUrl = file?.link ?? defaultCoverPhoto;
             if (FormBuilderManager.hasForm(json.formId)) {
                 FormBuilderManager.unregisterForm(json.formId);
             }
-            if (oldCoverPhoto === `url("${coverPhotoUrl}")`) {
+            if (oldCoverPhoto === coverPhotoUrl || oldCoverPhoto === `url("${coverPhotoUrl}")`) {
                 // nothing changed
                 return;
             }
-            const photo = document.querySelector(".userProfileCoverPhoto");
-            photo.style.setProperty("background-image", `url(${coverPhotoUrl})`, "");
+            if (coverPhotoElement && coverPhotoUrl) {
+                coverPhotoElement.style.setProperty("background-image", `url(${coverPhotoUrl})`, "");
+            }
+            else {
+                // ACP cover photo management
+                if (!coverPhotoElement && coverPhotoUrl) {
+                    coverPhotoNotice.parentElement.appendChild(Util_1.default.createFragmentFromHtml(`<div id="coverPhotoPreview" style="background-image: url(${coverPhotoUrl});"></div>`));
+                    coverPhotoNotice.remove();
+                }
+                else if (coverPhotoElement && !coverPhotoUrl) {
+                    coverPhotoElement.parentElement.appendChild(Util_1.default.createFragmentFromHtml(`<woltlab-core-notice id="coverPhotoNotice" type="info">${(0, Language_1.getPhrase)("wcf.user.coverPhoto.noImage")}</woltlab-core-notice>`));
+                    coverPhotoElement.remove();
+                }
+            }
             (0, Notification_1.show)();
             (0, Handler_1.fire)("com.woltlab.wcf.user", "coverPhoto", {
                 url: coverPhotoUrl,
@@ -35,6 +50,9 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Helper/PromiseMutex",
         });
         dialog.show(json.title);
     }
+    function getCoverPhotoElement() {
+        return document.querySelector(".userProfileCoverPhoto") ?? document.getElementById("coverPhotoPreview");
+    }
     function setup(defaultCoverPhoto) {
         (0, Selector_1.wheneverFirstSeen)("[data-edit-cover-photo]", (button) => {
             button.addEventListener("click", (0, PromiseMutex_1.promiseMutex)(() => editCoverPhoto(button, defaultCoverPhoto)));

diff --git a/wcfsetup/install/files/lib/acp/form/UserEditForm.class.php b/wcfsetup/install/files/lib/acp/form/UserEditForm.class.php
index c2aca3f0f08da1f1748821fde7128c56e1726d68..50e531f08d0238a023e7d5578084d560c53370f8 100755 (executable)
--- a/wcfsetup/install/files/lib/acp/form/UserEditForm.class.php
+++ b/wcfsetup/install/files/lib/acp/form/UserEditForm.class.php
@@ -299,7 +299,7 @@ class UserEditForm extends UserAddForm
         }
 
         // get the user cover photo object
-        if ($this->user->coverPhotoHash) {
+        if ($this->user->coverPhotoFileID) {
             // If the editing user lacks the permissions to view the cover photo, the system
             // will try to load the default cover photo. However, the default cover photo depends
             // on the style, eventually triggering a change to the template group which will