From 4edd377cd3b38a9bf016253ce96187adf1b5fdb0 Mon Sep 17 00:00:00 2001
From: deepusingh1304 <deepu.singh@hyland.com>
Date: Wed, 18 Jun 2025 05:15:09 -0400
Subject: [PATCH] Draft

---
 .../viewer/components/viewer.component.html   | 36 +++++++++----------
 .../viewer/components/viewer.component.scss   |  4 +++
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/lib/core/src/lib/viewer/components/viewer.component.html b/lib/core/src/lib/viewer/components/viewer.component.html
index fab7fa60d9..1ff5cc3b60 100644
--- a/lib/core/src/lib/viewer/components/viewer.component.html
+++ b/lib/core/src/lib/viewer/components/viewer.component.html
@@ -9,6 +9,8 @@
         <ng-content select="adf-viewer-toolbar" />
         <ng-container *ngIf="showToolbar && !toolbar">
             <adf-toolbar id="adf-viewer-toolbar" class="adf-viewer-toolbar">
+                <adf-toolbar-divider />
+
                 <adf-toolbar-title>
                     <ng-container *ngIf="allowLeftSidebar">
                         <button mat-icon-button
@@ -31,9 +33,7 @@
                             (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 +42,7 @@
                             (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 +51,19 @@
                             (click)="onNavigateNextClick($event)">
                         <mat-icon>navigate_next</mat-icon>
                     </button>
-                </div>
+
+                    <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-title>
 
                 <ng-content select="adf-viewer-toolbar-actions" />
 
@@ -78,8 +82,6 @@
                     </mat-menu>
                 </ng-container>
 
-                <adf-toolbar-divider />
-
                 <ng-content select="adf-viewer-toolbar-custom-actions" />
 
                 <button id="adf-viewer-fullscreen"
@@ -94,7 +96,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 +105,6 @@
                             (click)="toggleRightSidebar()">
                         <mat-icon>info_outline</mat-icon>
                     </button>
-
                 </ng-container>
 
                 <ng-container *ngIf="mnuMoreActions">
@@ -124,7 +124,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"
@@ -134,12 +133,10 @@
                         <mat-icon>close</mat-icon>
                     </button>
                 </ng-container>
-
             </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 +172,6 @@
                                [viewerTemplateExtensions]="viewerExtensions ?? viewerTemplateExtensions"
                                [nodeId]="nodeId"
                                [customError]="customError" />
-
         </div>
     </div>
 </div>
diff --git a/lib/core/src/lib/viewer/components/viewer.component.scss b/lib/core/src/lib/viewer/components/viewer.component.scss
index 47985adb33..0d31072ade 100644
--- a/lib/core/src/lib/viewer/components/viewer.component.scss
+++ b/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;
+            }
         }
     }