GUI -- Icon service work:

- Changed color of check and xmark icons for dark and light themes.
- Only appends glyphs that don't have a "-" as the name.
- Wrote unit tests for new icons.

Change-Id: Ia21fa33673e3adcfd8717f899d226b0d24dfcc51

@@ -61,10 +61,12 @@
             return {
             return {
                 restrict: 'A',
                 restrict: 'A',
                 scope: {
                 scope: {
-                    iconId: '@'
+                    iconId: '@',
+                    iconSize: '@'
                 },
                 },
                 link: function (scope, element, attrs) {
                 link: function (scope, element, attrs) {
-                    is.loadEmbeddedIcon(d3.select(element[0]), scope.iconId);
+                    is.loadEmbeddedIcon(d3.select(element[0]),
+                                        scope.iconId, scope.iconSize);
                 }
                 }
             };
             };
 
 

@@ -28,15 +28,45 @@ svg.embeddedIcon .icon .glyph {
     fill-rule: evenodd;
     fill-rule: evenodd;
 }
 }
 
 
-svg.embeddedIcon .icon.deviceOnline {
+div.inline-icon {
+    display: inline-block;
+}
+
+.light svg.embeddedIcon .icon.deviceOnline {
     fill: green;
     fill: green;
 }
 }
+.light svg.embeddedIcon .icon.deviceOffline {
+    fill: darkred;
+}
 
 
-svg.embeddedIcon .icon.deviceOffline {
+.dark svg.embeddedIcon .icon.deviceOnline,
+.dark svg.embeddedIcon .icon.deviceOffline {
+    fill: #ccc;
+}
+.dark svg.embeddedIcon .icon.deviceOnline .glyph {
+    fill: green;
+}
+.dark svg.embeddedIcon .icon.deviceOffline .glyph {
     fill: darkred;
     fill: darkred;
 }
 }
 
 
+.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;
+}
+
+svg.embeddedIcon .icon.tableColSortAsc rect {
+    stroke: none;
+    fill: none;
+}
 svg.embeddedIcon .icon rect {
 svg.embeddedIcon .icon rect {
     stroke: black;
     stroke: black;
     stroke-width: 1px;
     stroke-width: 1px;
 }
 }
+.dark svg.embeddedIcon .icon rect {
+    stroke: #ccc;
+}

@@ -89,6 +89,7 @@
                     rx: cornerSize
                     rx: cornerSize
                 });
                 });
 
 
+                if (gid !== '-') {
                     g.append('use').attr({
                     g.append('use').attr({
                         width: vboxSize,
                         width: vboxSize,
                         height: vboxSize,
                         height: vboxSize,
@@ -96,6 +97,7 @@
                         'xlink:href': '#' + gid
                         'xlink:href': '#' + gid
                     });
                     });
                 }
                 }
+            }
 
 
             function loadEmbeddedIcon(div, iconCls, size) {
             function loadEmbeddedIcon(div, iconCls, size) {
                 loadIcon(div, iconCls, size, true);
                 loadIcon(div, iconCls, size, true);

@@ -7,7 +7,12 @@
         <thead>
         <thead>
             <tr>
             <tr>
                 <th></th>
                 <th></th>
-                <th>URI</th>
+                <th>URI
+                    <div class="inline-icon"
+                         icon icon-id="tableColSortAsc"
+                         icon-size="10">
+                    </div>
+                </th>
                 <th>Vendor</th>
                 <th>Vendor</th>
                 <th>Hardware Version</th>
                 <th>Hardware Version</th>
                 <th>Software Version</th>
                 <th>Software Version</th>

@@ -65,12 +65,13 @@ describe('factory: fw/svg/icon.js', function() {
         checkElemSize(rect, gsz);
         checkElemSize(rect, gsz);
         expect(rect.attr('rx')).toEqual('5');
         expect(rect.attr('rx')).toEqual('5');
 
 
+        if (useHref) {
             var use = g.select('use');
             var use = g.select('use');
             expect(use.classed('glyph')).toBeTruthy();
             expect(use.classed('glyph')).toBeTruthy();
             expect(use.attr('xlink:href')).toEqual(useHref);
             expect(use.attr('xlink:href')).toEqual(useHref);
             checkElemSize(use, gsz);
             checkElemSize(use, gsz);
         }
         }
-
+    }
 
 
     it('should load an icon into a div', function () {
     it('should load an icon into a div', function () {
         expect(d3Elem.html()).toEqual('');
         expect(d3Elem.html()).toEqual('');
@@ -84,4 +85,22 @@ describe('factory: fw/svg/icon.js', function() {
         verifyIconStructure('deviceOffline', '#xMark', '32');
         verifyIconStructure('deviceOffline', '#xMark', '32');
     });
     });
 
 
+    it('should verify triangleUp icon', function () {
+        expect(d3Elem.html()).toEqual('');
+        is.loadIcon(d3Elem, 'tableColSortAsc', 10);
+        verifyIconStructure('tableColSortAsc', '#triangleUp', '10');
+    });
+
+    it('should verify triangleDown icon', function () {
+        expect(d3Elem.html()).toEqual('');
+        is.loadIcon(d3Elem, 'tableColSortDesc', 10);
+        verifyIconStructure('tableColSortDesc', '#triangleDown', '10');
+    });
+
+    it('should verify no icon is displayed', function () {
+        expect(d3Elem.html()).toEqual('');
+        is.loadIcon(d3Elem, 'tableColSortNone', 10);
+        verifyIconStructure('tableColSortNone', null, '10');
+    });
+
 });
 });