improved page layout (#761)

* app-layout component

* layout theme reorg

* merge app-layout styles

* rework page layouting
This commit is contained in:
Denys Vuika
2018-10-29 09:47:10 +00:00
committed by Cilibiu Bogdan
parent f975650850
commit 8ada58f3a5
34 changed files with 876 additions and 750 deletions

View File

@@ -24,7 +24,7 @@
*/ */
import { Routes } from '@angular/router'; import { Routes } from '@angular/router';
import { LayoutComponent } from './components/layout/layout.component'; import { AppLayoutComponent } from './components/layout/app-layout/app-layout.component';
import { FilesComponent } from './components/files/files.component'; import { FilesComponent } from './components/files/files.component';
import { LibrariesComponent } from './components/libraries/libraries.component'; import { LibrariesComponent } from './components/libraries/libraries.component';
import { GenericErrorComponent } from './components/common/generic-error/generic-error.component'; import { GenericErrorComponent } from './components/common/generic-error/generic-error.component';
@@ -52,7 +52,7 @@ export const APP_ROUTES: Routes = [
}, },
{ {
path: '', path: '',
component: LayoutComponent, component: AppLayoutComponent,
children: [ children: [
{ {
path: '', path: '',

View File

@@ -1,6 +1,7 @@
<div class="inner-layout inner-layout--scroll"> <app-page-layout>
<div class="inner-layout__content">
<div class="inner-layout__panel content--scroll"> <app-page-layout-content [scrollable]="true">
<div class="main-content">
<article class="padding"> <article class="padding">
<header class="header padding-left">Alfresco Content Application</header> <header class="header padding-left">Alfresco Content Application</header>
<p class="padding-left"> version: {{ releaseVersion }} </p> <p class="padding-left"> version: {{ releaseVersion }} </p>
@@ -32,5 +33,6 @@
<adf-datatable [data]="data"></adf-datatable> <adf-datatable [data]="data"></adf-datatable>
</article> </article>
</div> </div>
</div> </app-page-layout-content>
</div>
</app-page-layout>

View File

@@ -28,6 +28,7 @@ import { Routes, RouterModule } from '@angular/router';
import { AboutComponent } from './about.component'; import { AboutComponent } from './about.component';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { CoreModule } from '@alfresco/adf-core'; import { CoreModule } from '@alfresco/adf-core';
import { AppLayoutModule } from '../layout/layout.module';
const routes: Routes = [ const routes: Routes = [
{ {
@@ -40,7 +41,12 @@ const routes: Routes = [
]; ];
@NgModule({ @NgModule({
imports: [CommonModule, CoreModule.forChild(), RouterModule.forChild(routes)], imports: [
CommonModule,
CoreModule.forChild(),
RouterModule.forChild(routes),
AppLayoutModule
],
declarations: [AboutComponent] declarations: [AboutComponent]
}) })
export class AboutModule {} export class AboutModule {}

View File

@@ -1,80 +1,83 @@
<div class="inner-layout"> <app-page-layout>
<div class="inner-layout__header">
<adf-breadcrumb root="APP.BROWSE.FAVORITES.TITLE">
</adf-breadcrumb>
<adf-toolbar class="inline"> <app-page-layout-header>
<app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode> <adf-breadcrumb root="APP.BROWSE.FAVORITES.TITLE">
</adf-breadcrumb>
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId"> <adf-toolbar class="inline">
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action> <app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode>
</ng-container>
</adf-toolbar>
</div>
<div class="inner-layout__content">
<div class="inner-layout__panel">
<adf-document-list #documentList
acaDocumentList
acaContextActions
[display]="documentDisplayMode$ | async"
currentFolderId="-favorites-"
selectionMode="multiple"
[navigate]="false"
[sorting]="[ 'modifiedAt', 'desc' ]"
(node-dblclick)="onNodeDoubleClick($event.detail?.node)"
(name-click)="onNodeDoubleClick($event.detail?.node)">
<empty-folder-content> <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
<ng-template> <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
<adf-empty-content </ng-container>
icon="star_rate" </adf-toolbar>
[title]="'APP.BROWSE.FAVORITES.EMPTY_STATE.TITLE'" </app-page-layout-header>
subtitle="APP.BROWSE.FAVORITES.EMPTY_STATE.TEXT">
</adf-empty-content> <app-page-layout-content>
<div class="main-content">
<adf-document-list #documentList
acaDocumentList
acaContextActions
[display]="documentDisplayMode$ | async"
currentFolderId="-favorites-"
selectionMode="multiple"
[navigate]="false"
[sorting]="[ 'modifiedAt', 'desc' ]"
(node-dblclick)="onNodeDoubleClick($event.detail?.node)"
(name-click)="onNodeDoubleClick($event.detail?.node)">
<empty-folder-content>
<ng-template>
<adf-empty-content
icon="star_rate"
[title]="'APP.BROWSE.FAVORITES.EMPTY_STATE.TITLE'"
subtitle="APP.BROWSE.FAVORITES.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> </ng-template>
</empty-folder-content> </data-column>
</ng-container>
<data-columns> <ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
<ng-container *ngFor="let column of columns; trackBy: trackById"> <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)"> </ng-container>
<data-column </data-columns>
[key]="column.key" </adf-document-list>
[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)"> <adf-pagination acaPagination [target]="documentList">
<data-column </adf-pagination>
[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>
</div>
<div class="inner-layout__side-panel" *ngIf="infoDrawerOpened$ | async">
<aca-info-drawer [node]="selection.last"></aca-info-drawer>
</div>
</div> </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>

View File

@@ -34,6 +34,7 @@ import { AppCommonModule } from '../common/common.module';
import { AppToolbarModule } from '../toolbar/toolbar.module'; import { AppToolbarModule } from '../toolbar/toolbar.module';
import { ContextMenuModule } from '../context-menu/context-menu.module'; import { ContextMenuModule } from '../context-menu/context-menu.module';
import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module'; import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module';
import { AppLayoutModule } from '../layout/layout.module';
const routes: Routes = [ const routes: Routes = [
{ {
@@ -56,7 +57,8 @@ const routes: Routes = [
AppCommonModule, AppCommonModule,
AppToolbarModule, AppToolbarModule,
ContextMenuModule, ContextMenuModule,
AppInfoDrawerModule AppInfoDrawerModule,
AppLayoutModule
], ],
declarations: [FavoritesComponent], declarations: [FavoritesComponent],
exports: [FavoritesComponent] exports: [FavoritesComponent]

View File

@@ -1,84 +1,86 @@
<div class="inner-layout"> <app-page-layout [hasError]="!isValidPath">
<div class="inner-layout__header">
<adf-breadcrumb
[root]="title"
[folderNode]="node"
(navigate)="onBreadcrumbNavigate($event)">
</adf-breadcrumb>
<adf-toolbar class="inline"> <app-page-layout-header>
<app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode> <adf-breadcrumb
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId"> [root]="title"
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action> [folderNode]="node"
</ng-container> (navigate)="onBreadcrumbNavigate($event)">
</adf-toolbar> </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>
<div [attr.class]="isValidPath ? 'inner-layout__content--hide' : 'inner-layout__content'"> <div class="sidebar" *ngIf="infoDrawerOpened$ | async">
<aca-generic-error></aca-generic-error> <aca-info-drawer [node]="selection.last"></aca-info-drawer>
</div> </div>
</app-page-layout-content>
<div [attr.class]="!isValidPath ? 'inner-layout__content--hide' : 'inner-layout__content'"> </app-page-layout>
<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>

View File

@@ -0,0 +1,38 @@
<adf-upload-drag-area
[parentId]="currentFolderId"
[disabled]="!canUpload">
<adf-sidenav-layout
#layout
[sidenavMin]="70"
[sidenavMax]="320"
[stepOver]="600"
[hideSidenav]="hideSidenav"
[expandedSidenav]="expandedSidenav"
(expanded)="onExpanded($event)">
<adf-sidenav-layout-header>
<ng-template>
<app-header
*ngIf="!hideSidenav"
(toggleClicked)="layout.toggleMenu($event)">
</app-header>
</ng-template>
</adf-sidenav-layout-header>
<adf-sidenav-layout-navigation>
<ng-template let-isMenuMinimized="isMenuMinimized">
<app-sidenav [showLabel]="!isMenuMinimized()"></app-sidenav>
</ng-template>
</adf-sidenav-layout-navigation>
<adf-sidenav-layout-content>
<ng-template>
<router-outlet></router-outlet>
</ng-template>
</adf-sidenav-layout-content>
</adf-sidenav-layout>
<adf-file-uploading-dialog position="left"></adf-file-uploading-dialog>
</adf-upload-drag-area>

View File

@@ -26,23 +26,23 @@
import { NO_ERRORS_SCHEMA } from '@angular/core'; import { NO_ERRORS_SCHEMA } from '@angular/core';
import { TestBed, ComponentFixture } from '@angular/core/testing'; import { TestBed, ComponentFixture } from '@angular/core/testing';
import { AppConfigService, UserPreferencesService } from '@alfresco/adf-core'; import { AppConfigService, UserPreferencesService } from '@alfresco/adf-core';
import { LayoutComponent } from './layout.component'; import { AppLayoutComponent } from './app-layout.component';
import { AppTestingModule } from '../../testing/app-testing.module'; import { AppTestingModule } from '../../../testing/app-testing.module';
describe('LayoutComponent', () => { describe('AppLayoutComponent', () => {
let fixture: ComponentFixture<LayoutComponent>; let fixture: ComponentFixture<AppLayoutComponent>;
let component: LayoutComponent; let component: AppLayoutComponent;
let appConfig: AppConfigService; let appConfig: AppConfigService;
let userPreference: UserPreferencesService; let userPreference: UserPreferencesService;
beforeEach(() => { beforeEach(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
imports: [AppTestingModule], imports: [AppTestingModule],
declarations: [LayoutComponent], declarations: [AppLayoutComponent],
schemas: [NO_ERRORS_SCHEMA] schemas: [NO_ERRORS_SCHEMA]
}); });
fixture = TestBed.createComponent(LayoutComponent); fixture = TestBed.createComponent(AppLayoutComponent);
component = fixture.componentInstance; component = fixture.componentInstance;
appConfig = TestBed.get(AppConfigService); appConfig = TestBed.get(AppConfigService);
userPreference = TestBed.get(UserPreferencesService); userPreference = TestBed.get(UserPreferencesService);

View File

@@ -39,19 +39,18 @@ import { NavigationEnd, Router } from '@angular/router';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { Subject, Observable } from 'rxjs'; import { Subject, Observable } from 'rxjs';
import { filter, takeUntil, map, withLatestFrom } from 'rxjs/operators'; import { filter, takeUntil, map, withLatestFrom } from 'rxjs/operators';
import { NodePermissionService } from '../../services/node-permission.service'; import { NodePermissionService } from '../../../services/node-permission.service';
import { currentFolder } from '../../store/selectors/app.selectors'; import { currentFolder } from '../../../store/selectors/app.selectors';
import { AppStore } from '../../store/states'; import { AppStore } from '../../../store/states';
import { BreakpointObserver } from '@angular/cdk/layout'; import { BreakpointObserver } from '@angular/cdk/layout';
@Component({ @Component({
selector: 'app-layout', selector: 'app-layout',
templateUrl: './layout.component.html', templateUrl: './app-layout.component.html',
styleUrls: ['./layout.component.scss'],
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
host: { class: 'app-layout' } host: { class: 'app-layout' }
}) })
export class LayoutComponent implements OnInit, OnDestroy { export class AppLayoutComponent implements OnInit, OnDestroy {
@ViewChild('layout') @ViewChild('layout')
layout: SidenavLayoutComponent; layout: SidenavLayoutComponent;

View File

@@ -0,0 +1,17 @@
@mixin app-layout-theme($theme) {
.app-layout {
@include flex-column;
}
@media screen and (max-width: 599px) {
.adf-app-title {
display: none;
}
}
@media screen and (max-width: 719px) {
.adf-app-logo {
display: none;
}
}
}

View File

@@ -1,40 +0,0 @@
<div class="layout">
<adf-upload-drag-area
[parentId]="currentFolderId"
[disabled]="!canUpload">
<adf-sidenav-layout
#layout
[sidenavMin]="70"
[sidenavMax]="320"
[stepOver]="600"
[hideSidenav]="hideSidenav"
[expandedSidenav]="expandedSidenav"
(expanded)="onExpanded($event)">
<adf-sidenav-layout-header>
<ng-template>
<app-header
*ngIf="!hideSidenav"
(toggleClicked)="layout.toggleMenu($event)">
</app-header>
</ng-template>
</adf-sidenav-layout-header>
<adf-sidenav-layout-navigation>
<ng-template let-isMenuMinimized="isMenuMinimized">
<app-sidenav [showLabel]="!isMenuMinimized()"></app-sidenav>
</ng-template>
</adf-sidenav-layout-navigation>
<adf-sidenav-layout-content>
<ng-template>
<router-outlet></router-outlet>
</ng-template>
</adf-sidenav-layout-content>
</adf-sidenav-layout>
<adf-file-uploading-dialog position="left"></adf-file-uploading-dialog>
</adf-upload-drag-area>
</div>

View File

@@ -1,16 +0,0 @@
:host {
display: flex;
flex: 1;
}
@media screen and (max-width: 599px) {
.adf-app-title {
display: none;
}
}
@media screen and (max-width: 719px) {
.adf-app-logo {
display: none;
}
}

View File

@@ -26,12 +26,16 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { CoreModule } from '@alfresco/adf-core'; import { CoreModule } from '@alfresco/adf-core';
import { LayoutComponent } from './layout.component'; import { AppLayoutComponent } from './app-layout/app-layout.component';
import { ContentModule } from '@alfresco/adf-content-services'; import { ContentModule } from '@alfresco/adf-content-services';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { AppSidenavModule } from '../sidenav/sidenav.module'; import { AppSidenavModule } from '../sidenav/sidenav.module';
import { AppCommonModule } from '../common/common.module'; import { AppCommonModule } from '../common/common.module';
import { AppHeaderModule } from '../header/header.module'; import { AppHeaderModule } from '../header/header.module';
import { PageLayoutComponent } from './page-layout/page-layout.component';
import { PageLayoutHeaderComponent } from './page-layout/page-layout-header.component';
import { PageLayoutContentComponent } from './page-layout/page-layout-content.component';
import { PageLayoutErrorComponent } from './page-layout/page-layout-error.component';
@NgModule({ @NgModule({
imports: [ imports: [
@@ -43,7 +47,19 @@ import { AppHeaderModule } from '../header/header.module';
AppSidenavModule, AppSidenavModule,
AppHeaderModule AppHeaderModule
], ],
declarations: [LayoutComponent], declarations: [
exports: [LayoutComponent] AppLayoutComponent,
PageLayoutComponent,
PageLayoutHeaderComponent,
PageLayoutContentComponent,
PageLayoutErrorComponent
],
exports: [
AppLayoutComponent,
PageLayoutComponent,
PageLayoutHeaderComponent,
PageLayoutContentComponent,
PageLayoutErrorComponent
]
}) })
export class AppLayoutModule {} export class AppLayoutModule {}

View File

@@ -0,0 +1,7 @@
@import './app-layout/app-layout.theme.scss';
@import './page-layout/page-layout.theme.scss';
@mixin layout-theme($theme) {
@include app-layout-theme($theme);
@include app-page-layout-theme($theme);
}

View File

@@ -0,0 +1,45 @@
/*!
* @license
* Alfresco Example Content Application
*
* Copyright (C) 2005 - 2018 Alfresco Software Limited
*
* This file is part of the Alfresco Example Content Application.
* If the software was purchased under a paid Alfresco license, the terms of
* the paid license agreement will prevail. Otherwise, the software is
* provided under the following open source license terms:
*
* The Alfresco Example Content Application is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* The Alfresco Example Content Application is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
*/
import {
Component,
ViewEncapsulation,
ChangeDetectionStrategy,
Input,
HostBinding
} from '@angular/core';
@Component({
selector: 'app-page-layout-content',
template: `<ng-content></ng-content>`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
host: { class: 'app-page-layout-content' }
})
export class PageLayoutContentComponent {
@Input()
@HostBinding('class.scrollable')
scrollable = false;
}

View File

@@ -0,0 +1,39 @@
/*!
* @license
* Alfresco Example Content Application
*
* Copyright (C) 2005 - 2018 Alfresco Software Limited
*
* This file is part of the Alfresco Example Content Application.
* If the software was purchased under a paid Alfresco license, the terms of
* the paid license agreement will prevail. Otherwise, the software is
* provided under the following open source license terms:
*
* The Alfresco Example Content Application is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* The Alfresco Example Content Application is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
*/
import {
Component,
ViewEncapsulation,
ChangeDetectionStrategy
} from '@angular/core';
@Component({
selector: 'app-page-layout-error',
template: `<ng-content></ng-content>`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
host: { class: 'app-page-layout-error' }
})
export class PageLayoutErrorComponent {}

View File

@@ -0,0 +1,39 @@
/*!
* @license
* Alfresco Example Content Application
*
* Copyright (C) 2005 - 2018 Alfresco Software Limited
*
* This file is part of the Alfresco Example Content Application.
* If the software was purchased under a paid Alfresco license, the terms of
* the paid license agreement will prevail. Otherwise, the software is
* provided under the following open source license terms:
*
* The Alfresco Example Content Application is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* The Alfresco Example Content Application is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
*/
import {
Component,
ViewEncapsulation,
ChangeDetectionStrategy
} from '@angular/core';
@Component({
selector: 'app-page-layout-header',
template: '<ng-content></ng-content>',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
host: { class: 'app-page-layout-header' }
})
export class PageLayoutHeaderComponent {}

View File

@@ -0,0 +1,3 @@
<ng-content select="app-page-layout-header"></ng-content>
<ng-content select="app-page-layout-error" *ngIf="hasError"></ng-content>
<ng-content select="app-page-layout-content" *ngIf="!hasError"></ng-content>

View File

@@ -0,0 +1,43 @@
/*!
* @license
* Alfresco Example Content Application
*
* Copyright (C) 2005 - 2018 Alfresco Software Limited
*
* This file is part of the Alfresco Example Content Application.
* If the software was purchased under a paid Alfresco license, the terms of
* the paid license agreement will prevail. Otherwise, the software is
* provided under the following open source license terms:
*
* The Alfresco Example Content Application is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* The Alfresco Example Content Application is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
*/
import {
Component,
ViewEncapsulation,
ChangeDetectionStrategy,
Input
} from '@angular/core';
@Component({
selector: 'app-page-layout',
templateUrl: 'page-layout.component.html',
encapsulation: ViewEncapsulation.None,
host: { class: 'app-page-layout' },
changeDetection: ChangeDetectionStrategy.OnPush
})
export class PageLayoutComponent {
@Input()
hasError = false;
}

View File

@@ -0,0 +1,46 @@
@mixin app-page-layout-theme($theme) {
$foreground: map-get($theme, foreground);
.app-page-layout {
@include flex-column;
.app-page-layout-header {
display: flex;
align-items: center;
flex: 0 0 65px;
flex-basis: 48px;
background: #fafafa;
border-bottom: 1px solid mat-color($foreground, text, 0.07);
padding: 0 24px;
}
.app-page-layout-content {
@include flex-row;
}
.app-page-layout-error {
@include flex-row;
}
.main-content {
@include flex-column;
border-right: 1px solid mat-color($foreground, text, 0.07);
}
.scrollable {
overflow: auto !important;
.main-content {
overflow: auto !important;
}
}
.sidebar {
display: block;
height: 100%;
overflow-y: scroll;
max-width: 350px;
width: 350px;
}
}
}

View File

@@ -1,82 +0,0 @@
/*!
* @license
* Alfresco Example Content Application
*
* Copyright (C) 2005 - 2018 Alfresco Software Limited
*
* This file is part of the Alfresco Example Content Application.
* If the software was purchased under a paid Alfresco license, the terms of
* the paid license agreement will prevail. Otherwise, the software is
* provided under the following open source license terms:
*
* The Alfresco Example Content Application is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* The Alfresco Example Content Application is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
*/
/*
import { SidenavViewsManagerDirective } from './sidenav-views-manager.directive';
import { NavigationEnd } from '@angular/router';
import { Subject } from 'rxjs';
class RouterMock {
private subject = new Subject();
public events = this.subject.asObservable();
navigate(url = '') {
const navigationEnd = new NavigationEnd(0, '', url);
this.subject.next(navigationEnd);
}
destroy() {
this.subject.next(null);
this.subject.complete();
this.subject = null;
}
}
describe('SidenavViewsManagerDirective', () => {
let component;
let router;
beforeEach(() => {
router = <any>new RouterMock();
component = new SidenavViewsManagerDirective(router, null, null);
});
afterEach(() => {
router.destroy();
});
describe('Router events', () => {
it('should set minimizeSidenav to true when url is in minimizeConditions', () => {
router.navigate('/search/');
expect(component.minimizeSidenav).toBe(true);
});
it('should set minimizeSidenav to false when url is not in minimizeConditions', () => {
router.navigate('/somewhere/');
expect(component.minimizeSidenav).toBe(false);
});
it('should set hideSidenav property to true when url is in hideConditions', () => {
router.navigate('/preview/');
expect(component.hideSidenav).toBe(true);
});
it('should set hideSidenav property to false when url is not in hideConditions', () => {
router.navigate('somewhere');
expect(component.hideSidenav).toBe(false);
});
});
});
*/

View File

@@ -1,78 +1,79 @@
<div class="inner-layout"> <app-page-layout>
<div class="inner-layout__header">
<adf-breadcrumb root="APP.BROWSE.LIBRARIES.TITLE">
</adf-breadcrumb>
<adf-toolbar class="inline"> <app-page-layout-header>
<app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode> <adf-breadcrumb root="APP.BROWSE.LIBRARIES.TITLE">
</adf-breadcrumb>
<ng-container *ifExperimental="'extensions'"> <adf-toolbar class="inline">
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId"> <app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode>
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
</ng-container>
</ng-container>
</adf-toolbar>
</div>
<div class="inner-layout__content"> <ng-container *ifExperimental="'extensions'">
<div class="inner-layout__panel"> <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
<adf-document-list #documentList <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
acaDocumentList </ng-container>
[display]="documentDisplayMode$ | async" </ng-container>
currentFolderId="-mysites-" </adf-toolbar>
selectionMode="single" </app-page-layout-header>
[navigate]="false"
[sorting]="[ 'title', 'asc' ]"
(node-dblclick)="navigateTo($event.detail?.node)"
(name-click)="navigateTo($event.detail?.node)">
<empty-folder-content> <app-page-layout-content>
<ng-template> <div class="main-content">
<adf-empty-content <adf-document-list #documentList
icon="group_work" acaDocumentList
[title]="'APP.BROWSE.LIBRARIES.EMPTY_STATE.TITLE'" [display]="documentDisplayMode$ | async"
subtitle="APP.BROWSE.LIBRARIES.EMPTY_STATE.TEXT"> currentFolderId="-mysites-"
</adf-empty-content> selectionMode="single"
</ng-template> [navigate]="false"
</empty-folder-content> [sorting]="[ 'title', 'asc' ]"
(node-dblclick)="navigateTo($event.detail?.node)"
(name-click)="navigateTo($event.detail?.node)">
<data-columns> <empty-folder-content>
<ng-container *ngFor="let column of columns; trackBy: trackById"> <ng-template>
<adf-empty-content
icon="group_work"
[title]="'APP.BROWSE.LIBRARIES.EMPTY_STATE.TITLE'"
subtitle="APP.BROWSE.LIBRARIES.EMPTY_STATE.TEXT">
</adf-empty-content>
</ng-template>
</empty-folder-content>
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)"> <data-columns>
<data-column <ng-container *ngFor="let column of columns; trackBy: trackById">
[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 *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>
</adf-document-list>
<adf-pagination acaPagination [target]="documentList"> <ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
</adf-pagination> <data-column
</div> [key]="column.key"
</div> [title]="column.title"
</div> [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>
</div>
</app-page-layout-content>
</app-page-layout>

View File

@@ -1,83 +1,83 @@
<div class="inner-layout"> <app-page-layout>
<div class="inner-layout__header">
<adf-breadcrumb root="APP.BROWSE.RECENT.TITLE">
</adf-breadcrumb>
<adf-toolbar class="inline"> <app-page-layout-header>
<app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode> <adf-breadcrumb root="APP.BROWSE.RECENT.TITLE">
</adf-breadcrumb>
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId"> <adf-toolbar class="inline">
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action> <app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode>
</ng-container> <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
</adf-toolbar> <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
</div> </ng-container>
</adf-toolbar>
</app-page-layout-header>
<div class="inner-layout__content"> <app-page-layout-content>
<div class="inner-layout__panel"> <div class="main-content">
<adf-document-list #documentList <adf-document-list #documentList
acaDocumentList acaDocumentList
acaContextActions acaContextActions
[display]="documentDisplayMode$ | async" [display]="documentDisplayMode$ | async"
currentFolderId="-recent-" currentFolderId="-recent-"
selectionMode="multiple" selectionMode="multiple"
[navigate]="false" [navigate]="false"
[sorting]="[ 'modifiedAt', 'desc' ]" [sorting]="[ 'modifiedAt', 'desc' ]"
[imageResolver]="imageResolver" [imageResolver]="imageResolver"
(node-dblclick)="onNodeDoubleClick($event.detail?.node)" (node-dblclick)="onNodeDoubleClick($event.detail?.node)"
(name-click)="onNodeDoubleClick($event.detail?.node)"> (name-click)="onNodeDoubleClick($event.detail?.node)">
<empty-folder-content> <empty-folder-content>
<ng-template> <ng-template>
<adf-empty-content <adf-empty-content
icon="access_time" icon="access_time"
[title]="'APP.BROWSE.RECENT.EMPTY_STATE.TITLE'" [title]="'APP.BROWSE.RECENT.EMPTY_STATE.TITLE'"
subtitle="APP.BROWSE.RECENT.EMPTY_STATE.TEXT"> subtitle="APP.BROWSE.RECENT.EMPTY_STATE.TEXT">
</adf-empty-content> </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> </ng-template>
</empty-folder-content> </data-column>
</ng-container>
<data-columns> <ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
<ng-container *ngFor="let column of columns; trackBy: trackById"> <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)"> </ng-container>
<data-column </data-columns>
[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)"> </adf-document-list>
<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> <adf-pagination acaPagination [target]="documentList">
</data-columns> </adf-pagination>
</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>
</div> </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>

View File

@@ -34,6 +34,7 @@ import { AppToolbarModule } from '../toolbar/toolbar.module';
import { ContextMenuModule } from '../context-menu/context-menu.module'; import { ContextMenuModule } from '../context-menu/context-menu.module';
import { RecentFilesComponent } from './recent-files.component'; import { RecentFilesComponent } from './recent-files.component';
import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module'; import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module';
import { AppLayoutModule } from '../layout/layout.module';
const routes: Routes = [ const routes: Routes = [
{ {
@@ -55,7 +56,8 @@ const routes: Routes = [
AppCommonModule, AppCommonModule,
AppToolbarModule, AppToolbarModule,
ContextMenuModule, ContextMenuModule,
AppInfoDrawerModule AppInfoDrawerModule,
AppLayoutModule
], ],
declarations: [RecentFilesComponent], declarations: [RecentFilesComponent],
exports: [RecentFilesComponent] exports: [RecentFilesComponent]

View File

@@ -33,6 +33,7 @@ import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module';
import { AppToolbarModule } from '../toolbar/toolbar.module'; import { AppToolbarModule } from '../toolbar/toolbar.module';
import { AppCommonModule } from '../common/common.module'; import { AppCommonModule } from '../common/common.module';
import { DirectivesModule } from '../../directives/directives.module'; import { DirectivesModule } from '../../directives/directives.module';
import { AppLayoutModule } from '../layout/layout.module';
@NgModule({ @NgModule({
imports: [ imports: [
@@ -42,7 +43,8 @@ import { DirectivesModule } from '../../directives/directives.module';
AppCommonModule, AppCommonModule,
AppInfoDrawerModule, AppInfoDrawerModule,
AppToolbarModule, AppToolbarModule,
DirectivesModule DirectivesModule,
AppLayoutModule
], ],
declarations: [SearchResultsComponent, SearchResultsRowComponent], declarations: [SearchResultsComponent, SearchResultsRowComponent],
exports: [SearchResultsComponent, SearchResultsRowComponent] exports: [SearchResultsComponent, SearchResultsRowComponent]

View File

@@ -1,89 +1,91 @@
<div class="inner-layout"> <app-page-layout>
<div class="inner-layout__header">
<adf-breadcrumb root="APP.BROWSE.SEARCH.TITLE"> <app-page-layout-header>
</adf-breadcrumb> <adf-breadcrumb root="APP.BROWSE.SEARCH.TITLE">
<adf-toolbar class="inline"> </adf-breadcrumb>
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId"> <adf-toolbar class="inline">
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action> <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
</ng-container> <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
</adf-toolbar> </ng-container>
</adf-toolbar>
</app-page-layout-header>
<app-page-layout-content>
<div class="main-content">
<div class="adf-search-results">
<adf-search-filter
#searchFilter
[ngClass]="{ 'adf-search-filter--hidden': hideSearchFilter() }"></adf-search-filter>
<div class="adf-search-results__content">
<mat-progress-bar
*ngIf="isLoading"
color="primary"
mode="indeterminate">
</mat-progress-bar>
<div class="adf-search-results__content-header content" *ngIf="data?.list.entries.length">
<div class="content__side--left">
<div class="adf-search-results--info-text">{{ 'APP.BROWSE.SEARCH.FOUND_RESULTS' | translate: { number: totalResults } }}</div>
<div class="adf-search-results__facets">
<adf-search-chip-list [searchFilter]="searchFilter"></adf-search-chip-list>
</div>
</div>
<adf-search-sorting-picker class="content__side--right"></adf-search-sorting-picker>
</div>
<adf-document-list
#documentList
acaDocumentList
[showHeader]="false"
[selectionMode]="'multiple'"
[sortingMode]="'server'"
[sorting]="sorting"
[node]="data"
(node-dblclick)="onNodeDoubleClick($event.detail?.node)">
<data-columns>
<data-column
[key]="'$thumbnail'"
[type]="'image'"
[sr-title]="'ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL'"
[sortable]="false">
</data-column>
<data-column
key
type="text">
<ng-template let-context>
<aca-search-results-row [context]="context"></aca-search-results-row>
</ng-template>
</data-column>
</data-columns>
<empty-folder-content>
<ng-template>
<ng-container *ngIf="data">
<div class="empty-search__block">
<p class="empty-search__text">
{{ 'APP.BROWSE.SEARCH.NO_RESULTS' | translate }}
</p>
</div>
</ng-container>
</ng-template>
</empty-folder-content>
</adf-document-list>
<adf-pagination *ngIf="!documentList.isEmpty()"
acaPagination
[target]="documentList"
(change)="onPaginationChanged($event)">
</adf-pagination>
</div>
</div>
</div> </div>
<div class="sidebar" *ngIf="infoDrawerOpened$ | async">
<div class="inner-layout__content"> <aca-info-drawer [node]="selection.last"></aca-info-drawer>
<div class="inner-layout__panel">
<div class="adf-search-results">
<adf-search-filter
#searchFilter
[ngClass]="{ 'adf-search-filter--hidden': hideSearchFilter() }"></adf-search-filter>
<div class="adf-search-results__content">
<mat-progress-bar
*ngIf="isLoading"
color="primary"
mode="indeterminate">
</mat-progress-bar>
<div class="adf-search-results__content-header content" *ngIf="data?.list.entries.length">
<div class="content__side--left">
<div class="adf-search-results--info-text">{{ 'APP.BROWSE.SEARCH.FOUND_RESULTS' | translate: { number: totalResults } }}</div>
<div class="adf-search-results__facets">
<adf-search-chip-list [searchFilter]="searchFilter"></adf-search-chip-list>
</div>
</div>
<adf-search-sorting-picker class="content__side--right"></adf-search-sorting-picker>
</div>
<adf-document-list
#documentList
acaDocumentList
[showHeader]="false"
[selectionMode]="'multiple'"
[sortingMode]="'server'"
[sorting]="sorting"
[node]="data"
(node-dblclick)="onNodeDoubleClick($event.detail?.node)">
<data-columns>
<data-column
[key]="'$thumbnail'"
[type]="'image'"
[sr-title]="'ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL'"
[sortable]="false">
</data-column>
<data-column
key
type="text">
<ng-template let-context>
<aca-search-results-row [context]="context"></aca-search-results-row>
</ng-template>
</data-column>
</data-columns>
<empty-folder-content>
<ng-template>
<ng-container *ngIf="data">
<div class="empty-search__block">
<p class="empty-search__text">
{{ 'APP.BROWSE.SEARCH.NO_RESULTS' | translate }}
</p>
</div>
</ng-container>
</ng-template>
</empty-folder-content>
</adf-document-list>
<adf-pagination *ngIf="!documentList.isEmpty()"
acaPagination
[target]="documentList"
(change)="onPaginationChanged($event)">
</adf-pagination>
</div>
</div>
</div>
<div class="inner-layout__side-panel" *ngIf="infoDrawerOpened$ | async">
<aca-info-drawer [node]="selection.last"></aca-info-drawer>
</div>
</div> </div>
</div> </app-page-layout-content>
</app-page-layout>

View File

@@ -1,80 +1,79 @@
<div class="inner-layout"> <app-page-layout>
<div class="inner-layout__header"> <app-page-layout-header>
<adf-breadcrumb root="APP.BROWSE.SHARED.TITLE"> <adf-breadcrumb root="APP.BROWSE.SHARED.TITLE">
</adf-breadcrumb> </adf-breadcrumb>
<adf-toolbar class="inline"> <adf-toolbar class="inline">
<app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode> <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>
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId"> <app-page-layout-content>
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action> <div class="main-content">
</ng-container> <adf-document-list #documentList
</adf-toolbar> acaDocumentList
</div> acaContextActions
[display]="documentDisplayMode$ | async"
currentFolderId="-sharedlinks-"
selectionMode="multiple"
[sorting]="[ 'modifiedAt', 'desc' ]"
(node-dblclick)="showPreview($event.detail?.node)"
(name-click)="showPreview($event.detail?.node)">
<div class="inner-layout__content"> <empty-folder-content>
<div class="inner-layout__panel"> <ng-template>
<adf-document-list #documentList <adf-empty-content
acaDocumentList icon="people"
acaContextActions [title]="'APP.BROWSE.SHARED.EMPTY_STATE.TITLE'"
[display]="documentDisplayMode$ | async" subtitle="APP.BROWSE.SHARED.EMPTY_STATE.TEXT">
currentFolderId="-sharedlinks-" </adf-empty-content>
selectionMode="multiple" </ng-template>
[sorting]="[ 'modifiedAt', 'desc' ]" </empty-folder-content>
(node-dblclick)="showPreview($event.detail?.node)"
(name-click)="showPreview($event.detail?.node)">
<empty-folder-content> <data-columns>
<ng-template> <ng-container *ngFor="let column of columns; trackBy: trackById">
<adf-empty-content
icon="people"
[title]="'APP.BROWSE.SHARED.EMPTY_STATE.TITLE'"
subtitle="APP.BROWSE.SHARED.EMPTY_STATE.TEXT">
</adf-empty-content>
</ng-template>
</empty-folder-content>
<data-columns> <ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
<ng-container *ngFor="let column of columns; trackBy: trackById"> <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)"> <ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
<data-column <data-column
[key]="column.key" [key]="column.key"
[title]="column.title" [title]="column.title"
[type]="column.type" [type]="column.type"
[format]="column.format" [format]="column.format"
[class]="column.class" [class]="column.class"
[sortable]="column.sortable"> [sortable]="column.sortable">
<ng-template let-context> </data-column>
<app-dynamic-column </ng-container>
[id]="column.template"
[context]="context">
</app-dynamic-column>
</ng-template>
</data-column>
</ng-container>
<ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)"> </ng-container>
<data-column </data-columns>
[key]="column.key" </adf-document-list>
[title]="column.title"
[type]="column.type"
[format]="column.format"
[class]="column.class"
[sortable]="column.sortable">
</data-column>
</ng-container>
</ng-container> <adf-pagination acaPagination [target]="documentList">
</data-columns> </adf-pagination>
</adf-document-list> </div>
<adf-pagination acaPagination [target]="documentList"> <div class="sidebar" *ngIf="infoDrawerOpened$ | async">
</adf-pagination> <aca-info-drawer [node]="selection.last"></aca-info-drawer>
</div> </div>
</app-page-layout-content>
<div class="inner-layout__side-panel" *ngIf="infoDrawerOpened$ | async"> </app-page-layout>
<aca-info-drawer [node]="selection.last"></aca-info-drawer>
</div>
</div>
</div>

View File

@@ -34,6 +34,7 @@ import { AppCommonModule } from '../common/common.module';
import { AppToolbarModule } from '../toolbar/toolbar.module'; import { AppToolbarModule } from '../toolbar/toolbar.module';
import { ContextMenuModule } from '../context-menu/context-menu.module'; import { ContextMenuModule } from '../context-menu/context-menu.module';
import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module'; import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module';
import { AppLayoutModule } from '../layout/layout.module';
const routes: Routes = [ const routes: Routes = [
{ {
@@ -56,7 +57,8 @@ const routes: Routes = [
AppCommonModule, AppCommonModule,
AppToolbarModule, AppToolbarModule,
ContextMenuModule, ContextMenuModule,
AppInfoDrawerModule AppInfoDrawerModule,
AppLayoutModule
], ],
declarations: [SharedFilesComponent], declarations: [SharedFilesComponent],
exports: [SharedFilesComponent] exports: [SharedFilesComponent]

View File

@@ -1,83 +1,85 @@
<div class="inner-layout"> <app-page-layout>
<div class="inner-layout__header">
<adf-breadcrumb root="APP.BROWSE.TRASHCAN.TITLE">
</adf-breadcrumb>
<adf-toolbar class="inline"> <app-page-layout-header>
<app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode> <adf-breadcrumb root="APP.BROWSE.TRASHCAN.TITLE">
</adf-breadcrumb>
<ng-container *ngFor="let entry of actions; trackBy: trackByActionId"> <adf-toolbar class="inline">
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action> <app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode>
</ng-container>
</adf-toolbar>
</div>
<div class="inner-layout__content"> <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
<div class="inner-layout__panel"> <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
<adf-document-list #documentList </ng-container>
acaDocumentList </adf-toolbar>
acaContextActions </app-page-layout-header>
[display]="documentDisplayMode$ | async"
currentFolderId="-trashcan-"
selectionMode="multiple"
[navigate]="false"
[sorting]="[ 'archivedAt', 'desc' ]">
<empty-folder-content> <app-page-layout-content>
<ng-template> <div class="main-content">
<adf-empty-content <adf-document-list #documentList
icon="delete" acaDocumentList
[title]="'APP.BROWSE.TRASHCAN.EMPTY_STATE.TITLE'"> acaContextActions
<p class="adf-empty-content__text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}</p> [display]="documentDisplayMode$ | async"
<p class="adf-empty-content__text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}</p> currentFolderId="-trashcan-"
</adf-empty-content> selectionMode="multiple"
</ng-template> [navigate]="false"
</empty-folder-content> [sorting]="[ 'archivedAt', 'desc' ]">
<data-columns> <empty-folder-content>
<ng-container *ngFor="let column of columns; trackBy: trackById"> <ng-template>
<adf-empty-content
icon="delete"
[title]="'APP.BROWSE.TRASHCAN.EMPTY_STATE.TITLE'">
<p class="adf-empty-content__text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.FIRST_TEXT' | translate }}</p>
<p class="adf-empty-content__text">{{ 'APP.BROWSE.TRASHCAN.EMPTY_STATE.SECOND_TEXT' | translate }}</p>
</adf-empty-content>
</ng-template>
</empty-folder-content>
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)"> <data-columns>
<data-column <ng-container *ngFor="let column of columns; trackBy: trackById">
[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>
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
<data-column <data-column
*ngIf="!isSmallScreen && (user$ | async)?.isAdmin" [key]="column.key"
class="adf-data-table-cell--ellipsis" [title]="column.title"
key="archivedByUser.displayName" [type]="column.type"
title="APP.DOCUMENT_LIST.COLUMNS.DELETED_BY"> [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> </data-column>
</data-columns> </ng-container>
</adf-document-list>
<adf-pagination acaPagination [target]="documentList"> <ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
</adf-pagination> <data-column
</div> [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-column
*ngIf="!isSmallScreen && (user$ | async)?.isAdmin"
class="adf-data-table-cell--ellipsis"
key="archivedByUser.displayName"
title="APP.DOCUMENT_LIST.COLUMNS.DELETED_BY">
</data-column>
</data-columns>
</adf-document-list>
<adf-pagination acaPagination [target]="documentList">
</adf-pagination>
</div> </div>
</div> </app-page-layout-content>
</app-page-layout>

View File

@@ -33,6 +33,7 @@ import { AppCommonModule } from '../common/common.module';
import { AppToolbarModule } from '../toolbar/toolbar.module'; import { AppToolbarModule } from '../toolbar/toolbar.module';
import { DirectivesModule } from '../../directives/directives.module'; import { DirectivesModule } from '../../directives/directives.module';
import { ContextMenuModule } from '../context-menu/context-menu.module'; import { ContextMenuModule } from '../context-menu/context-menu.module';
import { AppLayoutModule } from '../layout/layout.module';
const routes: Routes = [ const routes: Routes = [
{ {
@@ -54,7 +55,8 @@ const routes: Routes = [
DirectivesModule, DirectivesModule,
AppCommonModule, AppCommonModule,
AppToolbarModule, AppToolbarModule,
ContextMenuModule ContextMenuModule,
AppLayoutModule
], ],
declarations: [TrashcanComponent], declarations: [TrashcanComponent],
exports: [TrashcanComponent] exports: [TrashcanComponent]

View File

@@ -26,7 +26,7 @@
import { CoreModule } from '@alfresco/adf-core'; import { CoreModule } from '@alfresco/adf-core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core'; import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
import { LayoutComponent } from '../components/layout/layout.component'; import { AppLayoutComponent } from '../components/layout/app-layout/app-layout.component';
import * as repository from './evaluators/repository.evaluators'; import * as repository from './evaluators/repository.evaluators';
import * as app from './evaluators/app.evaluators'; import * as app from './evaluators/app.evaluators';
import * as nav from './evaluators/navigation.evaluators'; import * as nav from './evaluators/navigation.evaluators';
@@ -75,7 +75,7 @@ export class CoreExtensionsModule {
constructor(extensions: ExtensionService) { constructor(extensions: ExtensionService) {
extensions.setComponents({ extensions.setComponents({
'app.layout.main': LayoutComponent, 'app.layout.main': AppLayoutComponent,
'app.components.tabs.metadata': MetadataTabComponent, 'app.components.tabs.metadata': MetadataTabComponent,
'app.components.tabs.comments': CommentsTabComponent, 'app.components.tabs.comments': CommentsTabComponent,
'app.components.tabs.versions': VersionsTabComponent, 'app.components.tabs.versions': VersionsTabComponent,

View File

@@ -16,9 +16,9 @@ body {
} }
} }
// todo: move this to corresponding component theme files
app-root, app-root,
app-about, app-about,
app-layout,
adf-layout-container, adf-layout-container,
aca-search-results, aca-search-results,
ng-component { ng-component {

View File

@@ -11,6 +11,7 @@
@import '../components/context-menu/context-menu.component.theme'; @import '../components/context-menu/context-menu.component.theme';
@import '../dialogs/node-versions/node-versions.dialog.theme'; @import '../dialogs/node-versions/node-versions.dialog.theme';
@import '../components/create-menu/create-menu.component.scss'; @import '../components/create-menu/create-menu.component.scss';
@import '../components/layout/layout.theme.scss';
@import './overrides/adf-toolbar.theme'; @import './overrides/adf-toolbar.theme';
@import './overrides/adf-search-filter.theme'; @import './overrides/adf-search-filter.theme';
@@ -26,7 +27,6 @@
@import './overrides/adf-layout-header.theme'; @import './overrides/adf-layout-header.theme';
@import './overrides/adf-version-manager.theme'; @import './overrides/adf-version-manager.theme';
@import 'layout';
@import 'snackbar'; @import 'snackbar';
$grey-scale: ( $grey-scale: (
@@ -83,7 +83,7 @@ $custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent);
@include adf-layout-header-theme($theme); @include adf-layout-header-theme($theme);
@include adf-version-manager-theme($theme); @include adf-version-manager-theme($theme);
@include aca-layout-theme($theme); @include layout-theme($theme);
@include aca-search-input-theme($theme); @include aca-search-input-theme($theme);
@include aca-generic-error-theme($theme); @include aca-generic-error-theme($theme);
@include app-permission-manager-theme($theme); @include app-permission-manager-theme($theme);

View File

@@ -1,55 +0,0 @@
@import 'mixins';
@mixin aca-layout-theme($theme) {
$foreground: map-get($theme, foreground);
$app-layout--header-height: 65px;
$app-layout--side-width: 320px;
$app-inner-layout--header-height: 48px;
$app-inner-layout--footer-height: 48px;
$alfresco-divider-color: mat-color($foreground, text, 0.07);
$alfresco-gray-background: #fafafa;
.layout {
@include flex-column;
}
.inner-layout {
@include flex-column;
&__header {
display: flex;
align-items: center;
flex: 0 0 $app-layout--header-height;
flex-basis: $app-inner-layout--header-height;
background: $alfresco-gray-background;
border-bottom: 1px solid $alfresco-divider-color;
padding: 0 24px;
}
&__content {
@include flex-row;
}
&__content--hide {
display: none !important;
}
&__panel {
@include flex-column;
border-right: 1px solid mat-color($foreground, text, 0.07);
}
&__side-panel {
display: block;
height: 100%;
overflow-y: scroll;
max-width: 350px;
width: 350px;
}
}
.content--scroll {
overflow: auto !important;
}
}