Updated for Mobile Search

git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174421 ce508802-f39f-4f6c-b175-0d175dae99d5

ecm/Angular/ProteusECM/trunk/src/app/ecm-header/ecm-header.component.css

@@ -62,11 +62,11 @@ ecm-search{
 }
 
 .square-button {
-    height: 60px;
-    width: 60px;
-    padding: 0;
-    min-width: 60px;
-    vertical-align: middle;
+    height: 60px !important;
+    width: 60px !important; 
+    padding: 0 !important;
+    min-width: 60px !important;
+    vertical-align: middle !important;
 }
 
 .invisible{
@@ -239,6 +239,10 @@ ecm-search{
 	    top: 0;
 	    left: 0;
 	}
+	
+	.siteHeading{
+		display : none;	
+	}
 }
 
 .button {
@@ -324,3 +328,27 @@ ecm-search{
 .width-300{
 	width: 300px;
 }
+
+/*mobile view */
+.toolbar-spacer{
+	flex: 1 1 auto;
+}
+.mat-dialog-container {
+	max-width: 100%  !important;
+	height: 60px !important;
+	overflow: hidden !important;
+	padding: 0px !important;
+	border-radius: 0 !important;
+}        
+.mobile-search{
+	color: #fff;
+}
+
+.back-search{
+	color: mediumvioletred;
+}
+
+.back-search: hover{
+	color: #fff;
+	background-color: mediumvioletred; 
+}

ecm/Angular/ProteusECM/trunk/src/app/ecm-header/ecm-header.component.html

@@ -37,13 +37,21 @@
 			</div>
 		</div>
 	</section>
-
 	<section class="fixed-header-section" [@fixedHeaderShow]="headerFadeState">
 		<ng-container *ngTemplateOutlet="fixedHeader"></ng-container>
 	</section>
 </ng-template>
 
 <ng-template #fixedHeader>
+	<div *ngIf="clientWidth > 640" >
+		<ng-container *ngTemplateOutlet="fixedHeaderLarge"></ng-container>
+	</div>
+	<div  *ngIf="clientWidth < 639" >
+		<ng-container *ngTemplateOutlet="fixedHeaderSmall"></ng-container>
+	</div>
+</ng-template>
+
+<ng-template #fixedHeaderLarge>
 	<md-toolbar color="primary">
 	    <img class="fixed-header-logo img-logo-32" src="logo_32_32.svg" /> 
 	    <span class="siteHeading">{{siteHeading}}</span>
@@ -66,3 +74,31 @@
 	</md-toolbar>	
 </ng-template>
 
+<ng-template #fixedHeaderSmall >
+	<md-toolbar color="primary">
+     	<img class="fixed-header-logo img-logo-32" src="logo_32_32.svg" />  
+     	<span class="siteHeading">{{siteHeading}}</span>
+     	<span class="toolbar-spacer"></span>
+	    <span>
+			<button md-button class="square-button" (click)="openDialog($event);" style="position: inherit;">
+				 <i class="material-icons mobile-search">search</i>
+ 			</button>
+	    </span>
+	    <span [ngClass]="{'cart-span': sideOption=='CART_OPT'}" (click)="cartAction();" >
+			<button md-button class="square-button">
+				<span *ngIf="cartItems > 0" class="fixed-header-badge">{{ cartCounter | async }}</span>
+				<img  mdTooltip="Show Cart" [mdTooltipPosition]="'below'" class="fixed-header-cart img-cart-32" src="cart_32_32.svg"/> 
+				<!-- <img *ngIf="cartItems == 0" class="fixed-header-cart img-cart-32 no-badge" /> -->
+				<!--<md-icon  class="example-icon">shopping_cart</md-icon>-->
+			</button>
+	    </span> 
+	    <span [ngClass]="{'user-span': userData && sideOption=='USER_OPT'}" (click)="userAction();" >
+			<button md-button class="square-button">
+				<img *ngIf="userData" mdTooltip="Click here to Manage Account" [mdTooltipPosition]="'below'" [src]="profileImageLink" onerror="this.src = '/ecm/assets/images/svg/user_32_32.svg'; this.className = 'fixed-header-no-user'"  title="{{userData.name}}" [ngClass]="( userImage.src.indexOf('/ibase/') > 0 ) ? 'fixed-header-user' : 'fixed-header-no-user' " #userImage/>
+				<img *ngIf="!userData" mdTooltip="Click here for Login" [mdTooltipPosition]="'below'" class="fixed-header-no-user img-user-32" src="user_32_32.svg"/>
+				<!--<md-icon  class="example-icon">account_circle</md-icon>-->
+			</button>
+	    </span>
+	</md-toolbar>	
+</ng-template> 
+

ecm/Angular/ProteusECM/trunk/src/app/ecm-header/ecm-header.component.ts

- import { Component, Input, Output, Inject, OnInit, OnDestroy, AfterViewChecked, HostListener, ElementRef, ViewChild, trigger, state, animate, transition, style } from '@angular/core';
+import { Component, Input, Output, Inject, OnInit, OnDestroy, AfterViewChecked, ViewEncapsulation, HostListener, ElementRef, ViewChild, trigger, state, animate, transition, style } from '@angular/core';
 import { DOCUMENT } from '@angular/platform-browser';
 import { ActivatedRoute, Router,ActivatedRouteSnapshot,RoutesRecognized } from '@angular/router';
+import { MdDialog, MdDialogRef } from '@angular/material';
 
 import { Observable } from 'rxjs/Observable';
 import { Store } from '@ngrx/store';
 
 import { EcmStoreModel } from '../ecm-store/ecm-store.model';
+import { RESIZE_EVENT } from '../ecm-store/ecm-resize';
 
 import { ScrollService } from '../scroll.service';
 import 'rxjs/add/operator/filter';
@@ -18,6 +20,7 @@ declare var enableScroll: any;
   selector: 'ecm-header',
   templateUrl: './ecm-header.component.html',
   styleUrls: ['./ecm-header.component.css'],
+  encapsulation: ViewEncapsulation.None,
   animations: [
     trigger('l2dLogoTrans', [
        state('false' , style({ opacity: 1, transform : 'scale(1.0) translateY(0) ' })),
@@ -85,17 +88,23 @@ export class ECMHeaderComponent implements OnInit, OnDestroy, AfterViewChecked {
     @Input() headerFadeState = 'false';
     @ViewChild( 'userImage' ) userImage: ElementRef;
 
+    dialogRef:any;
+    selectedOption: string;
     userData: any;
     sideOption: any;
     cartItems = 0;
     cartCounter : Observable<number>;
     profileImageLink : string;
-
-    constructor( @Inject( DOCUMENT ) private document: Document, private route: ActivatedRoute, private router: Router, private scroll_service: ScrollService, private store: Store<EcmStoreModel>) { }
+    clientWidth: any;
+    constructor( @Inject( DOCUMENT ) private document: Document, private route: ActivatedRoute, private router: Router, private scroll_service: ScrollService, private store: Store<EcmStoreModel>, public dialog: MdDialog) { }
 
     ngOnInit() {
         console.log( 'ECMHeaderComponent onInit' );
         this.createUserData();
+        this.clientWidth = document.documentElement.clientWidth;
+        RESIZE_EVENT.subscribe(data => {
+            this.clientWidth = data;
+        });
     }
 
     ngOnDestroy() {
@@ -229,4 +238,44 @@ export class ECMHeaderComponent implements OnInit, OnDestroy, AfterViewChecked {
         console.log(this.userImage.nativeElement.src.indexOf('/ibase/'));
         console.log(this.userImage.nativeElement.src.indexOf('/ecm/'));
     }
+
+    openDialog(event) {
+        console.log('in open dialog event');
+        let dialogRef = this.dialog.open(ECMSearchDialog,{
+        	width:'100%',
+        	height:'60px',
+        	disableClose: true
+    	});
+      	dialogRef.updatePosition({ top:'0px', left: '0px' });
+      	dialogRef.afterClosed().subscribe(result => {
+      		this.selectedOption = result;
+    	});
+  	}
 }
+
+@Component({
+  selector: 'ecm-search-dialog',
+  templateUrl: './ecm-search-dialog.html',
+  styleUrls: ['./ecm-header.component.css'],
+})
+export class ECMSearchDialog {
+    
+    constructor(public dialogRef: MdDialogRef<ECMSearchDialog>) {}
+    
+    ngAfterViewChecked()
+    {   
+        let widthScreen = document.documentElement.clientWidth;
+        console.log('document client width: '+widthScreen);
+        if( widthScreen > 639)
+        {
+            this.dialogRef.close();
+        }
+    }
+    
+    closePanel()
+    {
+        console.log('Inside closePanel to hide dialogRef');
+        this.dialogRef.close();
+    }
+    
+} 

ecm/Angular/ProteusECM/trunk/src/app/ecm-header/ecm-search-dialog.html

+
+<span style="float:left;">
+	<button md-button class="square-button" (click)="dialogRef.close()" >
+	 	<i class="material-icons back-search">keyboard_backspace</i>
+	</button>
+</span>
+<ecm-search  [compFadeState]="headerFadeState" [headerState]="'mobile'"  (closePanel)="closePanel()"></ecm-search>