improved page layout (#761)

* app-layout component

* layout theme reorg

* merge app-layout styles

* rework page layouting

src/app/components/layout/app-layout/app-layout.component.html

@@ -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>

src/app/components/layout/app-layout/app-layout.component.spec.ts

@@ -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);

src/app/components/layout/app-layout/app-layout.component.ts

@@ -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;
 

src/app/components/layout/app-layout/app-layout.theme.scss

@@ -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;
+    }
+  }
+}

src/app/components/layout/layout.component.html

@@ -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>

src/app/components/layout/layout.component.scss

@@ -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;
-  }
-}

src/app/components/layout/layout.module.ts

@@ -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 {}

src/app/components/layout/layout.theme.scss

@@ -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);
+}

src/app/components/layout/page-layout/page-layout-content.component.ts

@@ -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;
+}

src/app/components/layout/page-layout/page-layout-error.component.ts

@@ -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 {}

src/app/components/layout/page-layout/page-layout-header.component.ts

@@ -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 {}

src/app/components/layout/page-layout/page-layout.component.html

@@ -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>

src/app/components/layout/page-layout/page-layout.component.ts

@@ -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;
+}

src/app/components/layout/page-layout/page-layout.theme.scss

@@ -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;
+    }
+  }
+}

src/app/components/layout/sidenav-views-manager.directive.spec.ts

@@ -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);
-    });
-  });
-});
-*/