홍길동 / 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 @@ ...@@ -28,54 +28,66 @@
28 .button, 28 .button,
29 .toggleButton, 29 .toggleButton,
30 .radioSet, 30 .radioSet,
31 +.radioButton,
31 .separator { 32 .separator {
32 display: inline-block; 33 display: inline-block;
33 } 34 }
34 .button, 35 .button,
35 -.toggleButton { 36 +.toggleButton,
37 +.radioSet {
36 padding: 0 4px 0 4px; 38 padding: 0 4px 0 4px;
37 } 39 }
38 -.radioSet .toggleButton { 40 +.radioButton {
39 - padding: 0 0 0 4px; 41 + padding: 0 4px 0 0;
40 } 42 }
41 43
42 .button svg.embeddedIcon, 44 .button svg.embeddedIcon,
43 -.toggleButton svg.embeddedIcon { 45 +.toggleButton svg.embeddedIcon,
46 +.radioButton svg.embeddedIcon {
44 cursor: pointer; 47 cursor: pointer;
45 } 48 }
46 .button svg.embeddedIcon .icon rect, 49 .button svg.embeddedIcon .icon rect,
47 -.toggleButton svg.embeddedIcon .icon rect { 50 +.toggleButton svg.embeddedIcon .icon rect,
51 +.radioButton svg.embeddedIcon .icon rect{
48 stroke: none; 52 stroke: none;
49 } 53 }
50 54
51 /* Selected button color */ 55 /* Selected button color */
52 .light .button svg.embeddedIcon, 56 .light .button svg.embeddedIcon,
53 -.light .toggleButton.selected svg.embeddedIcon { 57 +.light .toggleButton.selected svg.embeddedIcon,
58 +.light .radioButton.selected svg.embeddedIcon {
54 fill: #838383; 59 fill: #838383;
55 } 60 }
56 .light .button svg.embeddedIcon .glyph, 61 .light .button svg.embeddedIcon .glyph,
57 -.light .toggleButton.selected svg.embeddedIcon .glyph { 62 +.light .toggleButton.selected svg.embeddedIcon .glyph,
63 +.light .radioButton.selected svg.embeddedIcon .glyph {
58 fill: white; 64 fill: white;
59 } 65 }
60 .dark .button svg.embeddedIcon, 66 .dark .button svg.embeddedIcon,
61 -.dark .toggleButton.selected svg.embeddedIcon { 67 +.dark .toggleButton.selected svg.embeddedIcon,
68 +.dark .radioButton.selected svg.embeddedIcon{
62 fill: #151515; 69 fill: #151515;
63 } 70 }
64 .dark .button svg.embeddedIcon .glyph, 71 .dark .button svg.embeddedIcon .glyph,
65 -.dark .toggleButton.selected svg.embeddedIcon .glyph { 72 +.dark .toggleButton.selected svg.embeddedIcon .glyph,
73 +.dark .radioButton.selected svg.embeddedIcon .glyph {
66 fill: #B2B2B2; 74 fill: #B2B2B2;
67 } 75 }
68 76
69 /* Unselected button color */ 77 /* Unselected button color */
70 -.light .toggleButton svg.embeddedIcon { 78 +.light .toggleButton svg.embeddedIcon,
79 +.light .radioButton svg.embeddedIcon {
71 fill: #eee; 80 fill: #eee;
72 } 81 }
73 -.light .toggleButton svg.embeddedIcon .glyph { 82 +.light .toggleButton svg.embeddedIcon .glyph,
83 +.light .radioButton svg.embeddedIcon .glyph {
74 fill: #bbb; 84 fill: #bbb;
75 } 85 }
76 -.dark .toggleButton svg.embeddedIcon { 86 +.dark .toggleButton svg.embeddedIcon,
87 +.dark .radioButton svg.embeddedIcon {
77 fill: #303030; 88 fill: #303030;
78 } 89 }
79 -.dark .toggleButton svg.embeddedIcon .glyph { 90 +.dark .toggleButton svg.embeddedIcon .glyph,
91 +.dark .radioButton svg.embeddedIcon .glyph {
80 fill: #565656; 92 fill: #565656;
81 } 93 }
......
...@@ -85,7 +85,6 @@ ...@@ -85,7 +85,6 @@
85 } 85 }
86 } 86 }
87 87
88 - // TODO: fix radio button on click selecting functionality
89 function radioSet(div, id, rset) { 88 function radioSet(div, id, rset) {
90 if (!div) { 89 if (!div) {
91 $log.warn('Radio buttons cannot append to div'); 90 $log.warn('Radio buttons cannot append to div');
...@@ -100,34 +99,64 @@ ...@@ -100,34 +99,64 @@
100 return null; 99 return null;
101 } 100 }
102 var rDiv = div.append('div').classed('radioSet', true), 101 var rDiv = div.append('div').classed('radioSet', true),
103 - sel = 0, 102 + rads = [],
104 - rads = []; 103 + sel;
104 +
105 + function _selected() {
106 + var curr = d3.select(this),
107 + currId = curr.attr('id');
108 +
109 + // I have it going by id's because I couldn't think of a way
110 + // to get the radio button's index from the div element
111 + // We could look at the end of the radio button id for its number
112 + // but I didn't know how to get the end of the string's number
113 + if (sel !== currId) {
114 + var selIndex = _getIndex(),
115 + currIndex = _getIndex(currId);
116 + rads[selIndex].el.classed('selected', false);
117 + curr.classed('selected', true);
118 + rads[currIndex].cb();
119 + sel = currId;
120 + }
121 + }
122 +
123 + // given the id, will get the index of element
124 + // without the id, will get the index of sel
125 + function _getIndex(id) {
126 + if (!id) {
127 + for (var i = 0; i < rads.length; i++) {
128 + if (rads[i].id === sel) { return i; }
129 + }
130 + } else {
131 + for (var j = 0; j < rads.length; j++) {
132 + if (rads[j].id === id) { return j; }
133 + }
134 + }
135 + }
105 136
106 rset.forEach(function (btn, index) { 137 rset.forEach(function (btn, index) {
107 var rid = {id: id + '-' + index}, 138 var rid = {id: id + '-' + index},
108 rbtn = angular.extend({}, btn, rid), 139 rbtn = angular.extend({}, btn, rid),
109 istate = (index === 0), 140 istate = (index === 0),
110 - rtog = toggle(rDiv, rbtn.id, rbtn.gid, istate, 141 + rBtnDiv = createDiv(rDiv, 'radioButton', rbtn.id);
111 - rbtn.cb, rbtn.tooltip); 142 +
143 + if (istate) { rBtnDiv.classed('selected', true); }
144 + is.loadIcon(rBtnDiv, rbtn.gid, btnSize, true);
145 + rbtn.el = rBtnDiv;
146 + rbtn.cb = fs.isF(rbtn.cb) || noop;
112 147
113 - rtog.el.classed('radioButton', true); 148 + rBtnDiv.on('click', _selected);
114 - rads.push(rtog); 149 +
150 + rads.push(rbtn);
115 }); 151 });
152 + sel = rads[0].id;
153 + rads[0].cb();
116 154
117 return { 155 return {
118 rads: rads, 156 rads: rads,
119 selected: function (i) { 157 selected: function (i) {
120 - if (i === undefined) { return sel; } 158 + if (i === undefined) { _getIndex(); }
121 - else if (i < 0 || i >= rads.length) { 159 + else { _selected(); }
122 - $log.error('Cannot select radio button of index ' + i);
123 - }
124 - else {
125 - if (i !== sel) {
126 - rads[sel].toggle(false);
127 - rads[i].toggle(true);
128 - sel = i;
129 - }
130 - }
131 } 160 }
132 } 161 }
133 } 162 }
......
...@@ -21,14 +21,26 @@ ...@@ -21,14 +21,26 @@
21 (function () { 21 (function () {
22 'use strict'; 22 'use strict';
23 var $log, tbs, flash, 23 var $log, tbs, flash,
24 - sampleDiv; 24 + togFnDiv, radFnP;
25 25
26 function btnFn() { 26 function btnFn() {
27 flash.flash('Hi there friends!'); 27 flash.flash('Hi there friends!');
28 } 28 }
29 function togFn(display) { 29 function togFn(display) {
30 - if (display) { sampleDiv.style('display', 'block'); } 30 + if (display) { togFnDiv.style('display', 'block'); }
31 - else { sampleDiv.style('display', 'none'); } 31 + else { togFnDiv.style('display', 'none'); }
32 + }
33 + function checkFn() {
34 + radFnP.text('Checkmark radio button active.')
35 + .style('color', 'green');
36 + }
37 + function xMarkFn() {
38 + radFnP.text('Xmark radio button active.')
39 + .style('color', 'red');
40 + }
41 + function birdFn() {
42 + radFnP.text('Bird radio button active.')
43 + .style('color', '#369');
32 } 44 }
33 45
34 angular.module('ovSample', ['onosUtil']) 46 angular.module('ovSample', ['onosUtil'])
...@@ -41,7 +53,7 @@ ...@@ -41,7 +53,7 @@
41 53
42 self.message = 'Hey there folks!'; 54 self.message = 'Hey there folks!';
43 55
44 - sampleDiv = d3.select('#ov-sample') 56 + togFnDiv = d3.select('#ov-sample')
45 .append('div') 57 .append('div')
46 .text('Look at me!') 58 .text('Look at me!')
47 .style({ 59 .style({
...@@ -49,14 +61,19 @@ ...@@ -49,14 +61,19 @@
49 'color': 'rgb(204, 89, 81)', 61 'color': 'rgb(204, 89, 81)',
50 'font-size': '20pt' 62 'font-size': '20pt'
51 }); 63 });
64 + radFnP = d3.select('#ov-sample')
65 + .append('p')
66 + .style('font-size', '16pt');
52 67
53 var toolbar = tbs.createToolbar('sample'), 68 var toolbar = tbs.createToolbar('sample'),
54 - rset = [{ gid: 'switch', cb: function () {}}, 69 + rset = [{ gid: 'checkMark', cb: checkFn },
55 - { gid: 'bird', cb: function () {}}]; 70 + { gid: 'xMark', cb: xMarkFn },
56 - toolbar.addButton('hello-btn', 'crown', btnFn); 71 + { gid: 'bird', cb: birdFn }
57 - toolbar.addToggle('sample-tog', 'chain', false, togFn); 72 + ];
73 + toolbar.addButton('hello-button', 'crown', btnFn);
74 + toolbar.addToggle('look-toggle', 'chain', false, togFn);
58 toolbar.addSeparator(); 75 toolbar.addSeparator();
59 - toolbar.addRadioSet('some-rad', rset); 76 + toolbar.addRadioSet('something-radio', rset);
60 toolbar.hide(); 77 toolbar.hide();
61 78
62 $log.log('OvSampleCtrl has been created'); 79 $log.log('OvSampleCtrl has been created');
......