GUI2 add in support for Preferences Service

Change-Id: Icdf2165d9f638aeff1b110a64777b93295935ed2
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.css b/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.css
index 9ddfe17..05402c8 100644
--- a/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.css
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.css
@@ -17,8 +17,16 @@
 
 #topo2-p-detail {
     padding: 16px;
-    top: 370px;
+    opacity: 1;
+    right: 20px;
+    width: 260px;
+    top: 390px;
 }
+
+#topo2-p-detail  div.actionBtns {
+    padding-top: 6px;
+}
+
 html[data-platform='iPad'] {
     top: 386px;
 }
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.html b/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.html
index 405fdfc..ca23ca1 100644
--- a/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.html
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.html
@@ -14,7 +14,7 @@
 ~ limitations under the License.
 -->
 <div id="topo2-p-detail" class="floatpanel topo2-p"
-     style="opacity: 1; right: 20px; width: 260px; top: 350px;" [@detailsPanelState]="on">
+     [@detailsPanelState]="on && selectedNode !== undefined">
     <!-- Template explanation - Create a HTML header which has an SVG icon along
     side title text. -->
     <div class="header">
@@ -53,15 +53,13 @@
             The icons used here are loaded in the ForceSvgComponent
             -->
             <div *ngFor="let btn of showDetails?.buttons" class="actionBtn">
-                <div class="button" id="topo2-p-detail-core-{{ btn }}"
-                     (click)="navto(buttonAttribs(btn).path, showDetails.navPath, showDetails.id)">
-                    <onos-icon
-                            [iconSize]="25"
-                            [iconId]="buttonAttribs(btn).gid"
-                            [toolTip]="lionFn(buttonAttribs(btn).tt)"
-                            classes="icon">
-                    </onos-icon>
-                </div>
+                <onos-icon id="topo2-p-detail-core-{{ btn }}"
+                           (click)="navto(buttonAttribs(btn).path, showDetails.navPath, showDetails.id)"
+                        [iconSize]="25"
+                        [iconId]="buttonAttribs(btn).gid"
+                        [toolTip]="lionFn(buttonAttribs(btn).tt)"
+                        classes="button icon selected">
+                </onos-icon>
             </div>
         </div>
     </div>
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.ts b/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.ts
index f63d99a..ea1462c 100644
--- a/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.ts
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.ts
@@ -110,6 +110,7 @@
 })
 export class DetailsComponent extends DetailsPanelBaseImpl implements OnInit, OnDestroy, OnChanges {
     @Input() selectedNode: UiElement = undefined; // Populated when user selects node or link
+    @Input() on: boolean = false; // Override the parent class attribute
 
     // deferred localization strings
     lionFn; // Function
@@ -141,7 +142,6 @@
      * is made
      */
     ngOnInit(): void {
-        this.on = false;
         this.wss.bindHandlers(new Map<string, (data) => void>([
             ['showDetails', (data) => {
                     this.showDetails = data;
@@ -211,8 +211,6 @@
             } else {
                 this.log.warn('Unexpected type for selected element', this.selectedNode);
             }
-        } else {
-            this.log.warn('Unexpected change in Topo DetailsComponent');
         }
     }