fix center loading and add name

This commit is contained in:
Eugenio Romano 2016-06-20 11:25:15 +01:00
parent 14449da0ba
commit f4f59b4f4a
5 changed files with 39 additions and 18 deletions

View File

@ -2,9 +2,29 @@
background: #3E3E3E;
}
.viewer-loader-text {
.loader-container {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex-direction: row;
-moz-box-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
height:100%;
}
.loader-item {
margin: auto;
max-height:100px;
max-width:300px;
}
.loader-text{
white-space: nowrap;
text-align: center;
color: #000;
position: relative;
color : #fff;
}
:host .page {

View File

@ -1,11 +1,11 @@
<!-- Start Pdf Canvas -->
<div id="viewer-pdf-container" class="center-element viewer-pdf-container" (keypress)=eventHandler()>
<div id="viewer-viewerPdf" class="center-element" >
<div id="viewer-loader" class="center-element" >
<div>
<div id="loader-spin" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
</div>
<div id="viewer-loader-text" class="viewer-loader-text">Loading...</div>
<div id="loader-container" class="loader-container">
<div class="loader-item">
<div id="loader-spin" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
<div id="loader-text" class="loader-text">Loading <span>{{nameFile}}</span> ...</div>
</div >
</div>
</div>
</div>

View File

@ -31,6 +31,9 @@ export class PdfViewerComponent {
@Input()
urlFile: string;
@Input()
nameFile: string;
currentPdfDocument: any;
page: number;
displayPage: number;

View File

@ -19,7 +19,7 @@
}
.viewer-name-file {
width: 20%;
width: 50%;
height: 21px;
overflow: hidden !important;
text-overflow: ellipsis;

View File

@ -20,20 +20,18 @@
<!-- Start Navigation -->
<nav class="mdl-navigation">
<div id="viewer-toolbar-view-options">
<div class="button-container">
<button
class="mdl-color--black mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored" (click)="close()">
<i id="viewer-close-button" class="icon material-icons">close</i>
</button>
</div>
<button
class="mdl-color--black mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored" (click)="close()">
<i id="viewer-close-button" class="icon material-icons">close</i>
</button>
</div>
</nav>
<!-- End Navigation -->
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Thumbnail</span>
</div>
<!--<div class="mdl-layout__drawer">-->
<!--<span class="mdl-layout-title">Thumbnail</span>-->
<!--</div>-->
<main id="page-content" class="mdl-layout__content">
<div class="mdl-grid">
@ -50,7 +48,7 @@
<div id="viewer-content-container" class="viewer-content-container mdl-cell" >
<!-- Start View Switch-->
<div *ngIf="isPdf()">
<pdf-viewer [urlFile]="urlFile" ></pdf-viewer>
<pdf-viewer [urlFile]="urlFile" [nameFile]="displayName" ></pdf-viewer>
</div>
<div *ngIf="isImage()" ><img src="{{urlFile}}" id="viewer-image" class="center-element viewer-image"/></div>
<div *ngIf="!supportedExtension()">