[ADF-5378] ADF Previewer: Image Rotate + Save (#6958)

* updates including cropperJS

* update on rotation + unit tests

* small fix

* hide toolbar on save

* remove unused & duplicate method

* added readonly & prettier code

* include readOnly mode to hide/show media management actions

* updated dependencies

* fix emit spy

* ADF-5378: Fix failing e2es

* Fix comments for unit tests

* ADF-5378: Removed obsolete buttons from e2e

Co-authored-by: kristian <kristian.dimitrov@alfresco.com>
Co-authored-by: adomi <ardit.domi@alfresco.com>
This commit is contained in:
Urse Daniel
2021-05-01 17:54:37 +03:00
committed by GitHub
parent 8b5e45f4eb
commit e8ffe8e35e
15 changed files with 358 additions and 374 deletions

View File

@@ -1,18 +1,9 @@
<div id="adf-image-container" (keydown)="onKeyDown($event)" class="adf-image-container" tabindex="0" role="img" [attr.aria-label]="nameFile" [style.transform]="transform" data-automation-id="adf-image-container">
<img id="viewer-image" [src]="urlFile" [alt]="nameFile" (error)="onImageError()" [ngStyle]="{ 'cursor' : isDragged ? 'move': 'default' } " />
<div id="adf-image-container" (keydown)="onKeyDown($event)" class="adf-image-container" tabindex="0" role="img" [attr.aria-label]="nameFile" data-automation-id="adf-image-container">
<img #image id="viewer-image" [src]="urlFile" [alt]="nameFile" (error)="onImageError()" />
</div>
<div class="adf-image-viewer__toolbar" *ngIf="showToolbar">
<adf-toolbar>
<button
id="viewer-zoom-in-button"
mat-icon-button
title="{{ 'ADF_VIEWER.ARIA.ZOOM_IN' | translate }}"
attr.aria-label="{{ 'ADF_VIEWER.ARIA.ZOOM_IN' | translate }}"
(click)="zoomIn()">
<mat-icon>zoom_in</mat-icon>
</button>
<adf-toolbar class="adf-main-toolbar">
<button
id="viewer-zoom-out-button"
title="{{ 'ADF_VIEWER.ARIA.ZOOM_OUT' | translate }}"
@@ -27,21 +18,21 @@
</div>
<button
id="viewer-rotate-left-button"
title="{{ 'ADF_VIEWER.ARIA.ROTATE_LEFT' | translate }}"
attr.aria-label="{{ 'ADF_VIEWER.ARIA.ROTATE_LEFT' | translate }}"
id="viewer-zoom-in-button"
mat-icon-button
(click)="rotateLeft()">
<mat-icon>rotate_left</mat-icon>
title="{{ 'ADF_VIEWER.ARIA.ZOOM_IN' | translate }}"
attr.aria-label="{{ 'ADF_VIEWER.ARIA.ZOOM_IN' | translate }}"
(click)="zoomIn()">
<mat-icon>zoom_in</mat-icon>
</button>
<button
id="viewer-rotate-right-button"
title="{{ 'ADF_VIEWER.ARIA.ROTATE_RIGHT' | translate }}"
attr.aria-label="{{ 'ADF_VIEWER.ARIA.ROTATE_RIGHT' | translate }}"
*ngIf="!readOnly" id="viewer-rotate-button"
title="{{ 'ADF_VIEWER.ARIA.ROTATE' | translate }}"
attr.aria-label="{{ 'ADF_VIEWER.ARIA.ROTATE' | translate }}"
mat-icon-button
(click)="rotateRight()">
<mat-icon>rotate_right</mat-icon>
(click)="rotateImage()">
<mat-icon>rotate_left</mat-icon>
</button>
<button
@@ -52,5 +43,27 @@
(click)="reset()">
<mat-icon>zoom_out_map</mat-icon>
</button>
</adf-toolbar>
<adf-toolbar class="adf-secondary-toolbar" *ngIf="!readOnly && isEditing">
<button
id="viewer-cancel-button"
title="{{ 'ADF_VIEWER.ARIA.CANCEL' | translate }}"
attr.aria-label="{{ 'ADF_VIEWER.ARIA.CANCEL' | translate }}"
mat-icon-button
(click)="reset()">
<mat-icon>close</mat-icon>
</button>
<button
id="viewer-save-button"
title="{{ 'ADF_VIEWER.ARIA.SAVE' | translate }}"
attr.aria-label="{{ 'ADF_VIEWER.ARIA.SAVE' | translate }}"
mat-icon-button
(click)="save()">
<mat-icon>check</mat-icon>
</button>
</adf-toolbar>
</div>