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 { LayoutComponent } from './components/layout/layout.component';
import { AppLayoutComponent } from './components/layout/app-layout/app-layout.component';
import { FilesComponent } from './components/files/files.component';
import { LibrariesComponent } from './components/libraries/libraries.component';
import { GenericErrorComponent } from './components/common/generic-error/generic-error.component';
@@ -52,7 +52,7 @@ export const APP_ROUTES: Routes = [
},
{
path: '',
component: LayoutComponent,
component: AppLayoutComponent,
children: [
{
path: '',

View File

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

View File

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

View File

@@ -1,5 +1,6 @@
<div class="inner-layout">
<div class="inner-layout__header">
<app-page-layout>
<app-page-layout-header>
<adf-breadcrumb root="APP.BROWSE.FAVORITES.TITLE">
</adf-breadcrumb>
@@ -10,9 +11,10 @@
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
</ng-container>
</adf-toolbar>
</div>
<div class="inner-layout__content">
<div class="inner-layout__panel">
</app-page-layout-header>
<app-page-layout-content>
<div class="main-content">
<adf-document-list #documentList
acaDocumentList
acaContextActions
@@ -73,8 +75,9 @@
</adf-pagination>
</div>
<div class="inner-layout__side-panel" *ngIf="infoDrawerOpened$ | async">
<div class="sidebar" *ngIf="infoDrawerOpened$ | async">
<aca-info-drawer [node]="selection.last"></aca-info-drawer>
</div>
</div>
</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 { ContextMenuModule } from '../context-menu/context-menu.module';
import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module';
import { AppLayoutModule } from '../layout/layout.module';
const routes: Routes = [
{
@@ -56,7 +57,8 @@ const routes: Routes = [
AppCommonModule,
AppToolbarModule,
ContextMenuModule,
AppInfoDrawerModule
AppInfoDrawerModule,
AppLayoutModule
],
declarations: [FavoritesComponent],
exports: [FavoritesComponent]

View File

@@ -1,5 +1,6 @@
<div class="inner-layout">
<div class="inner-layout__header">
<app-page-layout [hasError]="!isValidPath">
<app-page-layout-header>
<adf-breadcrumb
[root]="title"
[folderNode]="node"
@@ -12,14 +13,14 @@
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
</ng-container>
</adf-toolbar>
</div>
</app-page-layout-header>
<div [attr.class]="isValidPath ? 'inner-layout__content--hide' : 'inner-layout__content'">
<app-page-layout-error>
<aca-generic-error></aca-generic-error>
</div>
</app-page-layout-error>
<div [attr.class]="!isValidPath ? 'inner-layout__content--hide' : 'inner-layout__content'">
<div class="inner-layout__panel">
<app-page-layout-content>
<div class="main-content">
<adf-upload-drag-area
[parentId]="node?.id"
[disabled]="!canUpload">
@@ -77,8 +78,9 @@
</adf-upload-drag-area>
</div>
<div class="inner-layout__side-panel" *ngIf="infoDrawerOpened$ | async">
<div class="sidebar" *ngIf="infoDrawerOpened$ | async">
<aca-info-drawer [node]="selection.last"></aca-info-drawer>
</div>
</div>
</div>
</app-page-layout-content>
</app-page-layout>

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

View File

@@ -39,19 +39,18 @@ import { NavigationEnd, Router } from '@angular/router';
import { Store } from '@ngrx/store';
import { Subject, Observable } from 'rxjs';
import { filter, takeUntil, map, withLatestFrom } from 'rxjs/operators';
import { NodePermissionService } from '../../services/node-permission.service';
import { currentFolder } from '../../store/selectors/app.selectors';
import { AppStore } from '../../store/states';
import { NodePermissionService } from '../../../services/node-permission.service';
import { currentFolder } from '../../../store/selectors/app.selectors';
import { AppStore } from '../../../store/states';
import { BreakpointObserver } from '@angular/cdk/layout';
@Component({
selector: 'app-layout',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.scss'],
templateUrl: './app-layout.component.html',
encapsulation: ViewEncapsulation.None,
host: { class: 'app-layout' }
})
export class LayoutComponent implements OnInit, OnDestroy {
export class AppLayoutComponent implements OnInit, OnDestroy {
@ViewChild('layout')
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 { CommonModule } from '@angular/common';
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 { RouterModule } from '@angular/router';
import { AppSidenavModule } from '../sidenav/sidenav.module';
import { AppCommonModule } from '../common/common.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({
imports: [
@@ -43,7 +47,19 @@ import { AppHeaderModule } from '../header/header.module';
AppSidenavModule,
AppHeaderModule
],
declarations: [LayoutComponent],
exports: [LayoutComponent]
declarations: [
AppLayoutComponent,
PageLayoutComponent,
PageLayoutHeaderComponent,
PageLayoutContentComponent,
PageLayoutErrorComponent
],
exports: [
AppLayoutComponent,
PageLayoutComponent,
PageLayoutHeaderComponent,
PageLayoutContentComponent,
PageLayoutErrorComponent
]
})
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,5 +1,6 @@
<div class="inner-layout">
<div class="inner-layout__header">
<app-page-layout>
<app-page-layout-header>
<adf-breadcrumb root="APP.BROWSE.LIBRARIES.TITLE">
</adf-breadcrumb>
@@ -12,10 +13,10 @@
</ng-container>
</ng-container>
</adf-toolbar>
</div>
</app-page-layout-header>
<div class="inner-layout__content">
<div class="inner-layout__panel">
<app-page-layout-content>
<div class="main-content">
<adf-document-list #documentList
acaDocumentList
[display]="documentDisplayMode$ | async"
@@ -74,5 +75,5 @@
<adf-pagination acaPagination [target]="documentList">
</adf-pagination>
</div>
</div>
</div>
</app-page-layout-content>
</app-page-layout>

View File

@@ -1,19 +1,19 @@
<div class="inner-layout">
<div class="inner-layout__header">
<app-page-layout>
<app-page-layout-header>
<adf-breadcrumb root="APP.BROWSE.RECENT.TITLE">
</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>
</div>
</app-page-layout-header>
<div class="inner-layout__content">
<div class="inner-layout__panel">
<app-page-layout-content>
<div class="main-content">
<adf-document-list #documentList
acaDocumentList
acaContextActions
@@ -76,8 +76,8 @@
</adf-pagination>
</div>
<div class="inner-layout__side-panel" *ngIf="infoDrawerOpened$ | async">
<div class="sidebar" *ngIf="infoDrawerOpened$ | async">
<aca-info-drawer [node]="selection.last"></aca-info-drawer>
</div>
</div>
</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 { 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]

View File

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

View File

@@ -1,5 +1,6 @@
<div class="inner-layout">
<div class="inner-layout__header">
<app-page-layout>
<app-page-layout-header>
<adf-breadcrumb root="APP.BROWSE.SEARCH.TITLE">
</adf-breadcrumb>
<adf-toolbar class="inline">
@@ -7,10 +8,10 @@
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
</ng-container>
</adf-toolbar>
</div>
</app-page-layout-header>
<div class="inner-layout__content">
<div class="inner-layout__panel">
<app-page-layout-content>
<div class="main-content">
<div class="adf-search-results">
<adf-search-filter
#searchFilter
@@ -82,8 +83,9 @@
</div>
</div>
</div>
<div class="inner-layout__side-panel" *ngIf="infoDrawerOpened$ | async">
<div class="sidebar" *ngIf="infoDrawerOpened$ | async">
<aca-info-drawer [node]="selection.last"></aca-info-drawer>
</div>
</div>
</div>
</app-page-layout-content>
</app-page-layout>

View File

@@ -1,19 +1,18 @@
<div class="inner-layout">
<div class="inner-layout__header">
<app-page-layout>
<app-page-layout-header>
<adf-breadcrumb root="APP.BROWSE.SHARED.TITLE">
</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>
</div>
</app-page-layout-header>
<div class="inner-layout__content">
<div class="inner-layout__panel">
<app-page-layout-content>
<div class="main-content">
<adf-document-list #documentList
acaDocumentList
acaContextActions
@@ -73,8 +72,8 @@
</adf-pagination>
</div>
<div class="inner-layout__side-panel" *ngIf="infoDrawerOpened$ | async">
<div class="sidebar" *ngIf="infoDrawerOpened$ | async">
<aca-info-drawer [node]="selection.last"></aca-info-drawer>
</div>
</div>
</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 { ContextMenuModule } from '../context-menu/context-menu.module';
import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module';
import { AppLayoutModule } from '../layout/layout.module';
const routes: Routes = [
{
@@ -56,7 +57,8 @@ const routes: Routes = [
AppCommonModule,
AppToolbarModule,
ContextMenuModule,
AppInfoDrawerModule
AppInfoDrawerModule,
AppLayoutModule
],
declarations: [SharedFilesComponent],
exports: [SharedFilesComponent]

View File

@@ -1,5 +1,6 @@
<div class="inner-layout">
<div class="inner-layout__header">
<app-page-layout>
<app-page-layout-header>
<adf-breadcrumb root="APP.BROWSE.TRASHCAN.TITLE">
</adf-breadcrumb>
@@ -10,10 +11,10 @@
<aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
</ng-container>
</adf-toolbar>
</div>
</app-page-layout-header>
<div class="inner-layout__content">
<div class="inner-layout__panel">
<app-page-layout-content>
<div class="main-content">
<adf-document-list #documentList
acaDocumentList
acaContextActions
@@ -79,5 +80,6 @@
<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 { DirectivesModule } from '../../directives/directives.module';
import { ContextMenuModule } from '../context-menu/context-menu.module';
import { AppLayoutModule } from '../layout/layout.module';
const routes: Routes = [
{
@@ -54,7 +55,8 @@ const routes: Routes = [
DirectivesModule,
AppCommonModule,
AppToolbarModule,
ContextMenuModule
ContextMenuModule,
AppLayoutModule
],
declarations: [TrashcanComponent],
exports: [TrashcanComponent]

View File

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

View File

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

View File

@@ -11,6 +11,7 @@
@import '../components/context-menu/context-menu.component.theme';
@import '../dialogs/node-versions/node-versions.dialog.theme';
@import '../components/create-menu/create-menu.component.scss';
@import '../components/layout/layout.theme.scss';
@import './overrides/adf-toolbar.theme';
@import './overrides/adf-search-filter.theme';
@@ -26,7 +27,6 @@
@import './overrides/adf-layout-header.theme';
@import './overrides/adf-version-manager.theme';
@import 'layout';
@import 'snackbar';
$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-version-manager-theme($theme);
@include aca-layout-theme($theme);
@include layout-theme($theme);
@include aca-search-input-theme($theme);
@include aca-generic-error-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;
}
}