Recheck request

lib/core/src/lib/viewer/components/viewer.component.html

@@ -10,6 +10,8 @@
         <ng-container *ngIf="showToolbar && !toolbar">
             <adf-toolbar id="adf-viewer-toolbar" class="adf-viewer-toolbar">
                 <adf-toolbar-title>
+                    <adf-toolbar-divider />
+
                     <ng-container *ngIf="allowLeftSidebar">
                         <button mat-icon-button
                                 [attr.aria-expanded]="showLeftSidebar"
@@ -21,7 +23,6 @@
                             <mat-icon>info_outline</mat-icon>
                         </button>
                     </ng-container>
-
                     <button *ngIf="allowGoBack && closeButtonPosition === CloseButtonPosition.Left"
                             class="adf-viewer-close-button"
                             data-automation-id="adf-toolbar-left-back"
@@ -31,9 +32,6 @@
                             (click)="onClose()">
                         <mat-icon>close</mat-icon>
                     </button>
-                </adf-toolbar-title>
-
-                <div class="adf-viewer__file-title">
                     <button *ngIf="allowNavigate && canNavigateBefore"
                             data-automation-id="adf-toolbar-pref-file"
                             mat-icon-button
@@ -42,15 +40,6 @@
                             (click)="onNavigateBeforeClick($event)">
                         <mat-icon>navigate_before</mat-icon>
                     </button>
-                    <img class="adf-viewer__mimeicon"
-                         [alt]="'ADF_VIEWER.ARIA.MIME_TYPE_ICON' | translate"
-                         [src]="mimeTypeIconUrl"
-                         data-automation-id="adf-file-thumbnail">
-                    <div class="adf-viewer__display-name"
-                         id="adf-viewer-display-name"
-                         [title]="fileName">
-                        <span>{{ displayName }}</span>
-                    </div>
                     <button *ngIf="allowNavigate && canNavigateNext"
                             data-automation-id="adf-toolbar-next-file"
                             mat-icon-button
@@ -59,7 +48,7 @@
                             (click)="onNavigateNextClick($event)">
                         <mat-icon>navigate_next</mat-icon>
                     </button>
-                </div>
+                </adf-toolbar-title>
 
                 <ng-content select="adf-viewer-toolbar-actions" />
 
@@ -78,8 +67,6 @@
                     </mat-menu>
                 </ng-container>
 
-                <adf-toolbar-divider />
-
                 <ng-content select="adf-viewer-toolbar-custom-actions" />
 
                 <button id="adf-viewer-fullscreen"
@@ -94,7 +81,6 @@
 
                 <ng-container *ngIf="allowRightSidebar && !hideInfoButton">
                     <adf-toolbar-divider />
-
                     <button mat-icon-button
                             [attr.aria-expanded]="showRightSidebar"
                             [attr.aria-label]="'ADF_VIEWER.ACTIONS.INFO' | translate"
@@ -104,7 +90,6 @@
                             (click)="toggleRightSidebar()">
                         <mat-icon>info_outline</mat-icon>
                     </button>
-
                 </ng-container>
 
                 <ng-container *ngIf="mnuMoreActions">
@@ -124,7 +109,6 @@
 
                 <ng-container *ngIf="allowGoBack && closeButtonPosition === CloseButtonPosition.Right">
                     <adf-toolbar-divider />
-
                     <button class="adf-viewer-close-button"
                             data-automation-id="adf-toolbar-right-back"
                             [attr.aria-label]="'ADF_VIEWER.ACTIONS.CLOSE' | translate"
@@ -135,11 +119,21 @@
                     </button>
                 </ng-container>
 
+                <div class="adf-viewer__file-title">
+                    <img class="adf-viewer__mimeicon"
+                         [alt]="'ADF_VIEWER.ARIA.MIME_TYPE_ICON' | translate"
+                         [src]="mimeTypeIconUrl"
+                         data-automation-id="adf-file-thumbnail">
+                    <div class="adf-viewer__display-name"
+                         id="adf-viewer-display-name"
+                         [title]="fileName">
+                        <span>{{ displayName }}</span>
+                    </div>
+                </div>
             </adf-toolbar>
         </ng-container>
 
         <div class="adf-viewer-sidebars">
