diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html index 259dbd1060..1f4666bbd0 100644 --- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html +++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html @@ -7,7 +7,7 @@ [attr.aria-labelledby]="'sidebarName-' + section.id" [attr.aria-expanded]="expanded | async" [title]="('menu.section.icon.' + section.id) | translate" - [class.disabled]="section.model.disabled" + [class.disabled]="section.model?.disabled" (click)="toggleSection($event)" (keyup.space)="toggleSection($event)" (keyup.enter)="toggleSection($event)" diff --git a/src/app/shared/dso-page/dso-edit-menu.resolver.spec.ts b/src/app/shared/dso-page/dso-edit-menu.resolver.spec.ts index cb0aaab6ec..035e398a63 100644 --- a/src/app/shared/dso-page/dso-edit-menu.resolver.spec.ts +++ b/src/app/shared/dso-page/dso-edit-menu.resolver.spec.ts @@ -16,6 +16,8 @@ import { Item } from '../../core/shared/item.model'; import { createFailedRemoteDataObject$, createSuccessfulRemoteDataObject$ } from '../remote-data.utils'; import { MenuID } from '../menu/menu-id.model'; import { MenuItemType } from '../menu/menu-item-type.model'; +import { TextMenuItemModel } from '../menu/menu-item/models/text.model'; +import { LinkMenuItemModel } from '../menu/menu-item/models/link.model'; describe('DSOEditMenuResolver', () => { @@ -165,7 +167,7 @@ describe('DSOEditMenuResolver', () => { expect(menuList[0].active).toEqual(false); expect(menuList[0].visible).toEqual(true); expect(menuList[0].model.type).toEqual(MenuItemType.ONCLICK); - expect(menuList[0].model.text).toEqual('message'); + expect((menuList[0].model as TextMenuItemModel).text).toEqual('message'); expect(menuList[0].model.disabled).toEqual(false); expect(menuList[0].icon).toEqual('code-branch'); done(); @@ -180,8 +182,8 @@ describe('DSOEditMenuResolver', () => { expect(menuList[0].active).toEqual(false); expect(menuList[0].visible).toEqual(true); expect(menuList[0].model.type).toEqual(MenuItemType.LINK); - expect(menuList[0].model.text).toEqual('item.page.edit'); - expect(menuList[0].model.link).toEqual('test-url/edit/metadata'); + expect((menuList[0].model as LinkMenuItemModel).text).toEqual('item.page.edit'); + expect((menuList[0].model as LinkMenuItemModel).link).toEqual('test-url/edit/metadata'); expect(menuList[0].icon).toEqual('pencil-alt'); done(); }); 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 7071ba2ad5..e33f62b3bc 100644 --- a/src/app/shared/dso-page/dso-edit-menu.resolver.ts +++ b/src/app/shared/dso-page/dso-edit-menu.resolver.ts @@ -1,5 +1,5 @@ import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router'; -import { combineLatest, Observable, of as observableOf } from 'rxjs'; +import { combineLatest, Observable, of, of as observableOf } from 'rxjs'; import { FeatureID } from '../../core/data/feature-authorization/feature-id'; import { MenuService } from '../menu/menu.service'; import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service'; @@ -17,6 +17,7 @@ import { hasValue } from '../empty.util'; import { MenuID } from '../menu/menu-id.model'; import { MenuItemType } from '../menu/menu-item-type.model'; import { MenuSection } from '../menu/menu-section.model'; +import { TextMenuItemModel } from '../menu/menu-item/models/text.model'; /** * Creates the menus for the dspace object pages @@ -66,7 +67,7 @@ export class DSOEditMenuResolver implements Resolve<{ [key: string]: MenuSection /** * Return all the menus for a dso based on the route and state */ - getDsoMenus(dso, route, state) { + getDsoMenus(dso, route, state): Observable[] { return [ this.getItemMenu(dso), this.getCommonMenu(dso, state) @@ -76,7 +77,7 @@ export class DSOEditMenuResolver implements Resolve<{ [key: string]: MenuSection /** * Get the common menus between all dspace objects */ - protected getCommonMenu(dso, state): Observable { + protected getCommonMenu(dso, state): Observable { return combineLatest([ this.authorizationService.isAuthorized(FeatureID.CanEditMetadata, dso.self), ]).pipe( @@ -95,7 +96,6 @@ export class DSOEditMenuResolver implements Resolve<{ [key: string]: MenuSection index: 1 }, ]; - }) ); } @@ -103,7 +103,7 @@ export class DSOEditMenuResolver implements Resolve<{ [key: string]: MenuSection /** * Get item sepcific menus */ - protected getItemMenu(dso): Observable { + protected getItemMenu(dso): Observable { if (dso instanceof Item) { return combineLatest([ this.authorizationService.isAuthorized(FeatureID.CanCreateVersion, dso.self), 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 b330b1e87d..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 @@ -1,14 +1,19 @@ -
+
- -
    - +
      +
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 441e663938..8e4a7008af 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 { MenuService } from '../../../menu/menu.service'; import { Router } from '@angular/router'; import { MenuID } from 'src/app/shared/menu/menu-id.model'; import { MenuSection } from 'src/app/shared/menu/menu-section.model'; +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; + 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 486b09bc70..72521f2d03 100644 --- a/src/styles/_global-styles.scss +++ b/src/styles/_global-styles.scss @@ -186,3 +186,9 @@ ds-dynamic-form-control-container.d-none { padding: 0.5rem; } } + +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; +}