mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-07-24 17:31:52 +00:00
improved page layout (#761)
* app-layout component * layout theme reorg * merge app-layout styles * rework page layouting
This commit is contained in:
Denys Vuika
committed by
Cilibiu Bogdan
Cilibiu Bogdan
parent
f975650850
commit
8ada58f3a5
@@ -1,84 +1,86 @@
|
||||
<div class="inner-layout">
|
||||
<div class="inner-layout__header">
|
||||
<adf-breadcrumb
|
||||
[root]="title"
|
||||
[folderNode]="node"
|
||||
(navigate)="onBreadcrumbNavigate($event)">
|
||||
</adf-breadcrumb>
|
||||
<app-page-layout [hasError]="!isValidPath">
|
||||
|
||||
<adf-toolbar class="inline">
|
||||
<app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode>
|
||||
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
|
||||
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
|
||||
</ng-container>
|
||||
</adf-toolbar>
|
||||
<app-page-layout-header>
|
||||
<adf-breadcrumb
|
||||
[root]="title"
|
||||
[folderNode]="node"
|
||||
(navigate)="onBreadcrumbNavigate($event)">
|
||||
</adf-breadcrumb>
|
||||
|
||||
<adf-toolbar class="inline">
|
||||
<app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode>
|
||||
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
|
||||
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
|
||||
</ng-container>
|
||||
</adf-toolbar>
|
||||
</app-page-layout-header>
|
||||
|
||||
<app-page-layout-error>
|
||||
<aca-generic-error></aca-generic-error>
|
||||
</app-page-layout-error>
|
||||
|
||||
<app-page-layout-content>
|
||||
<div class="main-content">
|
||||
<adf-upload-drag-area
|
||||
[parentId]="node?.id"
|
||||
[disabled]="!canUpload">
|
||||
|
||||
<adf-document-list #documentList
|
||||
acaDocumentList
|
||||
acaContextActions
|
||||
[display]="documentDisplayMode$ | async"
|
||||
[sorting]="[ 'modifiedAt', 'desc' ]"
|
||||
selectionMode="multiple"
|
||||
[currentFolderId]="node?.id"
|
||||
[allowDropFiles]="true"
|
||||
[navigate]="false"
|
||||
[imageResolver]="imageResolver"
|
||||
(node-dblclick)="navigateTo($event.detail?.node)"
|
||||
(name-click)="navigateTo($event.detail?.node)">
|
||||
|
||||
<data-columns>
|
||||
<ng-container *ngFor="let column of columns; trackBy: trackById">
|
||||
|
||||
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
|
||||
<data-column
|
||||
[key]="column.key"
|
||||
[title]="column.title"
|
||||
[type]="column.type"
|
||||
[format]="column.format"
|
||||
[class]="column.class"
|
||||
[sortable]="column.sortable">
|
||||
<ng-template let-context>
|
||||
<app-dynamic-column
|
||||
[id]="column.template"
|
||||
[context]="context">
|
||||
</app-dynamic-column>
|
||||
</ng-template>
|
||||
</data-column>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
|
||||
<data-column
|
||||
[key]="column.key"
|
||||
[title]="column.title"
|
||||
[type]="column.type"
|
||||
[format]="column.format"
|
||||
[class]="column.class"
|
||||
[sortable]="column.sortable">
|
||||
</data-column>
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
</data-columns>
|
||||
</adf-document-list>
|
||||
|
||||
<adf-pagination acaPagination [target]="documentList">
|
||||
</adf-pagination>
|
||||
</adf-upload-drag-area>
|
||||
</div>
|
||||
|
||||
<div [attr.class]="isValidPath ? 'inner-layout__content--hide' : 'inner-layout__content'">
|
||||
<aca-generic-error></aca-generic-error>
|
||||
<div class="sidebar" *ngIf="infoDrawerOpened$ | async">
|
||||
<aca-info-drawer [node]="selection.last"></aca-info-drawer>
|
||||
</div>
|
||||
</app-page-layout-content>
|
||||
|
||||
<div [attr.class]="!isValidPath ? 'inner-layout__content--hide' : 'inner-layout__content'">
|
||||
<div class="inner-layout__panel">
|
||||
<adf-upload-drag-area
|
||||
[parentId]="node?.id"
|
||||
[disabled]="!canUpload">
|
||||
|
||||
<adf-document-list #documentList
|
||||
acaDocumentList
|
||||
acaContextActions
|
||||
[display]="documentDisplayMode$ | async"
|
||||
[sorting]="[ 'modifiedAt', 'desc' ]"
|
||||
selectionMode="multiple"
|
||||
[currentFolderId]="node?.id"
|
||||
[allowDropFiles]="true"
|
||||
[navigate]="false"
|
||||
[imageResolver]="imageResolver"
|
||||
(node-dblclick)="navigateTo($event.detail?.node)"
|
||||
(name-click)="navigateTo($event.detail?.node)">
|
||||
|
||||
<data-columns>
|
||||
<ng-container *ngFor="let column of columns; trackBy: trackById">
|
||||
|
||||
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
|
||||
<data-column
|
||||
[key]="column.key"
|
||||
[title]="column.title"
|
||||
[type]="column.type"
|
||||
[format]="column.format"
|
||||
[class]="column.class"
|
||||
[sortable]="column.sortable">
|
||||
<ng-template let-context>
|
||||
<app-dynamic-column
|
||||
[id]="column.template"
|
||||
[context]="context">
|
||||
</app-dynamic-column>
|
||||
</ng-template>
|
||||
</data-column>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
|
||||
<data-column
|
||||
[key]="column.key"
|
||||
[title]="column.title"
|
||||
[type]="column.type"
|
||||
[format]="column.format"
|
||||
[class]="column.class"
|
||||
[sortable]="column.sortable">
|
||||
</data-column>
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
</data-columns>
|
||||
</adf-document-list>
|
||||
|
||||
<adf-pagination acaPagination [target]="documentList">
|
||||
</adf-pagination>
|
||||
</adf-upload-drag-area>
|
||||
</div>
|
||||
|
||||
<div class="inner-layout__side-panel" *ngIf="infoDrawerOpened$ | async">
|
||||
<aca-info-drawer [node]="selection.last"></aca-info-drawer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</app-page-layout>
|
||||
|
||||
Reference in New Issue
Block a user