GUI -- Toolbar dynamically sizes based on added contents, adjusted CSS padding, minor radio button edit.
Change-Id: I52c3ef8af13a2b743cf7d71a83d42d7c9b5e5d6b
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 4ae4954..9b4c519 100644
--- a/web/gui/src/main/webapp/app/fw/widget/button.css
+++ b/web/gui/src/main/webapp/app/fw/widget/button.css
@@ -18,6 +18,9 @@
ONOS GUI -- Button Service -- CSS file
*/
+.tbarArrow {
+ padding: 0 10px 0 10px;
+}
.light .tbarArrow svg.embeddedIcon .icon.tableColSortAsc .glyph {
fill: #838383;
}
@@ -27,18 +30,13 @@
.button,
.toggleButton,
-.radioSet,
-.radioButton,
-.separator {
- display: inline-block;
-}
-.button,
-.toggleButton,
.radioSet {
+ display: inline-block;
padding: 0 4px 0 4px;
}
.radioButton {
- padding: 0 4px 0 0;
+ display: inline-block;
+ padding: 0 2px 0 2px;
}
.button svg.embeddedIcon,
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 c735b64..d604851 100644
--- a/web/gui/src/main/webapp/app/fw/widget/button.js
+++ b/web/gui/src/main/webapp/app/fw/widget/button.js
@@ -22,7 +22,8 @@
var $log, fs, is;
- var btnSize = 25;
+ var btnSize = 25,
+ btnPadding = 4;
function noop() {}
@@ -102,21 +103,30 @@
rads = [],
sel;
- function _selected() {
+ function _selected(s) {
var curr = d3.select(this),
- currId = curr.attr('id');
+ currId = curr.attr('id'),
+ selIndex = _getIndex(),
+ currIndex = _getIndex(currId);
// I have it going by id's because I couldn't think of a way
// to get the radio button's index from the div element
// We could look at the end of the radio button id for its number
// but I didn't know how to get the end of the string's number
- if (sel !== currId) {
- var selIndex = _getIndex(),
- currIndex = _getIndex(currId);
- rads[selIndex].el.classed('selected', false);
- curr.classed('selected', true);
- rads[currIndex].cb();
- sel = currId;
+ if (!s) {
+ if (sel !== currId) {
+ rads[selIndex].el.classed('selected', false);
+ curr.classed('selected', true);
+ rads[currIndex].cb();
+ sel = currId;
+ }
+ } else {
+ if (!rads[s].el.classed('selected')) {
+ rads[selIndex].el.classed('selected', false);
+ rads[s].el.classed('selected', true);
+ rads[s].cb();
+ sel = rads[s].id;
+ }
}
}
@@ -154,13 +164,19 @@
return {
rads: rads,
+ width: (((btnSize + btnPadding) * rads.length) + btnPadding),
selected: function (i) {
if (i === undefined) { _getIndex(); }
- else { _selected(); }
+ else { _selected(i); }
}
}
}
+ function width(s) {
+ if (s) { btnSize = s; }
+ return btnSize;
+ }
+
angular.module('onosWidget')
.factory('ButtonService', ['$log', 'FnService', 'IconService',
function (_$log_, _fs_, _is_) {
@@ -171,7 +187,8 @@
return {
button: button,
toggle: toggle,
- radioSet: radioSet
+ radioSet: radioSet,
+ width: width
};
}]);
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 43f3124..5c3c750 100644
--- a/web/gui/src/main/webapp/app/fw/widget/toolbar.css
+++ b/web/gui/src/main/webapp/app/fw/widget/toolbar.css
@@ -21,6 +21,7 @@
.separator {
border: 1px solid;
margin: 0 4px 0 4px;
+ display: inline-block;
}
.light .separator {
border-color: #ddd;
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 edd1cdc..d9d02e4 100644
--- a/web/gui/src/main/webapp/app/fw/widget/toolbar.js
+++ b/web/gui/src/main/webapp/app/fw/widget/toolbar.js
@@ -25,14 +25,16 @@
var ids = [],
defaultSettings = {
edge: 'left',
- width: 400,
+ width: 20,
margin: 0,
hideMargin: -20,
top: '80%',
- fade: false
+ fade: false,
+ shown: false
},
settings,
arrowSize = 10,
+ btnPadding = 4,
tbarId,
tbarPanel,
tbarDiv,
@@ -53,24 +55,23 @@
return true;
}
+ // TODO: Allow toolbar to be on right edge of screen
// translate uses 50 because the svg viewbox is 50
function rotateArrowLeft() {
tbarArrowDiv.select('g')
.attr('transform', 'translate(0 50) rotate(-90)');
}
-
function rotateArrowRight() {
tbarArrowDiv.select('g')
.attr('transform', 'translate(50 0) rotate(90)');
}
-
function createArrow() {
tbarArrowDiv = tbarDiv.append('div')
.classed('tbarArrow', true)
.style({'position': 'absolute',
'top': '53%',
- 'left': '98%',
- 'margin-right': '-2%',
+ 'left': '96%',
+ 'margin-right': '-4%',
'transform': 'translate(-50%, -50%)',
'cursor': 'pointer'});
is.loadEmbeddedIcon(tbarArrowDiv, 'tableColSortAsc', arrowSize);
@@ -80,25 +81,38 @@
// === Adding to toolbar functions ----------------------------
+ // TODO: these add functions look very similar -- combine them somehow?
function addButton(id, gid, cb, tooltip) {
- var btnId = tbarId + '-' + id;
+ var btnId = tbarId + '-' + id,
+ button;
if (!validId(btnId, 'addButton')) { return null; }
ids.push(btnId);
- return bns.button(tbarDiv, btnId, gid, cb, tooltip);
+ button = bns.button(tbarDiv, btnId, gid, cb, tooltip);
+ if (button) { addToWidth(bns.width()); }
+ displayTools();
+ return button;
}
function addToggle(id, gid, initState, cb, tooltip) {
- var togId = tbarId + '-' + id;
+ var togId = tbarId + '-' + id,
+ toggle;
if (!validId(togId, 'addToggle')) { return null; }
ids.push(togId);
- return bns.toggle(tbarDiv, togId, gid, initState, cb, tooltip);
+ toggle = bns.toggle(tbarDiv, togId, gid, initState, cb, tooltip);
+ if (toggle) { addToWidth(bns.width()); }
+ displayTools();
+ return toggle;
}
function addRadioSet(id, rset) {
- var radId = tbarId + '-' + id;
+ var radId = tbarId + '-' + id,
+ radios;
if (!validId(radId, 'addRadioSet')) { return null; }
ids.push(radId);
- return bns.radioSet(tbarDiv, radId, rset);
+ radios = bns.radioSet(tbarDiv, radId, rset);
+ if (radios) { addToWidth(radios.width); }
+ displayTools();
+ return radios;
}
function addSeparator() {
@@ -106,9 +120,12 @@
$log.warn('Separator cannot append to div');
return null;
}
+ addToWidth(2);
+ displayTools();
return tbarDiv.append('div')
.classed('separator', true)
- .style('height', '23px');
+ .style({'height': '23px',
+ 'width': '0px'});
}
// === Main toolbar API functions ----------------------------
@@ -129,6 +146,7 @@
.style('top', settings.top);
createArrow();
+ displayTools();
return {
addButton: addButton,
@@ -138,10 +156,11 @@
show: show,
hide: hide,
- toggleTools: toggleTools
+ toggleTools: toggleTools,
+
+ width: width
}
}
-
function destroyToolbar(id) {
ps.destroyPanel(id);
tbarDiv = null;
@@ -151,16 +170,29 @@
tbarPanel.show(cb);
rotateArrowLeft();
}
-
function hide(cb) {
tbarPanel.hide(cb);
rotateArrowRight();
}
-
function toggleTools(cb) {
if (tbarPanel.isVisible()) { hide(cb); }
else { show(cb) }
}
+ function displayTools() {
+ if (settings.shown) { show(); }
+ else { hide(); }
+ }
+
+ function width(w) {
+ if (w) { tbarPanel.width(w); }
+ return tbarPanel.width();
+ }
+ function addToWidth(size) {
+ if (!(settings.width > (fs.windowSize(0, 500).width))) {
+ settings.width = width() + size + btnPadding;
+ tbarPanel.width(settings.width);
+ }
+ }
angular.module('onosWidget')
.factory('ToolbarService', ['$log', 'FnService',
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 21985ee..37323d2 100644
--- a/web/gui/src/main/webapp/app/view/sample/sample.js
+++ b/web/gui/src/main/webapp/app/view/sample/sample.js
@@ -66,15 +66,16 @@
.style('font-size', '16pt');
var toolbar = tbs.createToolbar('sample'),
- rset = [{ gid: 'checkMark', cb: checkFn },
+ rset = [
+ { gid: 'checkMark', cb: checkFn },
{ gid: 'xMark', cb: xMarkFn },
{ gid: 'bird', cb: birdFn }
];
- toolbar.addButton('hello-button', 'crown', btnFn);
- toolbar.addToggle('look-toggle', 'chain', false, togFn);
+ toolbar.addButton('demo-button', 'crown', btnFn);
+ toolbar.addToggle('demo-toggle', 'chain', false, togFn);
toolbar.addSeparator();
- toolbar.addRadioSet('something-radio', rset);
- toolbar.hide();
+ toolbar.addRadioSet('demo-radio', rset);
+ toolbar.addSeparator();
$log.log('OvSampleCtrl has been created');
}]);