hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 01:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'w2p-94390_replace-dso-page-edit-buttons-with-a-menu_7.2' into w2p-94390_replace-dso-page-edit-buttons-with-a-menu

Browse Source
This commit is contained in:
Yury Bondarenko
2022-09-28 18:50:06 +02:00
parent 6a932ec6ac 785e4085fc
commit 9dc7b3490f
7 changed files with 43 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
View File

@@ -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)"

8
src/app/shared/dso-page/dso-edit-menu.resolver.spec.ts
View File

@@ -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();
});

10
src/app/shared/dso-page/dso-edit-menu.resolver.ts
View File

@@ -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<MenuSection[]>[] {
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<any[]> {
protected getCommonMenu(dso, state): Observable<MenuSection[]> {
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<any[]> {
protected getItemMenu(dso): Observable<MenuSection[]> {
if (dso instanceof Item) {
return combineLatest([
this.authorizationService.isAuthorized(FeatureID.CanCreateVersion, dso.self),

17
src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.html
View File

@@ -1,14 +1,19 @@
<div class="dso-button-menu mb-1" ngbDropdown placement="bottom-right">
<div class="dso-button-menu mb-1" ngbDropdown container="body" placement="bottom-right">
<div class="d-flex flex-row flex-nowrap"
[ngbTooltip]="itemModel.text | translate">
<button class="btn btn-dark btn-sm" ngbDropdownToggle [disabled]="section.model.disabled">
<button class="btn btn-dark btn-sm" ngbDropdownToggle [disabled]="section.model?.disabled">
<i class="fas fa-{{section.icon}} fa-fw"></i>
</button>
<ul ngbDropdownMenu>
<ng-container *ngFor="let subSection of (subSections$ | async)">
<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>
</ng-container>
*ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;">
</ng-container>
</li>
</ul>
</div>
</div>

4
src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.scss
View File

@@ -24,3 +24,7 @@ ul.dropdown-menu {
color: var(--bs-btn-link-disabled-color);
}
}
.dso-edit-menu-dropdown {
max-width: calc(min(600px, 75vw));
}

12
src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.ts
View File

@@ -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<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));
}),
);
}
}

6
src/styles/_global-styles.scss
View File

@@ -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;
}