From c510ec864d0fbbf276b7a94c2c3e8b4e2aa2e913 Mon Sep 17 00:00:00 2001
From: Suzana Dirla <dirla.silvia.suzana@gmail.com>
Date: Fri, 3 Aug 2018 21:46:57 +0300
Subject: [PATCH] [ADF-3358] Header - update demo shell component (#3655)

* [ADF-3358] update demo-shell header component

* [ADF-3358] style demo-shell header component
---
 .../app-layout/app-layout.component.html      |  2 +-
 .../app-layout/app-layout.component.ts        |  4 ++++
 .../header-data/header-data.component.html    | 24 +++++++++++++++++--
 .../header-data/header-data.component.scss    | 23 ++++++++++++++----
 .../header-data/header-data.component.ts      | 13 ++++++++++
 .../header-data/header-data.service.ts        | 10 ++++++++
 6 files changed, 68 insertions(+), 8 deletions(-)

diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.html b/demo-shell/src/app/components/app-layout/app-layout.component.html
index 60b2879dc1..c4265b5d79 100644
--- a/demo-shell/src/app/components/app-layout/app-layout.component.html
+++ b/demo-shell/src/app/components/app-layout/app-layout.component.html
@@ -2,7 +2,7 @@
 
     <adf-sidenav-layout-header>
         <ng-template let-toggleMenu="toggleMenu">
-            <adf-layout-header  id="adf-header" [title]="title | translate" [redirectUrl]="['/home']" [logo]="logo" [tooltip]="title | translate" [showSidenavToggle]="showMenu" [color]="color" (clicked)=toggleMenu($event) >
+            <adf-layout-header  id="adf-header" [title]="title | translate" [redirectUrl]="redirectUrl" [logo]="logo" [tooltip]="tooltip | translate" [showSidenavToggle]="showMenu" [color]="color" (clicked)=toggleMenu($event) >
 
             <div class="adf-app-layout-menu-spacer"></div>
 
diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.ts b/demo-shell/src/app/components/app-layout/app-layout.component.ts
index b66797c1f6..2f718ed669 100644
--- a/demo-shell/src/app/components/app-layout/app-layout.component.ts
+++ b/demo-shell/src/app/components/app-layout/app-layout.component.ts
@@ -69,6 +69,8 @@ export class AppLayoutComponent implements OnInit {
     color = 'primary';
     title = 'APP_LAYOUT.APP_NAME';
     logo: string;
+    redirectUrl: string | any[] = ['/home'];
+    tooltip = 'APP_LAYOUT.APP_NAME';
 
     ngOnInit() {
         const expand = this.config.get<boolean>('sideNav.expandedSidenav');
@@ -84,6 +86,8 @@ export class AppLayoutComponent implements OnInit {
         this.headerService.color.subscribe(color => this.color = color);
         this.headerService.title.subscribe(title => this.title = title);
         this.headerService.logo.subscribe(path => this.logo = path);
+        this.headerService.redirectUrl.subscribe(redirectUrl => this.redirectUrl = redirectUrl);
+        this.headerService.tooltip.subscribe(tooltip => this.tooltip = tooltip);
     }
 
     constructor(
diff --git a/demo-shell/src/app/components/header-data/header-data.component.html b/demo-shell/src/app/components/header-data/header-data.component.html
index a277095c75..e6978a4fe1 100644
--- a/demo-shell/src/app/components/header-data/header-data.component.html
+++ b/demo-shell/src/app/components/header-data/header-data.component.html
@@ -1,14 +1,21 @@
 <div class="content header-data">
     <h1>Header data</h1>
     <mat-card>
-        <mat-checkbox [(ngModel)]="checkbox" (change)="hideButton()">Show menu button</mat-checkbox>
+        <div>
+            <mat-checkbox [(ngModel)]="checkbox" (change)="hideButton()">Show menu button</mat-checkbox>
+        </div>
 
         <div>
             <label>Choose header color</label>
             <select (change)="changeColor($event.target.value)">
                 <option value="primary">Primary</option>
                 <option value="accent">Accent</option>
+                <option value="warn">Warn</option>
             </select>
+            OR
+            <input type="text" name="color" (keyup.enter)="changeColor($event.target.value)" placeholder="hex color code">
+            <p>*Choose only one value at a time: either hex code or theme color.</p>
+            <p>*press enter for submitting new hex color</p>
         </div>
 
         <div>
@@ -19,8 +26,21 @@
 
         <div>
             <label>Change logo</label>
-            <input type="text" placeholder ="URL path" (keyup.enter)="submitLogo($event.target.value)" >
+            <input type="text" placeholder="URL path" (keyup.enter)="submitLogo($event.target.value)" >
             <p>*press enter for submitting new logo</p>
         </div>
+
+        <div>
+            <label>Change logo link</label>
+            <input type="url" placeholder="Redirect URL" (keyup.enter)="submitRedirectUrl($event.target.value)" >
+            <p>*Input JSON friendly array or explicit string. E.g. ["/test", 33, "user", 11] or "/test"</p>
+            <p>*press enter for submitting new link on logo</p>
+        </div>
+
+        <div>
+            <label>Change logo tooltip</label>
+            <input type="text" placeholder="Tooltip text" (keyup.enter)="submitTooltip($event.target.value)" >
+            <p>*press enter for submitting new tooltip</p>
+        </div>
     </mat-card>
 </div>
diff --git a/demo-shell/src/app/components/header-data/header-data.component.scss b/demo-shell/src/app/components/header-data/header-data.component.scss
index 2273052083..e01a19d89b 100644
--- a/demo-shell/src/app/components/header-data/header-data.component.scss
+++ b/demo-shell/src/app/components/header-data/header-data.component.scss
@@ -5,11 +5,24 @@
         max-width: 100% !important;
         max-height: 100% !important;
 
-        .mat-form-field, input, select {
-            display: block;
-            width: 100%;
-            height: 30px;
-            margin-bottom: 20px;
+        div {
+            padding: 0;
+            margin-bottom: 30px;
+
+            label {
+                font-weight: bold;
+            }
+
+            .mat-form-field, input, select {
+                display: block;
+                width: 100%;
+                height: 30px;
+                margin-bottom: 5px;
+            }
+
+            p {
+                margin: 0 0 5px 0;
+            }
         }
     }
 }
diff --git a/demo-shell/src/app/components/header-data/header-data.component.ts b/demo-shell/src/app/components/header-data/header-data.component.ts
index 62f29d8077..5128e7f863 100644
--- a/demo-shell/src/app/components/header-data/header-data.component.ts
+++ b/demo-shell/src/app/components/header-data/header-data.component.ts
@@ -46,4 +46,17 @@ export class HeaderDataComponent {
             this.headerService.changeLogo(logoPath);
         }
     }
+
+    submitRedirectUrl(value: string) {
+        const redirectUrl = JSON.parse(value);
+        if (redirectUrl) {
+            this.headerService.changeRedirectUrl(redirectUrl);
+        }
+    }
+
+    submitTooltip(tooltip: string) {
+        if (tooltip) {
+            this.headerService.changeTooltip(tooltip);
+        }
+    }
 }
diff --git a/demo-shell/src/app/components/header-data/header-data.service.ts b/demo-shell/src/app/components/header-data/header-data.service.ts
index 63f739b1a6..45085f23d7 100644
--- a/demo-shell/src/app/components/header-data/header-data.service.ts
+++ b/demo-shell/src/app/components/header-data/header-data.service.ts
@@ -10,6 +10,8 @@ export class HeaderDataService {
   @Output() color: EventEmitter<string> = new EventEmitter();
   @Output() title: EventEmitter<string> = new EventEmitter();
   @Output() logo: EventEmitter<string> = new EventEmitter();
+  @Output() redirectUrl: EventEmitter<string|any[]> = new EventEmitter();
+  @Output() tooltip: EventEmitter<string> = new EventEmitter();
 
   hideMenuButton() {
     this.show = !this.show;
@@ -28,4 +30,12 @@ export class HeaderDataService {
   changeLogo(logoPath: string) {
     this.logo.emit(logoPath);
   }
+
+  changeRedirectUrl(redirectUrl: string | any[]) {
+    this.redirectUrl.emit(redirectUrl);
+  }
+
+  changeTooltip(tooltip: string) {
+    this.tooltip.emit(tooltip);
+  }
 }