Merge from master
This commit is contained in:
commit
2b7c52a8b0
|
@ -39,7 +39,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div *ngIf="!activeRootMenu.isFeatured"
|
||||||
class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid uk-margin-remove-top"
|
class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid uk-margin-remove-top"
|
||||||
uk-grid>
|
uk-grid>
|
||||||
<div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false"
|
<div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false"
|
||||||
|
@ -106,9 +106,13 @@
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div *ngIf="childrenMenuItems.length == 0"
|
<div *ngIf="childrenMenuItems.length == 0 && !activeRootMenu.isFeatured"
|
||||||
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
|
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
|
||||||
<div>No menu items found</div>
|
<div>No menu items found</div>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="activeRootMenu.isFeatured"
|
||||||
|
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
|
||||||
|
<div>Featured menu items can't have any sub menu items</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -118,8 +122,14 @@
|
||||||
<form *ngIf="menuItemForm" [formGroup]="menuItemForm" class="uk grid uk-child-width-1-1" uk-grid>
|
<form *ngIf="menuItemForm" [formGroup]="menuItemForm" class="uk grid uk-child-width-1-1" uk-grid>
|
||||||
<div dashboard-input [formInput]="menuItemForm.get('title')" type="text" label="Name"
|
<div dashboard-input [formInput]="menuItemForm.get('title')" type="text" label="Name"
|
||||||
placeholder="Write a name"></div>
|
placeholder="Write a name"></div>
|
||||||
|
<div class="uk-flex" *ngIf="activeRootMenu && !activeRootMenu.items.length">
|
||||||
|
<div class="uk-text-bold uk-form-label uk-margin-small-right">Featured</div>
|
||||||
|
<mat-slide-toggle [formControl]="menuItemForm.get('isFeatured')"
|
||||||
|
uk-tooltip="title:<div class='uk-padding-small uk-width-large'><div class='uk-text-bold '>Enable this to show your custom menu item in the community-specific navigation bar.</div><div class=' uk-margin-top'>If disabled, your custom menu item will appear in the default navigation bar.</div><div class=' uk-margin-top'>*Note that featured menu items can't have any children menu items(as a dropdown).</div></div>">
|
||||||
|
</mat-slide-toggle>
|
||||||
|
</div>
|
||||||
<div dashboard-input [formInput]="menuItemForm.get('type')" type="select" label="Type" placeholder="Choose a type"
|
<div dashboard-input [formInput]="menuItemForm.get('type')" type="select" label="Type" placeholder="Choose a type"
|
||||||
[options]="getTypeOptions()" [tooltip]="false"></div>
|
[options]="getTypeOptions(menuItemForm.get('isFeatured').value)" [tooltip]="false"></div>
|
||||||
<!-- Workflow for EXTERNAL -->
|
<!-- Workflow for EXTERNAL -->
|
||||||
<div dashboard-input *ngIf="menuItemForm.get('type').value === 'external'" [formInput]="menuItemForm.get('url')"
|
<div dashboard-input *ngIf="menuItemForm.get('type').value === 'external'" [formInput]="menuItemForm.get('url')"
|
||||||
[validators]="menuItemForm.get('url').validator" type="URL" label="URL" placeholder="Write a URL"></div>
|
[validators]="menuItemForm.get('url').validator" type="URL" label="URL" placeholder="Write a URL"></div>
|
||||||
|
|
|
@ -132,11 +132,15 @@ export class MenuComponent implements OnInit {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
getTypeOptions() {
|
getTypeOptions(isFeatured: boolean = false) {
|
||||||
if(this.isChild) {
|
if(this.isChild) {
|
||||||
return this.typeOptions;
|
return this.typeOptions;
|
||||||
} else {
|
} else {
|
||||||
return this.typeOptions.concat(this.rootOnlyTypeOptions);
|
if(isFeatured) {
|
||||||
|
return this.typeOptions;
|
||||||
|
} else {
|
||||||
|
return this.typeOptions.concat(this.rootOnlyTypeOptions);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -247,6 +251,7 @@ export class MenuComponent implements OnInit {
|
||||||
route: this._fb.control(""),
|
route: this._fb.control(""),
|
||||||
url: this._fb.control(""),
|
url: this._fb.control(""),
|
||||||
isEnabled: this._fb.control(""),
|
isEnabled: this._fb.control(""),
|
||||||
|
isFeatured: this._fb.control(false),
|
||||||
parentItemId: this._fb.control(isChild ? this.activeRootMenuId : null)
|
parentItemId: this._fb.control(isChild ? this.activeRootMenuId : null)
|
||||||
});
|
});
|
||||||
this.isChild = isChild;
|
this.isChild = isChild;
|
||||||
|
@ -261,6 +266,7 @@ export class MenuComponent implements OnInit {
|
||||||
type: this._fb.control(menuItem['type'],Validators.required),
|
type: this._fb.control(menuItem['type'],Validators.required),
|
||||||
route: this._fb.control(menuItem.route, (menuItem['type'] == "internal") ? [Validators.required] : []),
|
route: this._fb.control(menuItem.route, (menuItem['type'] == "internal") ? [Validators.required] : []),
|
||||||
url: this._fb.control(menuItem.url, (menuItem['type'] == "external") ? [Validators.required, StringUtils.urlValidator()] : []),
|
url: this._fb.control(menuItem.url, (menuItem['type'] == "external") ? [Validators.required, StringUtils.urlValidator()] : []),
|
||||||
|
isFeatured: this._fb.control(menuItem.isFeatured),
|
||||||
parentItemId: this._fb.control(menuItem['parentItemId'])
|
parentItemId: this._fb.control(menuItem['parentItemId'])
|
||||||
});
|
});
|
||||||
this.isChild = isChild;
|
this.isChild = isChild;
|
||||||
|
|
|
@ -15,6 +15,7 @@ export class MenuItem {
|
||||||
icon: string;
|
icon: string;
|
||||||
open: boolean;
|
open: boolean;
|
||||||
customClass: string = null;
|
customClass: string = null;
|
||||||
|
isFeatured: boolean;
|
||||||
|
|
||||||
constructor(id: string, title: string, url: string, route: string, needsAuthorization: boolean, entitiesRequired: string[], routeRequired: string[], params, icon=null, fragment = null, customClass = null, routeActive = null) {
|
constructor(id: string, title: string, url: string, route: string, needsAuthorization: boolean, entitiesRequired: string[], routeRequired: string[], params, icon=null, fragment = null, customClass = null, routeActive = null) {
|
||||||
this._id = id;
|
this._id = id;
|
||||||
|
|
|
@ -110,7 +110,7 @@
|
||||||
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
|
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
|
||||||
alt="BETA" style="height: 102px; width: 102px">
|
alt="BETA" style="height: 102px; width: 102px">
|
||||||
</div>
|
</div>
|
||||||
<nav class="uk-navbar uk-navbar-container uk-padding-large uk-padding-remove-vertical" uk-navbar>
|
<nav class="uk-navbar uk-flex uk-navbar-container uk-padding-large uk-padding-remove-vertical" uk-navbar>
|
||||||
<ng-container *ngIf="!onlyTop">
|
<ng-container *ngIf="!onlyTop">
|
||||||
<div class="uk-navbar-left">
|
<div class="uk-navbar-left">
|
||||||
<ng-container *ngIf="showLogo && isHeaderLeft">
|
<ng-container *ngIf="showLogo && isHeaderLeft">
|
||||||
|
@ -194,12 +194,12 @@
|
||||||
</li>
|
</li>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<!-- Custom menu items -->
|
<!-- Custom menu items -->
|
||||||
<ng-container *ngIf="customMenuItems?.length > 0 && properties.environment == 'development'">
|
<!-- TODO: Add to mobile menu as well! -->
|
||||||
<ng-container *ngFor="let menu of customMenuItems">
|
<ng-container *ngIf="additionalMenuItems?.length > 0 && properties.environment == 'development'">
|
||||||
|
<ng-container *ngFor="let menu of additionalMenuItems">
|
||||||
<li class="uk-parent">
|
<li class="uk-parent">
|
||||||
<!-- INTERNAL ROOT-->
|
<!-- INTERNAL ROOT-->
|
||||||
<a *ngIf="menu.type == 'internal' && menu.route && isEnabled([menu.route], showPage)"
|
<a *ngIf="menu.type == 'internal' && menu.route && isEnabled([menu.route], showPage)" routerLinkActive="uk-link"
|
||||||
routerLinkActive="uk-link"
|
|
||||||
routerLink="{{menu.route}}"
|
routerLink="{{menu.route}}"
|
||||||
[queryParams]="menu.params"
|
[queryParams]="menu.params"
|
||||||
[fragment]="menu.fragment">
|
[fragment]="menu.fragment">
|
||||||
|
@ -223,8 +223,7 @@
|
||||||
<ng-container *ngFor="let submenu of menu.items">
|
<ng-container *ngFor="let submenu of menu.items">
|
||||||
<li>
|
<li>
|
||||||
<!-- INTERNAL CHILD -->
|
<!-- INTERNAL CHILD -->
|
||||||
<a *ngIf="submenu.type == 'internal' && submenu.route && isEnabled([submenu.route], showPage)"
|
<a *ngIf="submenu.type == 'internal' && submenu.route && isEnabled([submenu.route], showPage)" routerLinkActive="uk-link"
|
||||||
routerLinkActive="uk-link"
|
|
||||||
routerLink="{{submenu.route}}"
|
routerLink="{{submenu.route}}"
|
||||||
[queryParams]="submenu.params"
|
[queryParams]="submenu.params"
|
||||||
[fragment]="submenu.fragment"
|
[fragment]="submenu.fragment"
|
||||||
|
@ -249,8 +248,33 @@
|
||||||
</ul>
|
</ul>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- New navbar for featured menu items - test only -->
|
||||||
|
<ng-container *ngIf="featuredMenuItems?.length > 0 && properties.environment == 'development'">
|
||||||
|
<div class="featuredNavBar">
|
||||||
|
<ul>
|
||||||
|
<ng-container *ngFor="let item of featuredMenuItems">
|
||||||
|
<li>
|
||||||
|
<!-- INTERNAL -->
|
||||||
|
<a *ngIf="item.type == 'internal' && item.route && isEnabled([item.route], showPage)" routerLinkActive="uk-link"
|
||||||
|
routerLink="{{item.route}}"
|
||||||
|
[queryParams]="item.params"
|
||||||
|
[fragment]="item.fragment"
|
||||||
|
[class.uk-active]="isTheActiveMenuItem(item)">
|
||||||
|
{{item.title}}
|
||||||
|
</a>
|
||||||
|
<!-- EXTERNAL -->
|
||||||
|
<a *ngIf="item.type == 'external' && item.url" routerLinkActive="uk-link"
|
||||||
|
href="{{item.url}}"
|
||||||
|
target="_blank">
|
||||||
|
{{item.title}}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ng-container>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ng-template #header_template let-mobile="mobile">
|
<ng-template #header_template let-mobile="mobile">
|
||||||
|
|
|
@ -54,7 +54,8 @@ export class NavigationBarComponent implements OnInit, OnDestroy {
|
||||||
showPage = {};
|
showPage = {};
|
||||||
specialAnnouncementContent: string = null;
|
specialAnnouncementContent: string = null;
|
||||||
|
|
||||||
public customMenuItems: MenuItem[] = [];
|
public additionalMenuItems: MenuItem[] = [];
|
||||||
|
public featuredMenuItems: MenuItem[] = [];
|
||||||
|
|
||||||
constructor(private router: Router,
|
constructor(private router: Router,
|
||||||
private route: ActivatedRoute,
|
private route: ActivatedRoute,
|
||||||
|
@ -116,7 +117,16 @@ export class NavigationBarComponent implements OnInit, OnDestroy {
|
||||||
this.subs.push(
|
this.subs.push(
|
||||||
this._helpContentService.getMenuItems(this.portal).subscribe(
|
this._helpContentService.getMenuItems(this.portal).subscribe(
|
||||||
data => {
|
data => {
|
||||||
this.customMenuItems = data;
|
// Will divide all the custom menu items into 2 arrays.
|
||||||
|
// One for the extra(added next to the hardcoded menu items in the existing nav bar) - additionalMenuItems
|
||||||
|
// One for the featured(new nav bar below the existing one) - featuredMenuItems
|
||||||
|
data.forEach(menuItem => {
|
||||||
|
if(menuItem.isFeatured) {
|
||||||
|
this.featuredMenuItems.push(menuItem);
|
||||||
|
} else {
|
||||||
|
this.additionalMenuItems.push(menuItem);
|
||||||
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
error => this.handleError("Server error fetching custom menu items", error)
|
error => this.handleError("Server error fetching custom menu items", error)
|
||||||
)
|
)
|
||||||
|
|
|
@ -115,7 +115,7 @@ export class AlertModal {
|
||||||
/**
|
/**
|
||||||
* Value will be emitted if @choice is true
|
* Value will be emitted if @choice is true
|
||||||
*/
|
*/
|
||||||
public select: boolean = false;
|
public select: boolean = true;
|
||||||
/**
|
/**
|
||||||
* Emitted when a ok button was clicked
|
* Emitted when a ok button was clicked
|
||||||
* or when Ok method is called.
|
* or when Ok method is called.
|
||||||
|
|
Loading…
Reference in New Issue