GUI -- TopoView - re-instated selection "glow" - themed (blue for light theme, yellow for dark theme).
Change-Id: I3994d22889285547688429e490f6fa73ae4c768a
diff --git a/web/gui/src/main/webapp/app/fw/svg/svgUtil.js b/web/gui/src/main/webapp/app/fw/svg/svgUtil.js
index b6c98f0..f4b9248 100644
--- a/web/gui/src/main/webapp/app/fw/svg/svgUtil.js
+++ b/web/gui/src/main/webapp/app/fw/svg/svgUtil.js
@@ -125,15 +125,42 @@
}
});
- return drag; }
+ return drag;
+ }
- function loadGlow() {
- $log.warn('SvgUtilService: loadGlow -- To Be Implemented');
+
+ function loadGlow(defs, r, g, b, id) {
+ var glow = defs.append('filter')
+ .attr('x', '-50%')
+ .attr('y', '-50%')
+ .attr('width', '200%')
+ .attr('height', '200%')
+ .attr('id', id);
+
+ glow.append('feColorMatrix')
+ .attr('type', 'matrix')
+ .attr('values',
+ '0 0 0 0 ' + r + ' ' +
+ '0 0 0 0 ' + g + ' ' +
+ '0 0 0 0 ' + b + ' ' +
+ '0 0 0 1 0 ');
+
+ glow.append('feGaussianBlur')
+ .attr('stdDeviation', 3)
+ .attr('result', 'coloredBlur');
+
+ glow.append('feMerge').selectAll('feMergeNode')
+ .data(['coloredBlur', 'SourceGraphic'])
+ .enter().append('feMergeNode')
+ .attr('in', String);
+ }
+
+ function loadGlowDefs(defs) {
+ loadGlow(defs, 0.0, 0.0, 0.7, 'blue-glow');
+ loadGlow(defs, 1.0, 1.0, 0.3, 'yellow-glow');
}
// --- Ordinal scales for 7 values.
- // TODO: tune colors for light and dark themes
- // Note: These colors look good on the white background. Still, need to tune for dark.
// blue brown brick red sea green purple dark teal lime
var lightNorm = ['#3E5780', '#78533B', '#CB4D28', '#018D61', '#8A2979', '#006D73', '#56AF00'],
@@ -249,7 +276,7 @@
return {
createDragBehavior: createDragBehavior,
- loadGlow: loadGlow,
+ loadGlowDefs: loadGlowDefs,
cat7: cat7,
translate: translate,
stripPx: stripPx,
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.css b/web/gui/src/main/webapp/app/view/topo/topo.css
index 845bf75..5b8c190 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.css
+++ b/web/gui/src/main/webapp/app/view/topo/topo.css
@@ -290,9 +290,11 @@
#topo-p-instance .onosInst.mastership.affinity {
opacity: 1.0;
}
-#topo-p-instance .onosInst.mastership.affinity svg rect {
- /* TODO: add blue glow */
- /*filter: url(#blue-glow);*/
+.light #topo-p-instance .onosInst.mastership.affinity svg rect {
+ filter: url(#blue-glow);
+}
+.dark #topo-p-instance .onosInst.mastership.affinity svg rect {
+ filter: url(#yellow-glow);
}
@@ -302,11 +304,15 @@
cursor: pointer;
}
-#ov-topo svg .node.selected rect,
-#ov-topo svg .node.selected circle {
+.light #ov-topo svg .node.selected rect,
+.light #ov-topo svg .node.selected circle {
fill: #f90;
- /* TODO: add blue glow filter */
- /*filter: url(#blue-glow);*/
+ filter: url(#blue-glow);
+}
+.dark #ov-topo svg .node.selected rect,
+.dark #ov-topo svg .node.selected circle {
+ fill: #f90;
+ filter: url(#yellow-glow);
}
#ov-topo svg .node text {
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.js b/web/gui/src/main/webapp/app/view/topo/topo.js
index 00b06d5..41edfc4 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.js
+++ b/web/gui/src/main/webapp/app/view/topo/topo.js
@@ -130,6 +130,7 @@
function setUpDefs() {
defs = svg.append('defs');
gs.loadDefs(defs);
+ sus.loadGlowDefs(defs);
}