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

[MNT-23433] configure position for close button on Viewer (#9143)

Browse Source 
* [MNT-23433] configure position for close button

* [MNT-23433]  added documentation

* [MNT-23433] unit test title fix

* [MNT-23433] setting close button position

* [MNT-23433] removed extra space

* [MNT-23433] lint issue resolved

* [MNT-23433] setting default position to left

* [MNT-23433] updated the type

* [MNT-23433] add check for info button

* [MNT-23433] indentation fix

* [MNT-23433] documentation added

* [MNT-23433] unit test updated

* [MNT-23433] linting issue resolved

* [MNT-23433] update unit test

* [MNT-23433] lint issue resolved
This commit is contained in:
Anukriti Singh
2024-01-02 19:55:37 +05:30
committed by GitHub
parent 6549235dae
commit e65b5430a1
10 changed files with 114 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/content-services/src/lib/viewer/components/alfresco-viewer.component.html
View File

@@ -16,6 +16,8 @@
[sidebarLeftTemplate]="sidebarLeftTemplate"
[sidebarRightTemplateContext]="sidebarRightTemplateContext"
[sidebarLeftTemplateContext]="sidebarLeftTemplateContext"
[closeButtonPosition]="closeButtonPosition"
[hideInfoButton]="hideInfoButton"
[fileName]="fileName"
[mimeType]="mimeType"
[originalMimeType]="originalMimeType"

8
lib/content-services/src/lib/viewer/components/alfresco-viewer.component.spec.ts
View File

@@ -26,7 +26,7 @@ import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { ContentInfo, Node, NodeEntry, VersionEntry } from '@alfresco/js-api';
import { AlfrescoViewerComponent, NodeActionsService, RenditionService } from '@alfresco/adf-content-services';
import { CoreTestingModule, EventMock, ViewUtilService, ViewerComponent } from '@alfresco/adf-core';
import { CloseButtonPosition, CoreTestingModule, EventMock, ViewUtilService, ViewerComponent } from '@alfresco/adf-core';
import { NodesApiService } from '../../common/services/nodes-api.service';
import { UploadService } from '../../common/services/upload.service';
import { FileModel } from '../../common/models/file.model';
@@ -691,11 +691,11 @@ describe('AlfrescoViewerComponent', () => {
});
it('should render close viewer button if it is not a shared link', (done) => {
component.closeButtonPosition = CloseButtonPosition.Left;
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(element.querySelector('[data-automation-id="adf-toolbar-back"]')).toBeDefined();
expect(element.querySelector('[data-automation-id="adf-toolbar-back"]')).not.toBeNull();
expect(element.querySelector('[data-automation-id="adf-toolbar-left-back"]')).not.toBeNull();
done();
});
});
@@ -709,7 +709,7 @@ describe('AlfrescoViewerComponent', () => {
component.ngOnChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(element.querySelector('[data-automation-id="adf-toolbar-back"]')).toBeNull();
expect(element.querySelector('[data-automation-id="adf-toolbar-left-back"]')).toBeNull();
done();
});
});

9
lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts
View File

