inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-1890] - Viewer - Content projection for sidebar only works if si… (#2661)

Browse Source 
* [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
This commit is contained in:
mihai sirghe 2017-11-21 18:27:19 +02:00 committed by Eugenio Romano
parent ffef846f1e
commit ed35a291b4
4 changed files with 62 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
lib/core/viewer/components/viewer.component.html
View File

@ -3,7 +3,7 @@
[class.adf-viewer-overlay-container]="overlayMode" [class.adf-viewer-overlay-container]="overlayMode"
[class.adf-viewer-inline-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-content select="adf-viewer-toolbar"></ng-content>
<ng-container *ngIf="showToolbar && !toolbar"> <ng-container *ngIf="showToolbar && !toolbar">
<adf-toolbar color="default" class="adf-viewer-toolbar"> <adf-toolbar color="default" class="adf-viewer-toolbar">
@ -93,7 +93,7 @@
</ng-container> </ng-container>
<ng-container *ngIf="isLoading"> <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> <h2>{{ 'ADF_VIEWER.LOADING' | translate }}</h2>
<div> <div>
<mat-spinner></mat-spinner> <mat-spinner></mat-spinner>
@ -101,17 +101,18 @@
</div> </div>
</ng-container> </ng-container>
<div *ngIf="!isLoading" class="adf-viewer-layout"> <div *ngIf="!isLoading" fxLayout="row" fxFlex="1 1 auto">
<ng-container *ngIf="showSidebar && sidebarPosition === 'left'"> <ng-container *ngIf="showSidebar">
<div class="adf-viewer__sidebar adf-viewer__sidebar-left"> <div class="adf-viewer__sidebar" fxFlexOrder="{{sidebarPosition === 'left'? 1: 2 }}">
<ng-content select="adf-viewer-sidebar"></ng-content> <ng-container *ngIf="sidebarTemplate">
<ng-container *ngIf="!sidebar"> <ng-container *ngTemplateOutlet="sidebarTemplate;context:sidebarTemplateContext"></ng-container>
<!-- todo: default info drawer -->
</ng-container> </ng-container>
<ng-content *ngIf="!sidebarTemplate" select="adf-viewer-sidebar"></ng-content>
</div> </div>
</ng-container> </ng-container>
<div fxFlexOrder="{{sidebarPosition !== 'left'? 1: 2}}" fxFlex="1 1 auto">
<div class="adf-viewer-layout-content"> <div class="adf-viewer-layout-content">
<div class="adf-viewer-content-container" [ngSwitch]="viewerType"> <div class="adf-viewer-content-container" [ngSwitch]="viewerType">
@ -133,10 +134,7 @@
<ng-container *ngSwitchCase="'custom'"> <ng-container *ngSwitchCase="'custom'">
<span *ngFor="let extensionTemplate of extensionTemplates"> <span *ngFor="let extensionTemplate of extensionTemplates">
<ng-template <ng-template *ngIf="extensionTemplate.isVisible" [ngTemplateOutlet]="extensionTemplate.template" [ngTemplateOutletContext]="{ urlFileContent: urlFileContent, extension:extension }">
*ngIf="extensionTemplate.isVisible"
[ngTemplateOutlet]="extensionTemplate.template"
[ngTemplateOutletContext]="{ urlFileContent: urlFileContent, extension:extension }">
</ng-template> </ng-template>
</span> </span>
</ng-container> </ng-container>
@ -147,15 +145,7 @@
</div> </div>
</div> </div>
</div>
<ng-container *ngIf="showSidebar && sidebarPosition !== 'left'">
<div class="adf-viewer__sidebar adf-viewer__sidebar-right">
<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> </div>
</div> </div>
</div> </div>

4
lib/core/viewer/components/viewer.component.scss
View File

@ -89,11 +89,13 @@
&__sidebar { &__sidebar {
width: 350px; width: 350px;
height: 100%;
display: block; display: block;
padding: 0; padding: 0;
background-color: #fafafa; 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); border-left: 1px solid mat-color($foreground, text, 0.07);
overflow: auto;
} }
} }
} }

26
lib/core/viewer/components/viewer.component.spec.ts
View File

@ -17,7 +17,7 @@
import { Location } from '@angular/common'; import { Location } from '@angular/common';
import { SpyLocation } from '@angular/common/testing'; 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AlfrescoApiService, RenditionsService } from '../../services'; import { AlfrescoApiService, RenditionsService } from '../../services';
@ -37,6 +37,7 @@ import { ViewerOpenWithComponent } from './viewer-open-with.component';
import { ViewerSidebarComponent } from './viewer-sidebar.component'; import { ViewerSidebarComponent } from './viewer-sidebar.component';
import { ViewerToolbarComponent } from './viewer-toolbar.component'; import { ViewerToolbarComponent } from './viewer-toolbar.component';
import { ViewerComponent } from './viewer.component'; import { ViewerComponent } from './viewer.component';
import { FlexLayoutModule } from '@angular/flex-layout';
declare let jasmine: any; declare let jasmine: any;
@ -114,7 +115,6 @@ describe('ViewerComponent', () => {
let component: ViewerComponent; let component: ViewerComponent;
let fixture: ComponentFixture<ViewerComponent>; let fixture: ComponentFixture<ViewerComponent>;
let debug: DebugElement;
let alfrescoApiService: AlfrescoApiService; let alfrescoApiService: AlfrescoApiService;
let element: HTMLElement; let element: HTMLElement;
@ -122,7 +122,8 @@ describe('ViewerComponent', () => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
imports: [ imports: [
ToolbarModule, ToolbarModule,
MaterialModule MaterialModule,
FlexLayoutModule
], ],
declarations: [ declarations: [
ViewerComponent, ViewerComponent,
@ -156,7 +157,6 @@ describe('ViewerComponent', () => {
beforeEach(() => { beforeEach(() => {
fixture = TestBed.createComponent(ViewerComponent); fixture = TestBed.createComponent(ViewerComponent);
debug = fixture.debugElement;
element = fixture.nativeElement; element = fixture.nativeElement;
component = fixture.componentInstance; component = fixture.componentInstance;
@ -207,22 +207,28 @@ describe('ViewerComponent', () => {
expect(customElement.querySelector('.adf-viewer-container-more-actions')).toBeDefined(); 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'; component.sidebarPosition = 'left';
fixture.detectChanges(); 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'; component.sidebarPosition = 'right';
fixture.detectChanges(); 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'; component.sidebarPosition = 'unknown-value';
fixture.detectChanges(); 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', () => { describe('Toolbar', () => {

4
lib/core/viewer/viewer.module.ts
View File

@ -33,6 +33,7 @@ import { ViewerSidebarComponent } from './components/viewer-sidebar.component';
import { ViewerToolbarComponent } from './components/viewer-toolbar.component'; import { ViewerToolbarComponent } from './components/viewer-toolbar.component';
import { ViewerComponent } from './components/viewer.component'; import { ViewerComponent } from './components/viewer.component';
import { ViewerExtensionDirective } from './directives/viewer-extension.directive'; import { ViewerExtensionDirective } from './directives/viewer-extension.directive';
import { FlexLayoutModule } from '@angular/flex-layout';
@NgModule({ @NgModule({
imports: [ imports: [
@ -40,7 +41,8 @@ import { ViewerExtensionDirective } from './directives/viewer-extension.directiv
MaterialModule, MaterialModule,
TranslateModule, TranslateModule,
ToolbarModule, ToolbarModule,
PipeModule PipeModule,
FlexLayoutModule
], ],
declarations: [ declarations: [
ViewerComponent, ViewerComponent,