fix(wi-modal): fix top position for wi modal to close the modal (#2329)

* fix(wi-modal): fix z-index for wi modal to close the modal

* fix(wi-modal): add top position to create modal

* fix(wi-modal): set modal top position as per header height

* fix(wi-modal): Apply requested changes

* fix(wi-create): apply requested changes

src/app/components/work-item-create/work-item-create-selector/work-item-create-selector.component.html

@@ -1,4 +1,6 @@
-<div *ngIf="panelState === 'in'" class="row f8-wi-modal container-cards-pf">
+<div #modalPosition
+  *ngIf="panelState === 'in'"
+  class="row f8-wi-modal container-cards-pf">
   <div class="f8-wi-modal__header">
     <i class="pficon pficon-close pull-right margin-top-5 pointer"
       (click)="close()">

src/app/components/work-item-create/work-item-create-selector/work-item-create-selector.component.less

@@ -1,8 +1,7 @@
 @import (reference) '../../../../assets/stylesheets/_base';
-
 .f8-wi-modal {
   position: absolute;
-  top: 0;
+  //top: 0;
   left: 0;
   right: 0;
   bottom: 0;

src/app/components/work-item-create/work-item-create-selector/work-item-create-selector.component.ts

@@ -1,4 +1,15 @@
-import { Component, OnInit, Input, OnChanges, EventEmitter, Output } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  Input,
+  AfterViewChecked,
+  OnChanges,
+  EventEmitter,
+  Output,
+  ViewChild,
+  ElementRef,
+  Renderer2
+} from '@angular/core';
 import { Router, ActivatedRoute, NavigationExtras } from '@angular/router';
 
 import { cloneDeep } from 'lodash';
@@ -21,11 +32,12 @@ import {
   templateUrl: './work-item-create-selector.component.html',
   styleUrls: ['./work-item-create-selector.component.less']
 })
-export class WorkItemDetailAddTypeSelectorWidgetComponent implements OnInit {
+export class WorkItemDetailAddTypeSelectorWidgetComponent implements OnInit, AfterViewChecked{
 
   @Input() workItemTypes: WorkItemType[] = [];
   @Output('onSelect') onSelect = new EventEmitter();
   @Output('onClose') onClose = new EventEmitter();
+  @ViewChild('modalPosition') modalPosition: ElementRef;
 
   panelState: string = 'out';
 
@@ -35,12 +47,23 @@ export class WorkItemDetailAddTypeSelectorWidgetComponent implements OnInit {
     private broadcaster: Broadcaster,
     private workItemService: WorkItemService,
     private auth: AuthenticationService,
-    private spaces: Spaces) {
+    private spaces: Spaces,
+    private renderer: Renderer2 ) {
   }
 
   ngOnInit() {
   }
 
+  ngAfterViewChecked() {
+    if(this.modalPosition) {
+      let hdrHeight:number = 0;
+      if(document.getElementsByClassName('navbar-pf').length > 0) {
+        hdrHeight = (document.getElementsByClassName('navbar-pf')[0] as HTMLElement).offsetHeight;
+      }
+      this.renderer.setStyle(this.modalPosition.nativeElement, 'top', hdrHeight + "px");
+    }
+  }
+
   close() {
     this.onClose.emit();
     this.panelState = 'out';