Bri Prebilic Cole
Committed by Gerrit Code Review

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 {
restrict: 'A',
scope: {
iconId: '@'
iconId: '@',
iconSize: '@'
},
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;
}
svg.embeddedIcon .icon.deviceOnline {
div.inline-icon {
display: inline-block;
}
.light svg.embeddedIcon .icon.deviceOnline {
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;
}
.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 {
stroke: black;
stroke-width: 1px;
}
.dark svg.embeddedIcon .icon rect {
stroke: #ccc;
}
......
......@@ -89,6 +89,7 @@
rx: cornerSize
});
if (gid !== '-') {
g.append('use').attr({
width: vboxSize,
height: vboxSize,
......@@ -96,6 +97,7 @@
'xlink:href': '#' + gid
});
}
}
function loadEmbeddedIcon(div, iconCls, size) {
loadIcon(div, iconCls, size, true);
......
......@@ -7,7 +7,12 @@
<thead>
<tr>
<th></th>
<th>URI</th>
<th>URI
<div class="inline-icon"
icon icon-id="tableColSortAsc"
icon-size="10">
</div>
</th>
<th>Vendor</th>
<th>Hardware Version</th>
<th>Software Version</th>
......
......@@ -65,12 +65,13 @@ describe('factory: fw/svg/icon.js', function() {
checkElemSize(rect, gsz);
expect(rect.attr('rx')).toEqual('5');
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 () {
expect(d3Elem.html()).toEqual('');
......@@ -84,4 +85,22 @@ describe('factory: fw/svg/icon.js', function() {
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');
});
});
......