홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
Committed by Gerrit Code Review
664d4702 1 parent 67c221fc

GUI -- ButtonService - Fixed radio buttons selection bug. 

Change-Id: Ibdf77e231ce58d4863b11daecb0b8106f8e979a6
Inline Side-by-side
Showing 3 changed files with 98 additions and 40 deletions
......@@ -28,54 +28,66 @@
.button,
.toggleButton,
.radioSet,
.radioButton,
.separator {
display: inline-block;
}
.button,
.toggleButton {
.toggleButton,
.radioSet {
padding: 0 4px 0 4px;
}
.radioSet .toggleButton {
padding: 0 0 0 4px;
.radioButton {
padding: 0 4px 0 0;
}
.button svg.embeddedIcon,
.toggleButton svg.embeddedIcon {
.toggleButton svg.embeddedIcon,
.radioButton svg.embeddedIcon {
cursor: pointer;
}
.button svg.embeddedIcon .icon rect,
.toggleButton svg.embeddedIcon .icon rect {
.toggleButton svg.embeddedIcon .icon rect,
.radioButton svg.embeddedIcon .icon rect{
stroke: none;
}
/* Selected button color */
.light .button svg.embeddedIcon,
.light .toggleButton.selected svg.embeddedIcon {
.light .toggleButton.selected svg.embeddedIcon,
.light .radioButton.selected svg.embeddedIcon {
fill: #838383;
}
.light .button svg.embeddedIcon .glyph,
.light .toggleButton.selected svg.embeddedIcon .glyph {
.light .toggleButton.selected svg.embeddedIcon .glyph,
.light .radioButton.selected svg.embeddedIcon .glyph {
fill: white;
}
.dark .button svg.embeddedIcon,
.dark .toggleButton.selected svg.embeddedIcon {
.dark .toggleButton.selected svg.embeddedIcon,
.dark .radioButton.selected svg.embeddedIcon{
fill: #151515;
}
.dark .button svg.embeddedIcon .glyph,
.dark .toggleButton.selected svg.embeddedIcon .glyph {
.dark .toggleButton.selected svg.embeddedIcon .glyph,
.dark .radioButton.selected svg.embeddedIcon .glyph {
fill: #B2B2B2;
}
/* Unselected button color */
.light .toggleButton svg.embeddedIcon {
.light .toggleButton svg.embeddedIcon,
.light .radioButton svg.embeddedIcon {
fill: #eee;
}
.light .toggleButton svg.embeddedIcon .glyph {
.light .toggleButton svg.embeddedIcon .glyph,
.light .radioButton svg.embeddedIcon .glyph {
fill: #bbb;
}
.dark .toggleButton svg.embeddedIcon {
.dark .toggleButton svg.embeddedIcon,
.dark .radioButton svg.embeddedIcon {
fill: #303030;
}
.dark .toggleButton svg.embeddedIcon .glyph {
.dark .toggleButton svg.embeddedIcon .glyph,
.dark .radioButton svg.embeddedIcon .glyph {
fill: #565656;
}
......
......@@ -85,7 +85,6 @@
}
}
// TODO: fix radio button on click selecting functionality
function radioSet(div, id, rset) {
if (!div) {
$log.warn('Radio buttons cannot append to div');
......@@ -100,34 +99,64 @@
return null;
}
var rDiv = div.append('div').classed('radioSet', true),
sel = 0,
rads = [];
rads = [],
sel;
function _selected() {
var curr = d3.select(this),
currId = curr.attr('id');
// 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;
}
}
// given the id, will get the index of element
// without the id, will get the index of sel
function _getIndex(id) {
if (!id) {
for (var i = 0; i < rads.length; i++) {
if (rads[i].id === sel) { return i; }
}
} else {
for (var j = 0; j < rads.length; j++) {
if (rads[j].id === id) { return j; }
}
}
}
rset.forEach(function (btn, index) {
var rid = {id: id + '-' + index},
rbtn = angular.extend({}, btn, rid),
istate = (index === 0),
rtog = toggle(rDiv, rbtn.id, rbtn.gid, istate,
rbtn.cb, rbtn.tooltip);
rBtnDiv = createDiv(rDiv, 'radioButton', rbtn.id);
rtog.el.classed('radioButton', true);
rads.push(rtog);
if (istate) { rBtnDiv.classed('selected', true); }
is.loadIcon(rBtnDiv, rbtn.gid, btnSize, true);
rbtn.el = rBtnDiv;
rbtn.cb = fs.isF(rbtn.cb) || noop;
rBtnDiv.on('click', _selected);
rads.push(rbtn);
});
sel = rads[0].id;
rads[0].cb();
return {
rads: rads,
selected: function (i) {
if (i === undefined) { return sel; }
else if (i < 0 || i >= rads.length) {
$log.error('Cannot select radio button of index ' + i);
}
else {
if (i !== sel) {
rads[sel].toggle(false);
rads[i].toggle(true);
sel = i;
}
}
if (i === undefined) { _getIndex(); }
else { _selected(); }
}
}
}
......
......@@ -21,14 +21,26 @@
(function () {
'use strict';
var $log, tbs, flash,
sampleDiv;
togFnDiv, radFnP;
function btnFn() {
flash.flash('Hi there friends!');
}
function togFn(display) {
if (display) { sampleDiv.style('display', 'block'); }
else { sampleDiv.style('display', 'none'); }
if (display) { togFnDiv.style('display', 'block'); }
else { togFnDiv.style('display', 'none'); }
}
function checkFn() {
radFnP.text('Checkmark radio button active.')
.style('color', 'green');
}
function xMarkFn() {
radFnP.text('Xmark radio button active.')
.style('color', 'red');
}
function birdFn() {
radFnP.text('Bird radio button active.')
.style('color', '#369');
}
angular.module('ovSample', ['onosUtil'])
......@@ -41,7 +53,7 @@
self.message = 'Hey there folks!';
sampleDiv = d3.select('#ov-sample')
togFnDiv = d3.select('#ov-sample')
.append('div')
.text('Look at me!')
.style({
......@@ -49,14 +61,19 @@
'color': 'rgb(204, 89, 81)',
'font-size': '20pt'
});
radFnP = d3.select('#ov-sample')
.append('p')
.style('font-size', '16pt');
var toolbar = tbs.createToolbar('sample'),
rset = [{ gid: 'switch', cb: function () {}},
{ gid: 'bird', cb: function () {}}];
toolbar.addButton('hello-btn', 'crown', btnFn);
toolbar.addToggle('sample-tog', 'chain', false, togFn);
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.addSeparator();
toolbar.addRadioSet('some-rad', rset);
toolbar.addRadioSet('something-radio', rset);
toolbar.hide();
$log.log('OvSampleCtrl has been created');
......