Skip to content

Commit fca8c6f

Browse files
YanaDePauwYanaDePauw
committed
Fix control-flow issues
1 parent c53d718 commit fca8c6f

3 files changed

Lines changed: 106 additions & 102 deletions

File tree

‎src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html‎

Lines changed: 43 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,52 @@
1-
<div *ngIf="hasSubSections$ | async"
2-
[ngClass]="{'expanded': (isExpanded$ | async)}"
1+
@if (hasSubSections$ | async) {
2+
<div
3+
[ngClass]="{'expanded': (isExpanded$ | async)}"
34
[@bgColor]="{
45
value: ((isExpanded$ | async) ? 'endBackground' : 'startBackground'),
56
params: {endColor: (sidebarActiveBg$ | async)}
67
}">
7-
<a class="sidebar-section-wrapper"
8-
role="menuitem" tabindex="0"
9-
aria-haspopup="menu"
10-
[attr.aria-controls]="adminMenuSectionId(section)"
11-
[attr.aria-expanded]="isExpanded$ | async"
12-
[attr.aria-label]="('menu.section.toggle.' + section.id) | translate"
13-
[class.disabled]="section.model?.disabled"
14-
(click)="toggleSection($event)"
15-
(keyup.space)="toggleSection($event)"
16-
href="javascript:void(0);"
17-
>
18-
<div class="sidebar-fixed-element-wrapper" data-test="sidebar-section-icon" aria-hidden="true">
19-
<i class="fas fa-{{section.icon ?? 'notdef'}} fa-fw"></i>
20-
</div>
21-
<div class="sidebar-collapsible-element-outer-wrapper">
22-
<div class="sidebar-collapsible-element-inner-wrapper sidebar-item toggler-wrapper">
23-
<span [id]="adminMenuSectionTitleAccessibilityHandle(section)" [attr.data-test]="adminMenuSectionTitleAccessibilityHandle(section) | dsBrowserOnly">
24-
<ng-container
25-
*ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
26-
</span>
27-
<i class="fas fa-chevron-right fa-xs" aria-hidden="true"
28-
[@rotate]="(isExpanded$ | async) ? 'expanded' : 'collapsed'"
29-
></i>
8+
<a class="sidebar-section-wrapper"
9+
role="menuitem" tabindex="0"
10+
aria-haspopup="menu"
11+
[attr.aria-controls]="adminMenuSectionId(section)"
12+
[attr.aria-expanded]="isExpanded$ | async"
13+
[attr.aria-label]="('menu.section.toggle.' + section.id) | translate"
14+
[class.disabled]="section.model?.disabled"
15+
(click)="toggleSection($event)"
16+
(keyup.space)="toggleSection($event)"
17+
href="javascript:void(0);"
18+
>
19+
<div class="sidebar-fixed-element-wrapper" data-test="sidebar-section-icon" aria-hidden="true">
20+
<i class="fas fa-{{section.icon ?? 'notdef'}} fa-fw"></i>
3021
</div>
31-
</div>
32-
</a>
33-
@if ((isExpanded$ | async)) {
34-
<div class="sidebar-section-wrapper subsection" @slide>
35-
<div class="sidebar-fixed-element-wrapper"></div>
3622
<div class="sidebar-collapsible-element-outer-wrapper">
37-
<div class="sidebar-collapsible-element-inner-wrapper">
38-
<div class="sidebar-sub-level-item-list" role="menu" [id]="adminMenuSectionId(section)" [attr.aria-label]="('menu.section.' + section.id) | translate">
39-
@for (subSection of (subSections$ | async); track subSection) {
40-
<div class="sidebar-item">
41-
<ng-container
42-
*ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
43-
</div>
44-
}
23+
<div class="sidebar-collapsible-element-inner-wrapper sidebar-item toggler-wrapper">
24+
<span [id]="adminMenuSectionTitleAccessibilityHandle(section)" [attr.data-test]="adminMenuSectionTitleAccessibilityHandle(section) | dsBrowserOnly">
25+
<ng-container
26+
*ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
27+
</span>
28+
<i class="fas fa-chevron-right fa-xs" aria-hidden="true"
29+
[@rotate]="(isExpanded$ | async) ? 'expanded' : 'collapsed'"
30+
></i>
31+
</div>
32+
</div>
33+
</a>
34+
@if ((isExpanded$ | async)) {
35+
<div class="sidebar-section-wrapper subsection" @slide>
36+
<div class="sidebar-fixed-element-wrapper"></div>
37+
<div class="sidebar-collapsible-element-outer-wrapper">
38+
<div class="sidebar-collapsible-element-inner-wrapper">
39+
<div class="sidebar-sub-level-item-list" role="menu" [id]="adminMenuSectionId(section)" [attr.aria-label]="('menu.section.' + section.id) | translate">
40+
@for (subSection of (subSections$ | async); track subSection) {
41+
<div class="sidebar-item">
42+
<ng-container
43+
*ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
44+
</div>
45+
}
46+
</div>
4547
</div>
4648
</div>
4749
</div>
48-
</div>
49-
}
50-
</div>
50+
}
51+
</div>
52+
}

