-
Notifications
You must be signed in to change notification settings - Fork 6
/
document.component.html
100 lines (94 loc) · 4.27 KB
/
document.component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<div *ngIf="fileType === 'pdf'" class="pdf-container">
<!-- in case of an error -->
<app-status [status]="404" [url]="src.fileValue.fileUrl" [representation]="'document'" *ngIf="failedToLoad">
</app-status>
<pdf-viewer class="pdf-viewer" [src]="src.fileValue.fileUrl" [original-size]="false" [autoresize]="true"
[show-all]="true" [show-borders]="true" [zoom]="zoomFactor" [zoom-scale]="'page-width'">
</pdf-viewer>
<div class="toolbar">
<div class="action horizontal bottom">
<!-- caption -->
<span>
<button mat-icon-button [matMenuTriggerFor]="more">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #more="matMenu" class="mat-menu-custom-black">
<button class="menu-content" mat-menu-item (click)="downloadDocument(src.fileValue.fileUrl)">
Download file
</button>
<button class="menu-content" mat-menu-item (click)="openReplaceFileDialog()">
Replace file
</button>
</mat-menu>
</span>
<!-- input field for searching through document -->
<input matInput #queryInp type="text" id="searchbox" name="searchbox"
class="pdf-searchbox fill-remaining-space" placeholder="Search in pdf..." [value]="pdfQuery"
[disabled]="failedToLoad" (input)="searchQueryChanged($event.target.value)"
(keyup.enter)="searchQueryChanged(queryInp.value)" />
<!-- image action tools e.g. zoom, rotate and flip -->
<span>
<!-- zoom buttons -->
<button mat-icon-button id="DSP_PDF_ZOOM_OUT" matTooltip="Zoom out"
(click)="zoomFactor = zoomFactor - 0.2" [disabled]="failedToLoad">
<mat-icon>remove_circle_outline</mat-icon>
</button>
<button mat-icon-button id="DSP_PDF_HOME" matTooltip="Reset zoom" (click)="zoomFactor = 1.0"
[disabled]="failedToLoad">
<mat-icon>adjust</mat-icon>
</button>
<button mat-icon-button id="DSP_PDF_ZOOM_IN" matTooltip="Zoom in"
(click)="zoomFactor = zoomFactor + 0.2" [disabled]="failedToLoad">
<mat-icon>add_circle_outline</mat-icon>
</button>
</span>
<!-- empty placeholders to center the zoom buttons -->
<span class="fill-remaining-space"></span>
<span class="empty-space"></span>
<span class="empty-space"></span>
<span class="empty-space"></span>
<!-- full screen button -->
<span>
<button mat-icon-button id="DSP_PDF_FULL_SCREEN" matTooltip="Fullscreen" (click)="openFullscreen()"
[disabled]="failedToLoad">
<mat-icon>fullscreen</mat-icon>
</button>
</span>
</div>
</div>
</div>
<!-- default document viewer -->
<div *ngIf="fileType !== 'pdf'">
<div class="file-representation">
<div class="container">
<div class="contents">
<div class="icon">
<mat-icon>
text_snippet
</mat-icon>
</div>
<div class="file">
<p>{{originalFilename}}</p>
</div>
</div>
</div>
</div>
<div class="toolbar">
<!-- toolbar -->
<div class="action horizontal bottom">
<!-- three dot menu to download and replace file -->
<button mat-icon-button [matMenuTriggerFor]="more">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #more="matMenu" class="mat-menu-custom-black">
<button class="menu-content" mat-menu-item (click)="downloadDocument(src.fileValue.fileUrl)"
[disabled]="failedToLoad">
Download file
</button>
<button class="menu-content" mat-menu-item (click)="openReplaceFileDialog()">
Replace file
</button>
</mat-menu>
</div>
</div>
</div>