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 *ifExperimental="'cardview'"
                color="primary"
                mat-icon-button
                (click)="toggleGalleryView()">
                <mat-icon *ngIf="displayMode === 'list'" matTooltip="{{ 'APP.DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}">view_comfy</mat-icon>
                <mat-icon *ngIf="displayMode === 'gallery'" matTooltip="{{ 'APP.DOCUMENT_LIST.TOOLBAR.LISTVIEW' | translate }}">list</mat-icon>
            </button>

            <ng-container *ifExperimental="'extensions'">
                <adf-toolbar-divider></adf-toolbar-divider>
                <button *ngFor="let entry of actions"
                    mat-icon-button
                    color="primary"
                    title="{{ entry.title | translate }}"
                    (click)="runAction(entry.target.action)">
                    <mat-icon>{{ entry.icon }}</mat-icon>
                </button>
                <adf-toolbar-divider></adf-toolbar-divider>
            </ng-container>

            <ng-container *ngIf="!selection.isEmpty">
                <button
                    *ngIf="selection.count === 1"
                    color="primary"
                    mat-icon-button
                    title="{{ 'APP.ACTIONS.VIEW' | translate }}"
                    (click)="showPreview(selection.nodes[0])">
                    <mat-icon>open_in_browser</mat-icon>
                </button>

                <button
                    color="primary"
                    mat-icon-button
                    title="{{ 'APP.ACTIONS.DOWNLOAD' | translate }}"
                    (click)="downloadSelection()">
                    <mat-icon>get_app</mat-icon>
                </button>

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

                <button
                    color="primary"
                    mat-icon-button
                    title="{{ 'APP.ACTIONS.MORE' | translate }}"
                    [matMenuTriggerFor]="actionsMenu">
                    <mat-icon>more_vert</mat-icon>
                </button>

                <mat-menu #actionsMenu="matMenu"
                    [overlapTrigger]="false">
                    <button
                        mat-menu-item
                        #favorites="adfFavorite"
                        [adf-node-favorite]="selection.nodes">
                        <mat-icon color="primary" *ngIf="favorites.hasFavorites()">star</mat-icon>
                        <mat-icon *ngIf="!favorites.hasFavorites()">star_border</mat-icon>
                        <span>{{ 'APP.ACTIONS.FAVORITE' | translate }}</span>
                    </button>

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

                    <button
                        mat-menu-item
                        *ngIf="canDeleteShared"
                        [acaMoveNode]="selection.nodes">
                        <mat-icon>library_books</mat-icon>
                        <span>{{ 'APP.ACTIONS.MOVE' | translate }}</span>
                    </button>

                    <button
                        mat-menu-item
                        *ngIf="canDelete"
                        [acaUnshareNode]="selection.nodes">
                        <mat-icon>stop_screen_share</mat-icon>
                        <span>{{ 'APP.ACTIONS.UNSHARE' | translate }}</span>
                    </button>

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

                    <button
                        mat-menu-item
                        *ngIf="canUpdateShared"
                        [acaNodeVersions]="selection.file">
                        <mat-icon>history</mat-icon>
                        <span>{{ 'APP.ACTIONS.VERSIONS' | translate }}</span>
                    </button>
                </mat-menu>
            </ng-container>
        </adf-toolbar>
    </div>

    <div class="inner-layout__content">
        <div class="inner-layout__panel">
            <adf-document-list acaDocumentList #documentList
                currentFolderId="-sharedlinks-"
                selectionMode="multiple"
                [sorting]="[ 'modifiedAt', 'desc' ]"
                (node-dblclick)="showPreview($event.detail?.node)">

                <empty-folder-content>
                    <ng-template>
                        <adf-empty-content
                            icon="people"
                            [title]="'APP.BROWSE.SHARED.EMPTY_STATE.TITLE'"
                            subtitle="APP.BROWSE.SHARED.EMPTY_STATE.TEXT">
                        </adf-empty-content>
                    </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.name"
                        title="APP.DOCUMENT_LIST.COLUMNS.LOCATION">
                        <ng-template let-context>
                            <aca-location-link [context]="context"></aca-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 acaPagination [target]="documentList">
            </adf-pagination>
        </div>

        <div class="inner-layout__side-panel" *ngIf="infoDrawerOpened">
            <aca-info-drawer [node]="selection.last"></aca-info-drawer>
        </div>
    </div>
</div>