‎src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,43 @@
1-
<ng-container *ngIf="hasSubSections$ | async">
1+
@if (hasSubSections$ | async) {
22
<div class="ds-menu-item-wrapper text-md-center"
3-
[id]="'expandable-navbar-section-' + section.id"
4-
(mouseenter)="onMouseEnter($event)"
5-
(mouseleave)="onMouseLeave($event)"
6-
data-test="navbar-section-wrapper">
3+
[id]="'expandable-navbar-section-' + section.id"
4+
(mouseenter)="onMouseEnter($event)"
5+
(mouseleave)="onMouseLeave($event)"
6+
data-test="navbar-section-wrapper">
77
<a href="javascript:void(0);" routerLinkActive="active"
8-
role="menuitem"
9-
(keyup.enter)="toggleSection($event)"
10-
(keyup.space)="toggleSection($event)"
11-
(click)="toggleSection($event)"
12-
(keydown)="keyDown($event)"
13-
aria-haspopup="menu"
14-
data-test="navbar-section-toggler"
15-
[attr.aria-expanded]="(active$ | async).valueOf()"
16-
[attr.aria-controls]="expandableNavbarSectionId()"
17-
class="d-flex flex-row flex-nowrap align-items-center gapx-1 ds-menu-toggler-wrapper"
18-
[class.disabled]="section.model?.disabled">
19-
<span class="flex-fill">
20-
<ng-container
21-
*ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
22-
</span>
8+
role="menuitem"
9+
(keyup.enter)="toggleSection($event)"
10+
(keyup.space)="toggleSection($event)"
11+
(click)="toggleSection($event)"
12+
(keydown)="keyDown($event)"
13+
aria-haspopup="menu"
14+
data-test="navbar-section-toggler"
15+
[attr.aria-expanded]="(active$ | async).valueOf()"
16+
[attr.aria-controls]="expandableNavbarSectionId()"
17+
class="d-flex flex-row flex-nowrap align-items-center gapx-1 ds-menu-toggler-wrapper"
18+
[class.disabled]="section.model?.disabled">
19+
<span class="flex-fill">
20+
<ng-container
21+
*ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
22+
</span>
2323
<i class="fas fa-caret-down fa-xs toggle-menu-icon" aria-hidden="true"></i>
2424
</a>
25-
@if ((active$ | async).valueOf() === true) {
26-
<div (click)="deactivateSection($event)"
27-
[id]="expandableNavbarSectionId()"
28-
[dsHoverOutsideOfParentSelector]="'#expandable-navbar-section-' + section.id"
29-
(dsHoverOutside)="deactivateSection($event, false)"
30-
role="menu"
31-
class="dropdown-menu show nav-dropdown-menu m-0 shadow-none border-top-0 px-3 px-md-0 pt-0 pt-md-1">
32-
<div @slide role="presentation">
33-
@for (subSection of (subSections$ | async); track subSection) {
34-
<div class="text-nowrap" role="presentation">
35-
<ng-container
36-
*ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
25+
@if ((active$ | async).valueOf() === true) {
26+
<div (click)="deactivateSection($event)"
27+
[id]="expandableNavbarSectionId()"
28+
[dsHoverOutsideOfParentSelector]="'#expandable-navbar-section-' + section.id"
29+
(dsHoverOutside)="deactivateSection($event, false)"
30+
role="menu"
31+
class="dropdown-menu show nav-dropdown-menu m-0 shadow-none border-top-0 px-3 px-md-0 pt-0 pt-md-1">
32+
<div @slide role="presentation">
33+
@for (subSection of (subSections$ | async); track subSection) {
34+
<div class="text-nowrap" role="presentation">
35+
<ng-container
36+
*ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
37+
</div>
38+
}
3739
</div>
38-
}
3940
</div>
40-
</div>
41-
}
41+
}
4242
</div>
43-
</ng-container>
43+
}

