홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
Committed by Gerrit Code Review
6925286a 1 parent 626ac96c

GUI -- Cleanup in sample view, toolbar and button services. 

Change-Id: I8e1f2cc344547f1a76681d74eec138495dd39bf6
Inline Side-by-side
Showing 4 changed files with 67 additions and 46 deletions
...@@ -32,11 +32,11 @@ ...@@ -32,11 +32,11 @@
32 .toggleButton, 32 .toggleButton,
33 .radioSet { 33 .radioSet {
34 display: inline-block; 34 display: inline-block;
35 - padding: 0 4px 0 4px; 35 + padding: 0 4px;
36 } 36 }
37 .radioButton { 37 .radioButton {
38 display: inline-block; 38 display: inline-block;
39 - padding: 0 2px 0 2px; 39 + padding: 0 2px;
40 } 40 }
41 41
42 .button svg.embeddedIcon, 42 .button svg.embeddedIcon,
......
...@@ -20,8 +20,10 @@ ...@@ -20,8 +20,10 @@
20 (function () { 20 (function () {
21 'use strict'; 21 'use strict';
22 22
23 + // injected refs
23 var $log, fs, is; 24 var $log, fs, is;
24 25
26 + // configuration
25 var btnSize = 25, 27 var btnSize = 25,
26 btnPadding = 4; 28 btnPadding = 4;
27 29
...@@ -178,18 +180,20 @@ ...@@ -178,18 +180,20 @@
178 } 180 }
179 181
180 angular.module('onosWidget') 182 angular.module('onosWidget')
181 - .factory('ButtonService', ['$log', 'FnService', 'IconService',
182 - function (_$log_, _fs_, _is_) {
183 - $log = _$log_;
184 - fs = _fs_;
185 - is = _is_;
186 -
187 - return {
188 - button: button,
189 - toggle: toggle,
190 - radioSet: radioSet,
191 - width: width
192 - };
193 - }]);
194 -
195 -}());
...\ No newline at end of file ...\ No newline at end of file
183 + .factory('ButtonService',
184 + ['$log', 'FnService', 'IconService',
185 +
186 + function (_$log_, _fs_, _is_) {
187 + $log = _$log_;
188 + fs = _fs_;
189 + is = _is_;
190 +
191 + return {
192 + button: button,
193 + toggle: toggle,
194 + radioSet: radioSet,
195 + width: width
196 + };
197 + }]);
198 +
199 +}());
......
...@@ -161,6 +161,7 @@ ...@@ -161,6 +161,7 @@
161 width: width 161 width: width
162 } 162 }
163 } 163 }
164 +
164 function destroyToolbar(id) { 165 function destroyToolbar(id) {
165 ps.destroyPanel(id); 166 ps.destroyPanel(id);
166 tbarDiv = null; 167 tbarDiv = null;
...@@ -170,14 +171,17 @@ ...@@ -170,14 +171,17 @@
170 tbarPanel.show(cb); 171 tbarPanel.show(cb);
171 rotateArrowLeft(); 172 rotateArrowLeft();
172 } 173 }
174 +
173 function hide(cb) { 175 function hide(cb) {
174 tbarPanel.hide(cb); 176 tbarPanel.hide(cb);
175 rotateArrowRight(); 177 rotateArrowRight();
176 } 178 }
179 +
177 function toggleTools(cb) { 180 function toggleTools(cb) {
178 if (tbarPanel.isVisible()) { hide(cb); } 181 if (tbarPanel.isVisible()) { hide(cb); }
179 else { show(cb) } 182 else { show(cb) }
180 } 183 }
184 +
181 function displayTools() { 185 function displayTools() {
182 if (settings.shown) { show(); } 186 if (settings.shown) { show(); }
183 else { hide(); } 187 else { hide(); }
...@@ -187,6 +191,7 @@ ...@@ -187,6 +191,7 @@
187 if (w) { tbarPanel.width(w); } 191 if (w) { tbarPanel.width(w); }
188 return tbarPanel.width(); 192 return tbarPanel.width();
189 } 193 }
194 +
190 function addToWidth(size) { 195 function addToWidth(size) {
191 if (!(settings.width > (fs.windowSize(0, 500).width))) { 196 if (!(settings.width > (fs.windowSize(0, 500).width))) {
192 settings.width = width() + size + btnPadding; 197 settings.width = width() + size + btnPadding;
...@@ -195,19 +200,20 @@ ...@@ -195,19 +200,20 @@
195 } 200 }
196 201
197 angular.module('onosWidget') 202 angular.module('onosWidget')
198 - .factory('ToolbarService', ['$log', 'FnService', 203 + .factory('ToolbarService',
199 - 'PanelService', 'ButtonService', 'IconService', 204 + ['$log', 'FnService', 'PanelService', 'ButtonService', 'IconService',
200 - function (_$log_, _fs_, _ps_, _bns_, _is_) { 205 +
201 - $log = _$log_; 206 + function (_$log_, _fs_, _ps_, _bns_, _is_) {
202 - fs = _fs_; 207 + $log = _$log_;
203 - ps = _ps_; 208 + fs = _fs_;
204 - bns = _bns_; 209 + ps = _ps_;
205 - is = _is_; 210 + bns = _bns_;
206 - 211 + is = _is_;
207 - return { 212 +
208 - init: init, 213 + return {
209 - createToolbar: createToolbar, 214 + init: init,
210 - destroyToolbar: destroyToolbar 215 + createToolbar: createToolbar,
211 - }; 216 + destroyToolbar: destroyToolbar
212 - }]); 217 + };
218 + }]);
213 }()); 219 }());
......
...@@ -20,24 +20,31 @@ ...@@ -20,24 +20,31 @@
20 20
21 (function () { 21 (function () {
22 'use strict'; 22 'use strict';
23 - var $log, tbs, flash, 23 +
24 - togFnDiv, radFnP; 24 + // injected refs
25 + var $log, tbs, flash;
26 +
27 + // internal state
28 + var togFnDiv, radFnP;
25 29
26 function btnFn() { 30 function btnFn() {
27 flash.flash('Hi there friends!'); 31 flash.flash('Hi there friends!');
28 } 32 }
33 +
29 function togFn(display) { 34 function togFn(display) {
30 - if (display) { togFnDiv.style('display', 'block'); } 35 + togFnDiv.style('display', display ? 'block' : 'none');
31 - else { togFnDiv.style('display', 'none'); }
32 } 36 }
37 +
33 function checkFn() { 38 function checkFn() {
34 radFnP.text('Checkmark radio button active.') 39 radFnP.text('Checkmark radio button active.')
35 .style('color', 'green'); 40 .style('color', 'green');
36 } 41 }
42 +
37 function xMarkFn() { 43 function xMarkFn() {
38 radFnP.text('Xmark radio button active.') 44 radFnP.text('Xmark radio button active.')
39 .style('color', 'red'); 45 .style('color', 'red');
40 } 46 }
47 +
41 function birdFn() { 48 function birdFn() {
42 radFnP.text('Bird radio button active.') 49 radFnP.text('Bird radio button active.')
43 .style('color', '#369'); 50 .style('color', '#369');
...@@ -46,7 +53,10 @@ ...@@ -46,7 +53,10 @@
46 angular.module('ovSample', ['onosUtil']) 53 angular.module('ovSample', ['onosUtil'])
47 .controller('OvSampleCtrl', ['$log', 'ToolbarService', 'FlashService', 54 .controller('OvSampleCtrl', ['$log', 'ToolbarService', 'FlashService',
48 function (_$log_, _tbs_, _flash_) { 55 function (_$log_, _tbs_, _flash_) {
49 - var self = this; 56 + var self = this,
57 + toolbar,
58 + rset;
59 +
50 $log = _$log_; 60 $log = _$log_;
51 tbs = _tbs_; 61 tbs = _tbs_;
52 flash = _flash_; 62 flash = _flash_;
...@@ -57,25 +67,26 @@ ...@@ -57,25 +67,26 @@
57 .append('div') 67 .append('div')
58 .text('Look at me!') 68 .text('Look at me!')
59 .style({ 69 .style({
60 - 'display': 'none', 70 + display: 'none',
61 - 'color': 'rgb(204, 89, 81)', 71 + color: 'rgb(204, 89, 81)',
62 'font-size': '20pt' 72 'font-size': '20pt'
63 }); 73 });
74 +
64 radFnP = d3.select('#ov-sample') 75 radFnP = d3.select('#ov-sample')
65 .append('p') 76 .append('p')
66 .style('font-size', '16pt'); 77 .style('font-size', '16pt');
67 78
68 - var toolbar = tbs.createToolbar('sample'), 79 + toolbar = tbs.createToolbar('sample');
69 - rset = [ 80 + rset = [
70 - { gid: 'checkMark', cb: checkFn }, 81 + { gid: 'checkMark', cb: checkFn },
71 - { gid: 'xMark', cb: xMarkFn }, 82 + { gid: 'xMark', cb: xMarkFn },
72 - { gid: 'bird', cb: birdFn } 83 + { gid: 'bird', cb: birdFn }
73 - ]; 84 + ];
85 +
74 toolbar.addButton('demo-button', 'crown', btnFn); 86 toolbar.addButton('demo-button', 'crown', btnFn);
75 toolbar.addToggle('demo-toggle', 'chain', false, togFn); 87 toolbar.addToggle('demo-toggle', 'chain', false, togFn);
76 toolbar.addSeparator(); 88 toolbar.addSeparator();
77 toolbar.addRadioSet('demo-radio', rset); 89 toolbar.addRadioSet('demo-radio', rset);
78 - toolbar.addSeparator();
79 90
80 $log.log('OvSampleCtrl has been created'); 91 $log.log('OvSampleCtrl has been created');
81 }]); 92 }]);
......