Tweakhancement: reorganize some list & bulk editing buttons (#10944)

src-ui/e2e/document-list/document-list.spec.ts

@@ -174,7 +174,7 @@ test('bulk edit', async ({ page }) => {
   await expect(page.locator('pngx-document-list')).toHaveText(
     /Selected 61 of 61 documents/i
   )
-  await page.getByRole('button', { name: 'Cancel' }).click()
+  await page.getByRole('button', { name: 'None' }).click()
 
   await page.locator('pngx-document-card-small').nth(1).click()
   await page.locator('pngx-document-card-small').nth(2).click()

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html

@@ -1,21 +1,5 @@
 <div class="d-flex flex-wrap gap-4">
-  <div class="d-flex align-items-center" role="group" aria-label="Select">
+  <div class="d-flex flex-wrap align-items-center gap-2" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }">
-    <button class="btn btn-sm btn-outline-secondary" (click)="list.selectNone()">
-      <i-bs name="slash-circle"></i-bs>&nbsp;<ng-container i18n>Cancel</ng-container>
-      </button>
-    </div>
-    <div class="d-flex align-items-center gap-2" role="group" aria-label="Select">
-      <label class="me-2" i18n>Select:</label>
-      <div class="btn-group">
-        <button class="btn btn-sm btn-outline-primary" (click)="list.selectPage()">
-          <i-bs name="file-earmark-check"></i-bs>&nbsp;<ng-container i18n>Page</ng-container>
-          </button>
-          <button class="btn btn-sm btn-outline-primary" (click)="list.selectAll()">
-            <i-bs name="check-all"></i-bs>&nbsp;<ng-container i18n>All</ng-container>
-            </button>
-          </div>
-        </div>
-        <div class="d-flex align-items-center gap-2" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }">
     <label class="me-2" i18n>Edit:</label>
     @if (permissionService.currentUserCan(PermissionAction.View, PermissionType.Tag)) {
       <pngx-filterable-dropdown title="Tags" icon="tag-fill" i18n-title
@@ -89,14 +73,14 @@
         (apply)="setCustomFields($event)">
       </pngx-filterable-dropdown>
     }
-        </div>
+    <div class="btn-group">
-        <div class="d-flex align-items-center gap-2 ms-auto">
-          <div class="btn-toolbar">
-
       <button type="button" class="btn btn-sm btn-outline-primary me-2" (click)="setPermissions()" [disabled]="!userOwnsAll || !userCanEditAll">
         <i-bs name="person-fill-lock"></i-bs><div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Permissions</ng-container></div>
       </button>
-
+    </div>
+  </div>
+  <div class="d-flex align-items-center gap-2 ms-auto">
+    <div class="btn-toolbar">
       <div ngbDropdown>
         <button class="btn btn-sm btn-outline-primary" id="dropdownSelect" [disabled]="!userCanEdit && !userCanAdd" ngbDropdownToggle>
           <i-bs name="three-dots"></i-bs>
@@ -115,7 +99,6 @@
         </div>
       </div>
     </div>
-
     <div class="btn-group btn-group-sm">
       <button class="btn btn-sm btn-outline-primary" [disabled]="awaitingDownload" (click)="downloadSelected()">
         @if (!awaitingDownload) {
@@ -158,4 +141,4 @@
       </button>
     </div>
   </div>
-          </div>
+</div>

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.scss

@@ -5,3 +5,7 @@
 .dropdown-menu{
     --bs-dropdown-min-width: 12rem;
 }
+
+.btn-group .btn {
+  white-space: nowrap;
+}

src-ui/src/app/components/document-list/document-list.component.html

@@ -1,16 +1,36 @@
 <pngx-page-header [title]="getTitle()">
-
+  <div ngbDropdown class="btn-group flex-fill d-sm-none">
-  <div ngbDropdown class="btn-group flex-fill">
+    <button class="btn btn-sm btn-outline-primary" id="dropdownSelectMobile" ngbDropdownToggle>
-    <button class="btn btn-sm btn-outline-primary" id="dropdownSelect" ngbDropdownToggle>
       <i-bs name="text-indent-left"></i-bs>
       <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Select</ng-container></div>
+      @if (list.selected.size > 0) {
+        <pngx-clearable-badge [selected]="list.selected.size > 0" [number]="list.selected.size" (cleared)="list.selectNone()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
+      }
     </button>
-    <div ngbDropdownMenu aria-labelledby="dropdownSelect" class="shadow">
+    <div ngbDropdownMenu aria-labelledby="dropdownSelectMobile" class="shadow">
       <button ngbDropdownItem (click)="list.selectNone()" i18n>Select none</button>
       <button ngbDropdownItem (click)="list.selectPage()" i18n>Select page</button>
       <button ngbDropdownItem (click)="list.selectAll()" i18n>Select all</button>
     </div>
   </div>
+  <div class="d-none d-sm-flex flex-fill me-3">
+    <div class="input-group input-group-sm">
+      <span class="input-group-text border-0">Select:</span>
+    </div>
+    <div class="btn-group btn-group-sm flex-nowrap">
+      @if (list.selected.size > 0) {
+        <button class="btn btn-sm btn-outline-secondary" (click)="list.selectNone()">
+          <i-bs name="slash-circle"></i-bs>&nbsp;<ng-container i18n>None</ng-container>
+        </button>
+      }
+      <button class="btn btn-sm btn-outline-primary" (click)="list.selectPage()">
+        <i-bs name="file-earmark-check"></i-bs>&nbsp;<ng-container i18n>Page</ng-container>
+      </button>
+      <button class="btn btn-sm btn-outline-primary" (click)="list.selectAll()">
+        <i-bs name="check-all"></i-bs>&nbsp;<ng-container i18n>All</ng-container>
+      </button>
+    </div>
+  </div>
   <div ngbDropdown class="btn-group flex-fill">
     <button class="btn btn-sm btn-outline-primary" id="dropdownDisplayFields" ngbDropdownToggle>
       <i-bs name="card-heading"></i-bs>
@@ -128,6 +148,11 @@
           <i-bs width="1em" height="1em" name="x"></i-bs><small i18n>Reset filters</small>
         </button>
       }
+      @if (!list.isReloading && list.selected.size > 0) {
+        <button class="btn btn-link py-0" (click)="list.selectNone()">
+          <i-bs width="1em" height="1em" name="slash-circle" class="me-1"></i-bs><small i18n>Clear selection</small>
+        </button>
+      }
       </div>
       @if (list.collectionSize) {
         <ngb-pagination [pageSize]="list.pageSize" [collectionSize]="list.collectionSize" [(page)]="list.currentPage" [maxSize]="5"

src-ui/src/app/components/document-list/document-list.component.ts

@@ -56,6 +56,7 @@ import {
   filterRulesDiffer,
   isFullTextFilterRule,
 } from 'src/app/utils/filter-rules'
+import { ClearableBadgeComponent } from '../common/clearable-badge/clearable-badge.component'
 import { CustomFieldDisplayComponent } from '../common/custom-field-display/custom-field-display.component'
 import { PageHeaderComponent } from '../common/page-header/page-header.component'
 import { PreviewPopupComponent } from '../common/preview-popup/preview-popup.component'
@@ -72,6 +73,7 @@ import { SaveViewConfigDialogComponent } from './save-view-config-dialog/save-vi
   templateUrl: './document-list.component.html',
   styleUrls: ['./document-list.component.scss'],
   imports: [
+    ClearableBadgeComponent,
     CustomFieldDisplayComponent,
     PageHeaderComponent,
     BulkEditorComponent,