mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
03f60d910f
* replace MDL sidebar with material2 menus - separate language picker - separate "more" menu * toolbar theme picker * fix toolbar button colors for different themes * revert the commented out code
268 lines
11 KiB
HTML
268 lines
11 KiB
HTML
<div class="container">
|
|
<div class="adf-demo-site-container-style" id="demo-container">
|
|
<span> Choose A Site from DropDown </span>
|
|
<p></p>
|
|
<adf-sites-dropdown (change)="getSiteContent($event)">
|
|
</adf-sites-dropdown>
|
|
</div>
|
|
<alfresco-upload-drag-area
|
|
[parentId]="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 [color]="toolbarColor">
|
|
<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]="themePicker">
|
|
<md-icon>format_color_fill</md-icon>
|
|
</button>
|
|
|
|
<md-menu #themePicker="mdMenu">
|
|
<button md-menu-item (click)="toolbarColor = 'default'">Default</button>
|
|
<button md-menu-item (click)="toolbarColor = 'primary'">Primary</button>
|
|
<button md-menu-item (click)="toolbarColor = 'accent'">Accent</button>
|
|
<button md-menu-item (click)="toolbarColor = 'warn'">Warn</button>
|
|
</md-menu>
|
|
|
|
<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
|
|
[permissionsStyle]="permissionsStyle"
|
|
[creationMenuActions]="!useCustomToolbar"
|
|
[currentFolderId]="currentFolderId"
|
|
[contextMenuActions]="true"
|
|
[contentActions]="true"
|
|
[allowDropFiles]="true"
|
|
[selectionMode]="selectionMode"
|
|
[multiselect]="multiselect"
|
|
(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="p-10">
|
|
Selected Nodes:
|
|
<ul>
|
|
<li *ngFor="let node of documentList.selection">
|
|
{{ node.entry.name }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<section>
|
|
<md-slide-toggle [(ngModel)]="multiselect">Multiselect (with checkboxes)</md-slide-toggle>
|
|
</section>
|
|
|
|
<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>
|
|
|
|
<div class="p-10">
|
|
<p>For 'Multiple' selection mode use Cmd (macOS) or Ctrl (Win) to toggle selection of multiple items.</p>
|
|
<md-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
|
|
<md-option *ngFor="let mode of selectionModes" [value]="mode.value">
|
|
{{mode.viewValue}}
|
|
</md-option>
|
|
</md-select>
|
|
</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>
|