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
diff --git a/web/gui/src/main/webapp/app/directives.js b/web/gui/src/main/webapp/app/directives.js
index bdaded8..29e555d 100644
--- a/web/gui/src/main/webapp/app/directives.js
+++ b/web/gui/src/main/webapp/app/directives.js
@@ -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);
}
};
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 a05493d..20d8440 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon.css
+++ b/web/gui/src/main/webapp/app/fw/svg/icon.css
@@ -23,20 +23,50 @@
}
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 {
- stroke: black;
- stroke-width: 1px;
+ stroke: black;
+ stroke-width: 1px;
+}
+.dark svg.embeddedIcon .icon rect {
+ stroke: #ccc;
}
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 45e77ce..d8c2584 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon.js
+++ b/web/gui/src/main/webapp/app/fw/svg/icon.js
@@ -89,12 +89,14 @@
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) {
diff --git a/web/gui/src/main/webapp/app/view/device/device.html b/web/gui/src/main/webapp/app/view/device/device.html
index 754aae9..08b40ec 100644
--- a/web/gui/src/main/webapp/app/view/device/device.html
+++ b/web/gui/src/main/webapp/app/view/device/device.html
@@ -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>
diff --git a/web/gui/src/main/webapp/tests/app/fw/svg/icon-spec.js b/web/gui/src/main/webapp/tests/app/fw/svg/icon-spec.js
index bb203a7..c887c79 100644
--- a/web/gui/src/main/webapp/tests/app/fw/svg/icon-spec.js
+++ b/web/gui/src/main/webapp/tests/app/fw/svg/icon-spec.js
@@ -65,13 +65,14 @@
checkElemSize(rect, gsz);
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 () {
expect(d3Elem.html()).toEqual('');
is.loadIcon(d3Elem, 'deviceOnline');
@@ -84,4 +85,22 @@
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');
+ });
+
});