[ADF-4267] expose stiky heder in document list (#4455)

* expose stiky heder in document list

* lint fix

demo-shell/src/app/components/files/files.component.html

@@ -211,7 +211,8 @@
                 </mat-menu>
             </adf-toolbar>
 
-            <adf-document-list
+            <div [ngClass]="{'adf-sticky-document-list': stickyHeader }">
+                <adf-document-list
                 #documentList
                 class="adf-file-list-container"
                 [permissionsStyle]="permissionsStyle"
@@ -228,6 +229,7 @@
                 [sortingMode]="sortingMode"
                 [showHeader]="showHeader"
                 [thumbnails]="thumbnails"
+                [stickyHeader]="stickyHeader"
                 (error)="onNavigationError($event)"
                 (success)="resetError()"
                 (ready)="emitReadyEvent($event)"
@@ -420,6 +422,7 @@
                     </content-action>
                 </content-actions>
             </adf-document-list>
+                </div>
             <adf-pagination
                 #standardPagination
                 *ngIf="!infiniteScrolling"
@@ -607,6 +610,12 @@
             </mat-slide-toggle>
         </section>
 
+        <section>
+            <mat-slide-toggle
+                color="primary" [(ngModel)]="stickyHeader" id="stickyHeader">
+                Sticky Header
+            </mat-slide-toggle>
+        </section>
 
         <h5>Upload</h5>
         <section *ngIf="acceptedFilesTypeShow">

demo-shell/src/app/components/files/files.component.ts

@@ -189,6 +189,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
 
     permissionsStyle: PermissionStyleModel[] = [];
     infiniteScrolling: boolean;
+    stickyHeader: boolean;
     warnOnMultipleUploads = false;
     thumbnails = false;
     enableCustomPermissionMessage = false;

docs/content-services/components/document-list.component.md

@@ -82,6 +82,7 @@ Displays the documents from a repository.
 | where | `string` |  | Filters the [`Node`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md) list using the _where_ condition of the REST API (for example, isFolder=true). See the REST API documentation for more information. |
 | currentFolderId |  |  | The ID of the folder node to display or a reserved string alias for special sources |
 | rowFilter |  |  | Custom function to choose whether to show or hide rows. See the [Row Filter Model](../models/row-filter.model.md) page for more information. |
+| stickyHeader | `boolean` | false | Toggles the sticky header mode. |
 
 ### Events
 

lib/content-services/document-list/components/document-list.component.html

@@ -14,6 +14,7 @@
     [noPermission]="noPermission"
     [showHeader]="!isEmpty() && showHeader"
     [rowMenuCacheEnabled]="false"
+    [stickyHeader]="stickyHeader"
     (showRowContextMenu)="onShowRowContextMenu($event)"
     (showRowActionsMenu)="onShowRowActionsMenu($event)"
     (executeRowAction)="onExecuteRowAction($event)"

lib/content-services/document-list/components/document-list.component.scss

@@ -9,6 +9,11 @@
         margin-top: 2px;
     }
 
+    .adf-sticky-document-list {
+        height: 310px;
+        overflow-y: auto;
+    }
+
     .adf-datatable-selected > svg {
         fill: mat-color($accent);
         width: 32px;

lib/content-services/document-list/components/document-list.component.ts

@@ -235,6 +235,10 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
     @Input()
     imageResolver: any | null = null;
 
+    /** Toggles the sticky header mode. */
+    @Input()
+    stickyHeader: boolean = false;
+
     _currentFolderId: string = null;
 
     /** The ID of the folder node to display or a reserved string alias for special sources */