‎src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.html‎

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,31 @@
1-
<div *ngIf="hasSubSections$ | async" class="dso-button-menu mb-1" ngbDropdown container="body" placement="bottom-right">
2-
<div class="d-flex flex-row flex-nowrap"
3-
[ngbTooltip]="itemModel.text | translate" container="body">
4-
<button [attr.aria-label]="itemModel.text | translate" [title]="itemModel.text | translate" class="btn btn-dark btn-sm" ngbDropdownToggle [dsBtnDisabled]="section.model?.disabled">
5-
<i class="fas fa-{{section.icon}} fa-fw"></i>
6-
</button>
7-
<ul ngbDropdownMenu class="dso-edit-menu-dropdown">
8-
@for (subSection of (subSections$ | async); track subSection) {
9-
<li class="nav-item nav-link d-flex flex-row">
10-
@if (renderIcons$ | async) {
11-
<div class="me-2">
12-
@if (subSection.icon) {
13-
<i class="fas fa-{{subSection.icon}} fa-fw"></i>
14-
} @else {
15-
<i class="fas fa-fw"></i>
16-
}
17-
</div>
18-
}
19-
<ng-container
20-
*ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;">
21-
</ng-container>
22-
</li>
23-
}
24-
</ul>
1+
@if (hasSubSections$ | async) {
2+
<div class="dso-button-menu mb-1" ngbDropdown container="body" placement="bottom-right">
3+
<div class="d-flex flex-row flex-nowrap"
4+
[ngbTooltip]="itemModel.text | translate" container="body">
5+
<button [attr.aria-label]="itemModel.text | translate" [title]="itemModel.text | translate" class="btn btn-dark btn-sm" ngbDropdownToggle [dsBtnDisabled]="section.model?.disabled">
6+
<i class="fas fa-{{section.icon}} fa-fw"></i>
7+
</button>
8+
<ul ngbDropdownMenu class="dso-edit-menu-dropdown">
9+
@for (subSection of (subSections$ | async); track subSection) {
10+
<li class="nav-item nav-link d-flex flex-row">
11+
@if (renderIcons$ | async) {
12+
<div class="me-2">
13+
@if (subSection.icon) {
14+
<i class="fas fa-{{subSection.icon}} fa-fw"></i>
15+
} @else {
16+
<i class="fas fa-fw"></i>
17+
}
18+
</div>
19+
}
20+
<ng-container
21+
*ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;">
22+
</ng-container>
23+
</li>
24+
}
25+
</ul>
26+
</div>
2527
</div>
26-
</div>
28+
}
2729

2830

2931

0 commit comments

Comments
 (0)