From fa4c909b8297f60e29b5d67dfd43db0e8f0850e4 Mon Sep 17 00:00:00 2001
From: Sukhvir Kaur <SMahil@users.noreply.github.com>
Date: Mon, 18 Dec 2017 14:03:54 +0530
Subject: [PATCH] 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
---
 .../work-item-create-selector.component.html  |  4 ++-
 .../work-item-create-selector.component.less  |  3 +-
 .../work-item-create-selector.component.ts    | 29 +++++++++++++++++--
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/app/components/work-item-create/work-item-create-selector/work-item-create-selector.component.html b/src/app/components/work-item-create/work-item-create-selector/work-item-create-selector.component.html
index 9177adf45..bb0244674 100644
--- a/src/app/components/work-item-create/work-item-create-selector/work-item-create-selector.component.html
+++ b/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()">
diff --git a/src/app/components/work-item-create/work-item-create-selector/work-item-create-selector.component.less b/src/app/components/work-item-create/work-item-create-selector/work-item-create-selector.component.less
index a14e0f4ea..bb76cc777 100644
--- a/src/app/components/work-item-create/work-item-create-selector/work-item-create-selector.component.less
+++ b/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;
diff --git a/src/app/components/work-item-create/work-item-create-selector/work-item-create-selector.component.ts b/src/app/components/work-item-create/work-item-create-selector/work-item-create-selector.component.ts
index d225be54b..29cde631e 100644
--- a/src/app/components/work-item-create/work-item-create-selector/work-item-create-selector.component.ts
+++ b/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';