@@ -31,6 +31,7 @@ import {
} from '@angular/core';
import {
AlfrescoApiService,
CloseButtonPosition,
LogService,
Track,
ViewerComponent,
@@ -160,6 +161,14 @@ export class AlfrescoViewerComponent implements OnChanges, OnInit, OnDestroy {
@Input()
allowFullScreen = true;
/** Toggles the 'Info Button' */
@Input()
hideInfoButton = false;
/** Change the close button position Right/Left */
@Input()
closeButtonPosition = CloseButtonPosition.Left;
/** The template for the right sidebar. The template context contains the loaded node data. */
@Input()
sidebarRightTemplate: TemplateRef<any> = null;

19
lib/core/src/lib/viewer/components/viewer.component.html
View File

@@ -23,9 +23,9 @@
</button>
</ng-container>
<button *ngIf="allowGoBack"
<button *ngIf="allowGoBack && closeButtonPosition === CloseButtonPosition.Left"
class="adf-viewer-close-button"
data-automation-id="adf-toolbar-back"
data-automation-id="adf-toolbar-left-back"
[attr.aria-label]="'ADF_VIEWER.ACTIONS.CLOSE' | translate"
mat-icon-button
title="{{ 'ADF_VIEWER.ACTIONS.CLOSE' | translate }}"
@@ -90,7 +90,7 @@
<mat-icon>fullscreen</mat-icon>
</button>
<ng-container *ngIf="allowRightSidebar">
<ng-container *ngIf="allowRightSidebar && !hideInfoButton">
<adf-toolbar-divider></adf-toolbar-divider>
<button mat-icon-button
@@ -120,6 +120,19 @@
</mat-menu>
</ng-container>
<ng-container *ngIf="allowGoBack && closeButtonPosition === CloseButtonPosition.Right">
<adf-toolbar-divider></adf-toolbar-divider>
<button class="adf-viewer-close-button"
data-automation-id="adf-toolbar-right-back"
[attr.aria-label]="'ADF_VIEWER.ACTIONS.CLOSE' | translate"
mat-icon-button
title="{{ 'ADF_VIEWER.ACTIONS.CLOSE' | translate }}"
(click)="onClose()">
<mat-icon>close</mat-icon>
</button>
</ng-container>
</adf-toolbar>
</ng-container>

59
lib/core/src/lib/viewer/components/viewer.component.spec.ts
View File

@@ -29,7 +29,8 @@ import {
ViewUtilService,
AppConfigService,
DownloadPromptDialogComponent,
DownloadPromptActions
DownloadPromptActions,
CloseButtonPosition
} from '@alfresco/adf-core';
import { of } from 'rxjs';
import { ViewerWithCustomMoreActionsComponent } from './mock/adf-viewer-container-more-actions.component.mock';
@@ -351,11 +352,11 @@ describe('ViewerComponent', () => {
});
it('should render close viewer button if it is not a shared link', (done) => {
component.closeButtonPosition = CloseButtonPosition.Left;
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(element.querySelector('[data-automation-id="adf-toolbar-back"]')).toBeDefined();
expect(element.querySelector('[data-automation-id="adf-toolbar-back"]')).not.toBeNull();
expect(element.querySelector('[data-automation-id="adf-toolbar-left-back"]')).not.toBeNull();
done();
});
});
@@ -422,6 +423,26 @@ describe('ViewerComponent', () => {
});
});
describe('Info Button', () => {
const infoButton = () => element.querySelector<HTMLButtonElement>('[data-automation-id="adf-toolbar-sidebar"]');
it('should NOT display info button on the right side', () => {
component.allowRightSidebar = true;
component.hideInfoButton = true;
fixture.detectChanges();
expect(infoButton()).toBeNull();
});
it('should display info button on the right side', () => {
component.allowRightSidebar = true;
component.hideInfoButton = false;
fixture.detectChanges();
expect(infoButton()).not.toBeNull();
});
});
describe('View', () => {
describe('Overlay mode true', () => {
@@ -525,6 +546,38 @@ describe('ViewerComponent', () => {
});
});
describe('Close Button', () => {
const getRightCloseButton = () => element.querySelector<HTMLButtonElement>('[data-automation-id="adf-toolbar-right-back"]');
const getLeftCloseButton = () => element.querySelector<HTMLButtonElement>('[data-automation-id="adf-toolbar-left-back"]');
it('should show close button on left side when closeButtonPosition is left and allowGoBack is true', () => {
component.allowGoBack = true;
component.closeButtonPosition = CloseButtonPosition.Left;
fixture.detectChanges();
expect(getLeftCloseButton()).not.toBeNull();
expect(getRightCloseButton()).toBeNull();
});
it('should show close button on right side when closeButtonPosition is right and allowGoBack is true', () => {
component.allowGoBack = true;
component.closeButtonPosition = CloseButtonPosition.Right;
fixture.detectChanges();
expect(getRightCloseButton()).not.toBeNull();
expect(getLeftCloseButton()).toBeNull();
});
it('should hide close button allowGoBack is false', () => {
component.allowGoBack = false;
fixture.detectChanges();
expect(getRightCloseButton()).toBeNull();
expect(getLeftCloseButton()).toBeNull();
});
});
describe('Viewer component - Full Screen Mode - Mocking fixture element', () => {
beforeEach(() => {

16
lib/core/src/lib/viewer/components/viewer.component.ts
View File

@@ -37,7 +37,7 @@ import { ViewerOpenWithComponent } from './viewer-open-with.component';
import { ViewerMoreActionsComponent } from './viewer-more-actions.component';
import { ViewerSidebarComponent } from './viewer-sidebar.component';
import { filter, first, skipWhile, takeUntil } from 'rxjs/operators';
import { Track } from '../models/viewer.model';
import { CloseButtonPosition, Track } from '../models/viewer.model';
import { ViewUtilService } from '../services/view-util.service';
import { DownloadPromptDialogComponent } from './download-prompt-dialog/download-prompt-dialog.component';
import { AppConfigService } from '../../app-config';
@@ -71,6 +71,10 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
@ContentChild(ViewerMoreActionsComponent)
mnuMoreActions: ViewerMoreActionsComponent;
get CloseButtonPosition() {
return CloseButtonPosition;
}
/**
* If you want to load an external file that does not come from ACS you
* can use this URL to specify where to load the file from.
@@ -176,6 +180,16 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
@Input()
sidebarLeftTemplateContext: T = null;
/**
* Change the close button position Right/Left.
*/
@Input()
closeButtonPosition = CloseButtonPosition.Left;
/** Toggles the 'Info Button' */
@Input()
hideInfoButton = false;
/**
* Enable dialog box to allow user to download the previewed file, in case the preview is not responding for a set period of time.
*/

5
lib/core/src/lib/viewer/models/viewer.model.ts
View File

@@ -15,6 +15,11 @@
* limitations under the License.
*/
export enum CloseButtonPosition {
Right = 'right',
Left = 'left'
}
export interface Track {
src: string;
label?: string;

2
lib/testing/src/lib/protractor/core/pages/viewer.page.ts
View File

@@ -25,7 +25,7 @@ const MAX_LOADING_TIME = 120000;
export class ViewerPage {
tabsPage = new TabsPage();
closeButton = $('button[data-automation-id="adf-toolbar-back"]');
closeButton = $('button.adf-viewer-close-button');
fileName = $('#adf-viewer-display-name');
infoButton = $('button[data-automation-id="adf-toolbar-sidebar"]');
previousPageButton = $('#viewer-previous-page-button');