mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-31 17:38:48 +00:00
[ADF-1623] routing integration for Viewer (#2404)
* routed viewer (demo app) * toolbar support * app menu component for demo shell * navigate back button * fix unit tests * improve viewer type detection and rendering * download button * automatic pdf rendition, spinners, ui tweaks * border for pdf pages * scroll top support * docs update * info drawer placeholder
This commit is contained in:
Denys Vuika
committed by
Maurizio Vitale
Maurizio Vitale
parent
55a999b492
commit
93a87af4a5
@@ -4,80 +4,151 @@
|
||||
[class.adf-viewer-inline-container]="!overlayMode">
|
||||
|
||||
<div class="adf-viewer-content">
|
||||
<ng-container *ngIf="overlayMode">
|
||||
<ng-container *ngIf="showToolbar">
|
||||
<adf-toolbar color="default" class="adf-viewer-toolbar">
|
||||
|
||||
<adf-toolbar-title>
|
||||
<span class="adf-viewer-filename">{{ displayName }}</span>
|
||||
<button *ngIf="allowGoBack"
|
||||
class="adf-viewer-close-button"
|
||||
md-icon-button
|
||||
mdTooltip="Back"
|
||||
(click)="onBackButtonClick()">
|
||||
<md-icon>arrow_back</md-icon>
|
||||
</button>
|
||||
<img [src]="mimeType | adfMimeTypeIcon">
|
||||
<span>{{ displayName }}</span>
|
||||
</adf-toolbar-title>
|
||||
<button
|
||||
md-icon-button
|
||||
class="adf-viewer-close-button"
|
||||
mdTooltip="Close and go back"
|
||||
mdTooltipPosition="before"
|
||||
(click)="close()"
|
||||
aria-label="Close">
|
||||
<md-icon>close</md-icon>
|
||||
|
||||
<ng-container *ngIf="allowOpenWith">
|
||||
<button md-button [mdMenuTriggerFor]="mnuOpenWith">
|
||||
<span>Open with</span>
|
||||
<md-icon>arrow_drop_down</md-icon>
|
||||
</button>
|
||||
<md-menu #mnuOpenWith="mdMenu" [overlapTrigger]="false">
|
||||
<button md-menu-item>
|
||||
<md-icon>dialpad</md-icon>
|
||||
<span>Option 1</span>
|
||||
</button>
|
||||
<button md-menu-item disabled>
|
||||
<md-icon>voicemail</md-icon>
|
||||
<span>Option 2</span>
|
||||
</button>
|
||||
<button md-menu-item>
|
||||
<md-icon>notifications_off</md-icon>
|
||||
<span>Option 3</span>
|
||||
</button>
|
||||
</md-menu>
|
||||
</ng-container>
|
||||
|
||||
<adf-toolbar-divider></adf-toolbar-divider>
|
||||
|
||||
<button *ngIf="allowDownload" md-icon-button mdTooltip="Download" (click)="download()">
|
||||
<md-icon>file_download</md-icon>
|
||||
</button>
|
||||
|
||||
<button *ngIf="allowPrint" md-icon-button mdTooltip="Print">
|
||||
<md-icon>print</md-icon>
|
||||
</button>
|
||||
|
||||
<button *ngIf="allowShare" md-icon-button mdTooltip="Share">
|
||||
<md-icon>share</md-icon>
|
||||
</button>
|
||||
|
||||
<button md-icon-button [mdMenuTriggerFor]="mnuMoreActions" mdTooltip="More actions">
|
||||
<md-icon>more_vert</md-icon>
|
||||
</button>
|
||||
<md-menu #mnuMoreActions="mdMenu">
|
||||
<button md-menu-item>
|
||||
<md-icon>dialpad</md-icon>
|
||||
<span>Action One</span>
|
||||
</button>
|
||||
<button md-menu-item disabled>
|
||||
<md-icon>voicemail</md-icon>
|
||||
<span>Action Two</span>
|
||||
</button>
|
||||
<button md-menu-item>
|
||||
<md-icon>notifications_off</md-icon>
|
||||
<span>Action Three</span>
|
||||
</button>
|
||||
</md-menu>
|
||||
|
||||
<ng-container *ngIf="allowInfoDrawer">
|
||||
<adf-toolbar-divider></adf-toolbar-divider>
|
||||
|
||||
<button md-icon-button mdTooltip="Info"
|
||||
[color]="showInfoDrawer ? 'accent' : 'default'"
|
||||
(click)="showInfoDrawer = !showInfoDrawer">
|
||||
<md-icon>info_outline</md-icon>
|
||||
</button>
|
||||
</ng-container>
|
||||
|
||||
</adf-toolbar>
|
||||
</ng-container>
|
||||
|
||||
<div class="adf-viewer-layout">
|
||||
<ng-container *ngIf="isLoading">
|
||||
<div class="adf-viewer__loading-screen">
|
||||
<h2>Loading</h2>
|
||||
<div>
|
||||
<md-spinner></md-spinner>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<div *ngIf="!isLoading" class="adf-viewer-layout">
|
||||
<div class="adf-viewer-layout-content">
|
||||
<div *ngIf="isLoaded()">
|
||||
<div class="adf-viewer-content-container">
|
||||
<div>
|
||||
<div class="adf-viewer-content-container" [ngSwitch]="viewerType">
|
||||
|
||||
<ng-container *ngIf="isPdf()">
|
||||
<adf-pdf-viewer
|
||||
[showToolbar]="showToolbar"
|
||||
[blobFile]="blobFile"
|
||||
[urlFile]="urlFileContent"
|
||||
[nameFile]="displayName">
|
||||
</adf-pdf-viewer>
|
||||
<ng-container *ngSwitchCase="'pdf'">
|
||||
<adf-pdf-viewer [blobFile]="blobFile" [urlFile]="urlFileContent" [nameFile]="displayName"></adf-pdf-viewer>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="isImage()">
|
||||
<adf-img-viewer
|
||||
[urlFile]="urlFileContent"
|
||||
[nameFile]="displayName"
|
||||
[blobFile]="blobFile">
|
||||
</adf-img-viewer>
|
||||
<ng-container *ngSwitchCase="'image'">
|
||||
<adf-img-viewer [urlFile]="urlFileContent" [nameFile]="displayName" [blobFile]="blobFile"></adf-img-viewer>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="isMedia()">
|
||||
<adf-media-player
|
||||
[urlFile]="urlFileContent"
|
||||
[mimeType]="mimeType"
|
||||
[blobFile]="blobFile"
|
||||
[nameFile]="displayName">
|
||||
</adf-media-player>
|
||||
<ng-container *ngSwitchCase="'media'">
|
||||
<adf-media-player [urlFile]="urlFileContent" [mimeType]="mimeType" [blobFile]="blobFile" [nameFile]="displayName"></adf-media-player>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="isText() && !isExternalSupportedExtension()">
|
||||
<ng-container *ngSwitchCase="'text'">
|
||||
<adf-txt-viewer [urlFile]="urlFileContent" [blobFile]="blobFile"></adf-txt-viewer>
|
||||
</ng-container>
|
||||
|
||||
<span *ngFor="let extensionTemplate of extensionTemplates">
|
||||
<ng-template
|
||||
*ngIf="extensionTemplate.isVisible"
|
||||
[ngTemplateOutlet]="extensionTemplate.template"
|
||||
[ngOutletContext]="{ urlFileContent: urlFileContent, extension:extension }">
|
||||
</ng-template>
|
||||
</span>
|
||||
<ng-container *ngSwitchCase="'custom'">
|
||||
<span *ngFor="let extensionTemplate of extensionTemplates">
|
||||
<ng-template
|
||||
*ngIf="extensionTemplate.isVisible"
|
||||
[ngTemplateOutlet]="extensionTemplate.template"
|
||||
[ngOutletContext]="{ urlFileContent: urlFileContent, extension:extension }">
|
||||
</ng-template>
|
||||
</span>
|
||||
</ng-container>
|
||||
|
||||
<div *ngIf="!supportedExtension()" class="adf-viewer-unknown-content">
|
||||
<adf-not-supported-format
|
||||
*ngIf="!extensionTemplate"
|
||||
[urlFile]="urlFileContent"
|
||||
[blobFile]="blobFile"
|
||||
[nameFile]="displayName"
|
||||
[showToolbar]="showToolbar"
|
||||
[nodeId]="fileNodeId">
|
||||
</adf-not-supported-format>
|
||||
</div>
|
||||
<ng-container *ngSwitchDefault>
|
||||
<adf-viewer-unknown-format></adf-viewer-unknown-format>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<ng-container *ngIf="showInfoDrawer">
|
||||
<div class="adf-viewer__info-drawer">
|
||||
<md-tab-group md-stretch-tabs>
|
||||
<md-tab label="Details">
|
||||
<md-card>
|
||||
DETAILS
|
||||
</md-card>
|
||||
</md-tab>
|
||||
<md-tab label="Activity">
|
||||
<md-card>
|
||||
Activity
|
||||
</md-card>
|
||||
</md-tab>
|
||||
</md-tab-group>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user