GUI -- Toolbar and ButtonService appearance work - styled light and dark themed buttons and toolbar.
Change-Id: I07f2d6adcf5a028fa76f50301d6bdfd1e75b1188
diff --git a/web/gui/src/main/webapp/app/fw/widget/button.css b/web/gui/src/main/webapp/app/fw/widget/button.css
index e4439b6e0..f14e1f7 100644
--- a/web/gui/src/main/webapp/app/fw/widget/button.css
+++ b/web/gui/src/main/webapp/app/fw/widget/button.css
@@ -18,8 +18,64 @@
ONOS GUI -- Button Service -- CSS file
*/
-.btn svg.embeddedIcon,
-.tog svg.embeddedIcon,
-.rad svg.embeddedIcon {
+.light .tbarArrow svg.embeddedIcon .icon.tableColSortAsc .glyph {
+ fill: #838383;
+}
+.dark .tbarArrow svg.embeddedIcon .icon.tableColSortAsc .glyph {
+ fill: #B2B2B2;
+}
+
+.button,
+.toggleButton,
+.radioSet,
+.separator {
+ display: inline-block;
+}
+.button,
+.toggleButton {
+ padding: 0 4px 0 4px;
+}
+.radioSet .toggleButton {
+ padding: 0 0 0 4px;
+}
+
+.button svg.embeddedIcon,
+.toggleButton svg.embeddedIcon {
cursor: pointer;
}
+.button svg.embeddedIcon .icon rect,
+.toggleButton svg.embeddedIcon .icon rect {
+ stroke: none;
+}
+
+/* Selected button color */
+.light .button svg.embeddedIcon,
+.light .toggleButton.selected svg.embeddedIcon {
+ fill: #838383;
+}
+.light .button svg.embeddedIcon .glyph,
+.light .toggleButton.selected svg.embeddedIcon .glyph {
+ fill: white;
+}
+.dark .button svg.embeddedIcon,
+.dark .toggleButton.selected svg.embeddedIcon {
+ fill: #151515;
+}
+.dark .button svg.embeddedIcon .glyph,
+.dark .toggleButton.selected svg.embeddedIcon .glyph {
+ fill: #B2B2B2;
+}
+
+/* Unselected button color */
+.light .toggleButton svg.embeddedIcon {
+ fill: #eee;
+}
+.light .toggleButton svg.embeddedIcon .glyph {
+ fill: #bbb;
+}
+.dark .toggleButton svg.embeddedIcon {
+ fill: #303030;
+}
+.dark .toggleButton svg.embeddedIcon .glyph {
+ fill: #565656;
+}
diff --git a/web/gui/src/main/webapp/app/fw/widget/button.js b/web/gui/src/main/webapp/app/fw/widget/button.js
index 1a906c3..445c107 100644
--- a/web/gui/src/main/webapp/app/fw/widget/button.js
+++ b/web/gui/src/main/webapp/app/fw/widget/button.js
@@ -38,7 +38,7 @@
return null;
}
- var btnDiv = createDiv(div, 'btn', id),
+ var btnDiv = createDiv(div, 'button', id),
cbFnc = fs.isF(cb) || noop;
is.loadIcon(btnDiv, gid, btnSize, true);
@@ -59,10 +59,11 @@
}
var sel = !!initState,
- togDiv = createDiv(div, 'tog', id),
+ togDiv = createDiv(div, 'toggleButton', id),
cbFnc = fs.isF(cb) || noop;
is.loadIcon(togDiv, gid, btnSize, true);
+ togDiv.classed('selected', sel);
function _toggle(b) {
if (b === undefined) {
@@ -71,6 +72,7 @@
sel = !!b;
}
cbFnc(sel);
+ togDiv.classed('selected', sel);
}
togDiv.on('click', _toggle);
@@ -83,6 +85,7 @@
}
}
+ // TODO: fix radio button on click selecting functionality
function radioSet(div, id, rset) {
if (!div) {
$log.warn('Radio buttons cannot append to div');
@@ -96,7 +99,7 @@
$log.warn('Cannot create radio button set from empty array');
return null;
}
- var rDiv = div.append('div').classed('rset', true),
+ var rDiv = div.append('div').classed('radioSet', true),
sel = 0,
rads = [];
@@ -107,7 +110,7 @@
rtog = toggle(rDiv, rbtn.id, rbtn.gid, istate,
rbtn.cb, rbtn.tooltip);
- rtog.el = (rtog.el).classed('tog', false).classed('rad', true);
+ rtog.el.classed('radioButton', true);
rads.push(rtog);
});
diff --git a/web/gui/src/main/webapp/app/fw/widget/toolbar.css b/web/gui/src/main/webapp/app/fw/widget/toolbar.css
index e7db3de..43f3124 100644
--- a/web/gui/src/main/webapp/app/fw/widget/toolbar.css
+++ b/web/gui/src/main/webapp/app/fw/widget/toolbar.css
@@ -18,16 +18,15 @@
ONOS GUI -- Toolbar Service -- CSS file
*/
-.floatpanel.toolbar {
- position: absolute;
- z-index: 100;
- display: block;
- width: 200px;
- opacity: 0;
-
- padding: 10px;
- font-size: 10pt;
-
- -moz-border-radius: 6px;
- border-radius: 6px;
+.separator {
+ border: 1px solid;
+ margin: 0 4px 0 4px;
}
+.light .separator {
+ border-color: #ddd;
+}
+
+.dark .separator {
+ border-color: #1A1A1A;
+
+}
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/app/fw/widget/toolbar.js b/web/gui/src/main/webapp/app/fw/widget/toolbar.js
index aeac9a0..edd1cdc 100644
--- a/web/gui/src/main/webapp/app/fw/widget/toolbar.js
+++ b/web/gui/src/main/webapp/app/fw/widget/toolbar.js
@@ -28,6 +28,7 @@
width: 400,
margin: 0,
hideMargin: -20,
+ top: '80%',
fade: false
},
settings,
@@ -73,7 +74,6 @@
'transform': 'translate(-50%, -50%)',
'cursor': 'pointer'});
is.loadEmbeddedIcon(tbarArrowDiv, 'tableColSortAsc', arrowSize);
- rotateArrowLeft();
tbarArrowDiv.on('click', toggleTools);
}
@@ -107,8 +107,8 @@
return null;
}
return tbarDiv.append('div')
- .classed('sep', true)
- .style('width', '2px');
+ .classed('separator', true)
+ .style('height', '23px');
}
// === Main toolbar API functions ----------------------------
@@ -126,7 +126,7 @@
tbarPanel = ps.createPanel(tbarId, settings);
tbarDiv = tbarPanel.classed('toolbar', true)
- .style('position', 'relative');
+ .style('top', settings.top);
createArrow();
diff --git a/web/gui/src/main/webapp/app/view/sample/sample.js b/web/gui/src/main/webapp/app/view/sample/sample.js
index 9a99291..459b86d 100644
--- a/web/gui/src/main/webapp/app/view/sample/sample.js
+++ b/web/gui/src/main/webapp/app/view/sample/sample.js
@@ -31,8 +31,13 @@
self.message = 'Hey there folks!';
- var toolbar = tbs.createToolbar('sample');
+ var toolbar = tbs.createToolbar('sample'),
+ rset = [{ gid: 'switch', cb: function () {}},
+ { gid: 'bird', cb: function () {}}];
toolbar.addButton('some-btn', 'crown', function () {});
+ toolbar.addToggle('some-tog', 'chain', function () {});
+ toolbar.addSeparator();
+ toolbar.addRadioSet('some-rad', rset);
toolbar.show();
$log.log('OvSampleCtrl has been created');