mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[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:
@@ -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>
|
||||
|
Reference in New Issue
Block a user