From 785e4085fcb4432d26997e51fa7287037cf3e75e Mon Sep 17 00:00:00 2001
From: Yury Bondarenko <ybnd@tuta.io>
Date: Wed, 28 Sep 2022 18:28:41 +0200
Subject: [PATCH] 94389: Fix icon alignment & dropdown styles

---
 src/app/shared/dso-page/dso-edit-menu.resolver.ts    |  2 --
 .../dso-edit-menu-expandable-section.component.html  |  9 ++++++---
 .../dso-edit-menu-expandable-section.component.scss  |  4 ++++
 .../dso-edit-menu-expandable-section.component.ts    | 12 +++++++++++-
 src/styles/_global-styles.scss                       |  3 ++-
 5 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/app/shared/dso-page/dso-edit-menu.resolver.ts b/src/app/shared/dso-page/dso-edit-menu.resolver.ts
index ceedda7b60..2bf1aa08b5 100644
--- a/src/app/shared/dso-page/dso-edit-menu.resolver.ts
+++ b/src/app/shared/dso-page/dso-edit-menu.resolver.ts
@@ -16,7 +16,6 @@ import { URLCombiner } from '../../core/url-combiner/url-combiner';
 import { DsoVersioningModalService } from './dso-versioning-modal-service/dso-versioning-modal.service';
 import { hasValue } from '../empty.util';
 import { MenuSection } from '../menu/menu.reducer';
-import { TextMenuItemModel } from '../menu/menu-item/models/text.model';
 
 /**
  * Creates the menus for the dspace object pages
@@ -95,7 +94,6 @@ export class DSOEditMenuResolver implements Resolve<{ [key: string]: MenuSection
             index: 1
           },
         ];
-
       })
     );
   }
diff --git a/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.html b/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.html
index d44238eb6e..a119cf0327 100644
--- a/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.html
+++ b/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.html
@@ -4,9 +4,12 @@
         <button class="btn btn-dark btn-sm" ngbDropdownToggle [disabled]="section.model?.disabled">
             <i class="fas fa-{{section.icon}} fa-fw"></i>
         </button>
-        <ul ngbDropdownMenu class="dso-edit-dropdown-menu">
-            <li class="nav-item" *ngFor="let subSection of (subSections$ | async)">
-                <i *ngIf="subSection.icon" class="fas fa-{{subSection.icon}} fa-fw mr-2"></i>
+        <ul ngbDropdownMenu class="dso-edit-menu-dropdown">
+            <li class="nav-item nav-link d-flex flex-row" *ngFor="let subSection of (subSections$ | async)">
+                <div *ngIf="renderIcons$ | async" class="mr-2">
+                    <i *ngIf="subSection.icon; else spacer" class="fas fa-{{subSection.icon}} fa-fw"></i>
+                    <ng-template #spacer><i class="fas fa-fw"></i></ng-template>
+                </div>
                 <ng-container
                         *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;">
                 </ng-container>
diff --git a/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.scss b/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.scss
index ad6166398c..b37f1be746 100644
--- a/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.scss
+++ b/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.scss
@@ -24,3 +24,7 @@ ul.dropdown-menu {
         color: var(--bs-btn-link-disabled-color);
     }
 }
+
+.dso-edit-menu-dropdown {
+  max-width: calc(min(600px, 75vw));
+}
diff --git a/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.ts b/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.ts
index e0ad28617b..ddcc5f80b9 100644
--- a/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.ts
+++ b/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.ts
@@ -5,6 +5,9 @@ import { MenuSectionComponent } from 'src/app/shared/menu/menu-section/menu-sect
 import { MenuService } from '../../../menu/menu.service';
 import { MenuSection } from '../../../menu/menu.reducer';
 import { Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { hasValue } from '../../../empty.util';
 
 /**
  * Represents an expandable section in the dso edit menus
@@ -21,6 +24,8 @@ export class DsoEditMenuExpandableSectionComponent extends MenuSectionComponent
   menuID: MenuID = MenuID.DSO_EDIT;
   itemModel;
 
+  renderIcons$: Observable<boolean>;
+
   constructor(
     @Inject('sectionDataProvider') menuSection: MenuSection,
     protected menuService: MenuService,
@@ -34,6 +39,11 @@ export class DsoEditMenuExpandableSectionComponent extends MenuSectionComponent
   ngOnInit(): void {
     this.menuService.activateSection(this.menuID, this.section.id);
     super.ngOnInit();
-  }
 
+    this.renderIcons$ = this.subSections$.pipe(
+      map((sections: MenuSection[]) => {
+        return sections.some(section => hasValue(section.icon));
+      }),
+    );
+  }
 }
diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss
index c71a9695f9..47b03f3f1c 100644
--- a/src/styles/_global-styles.scss
+++ b/src/styles/_global-styles.scss
@@ -93,7 +93,8 @@ ngb-modal-backdrop {
 
 }
 
-ul.dso-edit-dropdown-menu li.nav-item ng-deep a.nav-link {
+ul.dso-edit-menu-dropdown > li .nav-item.nav-link {
+  // ensure that links in DSO edit menu dropdowns are unstyled (li elements are styled instead to support icons)
   padding: 0;
   display: inline;
 }