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

<div class="inner-layout">
    <div class="inner-layout__header">
        <adf-breadcrumb root="APP.BROWSE.SHARED.TITLE">
        </adf-breadcrumb>

        <adf-toolbar class="inline">

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

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

            <button mat-icon-button
                [color]="infoDrawerOpened ? 'primary' : 'accent'"
                *ngIf="documentList.selection.length"
                title="{{ 'APP.ACTIONS.DETAILS' | translate }}"
                (click)="toggleSidebar()">
                <mat-icon>info_outline</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
                    #selection="adfFavorite"
                    [adf-node-favorite]="documentList.selection">
                    <mat-icon [ngClass]="{ 'icon-highlight': 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>content_copy</mat-icon>
                    <span>{{ 'APP.ACTIONS.COPY' | translate }}</span>
                </button>

                <button
                    mat-menu-item
                    *ngIf="canMoveShared(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)"
                    [appUnshareNode]="documentList.selection"
                    (links-unshared)="refresh()">
                    <mat-icon>stop_screen_share</mat-icon>
                    <span>{{ 'APP.ACTIONS.UNSHARE' | translate }}</span>
                </button>

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

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

    <div class="inner-layout__content">
        <div class="inner-layout__panel">
            <adf-document-list #documentList
                [attr.class]="documentList.isEmpty() ? 'empty-list' : ''"
                currentFolderId="-sharedlinks-"
                selectionMode="multiple"
                [sorting]="sorting"
                [contextMenuActions]="true"
                [contentActions]="false"
                (sorting-changed)="onSortingChanged($event)"
                (node-dblclick)="onNodeDoubleClick($event.detail?.node?.entry)">

                <empty-folder-content>
                    <ng-template>
                        <app-empty-folder
                            icon="people"
                            title="APP.BROWSE.SHARED.EMPTY_STATE.TITLE"
                            subtitle="APP.BROWSE.SHARED.EMPTY_STATE.TEXT">
                        </app-empty-folder>
                    </ng-template>
                </empty-folder-content>

                <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="path"
                        title="APP.DOCUMENT_LIST.COLUMNS.LOCATION">
                        <ng-template let-context>
                            <app-location-link [context]="context"></app-location-link>
                        </ng-template>
                    </data-column>

                    <data-column
                        key="content.sizeInBytes"
                        title="APP.DOCUMENT_LIST.COLUMNS.SIZE"
                        type="fileSize">
                    </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-column
                        class="adf-data-table-cell--ellipsis"
                        key="sharedByUser.displayName"
                        title="APP.DOCUMENT_LIST.COLUMNS.SHARED_BY">
                    </data-column>

                </data-columns>
            </adf-document-list>
            <adf-pagination [ngClass]="{ 'no-border' :documentList.isEmpty()}"
                [target]="documentList"
                (changePageSize)="onChangePageSize($event)">
            </adf-pagination>
        </div>

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

            <adf-info-drawer title="Details">
                <adf-info-drawer-tab label="Properties">
                    <adf-content-metadata-card
                        [displayEmpty]="true"
                        [preset]="'custom'"
                        [node]="infoInstance.node">
                    </adf-content-metadata-card>
                </adf-info-drawer-tab>
            </adf-info-drawer>
        </div>
    </div>
</div>