mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
[ADF-1890] - Viewer - Content projection for sidebar only works if si… (#2661)
* [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
Eugenio Romano
parent
ffef846f1e
commit
ed35a291b4
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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', () => {
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user