[MNT-23433] setting close button position

Alfresco · Dec 12, 2023 · 4f2d8b5 · 4f2d8b5
1 parent b13b835
commit 4f2d8b5
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 39 deletions.
diff --git a/demo-shell/src/app.config.json b/demo-shell/src/app.config.json
@@ -1493,7 +1493,6 @@
     "downloadPromptDelay": 50,
     "downloadPromptReminderDelay": 30,
     "enableFileAutoDownload": true,
-    "fileAutoDownloadSizeThresholdInMB": 15,
-    "isCloseButtonOnLeft": false
+    "fileAutoDownloadSizeThresholdInMB": 15
   }
 }
diff --git a/docs/content-services/components/alfresco-viewer.component.md b/docs/content-services/components/alfresco-viewer.component.md
@@ -67,8 +67,8 @@ 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 on left or right position. |
-| showCloseButton | `boolean` | true | Show/hide close button. |
+| allowGoBack | `boolean` | true | Allows `back` navigation. |
+| closeButtonPosition | `string` | `right` | Set close button position right/left. |
 | 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. |

diff --git a/docs/core/components/viewer.component.md b/docs/core/components/viewer.component.md
@@ -61,8 +61,8 @@ 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 on left or right position. |
-| showCloseButton | `boolean` | true | Show/hide close button. |
+| allowGoBack | `boolean` | true | Allows `back` navigation. |
+| closeButtonPosition | `string` | `right` | Set close button position right/left. |
 | 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. |

diff --git a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.html b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.html
@@ -16,7 +16,7 @@
     [sidebarLeftTemplate]="sidebarLeftTemplate"
     [sidebarRightTemplateContext]="sidebarRightTemplateContext"
     [sidebarLeftTemplateContext]="sidebarLeftTemplateContext"
-    [showCloseButton]="showCloseButton"
+    [closeButtonPosition]="closeButtonPosition"
     [fileName]="fileName"
     [mimeType]="mimeType"
     [originalMimeType]="originalMimeType"