-
             <ng-container *ngIf="allowRightSidebar && showRightSidebar">
                 <div class="adf-viewer__sidebar adf-viewer__sidebar__right"
                      id="adf-right-sidebar">
@@ -175,7 +169,6 @@
                                [viewerTemplateExtensions]="viewerExtensions ?? viewerTemplateExtensions"
                                [nodeId]="nodeId"
                                [customError]="customError" />
-
         </div>
     </div>
 </div>

lib/core/src/lib/viewer/components/viewer.component.scss

@@ -35,6 +35,10 @@
     &-toolbar {
         #{ms.$mat-toolbar} {
             background-color: var(--adf-theme-background-card-color-087);
+
+            adf-toolbar-divider:first-child {
+                display: none;
+            }
         }
     }
 

lib/core/src/lib/viewer/components/viewer.component.spec.ts

@@ -18,8 +18,9 @@
 import { Component, SimpleChanges } from '@angular/core';
 import { ComponentFixture, discardPeriodicTasks, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
 import { MatButtonModule } from '@angular/material/button';
-import { MatDialog } from '@angular/material/dialog';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
+import { By } from '@angular/platform-browser';
 import { of } from 'rxjs';
 import { AppConfigService } from '../../app-config';
 import { EventMock } from '../../mock';
@@ -695,4 +696,67 @@ describe('ViewerComponent', () => {
             expect(component.downloadFile.emit).toHaveBeenCalled();
         }));
     });
+
+    describe('ViewerComponent toolbar separators', () => {
+        let component: ViewerComponent<any>;
+        let fixture: ComponentFixture<ViewerComponent<any>>;
+
+        beforeEach(async () => {
+            await TestBed.configureTestingModule({
+                imports: [MatButtonModule, MatIconModule, MatDialogModule],
+                declarations: [ViewerComponent]
+            }).compileComponents();
+        });
+
+        beforeEach(() => {
+            fixture = TestBed.createComponent(ViewerComponent);
+            component = fixture.componentInstance;
+            component.showViewer = true;
+            fixture.detectChanges();
+        });
+
+        const createToolbarTest = (
+            allowRightSidebar: boolean,
+            hideInfoButton: boolean,
+            allowFullScreen: boolean,
+            allowGoBack: boolean,
+            expectedSeparatorCount: number
+        ) => {
+            it(`should have correct UI state when [R:${allowRightSidebar}, I:${hideInfoButton}, F:${allowFullScreen}, B:${allowGoBack}]`, () => {
+                component.allowRightSidebar = allowRightSidebar;
+                component.hideInfoButton = hideInfoButton;
+                component.allowFullScreen = allowFullScreen;
+                component.allowGoBack = allowGoBack;
+                fixture.detectChanges();
+
+                const separators = fixture.debugElement.queryAll(
+                    // .adf-toolbar-divider is the class used for separators
+                    // If your divider uses a different selector, update here
+                    By.css('adf-toolbar-divider')
+                );
+                expect(separators.length).toBe(expectedSeparatorCount);
+            });
+        };
+
+        describe('Toolbar state combinations', () => {
+            createToolbarTest(true, false, true, true, 2);
+            createToolbarTest(false, false, true, true, 1);
+            createToolbarTest(true, true, true, true, 1);
+            createToolbarTest(true, false, false, true, 1);
+            createToolbarTest(true, false, true, false, 2);
+            createToolbarTest(false, true, false, true, 0);
+            createToolbarTest(false, true, false, false, 0);
+        });
+
+        it('should not show unnecessary separator when close button is disabled but other controls exist', () => {
+            component.allowGoBack = false;
+            component.allowFullScreen = true;
+            component.allowRightSidebar = true;
+            component.hideInfoButton = false;
+            fixture.detectChanges();
+
+            const separators = fixture.debugElement.queryAll(By.css('adf-toolbar-divider'));
+            expect(separators.length).toBe(2);
+        });
+    });
 });