Sidebar icons are now highlighted and focus works when instrumented from backend

src/app/dashboard/dashboard.component.ts

@@ -1,22 +1,26 @@
-import { Component, OnDestroy, OnInit, ChangeDetectorRef } from '@angular/core';
+import { Component, OnDestroy, OnInit, ChangeDetectorRef, ViewChild, AfterViewInit } from '@angular/core';
 import { DeploymentNotificationService } from '../services/deployment-notification.service';
 import { Subscription } from 'rxjs/Subscription';
 import { WebSocketService } from '../services/websocket.service';
 import { LayoutCommand } from './layout-command';
 import { config } from '../config';
+import { SidebarComponent } from '../sidebar/sidebar.component';
 
 @Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss']
 })
-export class DashboardComponent implements OnInit, OnDestroy {
+export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   deploying = false;
   deploymentNotificationSubscription: Subscription;
   enabledLayouts: Set<string> = config.dashboard.enabledLayouts;
   layout: string = config.dashboard.currentLayout ;
   command_handlers = {'layout': this.layoutHandler.bind(this)};
 
+  @ViewChild(SidebarComponent)
+  private sidebarComponent: SidebarComponent;
+
   constructor(private deploymentNotificationService: DeploymentNotificationService,
               private webSocketService: WebSocketService,
               private changeDetectorRef: ChangeDetectorRef) {}
@@ -32,6 +36,10 @@ export class DashboardComponent implements OnInit, OnDestroy {
     );
   }
 
+  ngAfterViewInit() {
+    this.layout = this.sidebarComponent.layout;
+  }
+
   layoutHandler(data: LayoutCommand) {
     if (this.enabledLayouts.has(data.layout)) {
       this.layout = data.layout;

src/app/sidebar/sidebar.component.html

@@ -1,7 +1,11 @@
 <div class="tfw-ide-pin" *ngFor="let layoutIter of enabledLayouts">
 
   <div>
-    <button [class.focus]="layout === layoutIter" class="btn"><img src="images/{{layoutIter}}.svg"></button>
+    <button [class.active]="layout === layoutIter"
+            (active)="layout === layoutIter"
+            (focus)="layout === layoutIter"
+            (click)="setLayout(layoutIter)"
+            class="btn"><img src="images/{{layoutIter}}.svg"></button>
   </div>
 
 </div>

src/app/sidebar/sidebar.component.scss

@@ -1,7 +1,6 @@
 @import "../../assets/scss/variables.scss";
 @import "../../assets/scss/mixins/layout.scss";
 
-
 .tfw-ide-pin {
 
   button {
@@ -15,14 +14,19 @@
     box-shadow: 0 4px 8px 0 rgba($tao-gray-500, 0.2), 0 4px 10px 0 rgba($tao-gray-500, 0.09);
 
     &:hover,
-    &:focus {
+    &:focus,
-      box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.2), 0 8px 20px 0 rgba($tao-blue-500, 0.29);
+    &:active,
+    &.active {
+      box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.4), 0 8px 20px 0 rgba($tao-blue-500, 0.39);
       border: 1px solid $tao-blue-200;
     }
 
-    &:focus {
+    &:focus,
+    &:active,
+    &.active {
+      outline: none;
       width: 48px;
     }
-  }
 
+  }
 }

src/app/sidebar/sidebar.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, Output, OnInit } from '@angular/core';
 import { config } from '../config';
 
 @Component({
@@ -8,10 +8,13 @@ import { config } from '../config';
 })
 
 export class SidebarComponent implements OnInit {
-  @Input() layout: string;
+  @Input() @Output() layout: string;
   enabledLayouts: Set<string> = config.dashboard.enabledLayouts;
   constructor() {}
   ngOnInit() {
   }
 
+  setLayout(layout: string) {
+    this.layout = layout;
+  }
 }