[ACA-1432] unified selection and single info drawer (#385)

* track document list selection state

* selection management enhancements

* (fix) hide info drawer on selection reset

* use store selection

* remove event handler

* upgrade info drawer for personal files

* upgrade favorties

* upgrade recent files

* move info drawer to a separate component

* test fixes

* update tests

* test fixes

* remove obsolete directive

* use last selection entry

* switch back to first selected node

* selection improvements, versioning uses same node

* optimised toolbar visibility evaluation

* upgrade libs

* update js api

* test fixes

* test fixes

* test updates

* test fixes

* fix e2e tests

* show metadata for last clicked node
This commit is contained in:
Denys Vuika
2018-06-06 12:44:13 +01:00
committed by GitHub
parent a67dd43ad6
commit f0c0fe162b
39 changed files with 512 additions and 671 deletions

View File

@@ -6,39 +6,36 @@
(navigate)="onBreadcrumbNavigate($event)">
</adf-breadcrumb>
<adf-toolbar class="inline">
<adf-toolbar class="inline" *ngIf="hasSelection">
<button
color="primary"
mat-icon-button
*ngIf="isFileSelected(documentList.selection)"
*ngIf="firstSelectedDocument"
title="{{ 'APP.ACTIONS.VIEW' | translate }}"
(click)="showPreview(documentList.selection[0]?.entry)">
(click)="showPreview(firstSelectedDocument)">
<mat-icon>open_in_browser</mat-icon>
</button>
<button
color="primary"
mat-icon-button
*ngIf="hasSelection(documentList.selection)"
title="{{ 'APP.ACTIONS.DOWNLOAD' | translate }}"
[adfNodeDownload]="documentList.selection">
[adfNodeDownload]="selectedNodes">
<mat-icon>get_app</mat-icon>
</button>
<button
color="primary"
mat-icon-button
*ngIf="isFolderSelected(documentList.selection)
&& permission.check(documentList.selection, ['update'])"
*ngIf="firstSelectedFolder && permission.check(firstSelectedFolder, ['update'])"
[attr.title]="'APP.ACTIONS.EDIT' | translate"
(error)="openSnackMessage($event)"
[adf-edit-folder]="documentList.selection[0]?.entry">
[adf-edit-folder]="firstSelectedFolder?.entry">
<mat-icon>create</mat-icon>
</button>
<button mat-icon-button
[color]="infoDrawerOpened ? 'accent' : 'primary'"
*ngIf="hasSelection(documentList.selection)"
title="{{ 'APP.ACTIONS.DETAILS' | translate }}"
(click)="toggleSidebar()">
<mat-icon>info_outline</mat-icon>
@@ -47,7 +44,6 @@
<button
color="primary"
mat-icon-button
*ngIf="hasSelection(documentList.selection)"
title="{{ 'APP.ACTIONS.MORE' | translate }}"
[matMenuTriggerFor]="actionsMenu">
<mat-icon>more_vert</mat-icon>
@@ -58,7 +54,7 @@
<button
mat-menu-item
#selection="adfFavorite"
[adf-node-favorite]="documentList.selection">
[adf-node-favorite]="selectedNodes">
<mat-icon color="primary" *ngIf="selection.hasFavorites()">star</mat-icon>
<mat-icon *ngIf="!selection.hasFavorites()">star_border</mat-icon>
<span>{{ 'APP.ACTIONS.FAVORITE' | translate }}</span>
@@ -66,31 +62,31 @@
<button
mat-menu-item
[acaCopyNode]="documentList.selection">
[acaCopyNode]="selectedNodes">
<mat-icon>content_copy</mat-icon>
<span>{{ 'APP.ACTIONS.COPY' | translate }}</span>
</button>
<button
mat-menu-item
*ngIf="permission.check(documentList.selection, ['delete'])"
[acaMoveNode]="documentList.selection">
*ngIf="permission.check(selectedNodes, ['delete'])"
[acaMoveNode]="selectedNodes">
<mat-icon>library_books</mat-icon>
<span>{{ 'APP.ACTIONS.MOVE' | translate }}</span>
</button>
<button
mat-menu-item
*ngIf="permission.check(documentList.selection, ['delete'])"
[acaDeleteNode]="documentList.selection">
*ngIf="permission.check(selectedNodes, ['delete'])"
[acaDeleteNode]="selectedNodes">
<mat-icon>delete</mat-icon>
<span>{{ 'APP.ACTIONS.DELETE' | translate }}</span>
</button>
<button
mat-menu-item
*ngIf="isFileSelected(documentList.selection)"
[acaNodeVersions]="documentList.selection">
*ngIf="firstSelectedDocument"
[acaNodeVersions]="firstSelectedDocument">
<mat-icon>history</mat-icon>
<span>{{ 'APP.ACTIONS.VERSIONS' | translate }}</span>
</button>
@@ -117,7 +113,9 @@
[navigate]="false"
[imageResolver]="imageResolver"
(node-dblclick)="onNodeDoubleClick($event)"
(node-select)="onNodeSelect($event, documentList)">
(ready)="onDocumentListReady($event, documentList)"
(node-select)="onNodeSelect($event, documentList)"
(node-unselect)="onNodeUnselect($event, documentList)">
<data-columns>
<data-column
@@ -168,41 +166,8 @@
</adf-upload-drag-area>
</div>
<div class="inner-layout__side-panel"
*ngIf="infoDrawerOpened"
[acaNodeInfo]="documentList.selection"
(changed)="toggleSidebar($event)"
#infoInstance=nodeInfo>
<adf-info-drawer [title]="'APP.INFO_DRAWER.TITLE' | translate">
<adf-info-drawer-tab [label]="'APP.INFO_DRAWER.TABS.PROPERTIES' | translate">
<div *ngIf="infoInstance.loading">
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>
<adf-content-metadata-card
[readOnly]="!permission.check(infoInstance.node, ['update'])"
[displayEmpty]="permission.check(infoInstance.node, ['update'])"
[preset]="'custom'"
[node]="infoInstance.node">
</adf-content-metadata-card>
</adf-info-drawer-tab>
<adf-info-drawer-tab [label]="'APP.INFO_DRAWER.TABS.VERSIONS' | translate">
<ng-container *ngIf="isFileSelected(documentList.selection);else choose_document_template">
<adf-version-manager
*ngIf="infoInstance.node"
[node]="infoInstance.node">
</adf-version-manager>
</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.SELECTION.EMPTY' | translate }}
</div>
</ng-template>
</adf-info-drawer-tab>
</adf-info-drawer>
<div class="inner-layout__side-panel" *ngIf="infoDrawerOpened">
<aca-info-drawer [node]="lastSelectedNode"></aca-info-drawer>
</div>
</div>
</div>