main application

src/app/components/files/files.component.html

@@ -0,0 +1,149 @@
+<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
+                md-icon-button
+                *ngIf="canPreviewFile(documentList.selection)"
+                title="{{ 'APP.ACTIONS.VIEW' | translate }}"
+                (click)="showPreview(documentList.selection[0]?.entry?.id)">
+                <md-icon>open_in_browser</md-icon>
+            </button>
+
+            <button
+                md-icon-button
+                *ngIf="hasSelection(documentList.selection)"
+                title="{{ 'APP.ACTIONS.DOWNLOAD' | translate }}"
+                [app-download-node]="documentList.selection">
+                <md-icon>get_app</md-icon>
+            </button>
+
+            <button
+                md-icon-button
+                *ngIf="canEditFolder(documentList.selection)"
+                title="{{ 'APP.ACTIONS.EDIT' | translate }}"
+                [app-edit-folder]="documentList.selection[0]?.entry">
+                <md-icon>create</md-icon>
+            </button>
+
+            <button
+                md-icon-button
+                *ngIf="hasSelection(documentList.selection)"
+                title="{{ 'APP.ACTIONS.MORE' | translate }}"
+                [mdMenuTriggerFor]="actionsMenu">
+                <md-icon>more_vert</md-icon>
+            </button>
+
+            <md-menu #actionsMenu="mdMenu"
+                [overlapTrigger]="false"
+                class="secondary-options">
+                <button
+                    md-menu-item
+                    #favorite="favorite"
+                    [app-favorite-node]="documentList.selection">
+                    <md-icon [ngClass]="{ 'icon-highlight': favorite.hasFavorites() }">
+                        {{ favorite.hasFavorites() ? 'star' :'star_border' }}
+                    </md-icon>
+                    <span>{{ 'APP.ACTIONS.FAVORITE' | translate }}</span>
+                </button>
+
+                <button
+                    md-menu-item
+                    [app-copy-node]="documentList.selection">
+                    <md-icon>content_copy</md-icon>
+                    <span>{{ 'APP.ACTIONS.COPY' | translate }}</span>
+                </button>
+
+                <button
+                    md-menu-item
+                    *ngIf="canMove(documentList.selection)"
+                    [app-move-node]="documentList.selection">
+                    <md-icon>library_books</md-icon>
+                    <span>{{ 'APP.ACTIONS.MOVE' | translate }}</span>
+                </button>
+
+                <button
+                    md-menu-item
+                    *ngIf="canDelete(documentList.selection)"
+                    [app-delete-node]="documentList.selection">
+                    <md-icon>delete</md-icon>
+                    <span>{{ 'APP.ACTIONS.DELETE' | translate }}</span>
+                </button>
+            </md-menu>
+        </adf-toolbar>
+    </div>
+
+    <div class="inner-layout__content">
+        <alfresco-upload-drag-area
+            [rootFolderId]="node?.id"
+            [disabled]="!canCreateContent(node)"
+            [showNotificationBar]="false">
+
+            <adf-document-list #documentList
+                [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>
+        </alfresco-upload-drag-area>
+    </div>
+</div>