From ed35a291b4098a438c8687bf4ba869f8eea8f28e Mon Sep 17 00:00:00 2001
From: mihai sirghe <32762007+smihai78@users.noreply.github.com>
Date: Tue, 21 Nov 2017 18:27:19 +0200
Subject: [PATCH] =?UTF-8?q?[ADF-1890]=20-=20Viewer=20-=20Content=20project?=
 =?UTF-8?q?ion=20for=20sidebar=20only=20works=20if=20si=E2=80=A6=20(#2661)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* [ADF-1890] - Viewer - Content projection for sidebar only works if sidebarPosition is left

This issue is now fixed using angular flex
Also updated the test suite
Tested on chrome, firefox and safari

* [ADF-1890] - Viewer - Content projection for sidebar only works if sidebarPosition is left

This issue is now fixed using angular flex
Also updated the test suite
Tested on chrome, firefox and safari

* Replaced fit statements with it

* added flex dependenty to the viewer component spec file

* Update for sidebar component template

* Delete npm-debug.log from repo

* Fix sidebar height issues

* Fix tests
---
 .../viewer/components/viewer.component.html   | 90 +++++++++----------
 .../viewer/components/viewer.component.scss   |  4 +-
 .../components/viewer.component.spec.ts       | 26 +++---
 lib/core/viewer/viewer.module.ts              |  4 +-
 4 files changed, 62 insertions(+), 62 deletions(-)

diff --git a/lib/core/viewer/components/viewer.component.html b/lib/core/viewer/components/viewer.component.html
index 378008bab9..019b091725 100644
--- a/lib/core/viewer/components/viewer.component.html
+++ b/lib/core/viewer/components/viewer.component.html
@@ -3,7 +3,7 @@
     [class.adf-viewer-overlay-container]="overlayMode"
     [class.adf-viewer-inline-container]="!overlayMode">
 
-    <div class="adf-viewer-content">
+    <div class="adf-viewer-content" fxLayout="column">
         <ng-content select="adf-viewer-toolbar"></ng-content>
         <ng-container *ngIf="showToolbar && !toolbar">
             <adf-toolbar color="default" class="adf-viewer-toolbar">
@@ -93,7 +93,7 @@
         </ng-container>
 
         <ng-container *ngIf="isLoading">
-            <div class="adf-viewer__loading-screen">
+            <div class="adf-viewer__loading-screen" fxFlex="1 1 auto">
                 <h2>{{ 'ADF_VIEWER.LOADING' | translate }}</h2>
                 <div>
                     <mat-spinner></mat-spinner>
@@ -101,61 +101,51 @@
             </div>
         </ng-container>
 
-        <div *ngIf="!isLoading" class="adf-viewer-layout">
+        <div *ngIf="!isLoading" fxLayout="row" fxFlex="1 1 auto">
 
-            <ng-container *ngIf="showSidebar && sidebarPosition === 'left'">
-                <div class="adf-viewer__sidebar adf-viewer__sidebar-left">
-                    <ng-content select="adf-viewer-sidebar"></ng-content>
-                    <ng-container *ngIf="!sidebar">
-                        <!-- todo: default info drawer -->
-                    </ng-container>
-                </div>
-            </ng-container>
-
-            <div class="adf-viewer-layout-content">
-                <div class="adf-viewer-content-container" [ngSwitch]="viewerType">
-
-                    <ng-container *ngSwitchCase="'pdf'">
-                        <adf-pdf-viewer [blobFile]="blobFile" [urlFile]="urlFileContent" [nameFile]="displayName"></adf-pdf-viewer>
-                    </ng-container>
-
-                    <ng-container *ngSwitchCase="'image'">
-                        <adf-img-viewer [urlFile]="urlFileContent" [nameFile]="displayName" [blobFile]="blobFile"></adf-img-viewer>
-                    </ng-container>
-
-                    <ng-container *ngSwitchCase="'media'">
-                        <adf-media-player [urlFile]="urlFileContent" [mimeType]="mimeType" [blobFile]="blobFile" [nameFile]="displayName"></adf-media-player>
-                    </ng-container>
-
-                    <ng-container *ngSwitchCase="'text'">
-                        <adf-txt-viewer [urlFile]="urlFileContent" [blobFile]="blobFile"></adf-txt-viewer>
-                    </ng-container>
-
-                    <ng-container *ngSwitchCase="'custom'">
-                        <span *ngFor="let extensionTemplate of extensionTemplates">
-                            <ng-template
-                                *ngIf="extensionTemplate.isVisible"
-                                [ngTemplateOutlet]="extensionTemplate.template"
-                                [ngTemplateOutletContext]="{ urlFileContent: urlFileContent, extension:extension }">
-                            </ng-template>
-                        </span>
-                    </ng-container>
-
-                    <ng-container *ngSwitchDefault>
-                        <adf-viewer-unknown-format></adf-viewer-unknown-format>
-                    </ng-container>
-
-                </div>
-            </div>
-
-            <ng-container *ngIf="showSidebar && sidebarPosition !== 'left'">
-                <div class="adf-viewer__sidebar adf-viewer__sidebar-right">
+            <ng-container *ngIf="showSidebar">
+                <div class="adf-viewer__sidebar" fxFlexOrder="{{sidebarPosition === 'left'? 1: 2 }}">
                     <ng-container *ngIf="sidebarTemplate">
                         <ng-container *ngTemplateOutlet="sidebarTemplate;context:sidebarTemplateContext"></ng-container>
                     </ng-container>
                     <ng-content *ngIf="!sidebarTemplate" select="adf-viewer-sidebar"></ng-content>
                 </div>
             </ng-container>
+
+            <div fxFlexOrder="{{sidebarPosition !== 'left'? 1: 2}}" fxFlex="1 1 auto">
+                <div class="adf-viewer-layout-content">
+                    <div class="adf-viewer-content-container" [ngSwitch]="viewerType">
+
+                        <ng-container *ngSwitchCase="'pdf'">
+                            <adf-pdf-viewer [blobFile]="blobFile" [urlFile]="urlFileContent" [nameFile]="displayName"></adf-pdf-viewer>
+                        </ng-container>
+
+                        <ng-container *ngSwitchCase="'image'">
+                            <adf-img-viewer [urlFile]="urlFileContent" [nameFile]="displayName" [blobFile]="blobFile"></adf-img-viewer>
+                        </ng-container>
+
+                        <ng-container *ngSwitchCase="'media'">
+                            <adf-media-player [urlFile]="urlFileContent" [mimeType]="mimeType" [blobFile]="blobFile" [nameFile]="displayName"></adf-media-player>
+                        </ng-container>
+
+                        <ng-container *ngSwitchCase="'text'">
+                            <adf-txt-viewer [urlFile]="urlFileContent" [blobFile]="blobFile"></adf-txt-viewer>
+                        </ng-container>
+
+                        <ng-container *ngSwitchCase="'custom'">
+                            <span *ngFor="let extensionTemplate of extensionTemplates">
+                                <ng-template *ngIf="extensionTemplate.isVisible" [ngTemplateOutlet]="extensionTemplate.template" [ngTemplateOutletContext]="{ urlFileContent: urlFileContent, extension:extension }">
+                                </ng-template>
+                            </span>
+                        </ng-container>
+
+                        <ng-container *ngSwitchDefault>
+                            <adf-viewer-unknown-format></adf-viewer-unknown-format>
+                        </ng-container>
+
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </div>
diff --git a/lib/core/viewer/components/viewer.component.scss b/lib/core/viewer/components/viewer.component.scss
index cb11d12633..c1646fc4f9 100644
--- a/lib/core/viewer/components/viewer.component.scss
+++ b/lib/core/viewer/components/viewer.component.scss
@@ -89,11 +89,13 @@
 
         &__sidebar {
             width: 350px;
+            height: 100%;
             display: block;
             padding: 0;
             background-color: #fafafa;
-            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
+            box-shadow: 0 2px 4px 0 mat-color($foreground, text, 0.27);
             border-left: 1px solid mat-color($foreground, text, 0.07);
+            overflow: auto;
         }
     }
 }
