GUI -- [TV-tweak] - moved green/red to end of color palette.
- icon rect fill on 'no-affinity' now pale blue (not off-white).
- dark theme masthead title now brighter.
Change-Id: I6f0818e0c70fec0a3400855257ebe5950351a940
diff --git a/web/gui/src/main/webapp/d3Utils.js b/web/gui/src/main/webapp/d3Utils.js
index c6d405c..2e49950 100644
--- a/web/gui/src/main/webapp/d3Utils.js
+++ b/web/gui/src/main/webapp/d3Utils.js
@@ -122,10 +122,11 @@
// --- Ordinal scales for 7 values.
// TODO: tune colors for light and dark themes
- var lightNorm = ['#1f77b4', '#2ca02c', '#d62728', '#9467bd', '#e377c2', '#bcbd22', '#17becf'],
- lightMute = ['#aec7e8', '#98df8a', '#ff9896', '#c5b0d5', '#f7b6d2', '#dbdb8d', '#9edae5'],
- darkNorm = ['#1f77b4', '#2ca02c', '#d62728', '#9467bd', '#e377c2', '#bcbd22', '#17becf'],
- darkMute = ['#aec7e8', '#98df8a', '#ff9896', '#c5b0d5', '#f7b6d2', '#dbdb8d', '#9edae5'];
+ // blue purple pink mustard cyan green red
+ var lightNorm = ['#1f77b4', '#9467bd', '#e377c2', '#bcbd22', '#17becf', '#2ca02c', '#d62728'],
+ lightMute = ['#aec7e8', '#c5b0d5', '#f7b6d2', '#dbdb8d', '#9edae5', '#98df8a', '#ff9896'],
+ darkNorm = ['#1f77b4', '#9467bd', '#e377c2', '#bcbd22', '#17becf', '#2ca02c', '#d62728'],
+ darkMute = ['#aec7e8', '#c5b0d5', '#f7b6d2', '#dbdb8d', '#9edae5', '#98df8a', '#ff9896'];
function cat7() {
var colors = {
diff --git a/web/gui/src/main/webapp/mast2.css b/web/gui/src/main/webapp/mast2.css
index fc3a3b7..4d108c9 100644
--- a/web/gui/src/main/webapp/mast2.css
+++ b/web/gui/src/main/webapp/mast2.css
@@ -51,7 +51,7 @@
color: #369;
}
.dark #mast span.title {
- color: #78a;
+ color: #acf;
}
#mast span.right {
diff --git a/web/gui/src/main/webapp/topo2.js b/web/gui/src/main/webapp/topo2.js
index 1acfd76..3c2f512 100644
--- a/web/gui/src/main/webapp/topo2.js
+++ b/web/gui/src/main/webapp/topo2.js
@@ -1799,27 +1799,36 @@
network.force.resume();
}
+ var dCol = {
+ black: '#000',
+ paleblue: '#acf',
+ offwhite: '#ddd',
+ midgrey: '#888',
+ lightgrey: '#bbb',
+ orange: '#f90'
+ };
+
// note: these are the device icon colors without affinity
- var deviceColor = {
- sel: '#f90',
+ var dColTheme = {
light: {
online: {
- glyph: '#000',
- rect: '#ddd',
+ glyph: dCol.black,
+ rect: dCol.paleblue
},
offline: {
- glyph: '#888',
- rect: '#bbb'
+ glyph: dCol.midgrey,
+ rect: dCol.lightgrey
}
},
+ // TODO: theme
dark: {
online: {
- glyph: '#000',
- rect: '#ddd'
+ glyph: dCol.black,
+ rect: dCol.paleblue
},
offline: {
- glyph: '#888',
- rect: '#bbb'
+ glyph: dCol.midgrey,
+ rect: dCol.lightgrey
}
}
};
@@ -1827,7 +1836,7 @@
function devBaseColor(d) {
var t = network.view.getTheme(),
o = d.online ? 'online' : 'offline';
- return deviceColor[t][o];
+ return dColTheme[t][o];
}
function setDeviceColor(d) {
@@ -1840,10 +1849,10 @@
if (s) {
g = c.glyph;
- r = deviceColor.sel;
+ r = dColTheme.sel;
} else if (colorAffinity) {
g = o ? a : c.glyph;
- r = o ? c.rect : a;
+ r = o ? dCol.offwhite : a;
} else {
g = c.glyph;
r = c.rect;