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

#68 decouple viewer

Browse Source
This commit is contained in:
Eugenio Romano 2016-06-08 12:43:17 +01:00
parent b9c009efef
commit fd27fd0844
8 changed files with 122 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
ng2-components/ng2-alfresco-viewer/src/notSupportedFormat.component.css Normal file
View File

@ -0,0 +1,18 @@
.viewer-download-text {
text-align: center;
}
.viewer-margin-cloud-download{
margin-right: 20px;
}
.viewer-margin {
margin: auto !important;
}
.center-element {
display: flex;
align-items: center;
justify-content: center;
}

12
ng2-components/ng2-alfresco-viewer/src/notSupportedFormat.component.html Normal file
View File

@ -0,0 +1,12 @@
<section class="section--center mdl-grid mdl-grid--no-spacing">
<div class="viewer-margin mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone mdl-shadow--2dp">
<div class="viewer-download-text mdl-card__supporting-text">
<h4>File {{nameFile}} is an unsupported format</h4>
</div>
<div class="center-element mdl-card__actions">
<button id="viewer-download-button" class="viewer-margin center-element mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" (click)="download()">
<i class="viewer-margin-cloud-download material-icons">cloud_download</i> Download
</button>
</div>
</div>
</section>

36
ng2-components/ng2-alfresco-viewer/src/notSupportedFormat.component.spec.ts Normal file
View File

@ -0,0 +1,36 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { describe, expect, it, injectAsync, TestComponentBuilder } from 'angular2/testing';
import { NotSupportedFormat } from './notSupportedFormat.component';
describe('Not Supported Format View', () => {
describe('View', () => {
it('Download button should be present', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
return tcb
.createAsync(NotSupportedFormat)
.then((fixture) => {
let element = fixture.nativeElement;
fixture.detectChanges();
expect(element.querySelector('#viewer-download-button')).not.toBeNull();
});
}));
});
});

42
ng2-components/ng2-alfresco-viewer/src/notSupportedFormat.component.ts Normal file
View File

@ -0,0 +1,42 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Component, Input } from 'angular2/core';
declare let __moduleName: string;
@Component({
moduleId: __moduleName,
selector: 'not-supported-format',
templateUrl: './notSupportedFormat.component.html',
styleUrls: ['./notSupportedFormat.component.css']
})
export class NotSupportedFormat {
@Input()
nameFile: string;
@Input()
urlFile: string;
/**
* Download file
*/
private download(){
window.open(this.urlFile);
}
}

14
ng2-components/ng2-alfresco-viewer/src/viewer.component.css
View File

@ -61,16 +61,8 @@
display: flex;
align-items: center;
justify-content: center;
}
}
.viewer-margin {
margin: auto !important;
}
.viewer-download-text {
text-align: center;
}
.viewer-margin-cloud-download{
margin-right: 20px;
.viewer-content-container {
width: 100%;
}

19
ng2-components/ng2-alfresco-viewer/src/viewer.component.html
View File

@ -63,23 +63,14 @@
<div class="center-element mdl-cell mdl-cell--8-col" >
<div id="viewer-content-container" class="center-element mdl-cell" >
<div id="viewer-content-container" class="viewer-content-container mdl-cell" >
<!-- Start View Switch-->
<div *ngIf="isPdf()"><pdf-viewer [urlFile]="urlFile" ></pdf-viewer></div>
<div *ngIf="isPdf()">
<pdf-viewer [urlFile]="urlFile" ></pdf-viewer>
</div>
<div *ngIf="isImage()" ><img src="{{urlFile}}" id="viewer-image" class="center-element viewer-image"/></div>
<div *ngIf="notSupportedExtension()">
<section class="section--center mdl-grid mdl-grid--no-spacing">
<div class="viewer-margin mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone mdl-shadow--2dp">
<div class="viewer-download-text mdl-card__supporting-text">
<h4>File {{nameFile}} is an unsupported format</h4>
</div>
<div class="mdl-card__actions">
<button class="viewer-margin center-element mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" (click)="download()">
<i class="viewer-margin-cloud-download material-icons">cloud_download</i> Download
</button>
</div>
</div>
</section>
<not-supported-format [urlFile]="urlFile" [nameFile]="nameFile" ></not-supported-format>
</div>
<!-- End View Switch -->
</div>

2
ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts
View File

@ -193,7 +193,7 @@ describe('ViewerComponent', () => {
component.ngOnChanges().then(() => {
fixture.detectChanges();
expect(element.querySelector('#viewer-unsupported')).not.toBeNull();
expect(element.querySelector('not-supported-format')).not.toBeNull();
});
});
}));

10
ng2-components/ng2-alfresco-viewer/src/viewer.component.ts
View File

@ -18,13 +18,14 @@
import { Component, Input, Output, HostListener } from 'angular2/core';
import { EventEmitter } from 'angular2/src/facade/async';
import { PdfViewerComponent } from './pdfViewer.component';
import { NotSupportedFormat } from './notSupportedFormat.component';
declare let __moduleName: string;
@Component({
moduleId: __moduleName,
selector: 'alfresco-viewer',
directives: [PdfViewerComponent],
directives: [PdfViewerComponent, NotSupportedFormat],
templateUrl: './viewer.component.html',
styleUrls: ['./viewer.component.css']
})
@ -168,11 +169,4 @@ export class ViewerComponent {
}
}
}
/**
* Download file
*/
private download(){
window.open(this.urlFile);
}
}