Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 15 commits into from
Jan 2, 2024
Merged

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

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
2d89b98
[MNT-23433] configure position for close button
AnukritiGL Dec 7, 2023
ead6b43
[MNT-23433] added documentation
AnukritiGL Dec 7, 2023
81b37e4
[MNT-23433] unit test title fix
AnukritiGL Dec 7, 2023
4268827
[MNT-23433] setting close button position
AnukritiGL Dec 12, 2023
a3fa887
[MNT-23433] removed extra space
AnukritiGL Dec 12, 2023
b0c5122
[MNT-23433] lint issue resolved
AnukritiGL Dec 12, 2023
8e6e01d
[MNT-23433] setting default position to left
AnukritiGL Dec 14, 2023
6370e11
[MNT-23433] updated the type
AnukritiGL Dec 15, 2023
fd60fc9
[MNT-23433] add check for info button
AnukritiGL Dec 27, 2023
ab72cd7
[MNT-23433] indentation fix
AnukritiGL Dec 27, 2023
c24834b
[MNT-23433] documentation added
AnukritiGL Dec 28, 2023
7aa061b
[MNT-23433] unit test updated
AnukritiGL Dec 28, 2023
3daf9bc
[MNT-23433] linting issue resolved
AnukritiGL Dec 28, 2023
1b78238
[MNT-23433] update unit test
AnukritiGL Jan 2, 2024
fdbadb6
[MNT-23433] lint issue resolved
AnukritiGL Jan 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion docs/content-services/components/alfresco-viewer.component.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,9 @@ See the [Custom layout](#custom-layout) section for full details of all availabl
| ---- | ---- | ------------- | ----------- |
| allowDownload | `boolean` | true | Toggles downloading. |
| allowFullScreen | `boolean` | true | Toggles the 'Full Screen' feature. |
| allowGoBack | `boolean` | true | Allows `back` navigation |
| allowGoBack | `boolean` | true | Allows `back` navigation. |
| closeButtonPosition | `CloseButtonPosition` | `left` | Set close button position right/left. |
| hideInfoButton | `boolean` | `false` | Toggles Info button. |
| allowLeftSidebar | `boolean` | false | Allow the left the sidebar. |
| allowNavigate | `boolean` | false | Toggles before/next navigation. You can use the arrow buttons to navigate between documents in the collection. |
| allowPrint | `boolean` | false | Toggles printing. |
Expand Down
4 changes: 3 additions & 1 deletion docs/core/components/viewer.component.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,9 @@ See the [Custom layout](#custom-layout) section for full details of all availabl
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| allowFullScreen | `boolean` | true | Toggles the 'Full Screen' feature. |
| allowGoBack | `boolean` | true | Allows `back` navigation |
| allowGoBack | `boolean` | true | Allows `back` navigation. |
| closeButtonPosition | `CloseButtonPosition` | `left` | Set close button position right/left. |
| hideInfoButton | `boolean` | `false` | Toggles Info button. |
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
| hideInfoButton | `boolean` | `false` | Toggles Info button. |
| hideInfoButton | `boolean` | false | Toggles Info button. |

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

| allowLeftSidebar | `boolean` | false | Allow the left the sidebar. |
| allowNavigate | `boolean` | false | Toggles before/next navigation. You can use the arrow buttons to navigate between documents in the collection. |
| allowRightSidebar | `boolean` | false | Allow the right sidebar. |
Expand Down
2 changes: 2 additions & 0 deletions lib/content-services/src/lib/viewer/components/alfresco-viewer.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@
[sidebarLeftTemplate]="sidebarLeftTemplate"
[sidebarRightTemplateContext]="sidebarRightTemplateContext"
[sidebarLeftTemplateContext]="sidebarLeftTemplateContext"
[closeButtonPosition]="closeButtonPosition"
[hideInfoButton]="hideInfoButton"
[fileName]="fileName"
[mimeType]="mimeType"
[originalMimeType]="originalMimeType"
Expand Down
9 changes: 5 additions & 4 deletions lib/content-services/src/lib/viewer/components/alfresco-viewer.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -691,11 +691,12 @@ 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"]')).toBeDefined();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One of those statements is obsolete, first you check if the element is defined and then if it's not a null

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed obsolete statements

expect(element.querySelector('[data-automation-id="adf-toolbar-left-back"]')).not.toBeNull();
done();
});
});
Expand All @@ -709,7 +710,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();
});
});
Expand Down
9 changes: 9 additions & 0 deletions lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import {
} from '@angular/core';
import {
AlfrescoApiService,
CloseButtonPosition,
LogService,
Track,
ViewerComponent,
Expand Down Expand Up @@ -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;
Expand Down
19 changes: 16 additions & 3 deletions lib/core/src/lib/viewer/components/viewer.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@
</button>
</ng-container>

<button *ngIf="allowGoBack"
<button *ngIf="allowGoBack && closeButtonPosition === 'left'"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be CloseButtonPosition.Left instead of left

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

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 }}"
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -120,6 +120,19 @@
</mat-menu>
</ng-container>

<ng-container *ngIf="allowGoBack && closeButtonPosition === 'right'">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here for right

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

<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>

Expand Down
60 changes: 57 additions & 3 deletions lib/core/src/lib/viewer/components/viewer.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -351,11 +352,12 @@ 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"]')).toBeDefined();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here for obsolete check

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed obsolete statements

expect(element.querySelector('[data-automation-id="adf-toolbar-left-back"]')).not.toBeNull();
done();
});
});
Expand Down Expand Up @@ -422,6 +424,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', () => {
Expand Down Expand Up @@ -525,6 +547,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', () => {
AleksanderSklorz marked this conversation as resolved.
Show resolved Hide resolved
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', () => {
AleksanderSklorz marked this conversation as resolved.
Show resolved Hide resolved
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(() => {
Expand Down
12 changes: 11 additions & 1 deletion lib/core/src/lib/viewer/components/viewer.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -176,6 +176,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.
*/
Expand Down
5 changes: 5 additions & 0 deletions lib/core/src/lib/viewer/models/viewer.model.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,11 @@
* limitations under the License.
*/

export enum CloseButtonPosition {
Right = 'right',
Left = 'left'
}

export interface Track {
src: string;
label?: string;
Expand Down
2 changes: 1 addition & 1 deletion lib/testing/src/lib/protractor/core/pages/viewer.page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
Loading