GUI -- Added theme listeners, so the instance panel can update the instances on a theme change.
Change-Id: If26d5a6ce9fadc02c7184c5ad4d252fc168300a8
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 77c70a6..f8e954d 100644
--- a/web/gui/src/main/webapp/app/fw/svg/svgUtil.js
+++ b/web/gui/src/main/webapp/app/fw/svg/svgUtil.js
@@ -140,8 +140,9 @@
var lightNorm = ['#3E5780', '#78533B', '#CB4D28', '#018D61', '#8A2979', '#006D73', '#56AF00'],
lightMute = ['#A8B8CC', '#CCB3A8', '#FFC2BD', '#96D6BF', '#D19FCE', '#8FCCCA', '#CAEAA4'],
- darkNorm = ['#3E5780', '#78533B', '#CB4D28', '#018D61', '#8A2979', '#006D73', '#56AF00'],
- darkMute = ['#A8B8CC', '#CCB3A8', '#FFC2BD', '#96D6BF', '#D19FCE', '#8FCCCA', '#CAEAA4'];
+ // let's try slightly brigher colors for dark normal..
+ darkNorm = ['#364D7F', '#7F5236', '#A93114', '#018D61', '#7E116D', '#02747A', '#378300'],
+ darkMute = ['#1B2645', '#432B1C', '#76220E', '#035433', '#560B4A', '#013A3E', '#2D6D00'];
var colors= {
light: {
diff --git a/web/gui/src/main/webapp/app/fw/util/theme.js b/web/gui/src/main/webapp/app/fw/util/theme.js
index 022ac0c..0e0ee64 100644
--- a/web/gui/src/main/webapp/app/fw/util/theme.js
+++ b/web/gui/src/main/webapp/app/fw/util/theme.js
@@ -20,11 +20,13 @@
(function () {
'use strict';
- var $log;
+ var $log, fs;
var themes = ['light', 'dark'],
themeStr = themes.join(' '),
- thidx;
+ thidx,
+ listeners = {},
+ nextListenerId = 1;
function init() {
thidx = 0;
@@ -59,16 +61,46 @@
}
function themeEvent(w) {
- // TODO: emit a theme-changed event
- var m = 'Theme-Change-('+w+'): ' + getTheme();
+ var t = getTheme(),
+ m = 'Theme-Change-('+w+'): ' + t;
$log.debug(m);
+ angular.forEach(listeners, function(value) {
+ value.cb(
+ {
+ event: 'themeChange',
+ value: t
+ }
+ );
+ });
}
- // TODO: add hook for theme-change listener
+ function addListener(callback) {
+ var id = nextListenerId++,
+ cb = fs.isF(callback),
+ o = { id: id, cb: cb };
+
+ if (cb) {
+ listeners[id] = o;
+ } else {
+ $log.error('ThemeService.addListener(): callback not a function');
+ o.error = 'No callback defined';
+ }
+ return o;
+ }
+
+ function removeListener(lsnr) {
+ var id = lsnr && lsnr.id,
+ o = listeners[id];
+ if (o) {
+ delete listeners[id];
+ }
+ }
angular.module('onosUtil')
- .factory('ThemeService', ['$log', function (_$log_) {
+ .factory('ThemeService', ['$log', 'FnService',
+ function (_$log_, _fs_) {
$log = _$log_;
+ fs = _fs_;
thidx = 0;
return {
@@ -80,7 +112,9 @@
setTheme(x);
}
},
- toggleTheme: toggleTheme
+ toggleTheme: toggleTheme,
+ addListener: addListener,
+ removeListener: removeListener
};
}]);
diff --git a/web/gui/src/main/webapp/app/view/topo/topoInst.js b/web/gui/src/main/webapp/app/view/topo/topoInst.js
index 7bd74f9..2ff51af 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoInst.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoInst.js
@@ -50,7 +50,8 @@
var onosInstances,
onosOrder,
oiShowMaster,
- oiBox;
+ oiBox,
+ themeListener;
// ==========================
@@ -291,9 +292,15 @@
onosInstances = {};
onosOrder = [];
oiShowMaster = false;
+
+ // we want to update the instances, each time the theme changes
+ themeListener = ts.addListener(updateInstances);
}
function destroyInst() {
+ ts.removeListener(themeListener);
+ themeListener = null;
+
ps.destroyPanel(idIns);
oiBox = null;
}