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

94389: Fix icon alignment & dropdown styles

Browse Source
This commit is contained in:
Yury Bondarenko
2022-09-28 18:28:41 +02:00
parent 4489b3417c
commit 785e4085fc
5 changed files with 23 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,7 +16,6 @@ import { URLCombiner } from '../../core/url-combiner/url-combiner';
import { DsoVersioningModalService } from './dso-versioning-modal-service/dso-versioning-modal.service'; import { DsoVersioningModalService } from './dso-versioning-modal-service/dso-versioning-modal.service';
import { hasValue } from '../empty.util'; import { hasValue } from '../empty.util';
import { MenuSection } from '../menu/menu.reducer'; import { MenuSection } from '../menu/menu.reducer';
import { TextMenuItemModel } from '../menu/menu-item/models/text.model';
/** /**
* Creates the menus for the dspace object pages * Creates the menus for the dspace object pages
@@ -95,7 +94,6 @@ export class DSOEditMenuResolver implements Resolve<{ [key: string]: MenuSection
index: 1 index: 1
}, },
]; ];
}) })
); );
} }

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

@@ -4,9 +4,12 @@
<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> <i class="fas fa-{{section.icon}} fa-fw"></i>
</button> </button>
<ul ngbDropdownMenu class="dso-edit-dropdown-menu"> <ul ngbDropdownMenu class="dso-edit-menu-dropdown">
<li class="nav-item" *ngFor="let subSection of (subSections$ | async)"> <li class="nav-item nav-link d-flex flex-row" *ngFor="let subSection of (subSections$ | async)">
<i *ngIf="subSection.icon" class="fas fa-{{subSection.icon}} fa-fw mr-2"></i> <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 <ng-container
*ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"> *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;">
</ng-container> </ng-container>

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); 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 { MenuSectionComponent } from 'src/app/shared/menu/menu-section/menu-sect
import { MenuService } from '../../../menu/menu.service'; import { MenuService } from '../../../menu/menu.service';
import { MenuSection } from '../../../menu/menu.reducer'; import { MenuSection } from '../../../menu/menu.reducer';
import { Router } from '@angular/router'; 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 * Represents an expandable section in the dso edit menus
@@ -21,6 +24,8 @@ export class DsoEditMenuExpandableSectionComponent extends MenuSectionComponent
menuID: MenuID = MenuID.DSO_EDIT; menuID: MenuID = MenuID.DSO_EDIT;
itemModel; itemModel;
renderIcons$: Observable<boolean>;
constructor( constructor(
@Inject('sectionDataProvider') menuSection: MenuSection, @Inject('sectionDataProvider') menuSection: MenuSection,
protected menuService: MenuService, protected menuService: MenuService,
@@ -34,6 +39,11 @@ export class DsoEditMenuExpandableSectionComponent extends MenuSectionComponent
ngOnInit(): void { ngOnInit(): void {
this.menuService.activateSection(this.menuID, this.section.id); this.menuService.activateSection(this.menuID, this.section.id);
super.ngOnInit(); super.ngOnInit();
}
this.renderIcons$ = this.subSections$.pipe(
map((sections: MenuSection[]) => {
return sections.some(section => hasValue(section.icon));
}),
);
}
} }

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

@@ -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; padding: 0;
display: inline; display: inline;
} }