Denys Vuika fd729e76c0 [ADF-3053] breadcrumb fixes (#3406)
* translate breadcrumb root in demo shell

* optional "max items" feature and style fixes

* should not be restricted by default

* style updates

* toolbar and breadcrumb layout fixes

* breadcrumb demo and testing page

* full toolbar scenario

* fix translation issue with the dropdown and custom root

* a11y fixes

* fix issue with duplicate id, remove unused attribute
2018-05-25 21:42:24 +02:00

574 lines
27 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<div class="container">
<mat-accordion *ngIf="showRecentFiles" class="adf-container-recent">
<mat-expansion-panel hideToggle="true">
<mat-expansion-panel-header >
<mat-panel-title>
{{ 'DOCUMENT_LIST.RECENT.TITLE' | translate }}<mat-icon>history</mat-icon>
</mat-panel-title>
</mat-expansion-panel-header>
<adf-document-list
[currentFolderId]="'-recent-'"
locationFormat="/files"
[display]="'gallery'"
[showHeader]="false"
[maxItems]="5"
(preview)="showFile($event)"
selectionMode="null">
<empty-folder-content>
<ng-template>
<div class="empty-list__block">
<mat-icon>history</mat-icon>
<p class="empty-list__title">{{ 'DOCUMENT_LIST.RECENT.EMPTY_STATE.TITLE' | translate}}</p>
</div>
</ng-template>
</empty-folder-content>
</adf-document-list>
</mat-expansion-panel>
</mat-accordion>
<div *ngIf="showSitePicker" class="adf-site-container-style" id="site-container">
<adf-sites-dropdown (change)="onSiteChange($event)" [hideMyFiles]="false" [relations]="'members'">
</adf-sites-dropdown>
</div>
<div class="document-list-container" fxLayout="row" fxLayoutAlign="start stretch" fxLayoutGap="16px">
<adf-upload-drag-area fxFlex="1 1 auto"
[disabled]="disableDragArea"
[rootFolderId]="getDocumentListCurrentFolderId()"
[versioning]="versioning"
[adf-node-permission]="'create'"
[adf-nodes]="disableDragArea ? getCurrentDocumentListNode() : []">
<div *ngIf="errorMessage" class="error-message">
<button (click)="resetError()" mat-icon-button>
<mat-icon>highlight_off</mat-icon>
</button>
<span class="error-message--text">{{errorMessage}}</span>
</div>
<adf-toolbar *ngIf="!disableDragArea" [color]="toolbarColor" class="adf-files-toolbar">
<adf-toolbar-title fxFlex="0 1 auto">
<adf-breadcrumb fxShow fxHide.lt-sm="true"
class="files-breadcrumb"
root="APP.PERSONAL-FILES"
[target]="documentList"
[folderNode]="documentList.folderNode">
</adf-breadcrumb>
<adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
class="files-breadcrumb"
[target]="documentList"
[folderNode]="documentList.folderNode">
</adf-dropdown-breadcrumb>
</adf-toolbar-title>
<adf-toolbar-divider fxFlex="0 0 auto"></adf-toolbar-divider>
<div fxFlex="0 0 auto" class="adf-document-action-buttons" fxShow fxHide.lt-sm="true">
<button
mat-icon-button
title="{{ 'DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}"
(click)="toogleGalleryView()">
<mat-icon *ngIf="displayMode === 'list'" matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}">view_comfy</mat-icon>
<mat-icon *ngIf="displayMode === 'gallery'" matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.LISTVIEW' | translate }}">list</mat-icon>
</button>
<button
mat-icon-button
[disabled]="!canCreateContent(documentList.folderNode)"
title="{{ 'DOCUMENT_LIST.TOOLBAR.NEW_FOLDER' | translate }}"
(error)="openSnackMessage($event)"
[adf-create-folder]="getDocumentListCurrentFolderId()"
matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.NEW_FOLDER' | translate }}">
<mat-icon>create_new_folder</mat-icon>
</button>
<button mat-icon-button
[disabled]="!canEditFolder(documentList.selection)"
title="{{ 'DOCUMENT_LIST.TOOLBAR.EDIT_FOLDER' | translate }}"
(error)="openSnackMessage($event)"
[adf-edit-folder]="documentList.selection[0]?.entry"
matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.EDIT_FOLDER' | translate }}">
<mat-icon>create</mat-icon>
</button>
<button mat-icon-button
[disabled]="!hasSelection(documentList.selection)"
title="{{ 'DOCUMENT_LIST.TOOLBAR.DOWNLOAD' | translate }}"
[adfNodeDownload]="documentList.selection"
matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.DOWNLOAD' | translate }}">
<mat-icon>get_app</mat-icon>
</button>
<button mat-icon-button
adf-node-permission="delete"
[adf-nodes]="documentList.selection"
title="{{ 'DOCUMENT_LIST.TOOLBAR.DELETE' | translate }}"
(delete)="onDeleteActionSuccess($event)"
[adf-delete]="documentList.selection"
matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.DELETE' | translate }}">
<mat-icon>delete</mat-icon>
</button>
<button mat-icon-button
[disabled]="!documentList.selection.length"
#favorite="adfFavorite"
[adf-node-favorite]="documentList.selection"
matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.FAVORITES' | translate }}">
<mat-icon>
{{ favorite.hasFavorites() ? 'star' :'star_border' }}
</mat-icon>
</button>
<button mat-icon-button
[disabled]="!documentList.selection.length"
[baseShareUrl]="baseShareUrl"
[adf-share]="documentList.selection[0]"
matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.SHARE' | translate }}">
<mat-icon>
share
</mat-icon>
</button>
</div>
<button fxFlex="1 0 auto" mat-icon-button [matMenuTriggerFor]="themePicker" matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.THEME' | translate }}">
<mat-icon>format_color_fill</mat-icon>
</button>
<mat-menu #themePicker="matMenu">
<button mat-menu-item (click)="toolbarColor = 'default'">Default</button>
<button mat-menu-item (click)="toolbarColor = 'primary'">Primary</button>
<button mat-menu-item (click)="toolbarColor = 'accent'">Accent</button>
<button mat-menu-item (click)="toolbarColor = 'warn'">Warn</button>
</mat-menu>
<button mat-icon-button (click)="showVersions = !showVersions" class="adf-show-versions-button">
<mat-icon *ngIf="!showVersions" matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.SHOW_VERSION' | translate }}">chevron_left</mat-icon>
<mat-icon *ngIf="showVersions" matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.HIDE_VERSION' | translate }}">chevron_right</mat-icon>
</button>
<adf-toolbar-divider fxFlex="0 0 auto" fxHide fxShow.lt-sm="true"></adf-toolbar-divider>
<button fxFlex="0 0 auto" mat-icon-button [matMenuTriggerFor]="menu" fxHide fxShow.lt-sm="true">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item
(click)="toogleGalleryView()">
<mat-icon *ngIf="displayMode === 'list'" >view_comfy</mat-icon>
<mat-icon *ngIf="displayMode === 'gallery'">list</mat-icon>
<span>{{ 'DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}</span>
</button>
<button mat-menu-item
(error)="openSnackMessage($event)"
[adf-create-folder]="getDocumentListCurrentFolderId()">
<mat-icon>create_new_folder</mat-icon>
<span>{{ 'DOCUMENT_LIST.TOOLBAR.NEW_FOLDER' | translate }}</span>
</button>
<button mat-menu-item
[disabled]="!canEditFolder(documentList.selection)"
(error)="openSnackMessage($event)"
[adf-edit-folder]="documentList.selection[0]?.entry">
<mat-icon>create</mat-icon>
<span>{{ 'DOCUMENT_LIST.TOOLBAR.EDIT_FOLDER' | translate }}</span>
</button>
<button mat-menu-item
[disabled]="!hasSelection(documentList.selection)"
title="Download"
(click)="downloadNodes(documentList.selection)">
<mat-icon>get_app</mat-icon>
<span>{{ 'DOCUMENT_LIST.TOOLBAR.DOWNLOAD' | translate }}</span>
</button>
<button mat-menu-item
adf-node-permission="delete"
[adf-nodes]="documentList.selection"
(delete)="onDeleteActionSuccess($event)"
[adf-delete]="documentList.selection">
<mat-icon>delete</mat-icon>
<span>{{ 'DOCUMENT_LIST.TOOLBAR.DELETE' | translate }}</span>
</button>
</mat-menu>
</adf-toolbar>
<adf-document-list
#documentList
[permissionsStyle]="permissionsStyle"
[currentFolderId]="currentFolderId"
[contextMenuActions]="true"
[contentActions]="true"
[allowDropFiles]="true"
[selectionMode]="selectionMode"
[multiselect]="multiselect"
[display]="displayMode"
[node]="nodeResult"
[includeFields]="includeFields"
[sorting]="sorting"
[sortingMode]="sortingMode"
[showHeader]="showHeader"
(error)="onNavigationError($event)"
(success)="resetError()"
(ready)="emitReadyEvent($event)"
(preview)="showFile($event)"
(folderChange)="onFolderChange($event)"
(permissionError)="handlePermissionError($event)">
<empty-folder-content *ngIf="disableDragArea">
<ng-template>
<div class="adf-empty_template">
<div class="adf-no-result-message">{{ 'SEARCH.NO_RESULT' | translate }}</div>
</div>
</ng-template>
</empty-folder-content>
<data-columns>
<data-column
key="$thumbnail"
type="image"
[sortable]="false"
class="image-table-cell">
</data-column>
<data-column
*ngIf="showNameColumn"
key="name"
title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
[formatTooltip]="getNodeNameTooltip"
class="full-width ellipsis-cell">
</data-column>
<!-- Location column demo -->
<!--
<data-column
key="path"
type="location"
format="/files"
title="Location">
</data-column>
-->
<data-column
key="content.sizeInBytes"
title="{{'DOCUMENT_LIST.COLUMNS.SIZE' | translate}}"
type="fileSize">
</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">
<ng-template let-entry="$implicit">
<alfresco-tag-node-list [nodeId]="entry.data.getValue(entry.row, entry.col)"></alfresco-tag-node-list>
</ng-template>
</data-column>
-->
<data-column
class="desktop-only"
title="{{'DOCUMENT_LIST.COLUMNS.IS_LOCKED' | translate}}"
key="id">
<ng-template let-entry="$implicit">
<button mat-icon-button [adf-node-lock]="entry.row.node.entry">
<mat-icon *ngIf="entry.row.getValue('isLocked')">lock</mat-icon>
<mat-icon *ngIf="!entry.row.getValue('isLocked')">lock_open</mat-icon>
</button>
</ng-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' | translate}}"
key="createdAt"
type="date"
format="timeAgo"
class="desktop-only">
</data-column>
</data-columns>
<content-actions>
<!-- Conditional actions demo -->
<content-action
icon="get_app"
title="Download this file now!"
handler="download"
[visible]="canDownloadNode">
</content-action>
<content-action
icon="get_app"
title="Never see this action again"
handler="download"
[visible]="false">
</content-action>
<content-action
icon="get_app"
title="This can be toggled"
handler="download"
[visible]="showCustomDownloadAction">
</content-action>
<!-- common actions -->
<content-action
icon="get_app"
title="DOCUMENT_LIST.ACTIONS.DOWNLOAD"
handler="download">
</content-action>
<content-action
icon="content_copy"
title="DOCUMENT_LIST.ACTIONS.FOLDER.COPY"
permission="copy"
[disableWithNoPermission]="true"
(error)="onContentActionError($event)"
(success)="onContentActionSuccess($event)"
handler="copy">
</content-action>
<content-action
icon="redo"
title="DOCUMENT_LIST.ACTIONS.FOLDER.MOVE"
permission="update"
[disableWithNoPermission]="true"
(error)="onContentActionError($event)"
(success)="onContentActionSuccess($event)"
handler="move">
</content-action>
<content-action
icon="delete"
permission="delete"
[disableWithNoPermission]="true"
title="DOCUMENT_LIST.ACTIONS.FOLDER.DELETE"
(permissionEvent)="handlePermissionError($event)"
(success)="onDeleteActionSuccess($event)"
handler="delete">
</content-action>
<content-action
icon="info"
title="DOCUMENT_LIST.ACTIONS.METADATA"
(execute)="onManageMetadata($event)">
</content-action>
<!-- document actions -->
<content-action
icon="storage"
target="document"
title="DOCUMENT_LIST.ACTIONS.VERSIONS"
(execute)="onManageVersions($event)">
</content-action>
<content-action
*ngIf="authenticationService.isBpmLoggedIn()"
icon="play_arrow"
target="document"
title="DOCUMENT_LIST.ACTIONS.DOCUMENT.PROCESS_ACTION"
(execute)="startProcesAction($event)">
</content-action>
<content-action
icon="settings_input_component"
title="{{'DOCUMENT_LIST.ACTIONS.PERMISSION' | translate}}"
permission="copy"
(error)="onContentActionError($event)"
(execute)="onPermissionRequested($event)">
</content-action>
<content-action
icon="lock"
permission="lock"
handler="lock"
title="Lock">
</content-action>
</content-actions>
</adf-document-list>
<adf-pagination
#standardPagination
*ngIf="!infiniteScrolling"
class="adf-documentlist-pagination"
[target]="documentList"
[supportedPageSizes]="supportedPages"
(changePageSize)="onChangePageSize($event)"
(changePageNumber)="onChangePageNumber($event)"
(nextPage)="onNextPage($event)"
(prevPage)="onPrevPage($event)">
</adf-pagination>
<adf-infinite-pagination
[hidden]="!infiniteScrolling"
[target]="documentList"
[loading]="documentList.infiniteLoading">
{{ 'ADF-DOCUMENT-LIST.LAYOUT.LOAD_MORE' | translate }}
</adf-infinite-pagination>
</adf-upload-drag-area>
<adf-info-drawer-layout *ngIf="showVersions" class="adf-manage-versions-sidebar" fxFlex="0 0 auto">
<div info-drawer-content>
<ng-container *ngIf="hasOneFileSelected();else choose_document_template">
<ng-container *ngIf="userHasPermissionToManageVersions(); else no_permission_to_versions">
<adf-version-manager
[node]="documentList.selection[0].entry"
[showComments]="showVersionComments"
[allowDownload]="allowVersionDownload">
</adf-version-manager>
</ng-container>
</ng-container>
<ng-template #choose_document_template>
<div class="adf-manage-versions-empty">
<mat-icon class="adf-manage-versions-empty-icon">face</mat-icon>
{{'VERSION.CHOOSE_FILE' | translate}}
</div>
</ng-template>
<ng-template #no_permission_to_versions>
<div class="adf-manage-versions-no-permission">
<mat-icon class="adf-manage-versions-no-permission-icon">warning</mat-icon>
{{'VERSION.NO_PERMISSION' | translate}}
</div>
</ng-template>
</div>
</adf-info-drawer-layout>
</div>
</div>
<adf-context-menu-holder></adf-context-menu-holder>
<div *ngIf="processId">
<adf-start-process
[values]="formValues"
[appId]="processId">
</adf-start-process>
</div>
<div *ngIf="showSettingsPanel" class="adf-content-service-settings">
<p>Current folder ID: {{ documentList.currentFolderId }}</p>
<div class="p-10">
Selected Nodes:
<ul>
<li *ngFor="let node of documentList.selection">
{{ node.entry.name }}
</li>
</ul>
</div>
<div class="container">
<section>
<mat-slide-toggle color="primary" [(ngModel)]="showNameColumn">
Show Name Column
</mat-slide-toggle>
</section>
<section>
<mat-slide-toggle color="primary" [(ngModel)]="showCustomDownloadAction">
Toggle custom download action
</mat-slide-toggle>
</section>
<section>
<mat-slide-toggle [color]="'primary'" [(ngModel)]="multiselect">{{'DOCUMENT_LIST.MULTISELECT_CHECKBOXES' |
translate}}
</mat-slide-toggle>
</section>
<section>
<mat-slide-toggle [color]="'primary'" [(ngModel)]="multipleFileUpload">
{{'DOCUMENT_LIST.MULTIPLE_FILE_UPLOAD' | translate}}
</mat-slide-toggle>
</section>
<section>
<mat-slide-toggle [color]="'primary'" [(ngModel)]="folderUpload">{{'DOCUMENT_LIST.FOLDER_UPLOAD' |
translate}}
</mat-slide-toggle>
</section>
<section>
<mat-slide-toggle [color]="'primary'" [(ngModel)]="acceptedFilesTypeShow">{{'DOCUMENT_LIST.CUSTOM_FILTER' |
translate}}
</mat-slide-toggle>
</section>
<section>
<mat-slide-toggle [color]="'primary'" [(ngModel)]="maxSizeShow">{{'DOCUMENT_LIST.MAX_SIZE' |
translate}}
</mat-slide-toggle>
</section>
<section>
<mat-slide-toggle [color]="'primary'" [(ngModel)]="versioning">
{{'DOCUMENT_LIST.ENABLE_VERSIONING' | translate}}
</mat-slide-toggle>
</section>
<section>
<mat-slide-toggle color="primary" (click)="onInfiniteScrolling()">
{{'DOCUMENT_LIST.ENABLE_INFINITE_SCROLL' | translate}}
</mat-slide-toggle>
</section>
<section>
<mat-slide-toggle color="primary" [(ngModel)]="showVersionComments">
{{'APP.ADF_VERSION_MANAGER.SHOW_COMMENTS' | translate}}
</mat-slide-toggle>
</section>
<section>
<mat-slide-toggle color="primary" [(ngModel)]="allowVersionDownload">
{{'APP.ADF_VERSION_MANAGER.ALLOW_DOWNLOAD' | translate}}
</mat-slide-toggle>
</section>
<h5>Upload</h5>
<section *ngIf="acceptedFilesTypeShow">
<mat-form-field floatPlaceholder="float">
<input matInput
placeholder="Extension accepted"
[(ngModel)]="acceptedFilesType"
data-automation-id="accepted-files-type">
</mat-form-field>
</section>
<section *ngIf="maxSizeShow">
<mat-form-field>
<input matInput type="number" placeholder="Max file size" [(ngModel)]="maxFilesSize"
data-automation-id="max-files-size">
</mat-form-field>
</section>
<div *ngIf="!acceptedFilesTypeShow">
<adf-upload-button
#uploadButton
tooltip="Custom tooltip"
[disabled]="!enableUpload"
data-automation-id="multiple-file-upload"
[rootFolderId]="documentList.currentFolderId"
[multipleFiles]="multipleFileUpload"
[uploadFolders]="folderUpload"
[maxFilesSize]="maxSizeShow ? maxFilesSize : null"
(error)="openSnackMessage($event)"
[versioning]="versioning"
[adf-node-permission]="'create'"
[adf-nodes]="enableUpload ? getCurrentDocumentListNode() : []"
(permissionEvent)="handlePermissionError($event)">
</adf-upload-button>
</div>
<div *ngIf="acceptedFilesTypeShow">
<adf-upload-button
#uploadButton
tooltip="Custom tooltip"
[disabled]="!enableUpload"
data-automation-id="multiple-file-upload"
[rootFolderId]="documentList.currentFolderId"
[acceptedFilesType]="acceptedFilesType"
[multipleFiles]="multipleFileUpload"
[uploadFolders]="folderUpload"
[versioning]="versioning"
(error)="openSnackMessage($event)"
[adf-node-permission]="'create'"
[adf-nodes]="enableUpload ? getCurrentDocumentListNode() : []"
(permissionEvent)="handlePermissionError($event)">
</adf-upload-button>
</div>
<section>
<mat-checkbox [(ngModel)]="enableUpload">
{{'DOCUMENT_LIST.DESCRIPTION_UPLOAD' | translate}}
</mat-checkbox>
</section>
</div>
<div class="p-10">
<p>
{{'DOCUMENT_LIST.MULTISELECT_DESCRIPTION' | translate}}
</p>
<mat-form-field>
<mat-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
<mat-option *ngFor="let mode of selectionModes" [value]="mode.value">
{{mode.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<adf-file-uploading-dialog #fileDialog (error)="openSnackMessage($event)" ></adf-file-uploading-dialog>