GUI -- Added application view buttons. (WIP - require click handlers still)
- cleaned up icon.css rules.

Change-Id: If76f1e731da80e44391077c265f7671b07ef34db
diff --git a/web/gui/src/main/webapp/app/fw/svg/icon.css b/web/gui/src/main/webapp/app/fw/svg/icon.css
index 6d83da2..ca9837b 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon.css
+++ b/web/gui/src/main/webapp/app/fw/svg/icon.css
@@ -22,45 +22,49 @@
   display: none;
 }
 
-svg.embeddedIcon .icon .glyph {
+svg .svgIcon {
+    fill-rule: evenodd;
+}
+
+svg.embeddedIcon g.icon {
+    fill: none;
+}
+
+svg.embeddedIcon g.icon rect {
+    stroke: none;
+    fill: none;
+}
+
+svg.embeddedIcon g.icon .glyph {
     stroke: none;
     fill: white;
     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 {
-    fill: none;
+/* Sortable table headers */
+.light div.tableColSort svg.embeddedIcon .icon .glyph {
+    fill: black;
+}
+.dark div.tableColSort svg.embeddedIcon .icon .glyph {
+    fill: #ccc;
 }
 
-.dark svg.embeddedIcon .icon.appActive,
-.dark svg.embeddedIcon .icon.appInactive {
-    fill: none;
+
+/* color schemes for specific icon classes */
+
+svg.embeddedIcon .icon.appInactive .glyph {
+    fill: rgba(166, 166, 166, 0.52);
 }
 
 .light svg.embeddedIcon .icon.appActive .glyph {
     fill: green;
 }
 .dark svg.embeddedIcon .icon.appActive .glyph {
-    fill: #266610;
+    fill: #308C10;
 }
 
 
-.light svg.embeddedIcon .icon.deviceOnline,
-.light svg.embeddedIcon .icon.deviceOffline {
-    fill: none;
-}
-
-.dark svg.embeddedIcon .icon.deviceOnline,
-.dark svg.embeddedIcon .icon.deviceOffline {
-    fill: none;
-}
-
 .light svg.embeddedIcon .icon.devIcon_SWITCH {
     fill: #ccc;
 }
@@ -81,55 +85,8 @@
     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;
 }
diff --git a/web/gui/src/main/webapp/app/fw/svg/icon.js b/web/gui/src/main/webapp/app/fw/svg/icon.js
index 8a8b35f..b63cf64 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon.js
+++ b/web/gui/src/main/webapp/app/fw/svg/icon.js
@@ -31,6 +31,10 @@
     var glyphMapping = {
         appActive: 'checkMark',
         appInactive: 'unknown',
+        appPlus: 'plus',
+        appMinus: 'minus',
+        appPlay: 'play',
+        appStop: 'stop',
 
         deviceOnline: 'checkMark',
         deviceOffline: 'xMark',
@@ -176,14 +180,16 @@
     }
 
     function createSortIcon() {
-       function sortAsc(div) {
+        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) {
diff --git a/web/gui/src/main/webapp/app/view/app/app.css b/web/gui/src/main/webapp/app/view/app/app.css
index b30f488..9de3e17 100644
--- a/web/gui/src/main/webapp/app/view/app/app.css
+++ b/web/gui/src/main/webapp/app/view/app/app.css
@@ -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;
 }
diff --git a/web/gui/src/main/webapp/app/view/app/app.html b/web/gui/src/main/webapp/app/view/app/app.html
index c219eb8..eb3e547 100644
--- a/web/gui/src/main/webapp/app/view/app/app.html
+++ b/web/gui/src/main/webapp/app/view/app/app.html
@@ -1,6 +1,14 @@
 <!-- app partial HTML -->
 <div id="ov-app">
-    <h2>Applications ({{ctrl.appData.length}} total)</h2>
+    <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