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

#68 split template and css in different files

Browse Source
This commit is contained in:
Eugenio Romano
2016-05-20 16:36:38 +01:00
parent 72c148d3f5
commit 08af799ece
6 changed files with 128 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,7 @@
.button-container {
padding: 0 40px;
}
.page-content {
background: #3E3E3E;
}

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

@@ -0,0 +1,84 @@
<div class="toolbar-container">
<!-- Start Layout -->
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--scroll">
<div class="mdl-layout__header-row">
<!-- File Title -->
<span class="mdl-layout-title">{{nameFile}}</span>
<div class="mdl-layout-spacer"></div>
<!-- Start Navigation -->
<nav class="mdl-navigation">
<div class="button-container">
<button
class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
<i id="tt2" class="icon material-icons">print</i>
</button>
</div>
<div class="button-container">
<button
class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
<i id="tt3" class="icon material-icons">cloud_upload</i>
</button>
</div>
<div class="button-container">
<button
class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
<i id="tt4" class="icon material-icons">share</i>
</button>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
mdl-textfield--floating-label mdl-textfield--align-right">
<label class="mdl-button mdl-js-button mdl-button--icon"
for="waterfall-exp">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" name="sample" id="waterfall-exp">
</div>
</div>
</nav>
<!-- End Navigation -->
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Thumbnail</span>
</div>
<main class="mdl-layout__content">
<div class="page-content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
<div class="mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
<!-- Start Pdf Canvas -->
<div id="canvas-container">
<canvas id="the-canvas" style="border:1px solid black;"></canvas>
</div>
<!-- End Pdf Canvas -->
</div>
</div>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer--left-section">
<ul class="mdl-mini-footer--link-list">
<li><a href="#">Footer link 1</a></li>
<li><a href="#">Footer link 2</a></li>
<li><a href="#">Footer link 3</a></li>
</ul>
</div>
</footer>
</div>
</main>
</div>
<!-- End Layout -->
</div>

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

@@ -15,48 +15,51 @@
* limitations under the License.
*/
import { Component } from 'angular2/core';
import { Component, Input } from 'angular2/core';
import { RouteParams } from 'angular2/router';
declare let PDFJS: any;
declare let __moduleName:string;
@Component({
moduleId: __moduleName,
selector: 'ng2-alfresco-viewer',
styles: [
`
:host h1 {
font-size:22px
}
`
],
template: `<H1>ng2-alfresco-viewer</H1>`
templateUrl: './ng2-alfresco-viewer.component.html',
styleUrls: ['./ng2-alfresco-viewer.component.css']
})
export class Ng2AlfrescoViewerComponent {
nameFile:String;
constructor() {
this.nameFile = 'localTestFile.pdf';
PDFJS.getDocument('../localTestFile.pdf').then(function getPdfHelloWorld(pdf) {
//
// Fetch the first page
//
pdf.getPage(1).then(function getPageHelloWorld(page) {
pdf.getPage(1).then(function (page) {
let scale = 1.5;
let viewport = page.getViewport(scale);
//
// Prepare canvas using PDF page dimensions
//
let canvas: any = document.getElementById('the-canvas');
let context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
let canvas:any = document.getElementById('the-canvas');
if (canvas) {
let context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
let renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
//
// Render PDF page into canvas context
//
let renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
}
});
});
console.log('../contructor');