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

[ADF-1418] Viewer enhancements (#2930)

Browse Source 
* move navigation buttons to the header

* restrict file name to 35 characters

* remove wrong condition in template
This commit is contained in:
Denys Vuika
2018-02-12 13:57:53 +00:00
committed by Eugenio Romano
parent 3d19341c0d
commit 6072a987c9
3 changed files with 32 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
lib/core/i18n/en.json
View File

@@ -188,7 +188,10 @@
"SHARE": "Share",
"MORE_ACTIONS": "More actions",
"INFO": "Info",
"FULLSCREEN": "Activate full-screen mode"
"FULLSCREEN": "Activate full-screen mode",
"CLOSE": "Close",
"NEXT_FILE": "Next File",
"PREV_FILE": "Previous File"
},
"ARIA": {
"PREVIOUS_PAGE": "Previous page",

40
lib/core/viewer/components/viewer.component.html
View File

@@ -13,13 +13,32 @@
class="adf-viewer-close-button"
data-automation-id="toolbar-back"
mat-icon-button
matTooltip="{{ 'ADF_VIEWER.ACTIONS.BACK' | translate }}"
matTooltip="{{ 'ADF_VIEWER.ACTIONS.CLOSE' | translate }}"
(click)="onBackButtonClick()">
<mat-icon>arrow_back</mat-icon>
<mat-icon>close</mat-icon>
</button>
</adf-toolbar-title>
<div fxFlex="1 1 auto">
<button
*ngIf="allowNavigate && canNavigateBefore"
data-automation-id="toolbar-pref-file"
mat-icon-button
matTooltip="{{ 'ADF_VIEWER.ACTIONS.PREV_FILE' | translate }}"
(click)="onNavigateBeforeClick()">
<mat-icon>navigate_before</mat-icon>
</button>
<img class="adf-viewer__mimeicon" [src]="mimeType | adfMimeTypeIcon">
<span class="adf-viewer__display-name" id="adf-viewer-display-name">{{ displayName }}</span>
</adf-toolbar-title>
<button
*ngIf="allowNavigate && canNavigateNext"
data-automation-id="toolbar-next-file"
mat-icon-button
matTooltip="{{ 'ADF_VIEWER.ACTIONS.NEXT_FILE' | translate }}"
(click)="onNavigateNextClick()">
<mat-icon>navigate_next</mat-icon>
</button>
</div>
<ng-container *ngIf="mnuOpenWith">
<button
@@ -121,14 +140,6 @@
</div>
</ng-container>
<ng-container *ngIf="allowNavigate && canNavigateBefore">
<div class="navigate-before">
<button mat-mini-fab color="primary" (click)="onNavigateBeforeClick()">
<mat-icon>navigate_before</mat-icon>
</button>
</div>
</ng-container>
<div class="adf-viewer-main" fxFlexOrder="{{sidebarPosition !== 'left'? 1 : 4}}" fxFlex="1 1 auto">
<div class="adf-viewer-layout-content adf-viewer__fullscreen-container">
<div class="adf-viewer-content-container" [ngSwitch]="viewerType">
@@ -162,13 +173,6 @@
</div>
</div>
<ng-container *ngIf="allowNavigate && canNavigateNext">
<div class="navigate-next" fxFlexOrder="{{sidebarPosition !== 'left' ? 3 : 4}}">
<button mat-mini-fab color="primary" (click)="onNavigateNextClick()">
<mat-icon>navigate_next</mat-icon>
</button>
</div>
</ng-container>
</div>
</div>
</div>

26
lib/core/viewer/components/viewer.component.scss
View File

@@ -11,30 +11,10 @@
.adf-viewer {
.navigate-before {
display: flex;
align-items: center;
justify-content: center;
order: 1;
padding-left: 2px;
padding-right: 4px;
background-color: mat-color($background, background);
}
&-main {
width: 0;
}
.navigate-next {
display: flex;
align-items: center;
justify-content: center;
order: 3;
padding-left: 4px;
padding-right: 2px;
background-color: mat-color($background, background);
}
&__mimeicon {
vertical-align: middle;
height: 18px;
@@ -55,6 +35,12 @@
font-weight: normal;
font-style: normal;
font-stretch: normal;
max-width: 35ch;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
vertical-align: middle;
}
&-container {