diff --git a/lib/core/viewer/components/viewer.component.spec.ts b/lib/core/viewer/components/viewer.component.spec.ts
index 826619695d..3822c4a44c 100644
--- a/lib/core/viewer/components/viewer.component.spec.ts
+++ b/lib/core/viewer/components/viewer.component.spec.ts
@@ -17,7 +17,7 @@
 
 import { Location } from '@angular/common';
 import { SpyLocation } from '@angular/common/testing';
-import { Component, DebugElement } from '@angular/core';
+import { Component } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { AlfrescoApiService, RenditionsService } from '../../services';
 
@@ -37,6 +37,7 @@ import { ViewerOpenWithComponent } from './viewer-open-with.component';
 import { ViewerSidebarComponent } from './viewer-sidebar.component';
 import { ViewerToolbarComponent } from './viewer-toolbar.component';
 import { ViewerComponent } from './viewer.component';
+import { FlexLayoutModule } from '@angular/flex-layout';
 
 declare let jasmine: any;
 
@@ -114,7 +115,6 @@ describe('ViewerComponent', () => {
 
     let component: ViewerComponent;
     let fixture: ComponentFixture<ViewerComponent>;
-    let debug: DebugElement;
     let alfrescoApiService: AlfrescoApiService;
     let element: HTMLElement;
 
@@ -122,7 +122,8 @@ describe('ViewerComponent', () => {
         TestBed.configureTestingModule({
             imports: [
                 ToolbarModule,
-                MaterialModule
+                MaterialModule,
+                FlexLayoutModule
             ],
             declarations: [
                 ViewerComponent,
@@ -156,7 +157,6 @@ describe('ViewerComponent', () => {
     beforeEach(() => {
         fixture = TestBed.createComponent(ViewerComponent);
 
-        debug = fixture.debugElement;
         element = fixture.nativeElement;
         component = fixture.componentInstance;
 
@@ -207,22 +207,28 @@ describe('ViewerComponent', () => {
         expect(customElement.querySelector('.adf-viewer-container-more-actions')).toBeDefined();
     });
 
-    it('should display left sidebar', () => {
+    it('should display sidebar on the left side', () => {
+        component.showSidebar = true;
         component.sidebarPosition = 'left';
         fixture.detectChanges();
-        expect(element.querySelector('.adf-viewer__sidebar-left')).toBeDefined();
+        let sidebar = element.querySelector('.adf-viewer__sidebar');
+        expect(getComputedStyle(sidebar).order).toEqual('1');
     });
 
-    it('should display right sidebar', () => {
+    it('should display sidebar on the right side', () => {
+        component.showSidebar = true;
         component.sidebarPosition = 'right';
         fixture.detectChanges();
-        expect(element.querySelector('.adf-viewer__sidebar-right')).toBeDefined();
+        let sidebar = element.querySelector('.adf-viewer__sidebar');
+        expect(getComputedStyle(sidebar).order).toEqual('2');
     });
 
-    it('should display right sidebar as fallback', () => {
+    it('should display sidebar on the right side as fallback', () => {
+        component.showSidebar = true;
         component.sidebarPosition = 'unknown-value';
         fixture.detectChanges();
-        expect(element.querySelector('.adf-viewer__sidebar-right')).toBeDefined();
+        let sidebar = element.querySelector('.adf-viewer__sidebar');
+        expect(getComputedStyle(sidebar).order).toEqual('2');
     });
 
     describe('Toolbar', () => {
diff --git a/lib/core/viewer/viewer.module.ts b/lib/core/viewer/viewer.module.ts
index 983fd525af..bc07e0dfbd 100644
--- a/lib/core/viewer/viewer.module.ts
+++ b/lib/core/viewer/viewer.module.ts
@@ -33,6 +33,7 @@ import { ViewerSidebarComponent } from './components/viewer-sidebar.component';
 import { ViewerToolbarComponent } from './components/viewer-toolbar.component';
 import { ViewerComponent } from './components/viewer.component';
 import { ViewerExtensionDirective } from './directives/viewer-extension.directive';
+import { FlexLayoutModule } from '@angular/flex-layout';
 
 @NgModule({
     imports: [
@@ -40,7 +41,8 @@ import { ViewerExtensionDirective } from './directives/viewer-extension.directiv
         MaterialModule,
         TranslateModule,
         ToolbarModule,
-        PipeModule
+        PipeModule,
+        FlexLayoutModule
     ],
     declarations: [
         ViewerComponent,