[ADF-3358] Header - update demo shell component (#3655)

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

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

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>
 

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(

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>
+        <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>

demo-shell/src/app/components/header-data/header-data.component.scss

@@ -5,11 +5,24 @@
         max-width: 100% !important;
         max-height: 100% !important;
 
+        div {
+            padding: 0;
+            margin-bottom: 30px;
+
+            label {
+                font-weight: bold;
+            }
+
             .mat-form-field, input, select {
                 display: block;
                 width: 100%;
                 height: 30px;
-            margin-bottom: 20px;
+                margin-bottom: 5px;
+            }
+
+            p {
+                margin: 0 0 5px 0;
+            }
         }
     }
 }

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);
+        }
+    }
 }

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);
+  }
 }