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

81901: Menu item components as ul > li

Browse Source
This commit is contained in:
Yura Bondarenko
2021-08-06 12:13:41 +02:00
parent 5a12f34593
commit d095c98b13
9 changed files with 19 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
<li class="sidebar-section"> <div class="sidebar-section">
<a href="javascript:void(0);" class="nav-item nav-link shortcut-icon" attr.aria-labelledby="sidebarName-{{section.id}}" [title]="('menu.section.icon.' + section.id) | translate" [routerLink]="itemModel.link"> <a href="javascript:void(0);" class="nav-item nav-link shortcut-icon" attr.aria-labelledby="sidebarName-{{section.id}}" [title]="('menu.section.icon.' + section.id) | translate" [routerLink]="itemModel.link">
<i class="fas fa-{{section.icon}} fa-fw"></i> <i class="fas fa-{{section.icon}} fa-fw"></i>
</a> </a>
@@ -7,4 +7,4 @@
<a class="nav-item nav-link" tabindex="-1" [routerLink]="itemModel.link">{{itemModel.text | translate}}</a> <a class="nav-item nav-link" tabindex="-1" [routerLink]="itemModel.link">{{itemModel.text | translate}}</a>
</span> </span>
</div> </div>
</li> </div>

3
src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts
View File

@@ -10,7 +10,8 @@ import { MenuSection } from '../../../shared/menu/menu.reducer';
* Represents a non-expandable section in the admin sidebar * Represents a non-expandable section in the admin sidebar
*/ */
@Component({ @Component({
selector: 'ds-admin-sidebar-section', /* tslint:disable:component-selector */
selector: 'li[ds-admin-sidebar-section]',
templateUrl: './admin-sidebar-section.component.html', templateUrl: './admin-sidebar-section.component.html',
styleUrls: ['./admin-sidebar-section.component.scss'], styleUrls: ['./admin-sidebar-section.component.scss'],

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

@@ -1,4 +1,4 @@
<li class="sidebar-section" [ngClass]="{'expanded': (expanded | async)}" <div class="sidebar-section" [ngClass]="{'expanded': (expanded | async)}"
[@bgColor]="{ [@bgColor]="{
value: ((expanded | async) ? 'endBackground' : 'startBackground'), value: ((expanded | async) ? 'endBackground' : 'startBackground'),
params: {endColor: (sidebarActiveBg | async)}}"> params: {endColor: (sidebarActiveBg | async)}}">
@@ -24,4 +24,4 @@
</li> </li>
</ul> </ul>
</div> </div>
</li> </div>

3
src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
View File

@@ -14,7 +14,8 @@ import { rendersSectionForMenu } from '../../../shared/menu/menu-section.decorat
* Represents a expandable section in the sidebar * Represents a expandable section in the sidebar
*/ */
@Component({ @Component({
selector: 'ds-expandable-admin-sidebar-section', /* tslint:disable:component-selector */
selector: 'li[ds-expandable-admin-sidebar-section]',
templateUrl: './expandable-admin-sidebar-section.component.html', templateUrl: './expandable-admin-sidebar-section.component.html',
styleUrls: ['./expandable-admin-sidebar-section.component.scss'], styleUrls: ['./expandable-admin-sidebar-section.component.scss'],
animations: [rotate, slide, bgColor] animations: [rotate, slide, bgColor]

4
src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
View File

@@ -1,4 +1,4 @@
<li class="nav-item dropdown" <div class="nav-item dropdown expandable-navbar-section"
(keyup.enter)="activateSection($event)" (keyup.enter)="activateSection($event)"
(mouseenter)="activateSection($event)" (mouseenter)="activateSection($event)"
(mouseleave)="deactivateSection($event)"> (mouseleave)="deactivateSection($event)">
@@ -15,4 +15,4 @@
*ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container> *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
</ng-container> </ng-container>
</ul> </ul>
</li> </div>

3
src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
View File

@@ -11,7 +11,8 @@ import { rendersSectionForMenu } from '../../shared/menu/menu-section.decorator'
* Represents an expandable section in the navbar * Represents an expandable section in the navbar
*/ */
@Component({ @Component({
selector: 'ds-expandable-navbar-section', /* tslint:disable:component-selector */
selector: 'li[ds-expandable-navbar-section]',
templateUrl: './expandable-navbar-section.component.html', templateUrl: './expandable-navbar-section.component.html',
styleUrls: ['./expandable-navbar-section.component.scss'], styleUrls: ['./expandable-navbar-section.component.scss'],
animations: [slide] animations: [slide]

4
src/app/navbar/navbar-section/navbar-section.component.html
View File

@@ -1,4 +1,4 @@
<li class="nav-item"> <div class="nav-item navbar-section">
<ng-container <ng-container
*ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container> *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
</li> </div>

5
src/app/navbar/navbar-section/navbar-section.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, Inject, Injector, OnInit } from '@angular/core'; import { Component, HostBinding, Inject, Injector, OnInit } from '@angular/core';
import { MenuSectionComponent } from '../../shared/menu/menu-section/menu-section.component'; import { MenuSectionComponent } from '../../shared/menu/menu-section/menu-section.component';
import { MenuService } from '../../shared/menu/menu.service'; import { MenuService } from '../../shared/menu/menu.service';
import { MenuID } from '../../shared/menu/initial-menus-state'; import { MenuID } from '../../shared/menu/initial-menus-state';
@@ -8,7 +8,8 @@ import { rendersSectionForMenu } from '../../shared/menu/menu-section.decorator'
* Represents a non-expandable section in the navbar * Represents a non-expandable section in the navbar
*/ */
@Component({ @Component({
selector: 'ds-navbar-section', /* tslint:disable:component-selector */
selector: 'li[ds-navbar-section]',
templateUrl: './navbar-section.component.html', templateUrl: './navbar-section.component.html',
styleUrls: ['./navbar-section.component.scss'] styleUrls: ['./navbar-section.component.scss']
}) })

4
src/themes/dspace/styles/_global-styles.scss
View File

@@ -23,8 +23,8 @@
} }
header { header {
ds-navbar-section > li, li > .navbar-section,
ds-expandable-navbar-section > li { li > .expandable-navbar-section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;