Fix infobox in list & grid view

Closes #6406

Author: BurntimeX

com.woltlab.wcf/templates/shared_gridView.tpl

@@ -53,7 +53,9 @@
 		</table>
 	</div>
 
-	<div class="gridView__footer">
+	<woltlab-core-notice type="info" id="{$view->getID()}_noItemsNotice"{if $view->countRows()} hidden{/if}>{lang}wcf.global.noItems{/lang}</woltlab-core-notice>
+
+	<div class="gridView__footer" id="{$view->getID()}_footer"{if $view->countPages() < 2} hidden{/if}>
 		{if $view->hasBulkInteractions()}
 			<div id="{$view->getID()}_selectionBar" class="gridView__selectionBar dropdown" hidden>
 				<button type="button" id="{$view->getID()}_bulkInteractionButton" class="button small gridView__bulkInteractionButton dropdownToggle"></button>
@@ -77,8 +79,6 @@
 			></woltlab-core-pagination>
 		</div>
 	</div>
-
-	<woltlab-core-notice type="info" id="{$view->getID()}_noItemsNotice"{if $view->countRows()} hidden{/if}>{lang}wcf.global.noItems{/lang}</woltlab-core-notice>
 </div>
 
 <script data-relocate="true">

com.woltlab.wcf/templates/shared_listView.tpl

@@ -54,6 +54,8 @@
 		</div>
 	</div>
 
+	<woltlab-core-notice type="info" id="{$view->getID()}_noItemsNotice"{if $view->countItems()} hidden{/if}>{lang}wcf.global.noItems{/lang}</woltlab-core-notice>
+
 	<div class="listView__footer" id="{$view->getID()}_footer"{if $view->countPages() < 2} hidden{/if}>
 		{if $view->hasBulkInteractions()}
 			<div id="{$view->getID()}_selectionBar" class="listView__selectionBar dropdown" hidden>
@@ -78,8 +80,6 @@
 			></woltlab-core-pagination>
 		</div>
 	</div>
-
-	<woltlab-core-notice type="info" id="{$view->getID()}_noItemsNotice"{if $view->countItems()} hidden{/if}>{lang}wcf.global.noItems{/lang}</woltlab-core-notice>
 </div>
 
 <script data-relocate="true">

ts/WoltLabSuite/Core/Component/GridView/Selection.ts

@@ -51,6 +51,10 @@ export class Selection extends EventTarget {
     this.#restoreSelection();
   }
 
+  selectionBarVisible(): boolean {
+    return this.#selectionBar !== null && this.getSelectedIds().length > 0;
+  }
+
   refresh(): void {
     this.#restoreSelection();
   }
@@ -168,6 +172,8 @@ export class Selection extends EventTarget {
       return;
     }
 
+    this.dispatchEvent(new CustomEvent("grid-view:update-selection"));
+
     if (selectedIds.length === 0) {
       this.#selectionBar.hidden = true;
       return;
@@ -284,6 +290,7 @@ export class Selection extends EventTarget {
 
 interface SelectionEventMap {
   "grid-view:get-bulk-interactions": CustomEvent<{ objectIds: number[] }>;
+  "grid-view:update-selection": CustomEvent<void>;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging

ts/WoltLabSuite/Core/Component/GridView/State.ts

@@ -24,6 +24,7 @@ export class State extends EventTarget {
   readonly #pagination: WoltlabCorePaginationElement;
   readonly #selection: Selection;
   readonly #sorting: Sorting;
+  readonly #gridViewFooter: HTMLElement;
   #pageNo: number;
 
   constructor(
@@ -39,6 +40,8 @@ export class State extends EventTarget {
     this.#baseUrl = baseUrl;
     this.#pageNo = pageNo;
 
+    this.#gridViewFooter = document.getElementById(`${gridId}_footer`) as HTMLElement;
+
     this.#pagination = document.getElementById(`${gridId}_pagination`) as WoltlabCorePaginationElement;
     this.#pagination.addEventListener("switchPage", (event: CustomEvent) => {
       void this.#switchPage(event.detail, StateChangeCause.Pagination);
@@ -60,12 +63,16 @@ export class State extends EventTarget {
         new CustomEvent("grid-view:get-bulk-interactions", { detail: { objectIds: event.detail.objectIds } }),
       );
     });
+    this.#selection.addEventListener("grid-view:update-selection", () => {
+      this.#updateGridViewFooter();
+    });
 
     window.addEventListener("popstate", () => {
       this.#handlePopState();
     });
 
     this.#updatePaginationUrl();
+    this.#updateGridViewFooter();
   }
 
   getPageNo(): number {
@@ -176,6 +183,10 @@ export class State extends EventTarget {
     this.#switchPage(pageNo, StateChangeCause.History);
   }
 
+  #updateGridViewFooter(): void {
+    this.#gridViewFooter.hidden = this.#pagination.count < 2 && !this.#selection.selectionBarVisible();
+  }
+
   setBulkInteractionContextMenuOptions(options: string): void {
     this.#selection.setBulkInteractionContextMenuOptions(options);
   }

wcfsetup/install/files/js/WoltLabSuite/Core/Component/GridView/Selection.js

@@ -258,7 +258,3 @@
 		box-shadow: rgba(0, 0, 0, 0.08) 0px 10px 16px 2px;
 	}
 }
-
-.gridView .info {
-	margin-top: 0;
-}