File
Implements
Metadata
selector |
kiewit-header |
styleUrls |
kiewit-header.component.css |
templateUrl |
./kiewit-header.component.html |
Index
Properties
|
|
Methods
|
|
Inputs
|
|
Outputs
|
|
Outputs
buttonSettingsClick
|
$event type: EventEmitter<any>
|
|
subMenuClick
|
$event type: EventEmitter<any>
|
|
Methods
OpenComponent
|
OpenComponent(subitem: )
|
|
Parameters :
Name |
Type |
Optional |
Description |
subitem |
|
|
|
|
settingsClick
|
settingsClick()
|
|
|
subMenuOnClick
|
subMenuOnClick(eventData: )
|
|
Parameters :
Name |
Type |
Optional |
Description |
eventData |
|
|
|
|
toggleHelpMenu
|
toggleHelpMenu()
|
|
|
toggleUserInformation
|
toggleUserInformation()
|
|
|
showUserInformationPanel
|
showUserInformationPanel: string
|
Type : string
|
|
import {
Component, Output, Input, OnInit, ElementRef, Renderer,
EventEmitter, trigger, animate, transition, state, style, ViewChild
} from '@angular/core';
import { KiewitMenuItem } from '../kiewit-header/kiewit-header';
import { KiewitMenuComponent } from '../kiewit-menu/kiewit-menu.component';
@Component({
selector: 'kiewit-header',
templateUrl: './kiewit-header.component.html',
styleUrls: ['./kiewit-header.component.css'],
animations: [
trigger('slideDownUp', [
state('down', style({
overflow: 'hidden',
height: 'auto',
width: 'max-content'
})),
state('up', style({
opacity: '0',
overflow: 'hidden',
height: '0px',
width: 'max-content'
})),
transition('down => up', animate('400ms ease-in-out')),
transition('up => down', animate('400ms ease-in-out'))
]),
trigger('slideLeftRight', [
state('true', style({
overflow: 'hidden',
height: 'auto',
width: 'max-content'
})),
state('false', style({
opacity: '0',
backgroundColor: '#000',
overflow: 'hidden',
height: '0px',
width: '0px'
})),
transition('true => false', animate('3000ms ease-in-out')),
transition('false => true', animate('3000ms ease-in-out'))
]),
trigger('userInformationAnimation', [
state('down', style({
overflow: 'hidden',
height: 'auto',
width: '270px'
})),
state('up', style({
opacity: '0',
overflow: 'hidden',
height: '0px',
width: '270px'
})),
transition('down => up', animate('400ms ease-in-out')),
transition('up => down', animate('400ms ease-in-out'))
])
]
})
export class KiewitHeaderComponent implements OnInit {
@Output()
buttonSettingsClick: EventEmitter<any> = new EventEmitter();
@Output()
subMenuClick: EventEmitter<any> = new EventEmitter();
@Input()
isMenuEnabled: boolean;
@Input()
menuItems: KiewitMenuItem[];
settingsClick() {
this.buttonSettingsClick.emit();
};
subMenuOnClick(eventData) {
this.subMenuClick.emit({ title: eventData.title });
}
helpMenuOpen: string;
showUserInformationPanel: string;
@ViewChild('kiewitmenu') kiewitmenu: KiewitMenuComponent;
constructor(public element: ElementRef, private renderer: Renderer) {
}
ngOnInit() {
this.helpMenuOpen = 'up';
this.showUserInformationPanel = 'up';
//this.subMenuOpen = 'true';
}
//ngAfterViewInit() {
// var la = this.element.nativeElement;//.querySelector('li');
// //alert(la);
// this.renderer.setElementClass(la, 'kiewit-menu-item', true);
// //this.renderer.setStyle(second.nativeElement, 'color', 'blue');
//}
/*
toggleMenu(menuItem: KiewitMenuItem): void {
//Hide others SubMenuItems
for (let i = 0; i < this.menuItems.length; i++) {
if (this.menuItems[i].MenuItemId != menuItem.MenuItemId) {
this.menuItems[i].IsActive = true;
}
}
//Active only the current MenuItem
menuItem.IsActive = !menuItem.IsActive
}*/
toggleHelpMenu(): void {
//this.helpMenuOpen = this.helpMenuOpen === 'up' ? 'down' : 'up';
this.kiewitmenu.toggleHelpMenu();
}
toggleUserInformation(): void {
this.showUserInformationPanel = this.showUserInformationPanel === 'up' ? 'down' : 'up';
}
OpenComponent(subitem): void {
}
}
<div id="platform-navbar" class="ng-scope">
<div style="width: 128px">
<ul site-menu="" style="margin-left:-9px" class="platform-bg-transparent k-hide-arrows k-widget k-reset k-header k-menu k-menu-horizontal" data-role="menu" tabindex="0" role="menubar" aria-activedescendant="platform-main-menu-dropdown_mn_active" *ngIf="isMenuEnabled">
<li class="platform-bg-transparent k-item k-state-default k-first k-last" role="menuitem" style="z-index: auto;cursor:pointer;">
<span class="k-link">
<span (click)="toggleHelpMenu()" style="padding: 5px; display: flex; position:relative; width:auto; margin-left:20px; background-color: rgba(255, 255, 255, 0.2); color: #FFF; border-radius: 5px; font-family: Roboto Light; font-size: 14px;">
<i class="core-align-middle icon icon-burger" style="font-size: 16px; color:#FFFFFF; padding-top:1px"></i>
<span style="position: relative; top: 0px; padding: 0 .3em; color: white"><strong>|</strong></span>
<span style="position: relative; top: 1px; color: white; font-family:'Roboto Regular'!important" class="ng-binding">MENU</span>
</span><span class="k-icon k-i-arrow-s"></span>
</span>
<kiewit-menu #kiewitmenu [menuItems]="menuItems" (subMenuClick)="subMenuOnClick($event)"></kiewit-menu>
<ul id="platform-main-menu-dropdown" site-menu="" kendo-menu="kendoDynamicMenu" k-data-source="DynamicMenu" k-orientation="menuList" k-rebind="menuList" class="platform-menu-dropdown k-widget k-reset k-header k-menu k-menu-Vertical k-group k-menu-group k-popup" style="padding-top: 0px; max-width: 270px !important; display: none; position: absolute; font-size: 14px; font-family: 'Roboto Regular', 'Segoe UI', Verdana, Helvetica, sans-serif; font-stretch: normal; font-style: normal; font-weight: 500; line-height: normal; transform: translateY(-400px);" data-role="menu" role="menu" tabindex="0" aria-activedescendant="platform-main-menu-dropdown_mn_active" aria-hidden="true"><li class="k-item k-state-default k-first ng-scope" role="menuitem"><span class="k-link"><img class="k-image" alt="" src="https://in8-dev.hds.ineight.com/Content/icon/ineight-project-suite.svg"></span></li><li class="k-item k-state-default platform-left-menu-ellipsis-tooltip ng-scope" title="" ng-show="true" role="menuitem"><a class="k-link" href="https://in8-dev.hds.ineight.com/AppCore/Projects">Projects</a></li><li class="k-item k-state-default k-separator ng-scope" role="menuitem"> </li><li class="k-item k-state-default platform-menu-ellipsis-tooltip ng-scope" title="" ng-show="true" role="menuitem" aria-haspopup="true"><span class="k-link">Contract<span class="k-icon k-i-arrow-e"></span></span><ul class="k-group k-menu-group" style="display:none" role="menu" aria-hidden="true"><li class="k-item k-state-default platform-menu-ellipsis-tooltip k-first" title="" ng-click="selectProject('Packages')" role="menuitem"><span class="k-link">Bid packages</span></li><li class="k-item k-state-default platform-menu-ellipsis-tooltip" title="" ng-click="selectProject('Contracts')" role="menuitem"><span class="k-link">Contracts</span></li><li class="k-item k-state-default k-last platform-menu-ellipsis-tooltip" title="" role="menuitem"><a class="k-link" href="https://in8-dev.hds.ineight.com/AppContract/ChangeManagement">Change management</a></li></ul></li><li class="k-item k-state-default platform-menu-ellipsis-tooltip ng-scope" title="" name="Workspace" ng-click="selectProject('Workspace')" ng-show="true" role="menuitem"><span class="k-link">Control</span></li><li class="k-item k-state-default platform-menu-ellipsis-tooltip ng-scope" title="" onclick="javascript:myfunction(event)" ng-show="true" role="menuitem" aria-haspopup="true" id="platform-main-menu-dropdown_mn_active" style="z-index: auto;"><span class="k-link">Plan<span class="k-icon k-i-arrow-e"></span></span><ul class="k-group k-menu-group k-popup k-reset" style="display: none; max-height: 233.996px; overflow: auto; position: absolute; font-size: 14px; font-family: "Roboto Regular", "Segoe UI", Verdana, Helvetica, sans-serif; font-stretch: normal; font-style: normal; font-weight: 500; line-height: normal; transform: matrix(1, 0, 0, 1, 0, 0);" role="menu" data-role="popup"><li class="k-item k-state-default platform-menu-ellipsis-tooltip k-first" title="" name="QuantityTracking" ng-click="selectProject('QuantityTracking')" role="menuitem"><span class="k-link">Quantity tracking</span></li><li class="k-item k-state-default platform-menu-ellipsis-tooltip" title="" name="WorkPlanning" ng-click="selectProject('WorkPlanning')" role="menuitem"><span class="k-link">Work packaging</span></li><li class="k-item k-state-default k-last platform-menu-ellipsis-tooltip" title="" name="DailyPlanning" ng-click="selectProject('DailyPlanning')" role="menuitem"><span class="k-link">Daily planning</span></li></ul></li><li class="k-item k-state-default platform-menu-ellipsis-tooltip ng-scope" title="" onclick="javascript:myfunction(event)" ng-show="true" role="menuitem" aria-haspopup="true" style="z-index: auto;"><span class="k-link">Inspect<span class="k-icon k-i-arrow-e"></span></span><ul class="k-group k-menu-group k-popup k-reset" style="display: none; max-height: 233.996px; overflow: auto; position: absolute; font-size: 14px; font-family: "Roboto Regular", "Segoe UI", Verdana, Helvetica, sans-serif; font-stretch: normal; font-style: normal; font-weight: 500; line-height: normal; transform: matrix(1, 0, 0, 1, 0, 0);" role="menu" data-role="popup"><li class="k-item k-state-default platform-menu-ellipsis-tooltip k-first" navigate="https://in8-dev.hds.ineight.com/AppInspect/inspectmanager/Load?hash=/review/inspection-submissions" title="" ng-click="navigate('https://in8-dev.hds.ineight.com/AppInspect/inspectmanager/Load?hash=/review/inspection-submissions')" role="menuitem"><span class="k-link">Review</span></li><li class="k-item k-state-default platform-menu-ellipsis-tooltip" navigate="https://in8-dev.hds.ineight.com/AppInspect/inspectmanager/Load?hash=/inspection-setup/inspections" title="" ng-click="navigate('https://in8-dev.hds.ineight.com/AppInspect/inspectmanager/Load?hash=/inspection-setup/inspections')" role="menuitem"><span class="k-link">Inspection setup</span></li><li class="k-item k-state-default k-last platform-menu-ellipsis-tooltip" navigate="https://in8-dev.hds.ineight.com/AppInspect/inspectmanager/Load?hash=/inspection-setup/questions" title="" ng-click="navigate('https://in8-dev.hds.ineight.com/AppInspect/inspectmanager/Load?hash=/inspection-setup/questions')" role="menuitem"><span class="k-link">Question setup</span></li></ul></li><li class="k-item k-state-default platform-menu-ellipsis-tooltip ng-scope" title="" onclick="javascript:myfunction(event)" ng-show="true" role="menuitem" aria-haspopup="true" style="z-index: auto;"><span class="k-link">Report<span class="k-icon k-i-arrow-e"></span></span><ul class="k-group k-menu-group k-popup k-reset" style="display: none; max-height: 233.996px; overflow: auto; position: absolute; font-size: 14px; font-family: "Roboto Regular", "Segoe UI", Verdana, Helvetica, sans-serif; font-stretch: normal; font-style: normal; font-weight: 500; line-height: normal; transform: translateX(-112px);" role="menu" data-role="popup" aria-hidden="true"><li class="k-item k-state-default platform-menu-ellipsis-tooltip k-first" title="" role="menuitem"><a class="k-link" href="https://in8-dev.hds.ineight.com/AppReport/Reporting/Dashboard/">Dashboards</a></li><li class="k-item k-state-default k-last platform-menu-ellipsis-tooltip" title="" role="menuitem"><a class="k-link" href="https://in8-dev.hds.ineight.com/AppReport/Reporting/Reports/">Reports</a></li></ul></li><li class="k-item k-state-default k-separator ng-scope" role="menuitem"> </li><li class="k-item k-state-default platform-menu-ellipsis-tooltip ng-scope" title="" name="Model manager" ng-show="true" role="menuitem"><a class="k-link" href="https://in8-dev.hds.ineight.com/AppInfinyD/">Model Manager</a></li><li class="k-item k-state-default platform-menu-ellipsis-tooltip ng-scope" title="" onclick="javascript:myfunction(event)" ng-show="true" role="menuitem" aria-haspopup="true"><span class="k-link">Estimate<span class="k-icon k-i-arrow-e"></span></span><ul class="k-group k-menu-group" style="display:none" role="menu" aria-hidden="true"><li class="k-item k-state-disabled platform-menu-ellipsis-tooltip k-state-default k-first" title="You have no environments. Contact your administrator" name="LaunchEstimate" ng-click="selectEnvironment()" ng-class="{false:'k-state-disabled', true:'k-state-default'}[isLaunchEstimate]" role="menuitem" aria-disabled="true"><span class="k-link">Launch Estimate</span></li><li class="k-item k-state-default k-last platform-menu-ellipsis-tooltip" navigate="https://in8-dev.hds.ineight.com/AppCore/environmentsetup/environments" title="" name="Environment" ng-click="navigate('https://in8-dev.hds.ineight.com/AppCore/','estimate')" role="menuitem"><span class="k-link">Environment setup</span></li></ul></li><li class="k-item k-state-default k-separator ng-scope" role="menuitem"> </li><li class="k-item k-state-default platform-menu-ellipsis-tooltip ng-scope" title="" onclick="javascript:myfunction(event)" ng-show="true" role="menuitem" aria-haspopup="true"><span class="k-link">Benchmarking<span class="k-icon k-i-arrow-e"></span></span><ul class="k-group k-menu-group" style="display:none" role="menu" aria-hidden="true"><li class="k-item k-state-default platform-menu-ellipsis-tooltip k-first" title="" role="menuitem"><a class="k-link" href="https://in8-dev.hds.ineight.com/AppBenchmark/">Home</a></li><li class="k-item k-state-default platform-menu-ellipsis-tooltip" title="" role="menuitem"><a class="k-link" href="https://in8-dev.hds.ineight.com/AppBenchmark/ManageRecords/Index#/">Manage records</a></li><li class="k-item k-state-default k-last platform-menu-ellipsis-tooltip" title="" role="menuitem"><a class="k-link" href="https://in8-dev.hds.ineight.com/AppBenchmark/ManageCalculations/Index#/">Manage calculations</a></li></ul></li><li class="k-item k-state-default platform-menu-ellipsis-tooltip ng-scope" title="" name="HDDesign" ng-click="selectProject('HDDesign')" ng-show="true" role="menuitem"><span class="k-link">Design</span></li><li class="k-item k-state-default platform-menu-ellipsis-tooltip k-last ng-scope" title="" onclick="javascript:myfunction(event)" ng-show="true" role="menuitem" aria-haspopup="true"><span class="k-link">Billing<span class="k-icon k-i-arrow-e"></span></span><ul class="k-group k-menu-group" style="display:none" role="menu" aria-hidden="true"><li class="k-item k-state-default k-last platform-menu-ellipsis-tooltip k-first" title="" name="Invoice" ng-click="selectProject('Invoice')" role="menuitem"><span class="k-link">Invoices</span></li></ul></li></ul>
</li>
</ul>
</div>
<div style="text-align: center; font-size: 20px; font-weight: 400; font-family: Roboto Regular;" class="ng-binding">Business Planning Tool</div>
<div style="width: 128px">
<ul id="platform-settings-menu-dropdown" site-menu="" class="platform-bg-transparent k-hide-arrows k-widget k-reset k-header k-menu k-menu-horizontal" style="float: right" data-role="menu" tabindex="0" role="menubar">
<li class="platform-bg-transparent k-item k-state-default k-first" style="border-width: 0" role="menuitem">
<span class="k-link"><span class="icon icon-help platform-icon-menu"></span><span class="k-icon k-i-arrow-s"></span></span>
</li>
<li class="platform-bg-transparent k-item k-state-default k-first" style="border-width: 0" role="menuitem" (click)="settingsClick()">
<span class="k-link"><span class="icon icon-settings platform-icon-menu"></span><span class="k-icon k-i-arrow-s"></span></span>
</li>
<li class="platform-bg-transparent k-item k-state-default k-last" style="border-width: 0; cursor: pointer" role="menuitem" (click)="toggleUserInformation()">
<img class="media-object img-circle" src="favicon.ico" style="height:35px;width:35px;" alt="...">
</li>
</ul>
<div style="clear: both"></div>
</div>
<span id="userNotification" kendo-notification="userNotification" k-options="userNotificationOptions" data-role="notification" style=""></span>
</div>
<!-- added the style display: none as it is distoring the existing UI of BPT -->
<div [@userInformationAnimation]="showUserInformationPanel" class="kiewit-userInfo shadow-right-bottom" style="display:none">
<ul class="list-group">
<li class="list-group-item">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object img-circle" src="../assets/images/icons/64x64.jpg" alt="...">
</a>
</div>
<div class="media-body">
Gonzalo Ferrando
</div>
</div>
</li>
<li class="list-group-item">
<span class="badge yellow">3</span>
<span class="badge red">4</span>
View alerts
</li>
<li class="list-group-item">
User profile
</li>
</ul>
<hr />
<button type="button" class="btn btn-default pull-right">Sign out</button>
</div>
Implementation
In Type Script File
import {
Component, Output, Input, OnInit, ElementRef, Renderer,
EventEmitter, trigger, animate, transition, state, style, ViewChild
} from '@angular/core';
@Component({
selector: 'kiewit-header',
templateUrl: './kiewit-header.component.html',
styleUrls: ['./kiewit-header.component.css']
});
export class KiewitHeaderComponent implements OnInit {
private menuItems: any = [];
constructor() {
super();
this.menuItems = [];
this.getMenuItems(); // for binding menu items
}
getMenuItems() {
this.dashboardService.getMenuItems().subscribe(data => {
this.menuItems = data;
});
}
subMenuOnClick(eventData) { }
}
In HTML File
<kiewit-header [isMenuEnabled]="true" [menuItems]="menuItems" (subMenuClick)="subMenuOnClick($event)"></kiewit-header>
Legend
Html element with directive