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
                color="primary"
                mat-icon-button
                *ngIf="canPreviewFile(documentList.selection)"
                title="{{ 'APP.ACTIONS.VIEW' | translate }}"
                (click)="showPreview(documentList.selection[0]?.entry)">
                <mat-icon>open_in_browser</mat-icon>
            </button>

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

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

            <button mat-icon-button
                [color]="infoDrawerOpened ? 'accent' : 'primary'"
                *ngIf="documentList.selection.length"
                title="{{ 'APP.ACTIONS.DETAILS' | translate }}"
                (click)="toggleSidebar()">
                <mat-icon>info_outline</mat-icon>
            </button>

            <button
                color="primary"
                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
                    #selection="adfFavorite"
                    [adf-node-favorite]="documentList.selection">
                    <mat-icon [ngClass]="{
                        'toolbar__option--active': selection.hasFavorites(),
                        'toolbar__option--default': !selection.hasFavorites()
                    }">
                        {{ selection.hasFavorites() ? 'star' :'star_border' }}
                    </mat-icon>
                    <span>{{ 'APP.ACTIONS.FAVORITE' | translate }}</span>
                </button>

                <button
                    mat-menu-item
                    [app-copy-node]="documentList.selection">
                    <mat-icon color="primary">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 color="primary">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 color="primary">delete</mat-icon>
                    <span>{{ 'APP.ACTIONS.DELETE' | translate }}</span>
                </button>

                <button
                    mat-menu-item
                    *ngIf="canManageVersions(documentList.selection)"
                    [app-node-versions]="documentList.selection">
                    <mat-icon color="primary">history</mat-icon>
                    <span>{{ 'APP.ACTIONS.VERSIONS' | translate }}</span>
                </button>
            </mat-menu>
        </adf-toolbar>
    </div>

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

    <div [attr.class]="!isValidPath ? 'inner-layout__content--hide' : 'inner-layout__content'">
        <div class="inner-layout__panel" [ngClass]="{'adf-document-list--loading': isLoading}">
            <adf-upload-drag-area
                [parentId]="node?.id"
                [disabled]="!permission.check(node, ['create'])">

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

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

                    (sorting-changed)="onSortingChanged($event)"
                    (node-dblclick)="onNodeDoubleClick($event)"
                    (node-select)="onNodeSelect($event, documentList)">

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

                        <data-column
                            class="adf-data-table-cell--ellipsis__name"
                            key="name"
                            title="APP.DOCUMENT_LIST.COLUMNS.NAME">
                            <ng-template let-value="value" let-context>
                                <span class="adf-datatable-cell" title="{{ context?.row?.obj | adfNodeNameTooltip }}">{{ 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
                            class="adf-data-table-cell--ellipsis"
                            key="modifiedByUser.displayName"
                            title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_BY">
                        </data-column>
                    </data-columns>
                </adf-document-list>

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

        <div class="inner-layout__side-panel"
            *ngIf="infoDrawerOpened"
            [app-node-info]="documentList.selection"
            (changed)="toggleSidebar($event)"
            #infoInstance=nodeInfo>

            <adf-info-drawer [title]="'APP.INFO_DRAWER.TITLE' | translate">
                <adf-info-drawer-tab [label]="'APP.INFO_DRAWER.TABS.PROPERTIES' | translate">
                    <div *ngIf="infoInstance.loading">
                        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
                    </div>

                    <adf-content-metadata-card
                        [readOnly]="!canUpdate(documentList.selection)"
                        [displayEmpty]="canUpdate(documentList.selection)"
                        [preset]="'custom'"
                        [node]="infoInstance.node">
                    </adf-content-metadata-card>
                </adf-info-drawer-tab>

                <adf-info-drawer-tab [label]="'APP.INFO_DRAWER.TABS.VERSIONS' | translate">
                    <ng-container *ngIf="isFileSelected(documentList.selection);else choose_document_template">
                        <ng-container *ngIf="canManageVersions(documentList.selection); else no_permission_to_versions">
                            <adf-version-manager *ngIf="infoInstance.node"
                                                 [node]="infoInstance.node">
                            </adf-version-manager>
                        </ng-container>
                    </ng-container>
                    <ng-template #choose_document_template>
                        <div class="adf-manage-versions-empty">
                            <mat-icon class="adf-manage-versions-empty-icon">face</mat-icon>
                            {{ 'VERSION.SELECTION.EMPTY' | translate }}
                        </div>
                    </ng-template>
                    <ng-template #no_permission_to_versions>
                        <div class="adf-manage-versions-no-permission">
                            <mat-icon class="adf-manage-versions-no-permission-icon">warning</mat-icon>
                            {{ 'VERSION.SELECTION.NO_PERMISSION' | translate }}
                        </div>
                    </ng-template>
                </adf-info-drawer-tab>
            </adf-info-drawer>
        </div>
    </div>
</div>