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,83 +1,83 @@
|
||||
<div class="inner-layout">
|
||||
<div class="inner-layout__header">
|
||||
<adf-breadcrumb root="APP.BROWSE.RECENT.TITLE">
|
||||
</adf-breadcrumb>
|
||||
<app-page-layout>
|
||||
|
||||
<adf-toolbar class="inline">
|
||||
<app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode>
|
||||
<app-page-layout-header>
|
||||
<adf-breadcrumb root="APP.BROWSE.RECENT.TITLE">
|
||||
</adf-breadcrumb>
|
||||
|
||||
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
|
||||
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
|
||||
</ng-container>
|
||||
</adf-toolbar>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div class="inner-layout__content">
|
||||
<div class="inner-layout__panel">
|
||||
<adf-document-list #documentList
|
||||
acaDocumentList
|
||||
acaContextActions
|
||||
[display]="documentDisplayMode$ | async"
|
||||
currentFolderId="-recent-"
|
||||
selectionMode="multiple"
|
||||
[navigate]="false"
|
||||
[sorting]="[ 'modifiedAt', 'desc' ]"
|
||||
[imageResolver]="imageResolver"
|
||||
(node-dblclick)="onNodeDoubleClick($event.detail?.node)"
|
||||
(name-click)="onNodeDoubleClick($event.detail?.node)">
|
||||
<app-page-layout-content>
|
||||
<div class="main-content">
|
||||
<adf-document-list #documentList
|
||||
acaDocumentList
|
||||
acaContextActions
|
||||
[display]="documentDisplayMode$ | async"
|
||||
currentFolderId="-recent-"
|
||||
selectionMode="multiple"
|
||||
[navigate]="false"
|
||||
[sorting]="[ 'modifiedAt', 'desc' ]"
|
||||
[imageResolver]="imageResolver"
|
||||
(node-dblclick)="onNodeDoubleClick($event.detail?.node)"
|
||||
(name-click)="onNodeDoubleClick($event.detail?.node)">
|
||||
|
||||
<empty-folder-content>
|
||||
<ng-template>
|
||||
<adf-empty-content
|
||||
icon="access_time"
|
||||
[title]="'APP.BROWSE.RECENT.EMPTY_STATE.TITLE'"
|
||||
subtitle="APP.BROWSE.RECENT.EMPTY_STATE.TEXT">
|
||||
</adf-empty-content>
|
||||
<empty-folder-content>
|
||||
<ng-template>
|
||||
<adf-empty-content
|
||||
icon="access_time"
|
||||
[title]="'APP.BROWSE.RECENT.EMPTY_STATE.TITLE'"
|
||||
subtitle="APP.BROWSE.RECENT.EMPTY_STATE.TEXT">
|
||||
</adf-empty-content>
|
||||
</ng-template>
|
||||
</empty-folder-content>
|
||||
|
||||
<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>
|
||||
</empty-folder-content>
|
||||
</data-column>
|
||||
</ng-container>
|
||||
|
||||
<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">
|
||||
</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">
|
||||
<ng-template let-context>
|
||||
<app-dynamic-column
|
||||
[id]="column.template"
|
||||
[context]="context">
|
||||
</app-dynamic-column>
|
||||
</ng-template>
|
||||
</data-column>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</data-columns>
|
||||
|
||||
<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>
|
||||
</adf-document-list>
|
||||
|
||||
</ng-container>
|
||||
</data-columns>
|
||||
|
||||
</adf-document-list>
|
||||
|
||||
<adf-pagination acaPagination [target]="documentList">
|
||||
</adf-pagination>
|
||||
</div>
|
||||
|
||||
<div class="inner-layout__side-panel" *ngIf="infoDrawerOpened$ | async">
|
||||
<aca-info-drawer [node]="selection.last"></aca-info-drawer>
|
||||
</div>
|
||||
<adf-pagination acaPagination [target]="documentList">
|
||||
</adf-pagination>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar" *ngIf="infoDrawerOpened$ | async">
|
||||
<aca-info-drawer [node]="selection.last"></aca-info-drawer>
|
||||
</div>
|
||||
</app-page-layout-content>
|
||||
</app-page-layout>
|
||||
|
||||
@@ -34,6 +34,7 @@ import { AppToolbarModule } from '../toolbar/toolbar.module';
|
||||
import { ContextMenuModule } from '../context-menu/context-menu.module';
|
||||
import { RecentFilesComponent } from './recent-files.component';
|
||||
import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module';
|
||||
import { AppLayoutModule } from '../layout/layout.module';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
@@ -55,7 +56,8 @@ const routes: Routes = [
|
||||
AppCommonModule,
|
||||
AppToolbarModule,
|
||||
ContextMenuModule,
|
||||
AppInfoDrawerModule
|
||||
AppInfoDrawerModule,
|
||||
AppLayoutModule
|
||||
],
|
||||
declarations: [RecentFilesComponent],
|
||||
exports: [RecentFilesComponent]
|
||||
|
||||
Reference in New Issue
Block a user