Add the "sync all" as a static button to prevent the UI from jumping

diff --git a/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Project/Sync.ts b/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Project/Sync.ts
index 327606bdcdae308bcb61b5244ebd8fa1c54a2dba..563da6b01efd356b23ae38c945720e9dab8ac279 100644 (file)
--- a/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Project/Sync.ts
+++ b/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Project/Sync.ts
@@ -32,7 +32,7 @@ interface RequestData {
 class AcpUiDevtoolsProjectSync {
   private readonly buttons = new Map<string, HTMLButtonElement>();
   private readonly buttonStatus = new Map<string, HTMLElement>();
-  private buttonSyncAll?: HTMLAnchorElement = undefined;
+  private readonly buttonSyncAll: HTMLButtonElement = document.getElementById("devtoolsSyncAll") as HTMLButtonElement;
   private readonly container = document.getElementById("syncPipMatches")!;
   private readonly pips: PipData[] = [];
   private readonly projectId: number;
@@ -140,15 +140,7 @@ class AcpUiDevtoolsProjectSync {
       }
     }
 
-    const syncAll = document.createElement("li");
-    syncAll.innerHTML = `<a href="#" class="button"><fa-icon name="arrows-rotate" solid></fa-icon> ${Language.get(
-      "wcf.acp.devtools.sync.syncAll",
-    )}</a>`;
-    this.buttonSyncAll = syncAll.children[0] as HTMLAnchorElement;
-    this.buttonSyncAll.addEventListener("click", this.syncAll.bind(this));
-
-    const list = document.querySelector(".contentHeaderNavigation > ul") as HTMLUListElement;
-    list.insertAdjacentElement("afterbegin", syncAll);
+    this.buttonSyncAll.addEventListener("click", () => this.syncAll());
   }
 
   private sync(pluginName: string, target: string): void {
@@ -164,14 +156,12 @@ class AcpUiDevtoolsProjectSync {
     });
   }
 
-  private syncAll(event: MouseEvent): void {
-    event.preventDefault();
-
-    if (this.buttonSyncAll!.classList.contains("disabled")) {
+  private syncAll(): void {
+    if (this.buttonSyncAll.classList.contains("disabled")) {
       return;
     }
 
-    this.buttonSyncAll!.classList.add("disabled");
+    this.buttonSyncAll.classList.add("disabled");
 
     this.queue = [];
     this.pips.forEach((pip) => {
@@ -184,7 +174,7 @@ class AcpUiDevtoolsProjectSync {
 
   private syncNext(): void {
     if (this.queue.length === 0) {
-      this.buttonSyncAll!.classList.remove("disabled");
+      this.buttonSyncAll.classList.remove("disabled");
 
       UiNotification.show();
 
@@ -238,7 +228,7 @@ class AcpUiDevtoolsProjectSync {
       }
     });
 
-    this.buttonSyncAll!.classList.remove("disabled");
+    this.buttonSyncAll.classList.remove("disabled");
 
     return true;
   }

diff --git a/wcfsetup/install/files/acp/templates/devtoolsProjectSync.tpl b/wcfsetup/install/files/acp/templates/devtoolsProjectSync.tpl
index cab69f8b3e659cc625f12ba7c96d3ca9a046b5ba..e8899e22124b49193bab0db2aa4f1658f0e06ab2 100644 (file)
--- a/wcfsetup/install/files/acp/templates/devtoolsProjectSync.tpl
+++ b/wcfsetup/install/files/acp/templates/devtoolsProjectSync.tpl
@@ -9,6 +9,12 @@
        <nav class="contentHeaderNavigation">
                <ul>
                        {if $object->validate() === ''}
+                               <li>
+                                       <button class="button" id="devtoolsSyncAll">
+                                               {icon name='arrows-rotate' type='solid'}
+                                               {lang}wcf.acp.devtools.sync.syncAll{/lang}
+                                       </button>
+                               </li>
                                <li><a href="{link controller='DevtoolsProjectPipList' id=$object->getObjectID()}{/link}" class="button">{icon name='list'} <span>{lang}wcf.acp.devtools.project.pips{/lang}</span></a></li>
                        {/if}
                        <li><a href="{link controller='DevtoolsProjectEdit' id=$object->getObjectID()}{/link}" class="button">{icon name='pencil'} <span>{lang}wcf.acp.devtools.project.edit{/lang}</span></a></li>

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Devtools/Project/Sync.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Devtools/Project/Sync.js
index 69d5ded7a998fef9c01997e3d9ab1bbe10e6fd0d..9eaf10757142218105be52242c690db0b3e01753 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Devtools/Project/Sync.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Devtools/Project/Sync.js
@@ -8,7 +8,7 @@ define(["require", "exports", "tslib", "../../../../Ajax", "../../../../Language
     class AcpUiDevtoolsProjectSync {
         buttons = new Map();
         buttonStatus = new Map();
-        buttonSyncAll = undefined;
+        buttonSyncAll = document.getElementById("devtoolsSyncAll");
         container = document.getElementById("syncPipMatches");
         pips = [];
         projectId;
@@ -91,12 +91,7 @@ define(["require", "exports", "tslib", "../../../../Ajax", "../../../../Language
                     break;
                 }
             }
-            const syncAll = document.createElement("li");
-            syncAll.innerHTML = `<a href="#" class="button"><fa-icon name="arrows-rotate" solid></fa-icon> ${Language.get("wcf.acp.devtools.sync.syncAll")}</a>`;
-            this.buttonSyncAll = syncAll.children[0];
-            this.buttonSyncAll.addEventListener("click", this.syncAll.bind(this));
-            const list = document.querySelector(".contentHeaderNavigation > ul");
-            list.insertAdjacentElement("afterbegin", syncAll);
+            this.buttonSyncAll.addEventListener("click", () => this.syncAll());
         }
         sync(pluginName, target) {
             const identifier = this.getButtonIdentifier(pluginName, target);
@@ -109,8 +104,7 @@ define(["require", "exports", "tslib", "../../../../Ajax", "../../../../Language
                 },
             });
         }
-        syncAll(event) {
-            event.preventDefault();
+        syncAll() {
             if (this.buttonSyncAll.classList.contains("disabled")) {
                 return;
             }