inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-2338] PDF Thumbnail Pane - close button (#2977)

Browse Source 
* close thumblist panel

* thumbnails template container
This commit is contained in:
Cilibiu Bogdan
2018-02-22 11:29:20 +02:00
committed by Eugenio Romano
parent ec3b208b84
commit 9bbdf4331e
9 changed files with 77 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
lib/core/viewer/components/pdfViewer-thumbnails.component.scss
View File

@@ -16,16 +16,16 @@
}
&__thumb:first-child {
margin-top: 14px;
margin-top: 15px;
}
&__thumb {
cursor: pointer;
display: block;
height: 140px;
width: 100px;
height: 114px;
width: 91px;
background: mat-color($background, background);
margin-bottom: 14px;
margin-bottom: 15px;
}
&__thumb:hover {

4
lib/core/viewer/components/pdfViewer-thumbnails.component.spec.ts
View File

@@ -81,7 +81,7 @@ describe('PdfThumbListComponent', () => {
fixture.detectChanges();
const renderedIds = component.renderItems.map(item => item.id);
const rangeIds = viewerMock._pages.slice(0, 5).map(item => item.id);
const rangeIds = viewerMock._pages.slice(0, 7).map(item => item.id);
expect(renderedIds).toEqual(rangeIds);
});
@@ -91,7 +91,7 @@ describe('PdfThumbListComponent', () => {
fixture.detectChanges();
const renderedIds = component.renderItems.map(item => item.id);
const rangeIds = viewerMock._pages.slice(5, 10).map(item => item.id);
const rangeIds = viewerMock._pages.slice(6, 14).map(item => item.id);
expect(renderedIds).toEqual(rangeIds);
});

2
lib/core/viewer/components/pdfViewer-thumbnails.component.ts
View File

@@ -35,7 +35,7 @@ export class PdfThumbListComponent implements OnInit, AfterViewInit, OnDestroy {
renderItems = [];
private items = [];
private itemHeight: number = 140;
private itemHeight: number = 114;
@ContentChild(TemplateRef)
template: any;

21
lib/core/viewer/components/pdfViewer.component.html
View File

@@ -1,12 +1,21 @@
<div class="adf-pdf-viewer__container">
<ng-container *ngIf="showThumbnails">
<div class="adf-pdf-viewer__thumbnails">
<ng-container *ngIf="thumbnailsTemplate">
<ng-container *ngTemplateOutlet="thumbnailsTemplate;context:pdfThumbnailsContext"></ng-container>
</ng-container>
<ng-container *ngIf="!thumbnailsTemplate">
<adf-pdf-thumbnails [pdfViewer]="pdfViewer"></adf-pdf-thumbnails>
</ng-container>
<div class="thumbnails-template__container">
<div class="thumbnails-template__buttons">
<button mat-icon-button (click)="toggleThumbnails()">
<mat-icon>close</mat-icon>
</button>
</div>
<ng-container *ngIf="thumbnailsTemplate">
<ng-container *ngTemplateOutlet="thumbnailsTemplate;context:pdfThumbnailsContext"></ng-container>
</ng-container>
<ng-container *ngIf="!thumbnailsTemplate">
<adf-pdf-thumbnails [pdfViewer]="pdfViewer"></adf-pdf-thumbnails>
</ng-container>
</div>
</div>
</ng-container>

20
lib/core/viewer/components/pdfViewer.component.scss
View File

@@ -22,7 +22,25 @@
}
&__thumbnails {
position: relative; height: 100%; width: 140px; background-color: rgba(0, 0, 0, 0.12);
position: relative;
height: 100%;
width: 190px;
background-color: rgba(0, 0, 0, 0.12);
}
.thumbnails-template {
&__container {
display: flex;
flex-direction: column;
height: 100%;
}
&__buttons {
height: 45px;
justify-content: flex-end;
align-items: flex-end;
display: flex;
}
}
&__container {

34
lib/core/viewer/components/pdfViewer.component.spec.ts
View File

@@ -388,4 +388,38 @@ describe('Test PdfViewer component', () => {
});
});
});
describe('Thumbnails', () => {
beforeEach(() => {
component.urlFile = require('../assets/fake-test-file.pdf');
component.showThumbnails = false;
fixture.detectChanges();
});
it('should have own context', (done) => {
component.ngOnChanges(null).then(() => {
fixture.detectChanges();
return fixture.whenStable().then(() => {
expect(component.pdfThumbnailsContext.viewer).not.toBeNull();
done();
});
});
});
it('should open thumbnails panel', (done) => {
expect(element.querySelector('.adf-pdf-viewer__thumbnails')).toBeNull();
component.ngOnChanges(null).then(() => {
fixture.detectChanges();
return fixture.whenStable().then(() => {
component.toggleThumbnails();
fixture.detectChanges();
expect(element.querySelector('.adf-pdf-viewer__thumbnails')).not.toBeNull();
done();
});
});
});
});
});

2
lib/core/viewer/components/pdfViewer.component.ts
View File

@@ -67,7 +67,7 @@ export class PdfViewerComponent implements OnChanges, OnDestroy {
MIN_SCALE: number = 0.25;
MAX_SCALE: number = 10.0;
showThumbnails = false;
showThumbnails: boolean = false;
pdfThumbnailsContext: { viewer: any } = { viewer: null };
get currentScaleText(): string {