GUI -- Added application view buttons. (WIP - require click handlers still)

- cleaned up icon.css rules.

Change-Id: If76f1e731da80e44391077c265f7671b07ef34db

@@ -22,45 +22,49 @@ svg#IconLibDefs {
   display: none;
 }
 
-svg.embeddedIcon .icon .glyph {
-    stroke: none;
-    fill: white;
+svg .svgIcon {
     fill-rule: evenodd;
 }
 
-/*
- FIXME: The following should be consolidated to result in much less CSS and
- not to require entries for every icon.
- */
-
-.light svg.embeddedIcon .icon.appActive,
-.light svg.embeddedIcon .icon.appInactive {
+svg.embeddedIcon g.icon {
     fill: none;
 }
 
-.dark svg.embeddedIcon .icon.appActive,
-.dark svg.embeddedIcon .icon.appInactive {
+svg.embeddedIcon g.icon rect {
+    stroke: none;
     fill: none;
 }
 
-.light svg.embeddedIcon .icon.appActive .glyph {
-    fill: green;
+svg.embeddedIcon g.icon .glyph {
+    stroke: none;
+    fill: white;
+    fill-rule: evenodd;
 }
-.dark svg.embeddedIcon .icon.appActive .glyph {
-    fill: #266610;
+
+
+/* Sortable table headers */
+.light div.tableColSort svg.embeddedIcon .icon .glyph {
+    fill: black;
+}
+.dark div.tableColSort svg.embeddedIcon .icon .glyph {
+    fill: #ccc;
 }
 
 
-.light svg.embeddedIcon .icon.deviceOnline,
-.light svg.embeddedIcon .icon.deviceOffline {
-    fill: none;
+/* color schemes for specific icon classes */
+
+svg.embeddedIcon .icon.appInactive .glyph {
+    fill: rgba(166, 166, 166, 0.52);
 }
 
-.dark svg.embeddedIcon .icon.deviceOnline,
-.dark svg.embeddedIcon .icon.deviceOffline {
-    fill: none;
+.light svg.embeddedIcon .icon.appActive .glyph {
+    fill: green;
+}
+.dark svg.embeddedIcon .icon.appActive .glyph {
+    fill: #308C10;
 }
 
+
 .light svg.embeddedIcon .icon.devIcon_SWITCH {
     fill: #ccc;
 }
@@ -81,55 +85,8 @@ svg.embeddedIcon .icon .glyph {
     fill: darkred;
 }
 .dark svg.embeddedIcon .icon.deviceOnline .glyph {
-    fill: #266610;
+    fill: #308C10;
 }
 .dark svg.embeddedIcon .icon.deviceOffline .glyph {
-    fill: #610000;
-}
-
-.light svg.embeddedIcon .icon.tableColSortAsc .glyph,
-.light svg.embeddedIcon .icon.tableColSortDesc .glyph {
-    fill: black;
-}
-.dark svg.embeddedIcon .icon.tableColSortAsc .glyph,
-.dark svg.embeddedIcon .icon.tableColSortDesc .glyph {
-    fill: #ccc;
-}
-
-.light svg.embeddedIcon .icon.appActive rect,
-.light svg.embeddedIcon .icon.appInactive rect,
-.dark svg.embeddedIcon .icon.appActive rect,
-.dark svg.embeddedIcon .icon.appInactive rect,
-.light svg.embeddedIcon .icon.deviceOnline rect,
-.light svg.embeddedIcon .icon.deviceOffline rect,
-.dark svg.embeddedIcon .icon.deviceOnline rect,
-.dark svg.embeddedIcon .icon.deviceOffline rect {
-    stroke: none;
-    fill: none;
-}
-
-svg.embeddedIcon .icon.tableColSortAsc rect,
-svg.embeddedIcon .icon.tableColSortDesc rect {
-    stroke: none;
-    fill: none;
-}
-
-svg.embeddedIcon .icon rect {
-    stroke: black;
-    stroke-width: 1px;
-}
-.dark svg.embeddedIcon .icon.deviceOnline rect
-.dark svg.embeddedIcon .icon.deviceOffline rect {
-    stroke: none;
-}
-.dark svg.embeddedIcon .icon rect {
-    stroke: #ccc;
-}
-.dark svg.embeddedIcon .icon.tableColSortAsc rect,
-.dark svg.embeddedIcon .icon.tableColSortDesc rect {
-    stroke: none;
-}
-
-svg .svgIcon {
-    fill-rule: evenodd;
+    fill: #AD2D2D;
 }

@@ -31,6 +31,10 @@
     var glyphMapping = {
         appActive: 'checkMark',
         appInactive: 'unknown',
+        appPlus: 'plus',
+        appMinus: 'minus',
+        appPlay: 'play',
+        appStop: 'stop',
 
         deviceOnline: 'checkMark',
         deviceOffline: 'xMark',
@@ -179,11 +183,13 @@
         function sortAsc(div) {
             div.style('display', 'inline-block');
             loadEmbeddedIcon(div, 'tableColSortAsc', 10);
+            div.classed('tableColSort', true);
         }
 
         function sortDesc(div) {
             div.style('display', 'inline-block');
             loadEmbeddedIcon(div, 'tableColSortDesc', 10);
+            div.classed('tableColSort', true);
         }
 
         function sortNone(div) {

@@ -18,5 +18,40 @@
  ONOS GUI -- Host View -- CSS file
  */
 
-#ov-app td {
+#ov-app h2 {
+    display: inline-block;
+}
+
+#ov-app div.ctrl-btns {
+    display:inline-block;
+    float: right;
+    width: 200px;
+    height: 44px;
+    margin-right: 24px;
+    margin-top: 7px;
+}
+
+div.ctrl-btns div {
+    display: inline-block;
+    padding: 4px;
+    cursor: pointer;
+}
+
+.light div.ctrl-btns div svg.embeddedIcon g.icon use {
+    fill: white;
+}
+.dark div.ctrl-btns div svg.embeddedIcon g.icon use {
+    fill: #333;
+}
+
+.light div.ctrl-btns div svg.embeddedIcon g.icon rect {
+    fill: #dde;
+}
+.dark div.ctrl-btns div svg.embeddedIcon g.icon rect {
+    fill: #556;
+}
+
+/* rows are selectable */
+table.summary-list td {
+    cursor: pointer;
 }

 <!-- app partial HTML -->
 <div id="ov-app">
+    <div>
         <h2>Applications ({{ctrl.appData.length}} total)</h2>
+        <div class="ctrl-btns">
+            <div icon icon-size="36" icon-id="appPlus"></div>
+            <div icon icon-size="36" icon-id="appMinus"></div>
+            <div icon icon-size="36" icon-id="appPlay"></div>
+            <div icon icon-size="36" icon-id="appStop"></div>
+        </div>
+    </div>
     <table class="summary-list"
            onos-fixed-header
            onos-sortable-header