diff --git a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts
@@ -31,7 +31,6 @@ import {
 } from '@angular/core';
 import {
     AlfrescoApiService,
-    AppConfigService,
     LogService,
     Track,
     ViewerComponent,
@@ -161,6 +160,10 @@ export class AlfrescoViewerComponent implements OnChanges, OnInit, OnDestroy {
     @Input()
     allowFullScreen = true;
 
+    /** Change the close button position Right/Left */
+    @Input()
+    closeButtonPosition = 'right';
+
     /** The template for the right sidebar. The template context contains the loaded node data. */
     @Input()
     sidebarRightTemplate: TemplateRef<any> = null;
@@ -197,7 +200,6 @@ export class AlfrescoViewerComponent implements OnChanges, OnInit, OnDestroy {
     nodeEntry: NodeEntry;
     tracks: Track[] = [];
     readOnly: boolean = true;
-    showCloseButton: boolean = true;
 
     sidebarRightTemplateContext: { node: Node } = { node: null };
     sidebarLeftTemplateContext: { node: Node } = { node: null };
@@ -236,11 +238,9 @@ export class AlfrescoViewerComponent implements OnChanges, OnInit, OnDestroy {
         private uploadService: UploadService,
         public dialog: MatDialog,
         private cdr: ChangeDetectorRef,
-        private nodeActionsService: NodeActionsService,
-        private appConfig: AppConfigService
+        private nodeActionsService: NodeActionsService
     ) {
         renditionService.maxRetries = this.maxRetries;
-        this.allowGoBack = this.appConfig.get('viewer.isCloseButtonOnLeft', false);
     }
 
     ngOnInit() {
@@ -270,7 +270,7 @@ export class AlfrescoViewerComponent implements OnChanges, OnInit, OnDestroy {
     }
 
     private async setupSharedLink() {
-        this.showCloseButton = false;
+        this.allowGoBack = false;
 
         try {
             const sharedLinkEntry = await this.sharedLinksApi.getSharedLink(this.sharedLinkId);

diff --git a/lib/core/src/lib/viewer/components/viewer.component.html b/lib/core/src/lib/viewer/components/viewer.component.html
@@ -8,7 +8,7 @@
          cdkTrapFocusAutoCapture>
         <ng-content select="adf-viewer-toolbar"></ng-content>
         <ng-container *ngIf="showToolbar && !toolbar">
-            <adf-toolbar id="adf-viewer-toolbar" class="adf-viewer-toolbar">
+            <adf-toolbar id="adf-viewer-toolbar" class="adf-viewer-toolbar" >
                 <adf-toolbar-title>
 
                     <ng-container *ngIf="allowLeftSidebar">
@@ -23,8 +23,8 @@
                         </button>
                     </ng-container>
 
-                    <button *ngIf="showCloseButton && allowGoBack"
-                            class="adf-viewer-close-button"
+                    <button *ngIf="allowGoBack && closeButtonPosition === 'left'"
+                            class="adf-viewer-close-button adf-left-close-button"
                             data-automation-id="adf-toolbar-back"
                             [attr.aria-label]="'ADF_VIEWER.ACTIONS.CLOSE' | translate"
                             mat-icon-button
@@ -120,16 +120,15 @@
                     </mat-menu>
                 </ng-container>
 
-                <ng-container *ngIf="showCloseButton && !allowGoBack">
+                <ng-container *ngIf="allowGoBack && closeButtonPosition === 'right'">
                     <adf-toolbar-divider></adf-toolbar-divider>
 
-                    <button 
-                    class="adf-viewer-close-button"
-                    data-automation-id="adf-toolbar-back"
-                    [attr.aria-label]="'ADF_VIEWER.ACTIONS.CLOSE' | translate"
-                    mat-icon-button
-                    title="{{ 'ADF_VIEWER.ACTIONS.CLOSE' | translate }}"
-                    (click)="onClose()">
+                    <button class="adf-viewer-close-button adf-right-close-button"
+                            data-automation-id="adf-toolbar-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>

diff --git a/lib/core/src/lib/viewer/components/viewer.component.spec.ts b/lib/core/src/lib/viewer/components/viewer.component.spec.ts
@@ -527,29 +527,28 @@ describe('ViewerComponent', () => {
 
         describe('Close Button', () => {
 
-            it('should show close button on left side when showCloseButton is true and allowGoBack is true', () => {
-                component.showCloseButton = true;
+            it('should show close button on left side when closeButtonPosition is left and allowGoBack is true', () => {
                 component.allowGoBack = true;
+                component.closeButtonPosition = 'left';
                 fixture.detectChanges();
 
-                expect(element.querySelector('.adf-viewer-close-button')).not.toBeNull();
-
+                expect(element.querySelector('.adf-left-close-button')).not.toBeNull();
             });
 
-            it('should show close button on right side when showCloseButton is true and allowGoBack is false', () => {
-                component.showCloseButton = true;
-                component.allowGoBack = false;
+            it('should show close button on right side when closeButtonPosition is right and allowGoBack is true', () => {
+                component.allowGoBack = true;
+                component.closeButtonPosition = 'right';
                 fixture.detectChanges();
 
-                expect(element.querySelector('.adf-viewer-close-button')).not.toBeNull();
-
+                expect(element.querySelector('.adf-right-close-button')).not.toBeNull();
             });
 
-            it('should hide close button when showCloseButton is false', () => {
-                component.showCloseButton = false;
+            it('should hide close button allowGoBack is false', () => {
+                component.allowGoBack = false;
                 fixture.detectChanges();
 
-                expect(element.querySelector('.adf-viewer-close-button')).toBeNull();
+                expect(element.querySelector('.adf-right-close-button')).toBeNull();
+                expect(element.querySelector('.adf-left-close-button')).toBeNull();
             });
         });
 

diff --git a/lib/core/src/lib/viewer/components/viewer.component.ts b/lib/core/src/lib/viewer/components/viewer.component.ts
@@ -176,11 +176,11 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
     @Input()
     sidebarLeftTemplateContext: T = null;
 
-    /**
-     * show/hide close button on shareable link.
+     /**
+     * Change the close button position Right/Left.
      */
     @Input()
-    showCloseButton = true;
+    closeButtonPosition = 'right';
 
     /**
      * Enable dialog box to allow user to download the previewed file, in case the preview is not responding for a set period of time.