alfresco-content-app/src/app/components/files/files.component.html

<div class="inner-layout">
    <div class="inner-layout__header">
        <adf-breadcrumb
            [root]="title | translate"
            [folderNode]="node"
            (navigate)="onBreadcrumbNavigate($event)">
        </adf-breadcrumb>

        <adf-toolbar class="inline">
            <button
                mat-icon-button
                *ngIf="canPreviewFile(documentList.selection)"
                title="{{ 'APP.ACTIONS.VIEW' | translate }}"
                (click)="showPreview(documentList.selection[0]?.entry?.id)">
                <mat-icon>open_in_browser</mat-icon>
            </button>

            <button
                mat-icon-button
                *ngIf="hasSelection(documentList.selection)"
                title="{{ 'APP.ACTIONS.DOWNLOAD' | translate }}"
                [app-download-node]="documentList.selection">
                <mat-icon>get_app</mat-icon>
            </button>

            <button
                mat-icon-button
                *ngIf="canEditFolder(documentList.selection)"
                title="{{ 'APP.ACTIONS.EDIT' | translate }}"
                [app-edit-folder]="documentList.selection[0]?.entry">
                <mat-icon>create</mat-icon>
            </button>

            <button
                mat-icon-button
                *ngIf="hasSelection(documentList.selection)"
                title="{{ 'APP.ACTIONS.MORE' | translate }}"
                [matMenuTriggerFor]="actionsMenu">
                <mat-icon>more_vert</mat-icon>
            </button>

            <mat-menu #actionsMenu="matMenu"
                [overlapTrigger]="false"
                class="secondary-options">
                <button
                    mat-menu-item
                    #favorite="favorite"
                    [app-favorite-node]="documentList.selection">
                    <mat-icon [ngClass]="{ 'icon-highlight': favorite.hasFavorites() }">
                        {{ favorite.hasFavorites() ? 'star' :'star_border' }}
                    </mat-icon>
                    <span>{{ 'APP.ACTIONS.FAVORITE' | translate }}</span>
                </button>

                <button
                    mat-menu-item
                    [app-copy-node]="documentList.selection">
                    <mat-icon>content_copy</mat-icon>
                    <span>{{ 'APP.ACTIONS.COPY' | translate }}</span>
                </button>

                <button
                    mat-menu-item
                    *ngIf="canMove(documentList.selection)"
                    [app-move-node]="documentList.selection">
                    <mat-icon>library_books</mat-icon>
                    <span>{{ 'APP.ACTIONS.MOVE' | translate }}</span>
                </button>

                <button
                    mat-menu-item
                    *ngIf="canDelete(documentList.selection)"
                    [app-delete-node]="documentList.selection">
                    <mat-icon>delete</mat-icon>
                    <span>{{ 'APP.ACTIONS.DELETE' | translate }}</span>
                </button>
            </mat-menu>
        </adf-toolbar>
    </div>

    <div [attr.class]="isValidPath ? 'content--hide' : 'inner-layout__content'">
        <app-generic-error></app-generic-error>
    </div>

    <div [attr.class]="!isValidPath ? 'content--hide' : 'inner-layout__content'">
        <adf-upload-drag-area
            [rootFolderId]="node?.id"
            [disabled]="!canCreateContent(node)"
            [showNotificationBar]="false">

            <adf-document-list #documentList
                [attr.class]="documentList.isEmpty() ? 'empty-list' : ''"
                [loading]="isLoading"
                [node]="paging"
                [sorting]="[ 'modifiedAt', 'desc' ]"
                [allowDropFiles]="true"

                [contextMenuActions]="true"
                [contentActions]="false"
                [navigate]="false"
                [enablePagination]="false"
                [selectionMode]="'multiple'"

                (node-dblclick)="onNodeDoubleClick($event.detail?.node?.entry)">

                <data-columns>
                    <data-column
                        key="$thumbnail"
                        type="image"
                        [sortable]="false"
                        class="image-table-cell">
                    </data-column>

                    <data-column
                        key="name"
                        class="app-name-column"
                        title="APP.DOCUMENT_LIST.COLUMNS.NAME">
                        <ng-template let-value="value" let-context>
                            <span title="{{ context?.row?.obj | nodeNameTooltip }}">{{ value }}</span>
                        </ng-template>
                    </data-column>

                    <data-column
                        key="content.sizeInBytes"
                        title="APP.DOCUMENT_LIST.COLUMNS.SIZE">
                        <ng-template let-value="value">
                            <span title="{{ value }} bytes">{{ value | adfFileSize }}</span>
                        </ng-template>
                    </data-column>

                    <data-column
                        key="modifiedAt"
                        title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_ON">
                        <ng-template let-value="value">
                            <span title="{{ value | date:'medium' }}">{{ value | adfTimeAgo }}</span>
                        </ng-template>
                    </data-column>

                    <data-column
                        key="modifiedByUser.displayName"
                        title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_BY">
                    </data-column>
                </data-columns>
            </adf-document-list>

            <ng-container *ngIf="!isEmpty">
                <adf-pagination
                    [pagination]="pagination"
                    (change)="load(true, $event)">
                </adf-pagination>
            </ng-container>
        </adf-upload-drag-area>
    </div>
</div>