Popovics András 6947e04208 [ADF-1038] - Dropddown Breadcrumb component (#2092)
* Update material to beta8

* Install @angular/cdk

* DropdownBreadcrumb component

* Style fixes

* Fix styling issues after rebase

* Fix Material issue in processlist

* Update material again, because of rebase errors... :/

* Fix new tslint rule raised errors
2017-08-01 11:25:32 +01:00

226 lines
9.0 KiB
HTML

<div class="container">
<alfresco-upload-drag-area
[rootFolderId]="documentList.currentFolderId"
[versioning]="versioning"
[enabled]="documentList.hasCreatePermission()">
<div *ngIf="errorMessage" class="error-message">
<button (click)="resetError()" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">highlight_off</i>
</button>
<span class="error-message--text">{{errorMessage}}</span>
</div>
<ng-container *ngIf="useCustomToolbar">
<adf-toolbar>
<adf-toolbar-title>
<adf-breadcrumb *ngIf="!useDropdownBreadcrumb"
class="files-breadcrumb"
[target]="documentList"
[folderNode]="documentList.folderNode">
</adf-breadcrumb>
<adf-dropdown-breadcrumb *ngIf="useDropdownBreadcrumb"
class="files-breadcrumb"
[target]="documentList"
[folderNode]="documentList.folderNode">
</adf-dropdown-breadcrumb>
</adf-toolbar-title>
<button md-icon-button (click)="onCreateFolderClicked($event)">
<md-icon>create_new_folder</md-icon>
</button>
<button md-icon-button>
<md-icon>delete</md-icon>
</button>
<button md-icon-button [mdMenuTriggerFor]="menu">
<md-icon>more_vert</md-icon>
</button>
<md-menu #menu="mdMenu">
<button md-menu-item>
<md-icon>dialpad</md-icon>
<span>Redial</span>
</button>
<button md-menu-item disabled>
<md-icon>voicemail</md-icon>
<span>Check voicemail</span>
</button>
<button md-menu-item>
<md-icon>notifications_off</md-icon>
<span>Disable alerts</span>
</button>
</md-menu>
</adf-toolbar>
</ng-container>
<adf-document-list
#documentList
[creationMenuActions]="!useCustomToolbar"
[currentFolderId]="currentFolderId"
[contextMenuActions]="true"
[contentActions]="true"
[allowDropFiles]="true"
(error)="onNavigationError($event)"
(success)="resetError()"
(preview)="showFile($event)"
(permissionError)="handlePermissionError($event)">
<data-columns>
<data-column
key="$thumbnail"
type="image"
[sortable]="false"
class="image-table-cell">
</data-column>
<data-column
title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
key="name"
class="full-width ellipsis-cell">
</data-column>
<!-- Notes: has performance overhead due to multiple files/folders causing separate HTTP calls to get tags -->
<!--
<data-column
title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
key="id"
class="full-width ellipsis-cell">
<template let-entry="$implicit">
<alfresco-tag-node-list [nodeId]="entry.data.getValue(entry.row, entry.col)"></alfresco-tag-node-list>
</template>
</data-column>
-->
<data-column
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
key="createdByUser.displayName"
class="desktop-only">
</data-column>
<data-column
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
key="createdAt"
type="date"
format="medium"
class="desktop-only">
</data-column>
</data-columns>
<content-actions>
<!-- folder actions -->
<content-action
icon="delete"
target="folder"
permission="delete"
[disableWithNoPermission]="true"
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
(permissionEvent)="handlePermissionError($event)"
handler="delete">
</content-action>
<!-- document actions -->
<content-action
icon="file_download"
target="document"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
handler="download">
</content-action>
<content-action
icon="delete"
target="document"
permission="delete"
[disableWithNoPermission]="true"
(permissionEvent)="handlePermissionError($event)"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
handler="delete">
</content-action>
</content-actions>
</adf-document-list>
</alfresco-upload-drag-area>
</div>
<context-menu-holder></context-menu-holder>
<div class="container">
<section>
<md-slide-toggle [(ngModel)]="useDropdownBreadcrumb">Dropdown breadcrumb</md-slide-toggle>
</section>
<section>
<md-slide-toggle [(ngModel)]="useCustomToolbar">Use custom toolbar</md-slide-toggle>
</section>
<section>
<md-slide-toggle [(ngModel)]="multipleFileUpload">Multiple File Upload</md-slide-toggle>
</section>
<section>
<md-slide-toggle [(ngModel)]="folderUpload">Folder upload</md-slide-toggle>
</section>
<section>
<md-slide-toggle [(ngModel)]="acceptedFilesTypeShow">Custom extensions filter</md-slide-toggle>
</section>
<section>
<md-slide-toggle [(ngModel)]="versioning">Enable versioning</md-slide-toggle>
</section>
<section>
<md-slide-toggle [(ngModel)]="disableWithNoPermission">Disable upload button when user has no permissions</md-slide-toggle>
</section>
<h5>Upload</h5>
<section *ngIf="acceptedFilesTypeShow">
<md-input-container>
<input mdInput placeholder="Extension accepted" [(ngModel)]="acceptedFilesType" data-automation-id="accepted-files-type">
</md-input-container>
</section>
<div *ngIf="!acceptedFilesTypeShow">
<alfresco-upload-button
#uploadButton
[disabled]="!enableUpload"
data-automation-id="multiple-file-upload"
[rootFolderId]="documentList.currentFolderId"
[multipleFiles]="multipleFileUpload"
[uploadFolders]="folderUpload"
[versioning]="versioning"
[disableWithNoPermission]="disableWithNoPermission"
(permissionEvent)="handlePermissionError($event)">
</alfresco-upload-button>
</div>
<div *ngIf="acceptedFilesTypeShow">
<alfresco-upload-button
#uploadButton
[disabled]="!enableUpload"
data-automation-id="multiple-file-upload"
[rootFolderId]="documentList.currentFolderId"
[acceptedFilesType]="acceptedFilesType"
[multipleFiles]="multipleFileUpload"
[uploadFolders]="folderUpload"
[versioning]="versioning"
[disableWithNoPermission]="disableWithNoPermission"
(permissionEvent)="handlePermissionError($event)">
</alfresco-upload-button>
</div>
<section>
<md-checkbox [(ngModel)]="enableUpload">Enable upload (demoing enabled/disabled state)</md-checkbox>
</section>
</div>
<file-uploading-dialog #fileDialog></file-uploading-dialog>
<div *ngIf="fileShowed">
<alfresco-viewer [(showViewer)]="fileShowed"
[fileNodeId]="fileNodeId"
[overlayMode]="true">
<extension-viewer [supportedExtensions]="['obj','3DS']" #extension>
<ng-template let-urlFileContent="urlFileContent" let-extension="extension" >
<threed-viewer [urlFile]="urlFileContent" [extension]="extension" ></threed-viewer>
</ng-template>
</extension-viewer>
</alfresco-viewer>
<!-- Comment the viewer above and uncomment that one below if you want test the overlay false viewer-->
<!--<div *ngIf="fileShowed" class="adf-not-overlay-viewer">-->
<!--<alfresco-viewer [(showViewer)]="fileShowed"-->
<!--[fileNodeId]="fileNodeId"-->
<!--[overlayMode]="false">-->
<!--</alfresco-viewer>-->
<!--</div>-->
</div>