홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
258f046e 1 parent ba7da656

GUI -- Toolbar dynamically sizes based on added contents, adjusted CSS padding, … 

…minor radio button edit.

Change-Id: I52c3ef8af13a2b743cf7d71a83d42d7c9b5e5d6b
Inline Side-by-side
Showing 5 changed files with 91 additions and 42 deletions
...@@ -18,6 +18,9 @@ ...@@ -18,6 +18,9 @@
18 ONOS GUI -- Button Service -- CSS file 18 ONOS GUI -- Button Service -- CSS file
19 */ 19 */
20 20
21 +.tbarArrow {
22 + padding: 0 10px 0 10px;
23 +}
21 .light .tbarArrow svg.embeddedIcon .icon.tableColSortAsc .glyph { 24 .light .tbarArrow svg.embeddedIcon .icon.tableColSortAsc .glyph {
22 fill: #838383; 25 fill: #838383;
23 } 26 }
...@@ -27,18 +30,13 @@ ...@@ -27,18 +30,13 @@
27 30
28 .button, 31 .button,
29 .toggleButton, 32 .toggleButton,
30 -.radioSet,
31 -.radioButton,
32 -.separator {
33 - display: inline-block;
34 -}
35 -.button,
36 -.toggleButton,
37 .radioSet { 33 .radioSet {
34 + display: inline-block;
38 padding: 0 4px 0 4px; 35 padding: 0 4px 0 4px;
39 } 36 }
40 .radioButton { 37 .radioButton {
41 - padding: 0 4px 0 0; 38 + display: inline-block;
39 + padding: 0 2px 0 2px;
42 } 40 }
43 41
44 .button svg.embeddedIcon, 42 .button svg.embeddedIcon,
......
...@@ -22,7 +22,8 @@ ...@@ -22,7 +22,8 @@
22 22
23 var $log, fs, is; 23 var $log, fs, is;
24 24
25 - var btnSize = 25; 25 + var btnSize = 25,
26 + btnPadding = 4;
26 27
27 function noop() {} 28 function noop() {}
28 29
...@@ -102,21 +103,30 @@ ...@@ -102,21 +103,30 @@
102 rads = [], 103 rads = [],
103 sel; 104 sel;
104 105
105 - function _selected() { 106 + function _selected(s) {
106 var curr = d3.select(this), 107 var curr = d3.select(this),
107 - currId = curr.attr('id'); 108 + currId = curr.attr('id'),
109 + selIndex = _getIndex(),
110 + currIndex = _getIndex(currId);
108 111
109 // I have it going by id's because I couldn't think of a way 112 // 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 113 // 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 114 // 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 115 // but I didn't know how to get the end of the string's number
113 - if (sel !== currId) { 116 + if (!s) {
114 - var selIndex = _getIndex(), 117 + if (sel !== currId) {
115 - currIndex = _getIndex(currId); 118 + rads[selIndex].el.classed('selected', false);
116 - rads[selIndex].el.classed('selected', false); 119 + curr.classed('selected', true);
117 - curr.classed('selected', true); 120 + rads[currIndex].cb();
118 - rads[currIndex].cb(); 121 + sel = currId;
119 - sel = currId; 122 + }
123 + } else {
124 + if (!rads[s].el.classed('selected')) {
125 + rads[selIndex].el.classed('selected', false);
126 + rads[s].el.classed('selected', true);
127 + rads[s].cb();
128 + sel = rads[s].id;
129 + }
120 } 130 }
121 } 131 }
122 132
...@@ -154,13 +164,19 @@ ...@@ -154,13 +164,19 @@
154 164
155 return { 165 return {
156 rads: rads, 166 rads: rads,
167 + width: (((btnSize + btnPadding) * rads.length) + btnPadding),
157 selected: function (i) { 168 selected: function (i) {
158 if (i === undefined) { _getIndex(); } 169 if (i === undefined) { _getIndex(); }
159 - else { _selected(); } 170 + else { _selected(i); }
160 } 171 }
161 } 172 }
162 } 173 }
163 174
175 + function width(s) {
176 + if (s) { btnSize = s; }
177 + return btnSize;
178 + }
179 +
164 angular.module('onosWidget') 180 angular.module('onosWidget')
165 .factory('ButtonService', ['$log', 'FnService', 'IconService', 181 .factory('ButtonService', ['$log', 'FnService', 'IconService',
166 function (_$log_, _fs_, _is_) { 182 function (_$log_, _fs_, _is_) {
...@@ -171,7 +187,8 @@ ...@@ -171,7 +187,8 @@
171 return { 187 return {
172 button: button, 188 button: button,
173 toggle: toggle, 189 toggle: toggle,
174 - radioSet: radioSet 190 + radioSet: radioSet,
191 + width: width
175 }; 192 };
176 }]); 193 }]);
177 194
......
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
21 .separator { 21 .separator {
22 border: 1px solid; 22 border: 1px solid;
23 margin: 0 4px 0 4px; 23 margin: 0 4px 0 4px;
24 + display: inline-block;
24 } 25 }
25 .light .separator { 26 .light .separator {
26 border-color: #ddd; 27 border-color: #ddd;
......
...@@ -25,14 +25,16 @@ ...@@ -25,14 +25,16 @@
25 var ids = [], 25 var ids = [],
26 defaultSettings = { 26 defaultSettings = {
27 edge: 'left', 27 edge: 'left',
28 - width: 400, 28 + width: 20,
29 margin: 0, 29 margin: 0,
30 hideMargin: -20, 30 hideMargin: -20,
31 top: '80%', 31 top: '80%',
32 - fade: false 32 + fade: false,
33 + shown: false
33 }, 34 },
34 settings, 35 settings,
35 arrowSize = 10, 36 arrowSize = 10,
37 + btnPadding = 4,
36 tbarId, 38 tbarId,
37 tbarPanel, 39 tbarPanel,
38 tbarDiv, 40 tbarDiv,
...@@ -53,24 +55,23 @@ ...@@ -53,24 +55,23 @@
53 return true; 55 return true;
54 } 56 }
55 57
58 + // TODO: Allow toolbar to be on right edge of screen
56 // translate uses 50 because the svg viewbox is 50 59 // translate uses 50 because the svg viewbox is 50
57 function rotateArrowLeft() { 60 function rotateArrowLeft() {
58 tbarArrowDiv.select('g') 61 tbarArrowDiv.select('g')
59 .attr('transform', 'translate(0 50) rotate(-90)'); 62 .attr('transform', 'translate(0 50) rotate(-90)');
60 } 63 }
61 -
62 function rotateArrowRight() { 64 function rotateArrowRight() {
63 tbarArrowDiv.select('g') 65 tbarArrowDiv.select('g')
64 .attr('transform', 'translate(50 0) rotate(90)'); 66 .attr('transform', 'translate(50 0) rotate(90)');
65 } 67 }
66 -
67 function createArrow() { 68 function createArrow() {
68 tbarArrowDiv = tbarDiv.append('div') 69 tbarArrowDiv = tbarDiv.append('div')
69 .classed('tbarArrow', true) 70 .classed('tbarArrow', true)
70 .style({'position': 'absolute', 71 .style({'position': 'absolute',
71 'top': '53%', 72 'top': '53%',
72 - 'left': '98%', 73 + 'left': '96%',
73 - 'margin-right': '-2%', 74 + 'margin-right': '-4%',
74 'transform': 'translate(-50%, -50%)', 75 'transform': 'translate(-50%, -50%)',
75 'cursor': 'pointer'}); 76 'cursor': 'pointer'});
76 is.loadEmbeddedIcon(tbarArrowDiv, 'tableColSortAsc', arrowSize); 77 is.loadEmbeddedIcon(tbarArrowDiv, 'tableColSortAsc', arrowSize);
...@@ -80,25 +81,38 @@ ...@@ -80,25 +81,38 @@
80 81
81 // === Adding to toolbar functions ---------------------------- 82 // === Adding to toolbar functions ----------------------------
82 83
84 + // TODO: these add functions look very similar -- combine them somehow?
83 function addButton(id, gid, cb, tooltip) { 85 function addButton(id, gid, cb, tooltip) {
84 - var btnId = tbarId + '-' + id; 86 + var btnId = tbarId + '-' + id,
87 + button;
85 if (!validId(btnId, 'addButton')) { return null; } 88 if (!validId(btnId, 'addButton')) { return null; }
86 ids.push(btnId); 89 ids.push(btnId);
87 - return bns.button(tbarDiv, btnId, gid, cb, tooltip); 90 + button = bns.button(tbarDiv, btnId, gid, cb, tooltip);
91 + if (button) { addToWidth(bns.width()); }
92 + displayTools();
93 + return button;
88 } 94 }
89 95
90 function addToggle(id, gid, initState, cb, tooltip) { 96 function addToggle(id, gid, initState, cb, tooltip) {
91 - var togId = tbarId + '-' + id; 97 + var togId = tbarId + '-' + id,
98 + toggle;
92 if (!validId(togId, 'addToggle')) { return null; } 99 if (!validId(togId, 'addToggle')) { return null; }
93 ids.push(togId); 100 ids.push(togId);
94 - return bns.toggle(tbarDiv, togId, gid, initState, cb, tooltip); 101 + toggle = bns.toggle(tbarDiv, togId, gid, initState, cb, tooltip);
102 + if (toggle) { addToWidth(bns.width()); }
103 + displayTools();
104 + return toggle;
95 } 105 }
96 106
97 function addRadioSet(id, rset) { 107 function addRadioSet(id, rset) {
98 - var radId = tbarId + '-' + id; 108 + var radId = tbarId + '-' + id,
109 + radios;
99 if (!validId(radId, 'addRadioSet')) { return null; } 110 if (!validId(radId, 'addRadioSet')) { return null; }
100 ids.push(radId); 111 ids.push(radId);
101 - return bns.radioSet(tbarDiv, radId, rset); 112 + radios = bns.radioSet(tbarDiv, radId, rset);
113 + if (radios) { addToWidth(radios.width); }
114 + displayTools();
115 + return radios;
102 } 116 }
103 117
104 function addSeparator() { 118 function addSeparator() {
...@@ -106,9 +120,12 @@ ...@@ -106,9 +120,12 @@
106 $log.warn('Separator cannot append to div'); 120 $log.warn('Separator cannot append to div');
107 return null; 121 return null;
108 } 122 }
123 + addToWidth(2);
124 + displayTools();
109 return tbarDiv.append('div') 125 return tbarDiv.append('div')
110 .classed('separator', true) 126 .classed('separator', true)
111 - .style('height', '23px'); 127 + .style({'height': '23px',
128 + 'width': '0px'});
112 } 129 }
113 130
114 // === Main toolbar API functions ---------------------------- 131 // === Main toolbar API functions ----------------------------
...@@ -129,6 +146,7 @@ ...@@ -129,6 +146,7 @@
129 .style('top', settings.top); 146 .style('top', settings.top);
130 147
131 createArrow(); 148 createArrow();
149 + displayTools();
132 150
133 return { 151 return {
134 addButton: addButton, 152 addButton: addButton,
...@@ -138,10 +156,11 @@ ...@@ -138,10 +156,11 @@
138 156
139 show: show, 157 show: show,
140 hide: hide, 158 hide: hide,
141 - toggleTools: toggleTools 159 + toggleTools: toggleTools,
160 +
161 + width: width
142 } 162 }
143 } 163 }
144 -
145 function destroyToolbar(id) { 164 function destroyToolbar(id) {
146 ps.destroyPanel(id); 165 ps.destroyPanel(id);
147 tbarDiv = null; 166 tbarDiv = null;
...@@ -151,16 +170,29 @@ ...@@ -151,16 +170,29 @@
151 tbarPanel.show(cb); 170 tbarPanel.show(cb);
152 rotateArrowLeft(); 171 rotateArrowLeft();
153 } 172 }
154 -
155 function hide(cb) { 173 function hide(cb) {
156 tbarPanel.hide(cb); 174 tbarPanel.hide(cb);
157 rotateArrowRight(); 175 rotateArrowRight();
158 } 176 }
159 -
160 function toggleTools(cb) { 177 function toggleTools(cb) {
161 if (tbarPanel.isVisible()) { hide(cb); } 178 if (tbarPanel.isVisible()) { hide(cb); }
162 else { show(cb) } 179 else { show(cb) }
163 } 180 }
181 + function displayTools() {
182 + if (settings.shown) { show(); }
183 + else { hide(); }
184 + }
185 +
186 + function width(w) {
187 + if (w) { tbarPanel.width(w); }
188 + return tbarPanel.width();
189 + }
190 + function addToWidth(size) {
191 + if (!(settings.width > (fs.windowSize(0, 500).width))) {
192 + settings.width = width() + size + btnPadding;
193 + tbarPanel.width(settings.width);
194 + }
195 + }
164 196
165 angular.module('onosWidget') 197 angular.module('onosWidget')
166 .factory('ToolbarService', ['$log', 'FnService', 198 .factory('ToolbarService', ['$log', 'FnService',
......
...@@ -66,15 +66,16 @@ ...@@ -66,15 +66,16 @@
66 .style('font-size', '16pt'); 66 .style('font-size', '16pt');
67 67
68 var toolbar = tbs.createToolbar('sample'), 68 var toolbar = tbs.createToolbar('sample'),
69 - rset = [{ gid: 'checkMark', cb: checkFn }, 69 + rset = [
70 + { gid: 'checkMark', cb: checkFn },
70 { gid: 'xMark', cb: xMarkFn }, 71 { gid: 'xMark', cb: xMarkFn },
71 { gid: 'bird', cb: birdFn } 72 { gid: 'bird', cb: birdFn }
72 ]; 73 ];
73 - toolbar.addButton('hello-button', 'crown', btnFn); 74 + toolbar.addButton('demo-button', 'crown', btnFn);
74 - toolbar.addToggle('look-toggle', 'chain', false, togFn); 75 + toolbar.addToggle('demo-toggle', 'chain', false, togFn);
76 + toolbar.addSeparator();
77 + toolbar.addRadioSet('demo-radio', rset);
75 toolbar.addSeparator(); 78 toolbar.addSeparator();
76 - toolbar.addRadioSet('something-radio', rset);
77 - toolbar.hide();
78 79
79 $log.log('OvSampleCtrl has been created'); 80 $log.log('OvSampleCtrl has been created');
80 }]); 81 }]);
......