[ACS-8113] UX bug - Checkbox selections checked state should be Hylan…

…d blue not green- edit summary
Alfresco · Jun 25, 2024 · 29121c6 · 29121c6
1 parent 4f41b96
commit 29121c6
Show file tree

Hide file tree

Showing 11 changed files with 51 additions and 8 deletions.
diff --git a/projects/aca-content/assets/i18n/en.json b/projects/aca-content/assets/i18n/en.json
@@ -98,7 +98,8 @@
                 "CREATE_TOOLTIP": "Create content",
                 "UPLOAD": "Upload",
                 "UPLOAD_TOOLTIP": "Upload content"
-            }
+            },
+            "SELECTED": "Selected ({{ count }})"
         },
         "BROWSE": {
             "FILE": {

diff --git a/projects/aca-content/src/lib/components/favorite-libraries/favorite-libraries.component.html b/projects/aca-content/src/lib/components/favorite-libraries/favorite-libraries.component.html
@@ -1,6 +1,8 @@
 <aca-page-layout>
   <div class="aca-page-layout-header">
-    <h1 class="aca-page-title">{{ 'APP.BROWSE.LIBRARIES.MENU.FAVORITE_LIBRARIES.TITLE' | translate }}</h1>
+    <h1 class="aca-page-title">
+      {{ selectedRowItemsCount < 1 ? ('APP.BROWSE.LIBRARIES.MENU.FAVORITE_LIBRARIES.TITLE' | translate) : ('APP.HEADER.SELECTED' | translate: { count: selectedRowItemsCount }) }}
+    </h1>
     <aca-toolbar [items]="actions"></aca-toolbar>
   </div>
 
@@ -19,6 +21,7 @@ <h1 class="aca-page-title">{{ 'APP.BROWSE.LIBRARIES.MENU.FAVORITE_LIBRARIES.TITL
         [sortingMode]="'client'"
         (node-dblclick)="handleNodeClick($event)"
         [imageResolver]="imageResolver"
+        (selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
         [isResizingEnabled]="true"
         [blurOnResize]="false"
         (name-click)="handleNodeClick($event)"

diff --git a/projects/aca-content/src/lib/components/favorites/favorites.component.html b/projects/aca-content/src/lib/components/favorites/favorites.component.html
@@ -1,6 +1,8 @@
 <aca-page-layout>
   <div class="aca-page-layout-header">
-    <h1 class="aca-page-title">{{ 'APP.BROWSE.FAVORITES.TITLE' | translate }}</h1>
+    <h1 class="aca-page-title">
+      {{ selectedRowItemsCount < 1 ? ('APP.BROWSE.FAVORITES.TITLE'  | translate) : ('APP.HEADER.SELECTED' | translate: { count: selectedRowItemsCount }) }}
+    </h1>
     <aca-toolbar [items]="actions"></aca-toolbar>
   </div>
 
@@ -17,6 +19,7 @@ <h1 class="aca-page-title">{{ 'APP.BROWSE.FAVORITES.TITLE' | translate }}</h1>
         [sorting]="['modifiedAt', 'desc']"
         [sortingMode]="'client'"
         [imageResolver]="imageResolver"
+        (selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
         [isResizingEnabled]="true"
         [blurOnResize]="false"
         (node-dblclick)="handleNodeClick($event)"

diff --git a/projects/aca-content/src/lib/components/files/files.component.html b/projects/aca-content/src/lib/components/files/files.component.html
@@ -1,6 +1,11 @@
 <aca-page-layout [hasError]="!isValidPath">
   <div class="aca-page-layout-header">
-    <adf-breadcrumb [root]="title" [folderNode]="node" [maxItems]="isSmallScreen ? 1 : 0" (navigate)="onBreadcrumbNavigate($event)"> </adf-breadcrumb>
+    <adf-breadcrumb [root]="title"
+                    [folderNode]="node"
+                    [selectedRowItemsCount]="selectedRowItemsCount"
+                    [maxItems]="isSmallScreen ? 1 : 0"
+                    (navigate)="onBreadcrumbNavigate($event)">
+    </adf-breadcrumb>
     <aca-toolbar [items]="actions"></aca-toolbar>
   </div>
 
@@ -31,6 +36,7 @@
           [blurOnResize]="false"
           (node-dblclick)="handleNodeClick($event)"
           (name-click)="handleNodeClick($event)"
+          (selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
           (filterSelection)="onFilterSelected($event)"
           (error)="onError()"
         >

diff --git a/projects/aca-content/src/lib/components/libraries/libraries.component.html b/projects/aca-content/src/lib/components/libraries/libraries.component.html
@@ -1,6 +1,8 @@
 <aca-page-layout>
   <div class="aca-page-layout-header">
-    <h1 class="aca-page-title">{{ 'APP.BROWSE.LIBRARIES.MENU.MY_LIBRARIES.TITLE' | translate }}</h1>
+    <h1 class="aca-page-title">
+      {{ selectedRowItemsCount < 1 ? ('APP.BROWSE.LIBRARIES.MENU.MY_LIBRARIES.TITLE' | translate) : ('APP.HEADER.SELECTED' | translate: { count: selectedRowItemsCount }) }}
+    </h1>
     <aca-toolbar [items]="actions"></aca-toolbar>
   </div>
 
@@ -18,6 +20,7 @@ <h1 class="aca-page-title">{{ 'APP.BROWSE.LIBRARIES.MENU.MY_LIBRARIES.TITLE' | t
         [sortingMode]="'client'"
         [imageResolver]="imageResolver"
         [isResizingEnabled]="true"
+        (selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
         [blurOnResize]="false"
         (node-dblclick)="handleNodeClick($event)"
         (name-click)="handleNodeClick($event)"

diff --git a/projects/aca-content/src/lib/components/recent-files/recent-files.component.html b/projects/aca-content/src/lib/components/recent-files/recent-files.component.html
@@ -1,6 +1,8 @@
 <aca-page-layout>
   <div class="aca-page-layout-header">
-    <h1 class="aca-page-title">{{ 'APP.BROWSE.RECENT.TITLE' | translate }}</h1>
+    <h1 class="aca-page-title">
+      {{ selectedRowItemsCount < 1 ? ('APP.BROWSE.RECENT.TITLE'  | translate) : ('APP.HEADER.SELECTED' | translate: { count: selectedRowItemsCount }) }}
+    </h1>
     <aca-toolbar [items]="actions"></aca-toolbar>
   </div>
 
@@ -18,6 +20,7 @@ <h1 class="aca-page-title">{{ 'APP.BROWSE.RECENT.TITLE' | translate }}</h1>
         [sortingMode]="'client'"
         [imageResolver]="imageResolver"
         [isResizingEnabled]="true"
+        (selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
         [blurOnResize]="false"
         (node-dblclick)="handleNodeClick($event)"
         (name-click)="handleNodeClick($event)"

diff --git a/projects/aca-content/src/lib/components/shared-files/shared-files.component.html b/projects/aca-content/src/lib/components/shared-files/shared-files.component.html
@@ -1,6 +1,9 @@
 <aca-page-layout>
   <div class="aca-page-layout-header">
-    <h1 class="aca-page-title">{{ 'APP.BROWSE.SHARED.TITLE' | translate }}</h1>
+    <h1 class="aca-page-title">
+      {{ selectedRowItemsCount < 1 ? ('APP.BROWSE.SHARED.TITLE' | translate) : ('APP.HEADER.SELECTED' | translate: { count: selectedRowItemsCount }) }}
+    </h1>
+
     <aca-toolbar [items]="actions"></aca-toolbar>
   </div>
 
@@ -17,6 +20,7 @@ <h1 class="aca-page-title">{{ 'APP.BROWSE.SHARED.TITLE' | translate }}</h1>
         [imageResolver]="imageResolver"
         [sortingMode]="'client'"
         [isResizingEnabled]="true"
+        (selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
         [blurOnResize]="false"
         (node-dblclick)="handleNodeClick($event)"
         (name-click)="handleNodeClick($event)"

diff --git a/projects/aca-content/src/lib/components/trashcan/trashcan.component.html b/projects/aca-content/src/lib/components/trashcan/trashcan.component.html
@@ -1,6 +1,9 @@
 <aca-page-layout>
   <div class="aca-page-layout-header">
-    <h1 class="aca-page-title">{{ 'APP.BROWSE.TRASHCAN.TITLE' | translate }}</h1>
+    <h1 class="aca-page-title">
+      {{ selectedRowItemsCount < 1 ? ('APP.BROWSE.TRASHCAN.TITLE' | translate) : ('APP.HEADER.SELECTED' | translate: { count: selectedRowItemsCount }) }}
+    </h1>
+
     <aca-toolbar [items]="actions"></aca-toolbar>
   </div>
 
@@ -16,6 +19,7 @@ <h1 class="aca-page-title">{{ 'APP.BROWSE.TRASHCAN.TITLE' | translate }}</h1>
         [navigate]="false"
         [sortingMode]="'client'"
         [imageResolver]="imageResolver"
+        (selectedItemsCountChanged)="onSelectedItemsCountChanged($event)"
         [sorting]="['archivedAt', 'desc']"
         [isResizingEnabled]="true"
         [blurOnResize]="false"

diff --git a/projects/aca-content/src/lib/ui/theme.scss b/projects/aca-content/src/lib/ui/theme.scss
@@ -49,6 +49,15 @@ mat-toolbar.mat-toolbar.mat-toolbar-single-row {
   }
 }
 
+.mat-checkbox-indeterminate,
+.mat-checkbox-checked {
+  &.mat-accent {
+    .mat-checkbox-background {
+      background-color: var(--theme-blue-checkbox-color);
+    }
+  }
+}
+
 .adf-property-field {
   .adf-textitem-edit-icon.mat-icon {
     color: var(--theme-secondary-text);

diff --git a/projects/aca-content/src/lib/ui/variables/variables.scss b/projects/aca-content/src/lib/ui/variables/variables.scss
@@ -25,6 +25,7 @@ $grey-background: rgba(33, 33, 33, 0.12);
 $grey-text-background: rgba(33, 33, 33, 0.05);
 $grey-hover-background: rgba(33, 33, 33, 0.24);
 $blue-save-button-background: #1f74db;
+$blue-checkbox-background: #0a60ce;
 $black-heading: #4e4c4c;
 $theme-dropdown-background: darken($background-color, 5%);
 $theme-dropdown-background-hover: darken($background-color, 10%);
@@ -67,6 +68,7 @@ $defaults: (
   --theme-grey-background-color: $grey-background,
   --theme-grey-hover-background-color: $grey-hover-background,
   --theme-blue-button-color: $blue-save-button-background,
+  --theme-blue-checkbox-color: $blue-save-button-background,
   --theme-heading-color: $black-heading,
   --theme-dropdown-color: $theme-dropdown-background,
   --theme-dropdown-background-hover: $theme-dropdown-background-hover,

diff --git a/projects/aca-shared/src/lib/components/document-base-page/document-base-page.component.ts b/projects/aca-shared/src/lib/components/document-base-page/document-base-page.component.ts
@@ -70,6 +70,7 @@ export abstract class PageComponent implements OnInit, OnDestroy, OnChanges {
   filterSorting = 'name-asc';
   createActions: Array<ContentActionRef> = [];
   isSmallScreen = false;
+  selectedRowItemsCount = 0;
 
   protected extensions = inject(AppExtensionService);
   protected content = inject(DocumentBasePageService);
@@ -162,6 +163,10 @@ export abstract class PageComponent implements OnInit, OnDestroy, OnChanges {
     }
   }
 
+  onSelectedItemsCountChanged(count: number) {
+    this.selectedRowItemsCount = count;
+  }
+
   getParentNodeId(): string {
     return this.node ? this.node.id : null;
   }