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);
                 }
                 }
             };
             };
 
 

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

@@ -89,12 +89,14 @@
                     rx: cornerSize
                     rx: cornerSize
                 });
                 });
 
 
-                g.append('use').attr({
-                    width: vboxSize,
-                    height: vboxSize,
-                    'class': 'glyph',
-                    'xlink:href': '#' + gid
-                });
+                if (gid !== '-') {
+                    g.append('use').attr({
+                        width: vboxSize,
+                        height: vboxSize,
+                        'class': 'glyph',
+                        'xlink:href': '#' + gid
+                    });
+                }
             }
             }
 
 
             function loadEmbeddedIcon(div, iconCls, size) {
             function loadEmbeddedIcon(div, iconCls, size) {

@@ -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,13 +65,14 @@ 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');
 
 
-        var use = g.select('use');
-        expect(use.classed('glyph')).toBeTruthy();
-        expect(use.attr('xlink:href')).toEqual(useHref);
-        checkElemSize(use, gsz);
+        if (useHref) {
+            var use = g.select('use');
+            expect(use.classed('glyph')).toBeTruthy();
+            expect(use.attr('xlink:href')).toEqual(useHref);
+            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('');
         is.loadIcon(d3Elem, 'deviceOnline');
         is.loadIcon(d3Elem, 'deviceOnline');
@@ -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');
+    });
+
 });
 });