mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
4b76e6b4a9
* First try * Small layout changes * Add pipe support for CardViewTextItemModel * property service * Additional stuff * Make CardViewUpdateService smarter * Content metadata saving * Rebase fix * CardView Style fixes * Fix core and content-services tests * Fix CardView text item update UX
162 lines
7.1 KiB
HTML
162 lines
7.1 KiB
HTML
<div *ngIf="showViewer"
|
|
class="adf-viewer-container"
|
|
[class.adf-viewer-overlay-container]="overlayMode"
|
|
[class.adf-viewer-inline-container]="!overlayMode">
|
|
|
|
<div class="adf-viewer-content">
|
|
<ng-content select="adf-viewer-toolbar"></ng-content>
|
|
<ng-container *ngIf="showToolbar && !toolbar">
|
|
<adf-toolbar color="default" class="adf-viewer-toolbar">
|
|
|
|
<adf-toolbar-title>
|
|
<button *ngIf="allowGoBack"
|
|
class="adf-viewer-close-button"
|
|
data-automation-id="toolbar-back"
|
|
mat-icon-button
|
|
matTooltip="{{ 'ADF_VIEWER.ACTIONS.BACK' | translate }}"
|
|
(click)="onBackButtonClick()">
|
|
<mat-icon>arrow_back</mat-icon>
|
|
</button>
|
|
<img class="adf-viewer__mimeicon" [src]="mimeType | adfMimeTypeIcon">
|
|
<span id="adf-viewer-display-name">{{ displayName }}</span>
|
|
</adf-toolbar-title>
|
|
|
|
<ng-container *ngIf="mnuOpenWith">
|
|
<button
|
|
mat-button
|
|
[matMenuTriggerFor]="mnuOpenWith"
|
|
data-automation-id="toolbar-open-with">
|
|
<span>{{ 'ADF_VIEWER.ACTIONS.OPEN_WITH' | translate }}</span>
|
|
<mat-icon>arrow_drop_down</mat-icon>
|
|
</button>
|
|
<mat-menu #mnuOpenWith="matMenu" [overlapTrigger]="false">
|
|
<ng-content select="adf-viewer-open-with"></ng-content>
|
|
</mat-menu>
|
|
</ng-container>
|
|
|
|
<adf-toolbar-divider></adf-toolbar-divider>
|
|
|
|
<button
|
|
*ngIf="allowDownload"
|
|
mat-icon-button
|
|
matTooltip="{{ 'ADF_VIEWER.ACTIONS.DOWNLOAD' | translate }}"
|
|
data-automation-id="toolbar-download"
|
|
(click)="downloadContent()">
|
|
<mat-icon>file_download</mat-icon>
|
|
</button>
|
|
|
|
<button
|
|
*ngIf="allowPrint"
|
|
mat-icon-button
|
|
matTooltip="{{ 'ADF_VIEWER.ACTIONS.PRINT' | translate }}"
|
|
data-automation-id="toolbar-print"
|
|
(click)="printContent()">
|
|
<mat-icon>print</mat-icon>
|
|
</button>
|
|
|
|
<button
|
|
*ngIf="allowShare"
|
|
mat-icon-button
|
|
matTooltip="{{ 'ADF_VIEWER.ACTIONS.SHARE' | translate }}"
|
|
data-automation-id="toolbar-share"
|
|
(click)="shareContent()">
|
|
<mat-icon>share</mat-icon>
|
|
</button>
|
|
|
|
<ng-container *ngIf="mnuMoreActions">
|
|
<button
|
|
mat-icon-button
|
|
[matMenuTriggerFor]="mnuMoreActions"
|
|
matTooltip="{{ 'ADF_VIEWER.ACTIONS.MORE_ACTIONS' | translate }}"
|
|
data-automation-id="toolbar-more-actions">
|
|
<mat-icon>more_vert</mat-icon>
|
|
</button>
|
|
<mat-menu #mnuMoreActions="matMenu" [overlapTrigger]="false">
|
|
<ng-content select="adf-viewer-more-actions"></ng-content>
|
|
</mat-menu>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="allowSidebar">
|
|
<adf-toolbar-divider></adf-toolbar-divider>
|
|
|
|
<button
|
|
mat-icon-button
|
|
matTooltip="{{ 'ADF_VIEWER.ACTIONS.INFO' | translate }}"
|
|
data-automation-id="toolbar-sidebar"
|
|
[color]="showSidebar ? 'accent' : 'default'"
|
|
(click)="showSidebar = !showSidebar">
|
|
<mat-icon>info_outline</mat-icon>
|
|
</button>
|
|
</ng-container>
|
|
|
|
</adf-toolbar>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="isLoading">
|
|
<div class="adf-viewer__loading-screen">
|
|
<h2>{{ 'ADF_VIEWER.LOADING' | translate }}</h2>
|
|
<div>
|
|
<mat-spinner></mat-spinner>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<div *ngIf="!isLoading" class="adf-viewer-layout">
|
|
|
|
<ng-container *ngIf="showSidebar && sidebarPosition === 'left'">
|
|
<div class="adf-viewer__sidebar adf-viewer__sidebar-left">
|
|
<ng-content select="adf-viewer-sidebar"></ng-content>
|
|
<ng-container *ngIf="!sidebar">
|
|
<!-- todo: default info drawer -->
|
|
</ng-container>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<div class="adf-viewer-layout-content">
|
|
<div class="adf-viewer-content-container" [ngSwitch]="viewerType">
|
|
|
|
<ng-container *ngSwitchCase="'pdf'">
|
|
<adf-pdf-viewer [blobFile]="blobFile" [urlFile]="urlFileContent" [nameFile]="displayName"></adf-pdf-viewer>
|
|
</ng-container>
|
|
|
|
<ng-container *ngSwitchCase="'image'">
|
|
<adf-img-viewer [urlFile]="urlFileContent" [nameFile]="displayName" [blobFile]="blobFile"></adf-img-viewer>
|
|
</ng-container>
|
|
|
|
<ng-container *ngSwitchCase="'media'">
|
|
<adf-media-player [urlFile]="urlFileContent" [mimeType]="mimeType" [blobFile]="blobFile" [nameFile]="displayName"></adf-media-player>
|
|
</ng-container>
|
|
|
|
<ng-container *ngSwitchCase="'text'">
|
|
<adf-txt-viewer [urlFile]="urlFileContent" [blobFile]="blobFile"></adf-txt-viewer>
|
|
</ng-container>
|
|
|
|
<ng-container *ngSwitchCase="'custom'">
|
|
<span *ngFor="let extensionTemplate of extensionTemplates">
|
|
<ng-template
|
|
*ngIf="extensionTemplate.isVisible"
|
|
[ngTemplateOutlet]="extensionTemplate.template"
|
|
[ngTemplateOutletContext]="{ urlFileContent: urlFileContent, extension:extension }">
|
|
</ng-template>
|
|
</span>
|
|
</ng-container>
|
|
|
|
<ng-container *ngSwitchDefault>
|
|
<adf-viewer-unknown-format></adf-viewer-unknown-format>
|
|
</ng-container>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<ng-container *ngIf="showSidebar && sidebarPosition !== 'left'">
|
|
<div class="adf-viewer__sidebar adf-viewer__sidebar-right">
|
|
<ng-container *ngIf="sidebarTemplate">
|
|
<ng-container *ngTemplateOutlet="sidebarTemplate;context:sidebarTemplateContext"></ng-container>
|
|
</ng-container>
|
|
<ng-content *ngIf="!sidebarTemplate" select="adf-viewer-sidebar"></ng-content>
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
</div>
|