mirrors/onos
1
0
Fork 0
mirror of https://github.com/opennetworkinglab/onos.git synced 2025-10-22 12:51:09 +02:00
Code Issues Projects Releases Wiki Activity

GUI -- Implemented loadIcon() in the IconService.

Browse Source 
Change-Id: Ib19e9ee01d0c015a2ba6f0431bc0d84adf530efd
This commit is contained in:
Simon Hunt 2015-01-16 17:43:00 -08:00
parent 58f23bbf01
commit 7f172cc053
3 changed files with 98 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/gui/src/main/webapp/_sdh/embedded-icon.html
View File

@ -72,7 +72,7 @@
<div>
<table class="summary-list">
<tr> <th>One</th> <th>Two</th> <th>Three</th> </tr>
<tr> <th></th> <th>Two</th> <th>Three</th> </tr>
<tr>
<td>
<div icon icon-id="deviceOnline">

45
web/gui/src/main/webapp/app/fw/svg/icon.js
View File

@ -22,14 +22,53 @@
(function () {
'use strict';
var $log;
var $log, fs;
var viewBoxDim = 50,
viewBox = '0 0 ' + viewBoxDim + ' ' + viewBoxDim;
// maps icon id to the glyph id it uses.
// note: icon id maps to a CSS class for styling that icon
var glyphMapping = {
deviceOnline: 'checkMark',
deviceOffline: 'xMark'
};
angular.module('onosSvg')
.factory('IconService', ['$log', function (_$log_) {
.factory('IconService', ['$log', 'FnService', function (_$log_, _fs_) {
$log = _$log_;
fs = _fs_;
// div is a D3 selection of the <DIV> element into which icon should load
// iconCls is the CSS class used to identify the icon
// size is dimension of icon in pixels. Defaults to 20.
function loadIcon(div, iconCls, size) {
var dim = size || 20,
gid = glyphMapping[iconCls] || 'unknown';
var svg = div.append('svg').attr({
width: dim,
height: dim,
viewBox: viewBox
});
var g = svg.append('g').attr({
'class': 'icon ' + iconCls
});
g.append('rect').attr({
width: viewBoxDim,
height: viewBoxDim,
rx: 4
});
g.append('use').attr({
width: viewBoxDim,
height: viewBoxDim,
'class': 'glyph',
'xlink:href': '#' + gid
});
}
return {
tbd: function () {}
loadIcon: loadIcon
};
}]);

57
web/gui/src/main/webapp/tests/app/fw/svg/icon-spec.js
View File

@ -20,17 +20,70 @@
@author Simon Hunt
*/
describe('factory: fw/svg/icon.js', function() {
var is;
var is, d3Elem;
var viewBox = '0 0 50 50',
glyphSize = '50',
iconSize = '20';
beforeEach(module('onosSvg'));
beforeEach(inject(function (IconService) {
is = IconService;
d3Elem = d3.select('body').append('div').attr('id', 'myDiv');
}));
afterEach(function () {
d3.select('#myDiv').remove();
});
it('should define IconService', function () {
expect(is).toBeDefined();
});
// TODO: unit tests for icon functions
function checkElemSize(elem, dim) {
expect(elem.attr('width')).toEqual(dim);
expect(elem.attr('height')).toEqual(dim);
}
function verifyIconStructure(iconClass, useHref, iSize, vBox, gSize) {
var isz = iSize || iconSize,
vbx = vBox || viewBox,
gsz = gSize || glyphSize;
var svg = d3Elem.selectAll('svg');
expect(svg.size()).toBe(1);
checkElemSize(svg, isz);
expect(svg.attr('viewBox')).toEqual(vbx);
var g = svg.selectAll('g');
expect(g.size()).toBe(1);
expect(g.classed('icon')).toBeTruthy();
expect(g.classed(iconClass)).toBeTruthy();
var rect = g.select('rect');
expect(rect.size()).toBe(1);
checkElemSize(rect, gsz);
expect(rect.attr('rx')).toEqual('4');
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');
verifyIconStructure('deviceOnline', '#checkMark');
});
it('should allow us to specify the icon size', function () {
expect(d3Elem.html()).toEqual('');
is.loadIcon(d3Elem, 'deviceOffline', 32);
verifyIconStructure('deviceOffline', '#xMark', '32');
});
});