홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
df510012 1 parent 85fa2b89

GUI -- Refactored Toolbar Service. 

Change-Id: I758d0da30438eb7257350480024d3bd99624509c
Inline Side-by-side
Showing 4 changed files with 124 additions and 131 deletions
...@@ -18,16 +18,6 @@ ...@@ -18,16 +18,6 @@
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 -}
24 -.light .tbarArrow svg.embeddedIcon .icon.tableColSortAsc .glyph {
25 - fill: #838383;
26 -}
27 -.dark .tbarArrow svg.embeddedIcon .icon.tableColSortAsc .glyph {
28 - fill: #B2B2B2;
29 -}
30 -
31 .button, 21 .button,
32 .toggleButton, 22 .toggleButton,
33 .radioSet { 23 .radioSet {
......
...@@ -18,16 +18,35 @@ ...@@ -18,16 +18,35 @@
18 ONOS GUI -- Toolbar Service -- CSS file 18 ONOS GUI -- Toolbar Service -- CSS file
19 */ 19 */
20 20
21 +.light .tbarArrow svg.embeddedIcon .icon .glyph {
22 + fill: #838383;
23 +}
24 +.dark .tbarArrow svg.embeddedIcon .icon .glyph {
25 + fill: #B2B2B2;
26 +}
27 +
28 +
29 +.tbarArrow svg.embeddedIcon .icon rect {
30 + stroke: none;
31 +}
32 +.light .tbarArrow svg.embeddedIcon .icon rect {
33 + fill: none;
34 +}
35 +.dark .tbarArrow svg.embeddedIcon .icon rect {
36 + fill: none;
37 +}
38 +
39 +
21 .separator { 40 .separator {
22 border: 1px solid; 41 border: 1px solid;
23 margin: 0 4px 0 4px; 42 margin: 0 4px 0 4px;
24 display: inline-block; 43 display: inline-block;
44 + height: 23px;
45 + width: 0;
25 } 46 }
26 .light .separator { 47 .light .separator {
27 border-color: #ddd; 48 border-color: #ddd;
28 } 49 }
29 -
30 .dark .separator { 50 .dark .separator {
31 border-color: #1A1A1A; 51 border-color: #1A1A1A;
32 -
33 } 52 }
......
...@@ -17,12 +17,18 @@ ...@@ -17,12 +17,18 @@
17 /* 17 /*
18 ONOS GUI -- Widget -- Toolbar Service 18 ONOS GUI -- Widget -- Toolbar Service
19 */ 19 */
20 +// TODO: Augment service to allow toolbars to exist on right edge of screen
21 +
22 +
20 (function () { 23 (function () {
21 'use strict'; 24 'use strict';
22 25
26 + // injected refs
23 var $log, fs, ps, bns, is; 27 var $log, fs, ps, bns, is;
24 28
25 - var ids = [], 29 + // configuration
30 + var arrowSize = 10,
31 + sepWidth = 6,
26 defaultSettings = { 32 defaultSettings = {
27 edge: 'left', 33 edge: 'left',
28 width: 20, 34 width: 20,
...@@ -31,122 +37,120 @@ ...@@ -31,122 +37,120 @@
31 top: '80%', 37 top: '80%',
32 fade: false, 38 fade: false,
33 shown: false 39 shown: false
34 - }, 40 + };
35 - settings,
36 - arrowSize = 10,
37 - btnPadding = 4,
38 - tbarId,
39 - tbarPanel,
40 - tbarDiv,
41 - tbarArrowDiv;
42 41
43 - // this function is only used in testing 42 + // internal state
44 - function init() { 43 + var tbars = {};
45 - ids = [];
46 - }
47 44
48 - // === Helper functions --------------------------------------
49 45
50 - function validId(id, caller) { 46 + // === Helper functions --------------------------------------
51 - if (fs.inArray(id, ids) !== -1) {
52 - $log.warn(caller + ': ID already exists');
53 - return false;
54 - }
55 - return true;
56 - }
57 47
58 - // TODO: Allow toolbar to be on right edge of screen
59 // translate uses 50 because the svg viewbox is 50 48 // translate uses 50 because the svg viewbox is 50
60 - function rotateArrowLeft() { 49 + function rotateArrowLeft(adiv) {
61 - tbarArrowDiv.select('g') 50 + adiv.select('g')
62 .attr('transform', 'translate(0 50) rotate(-90)'); 51 .attr('transform', 'translate(0 50) rotate(-90)');
63 } 52 }
64 - function rotateArrowRight() { 53 + function rotateArrowRight(adiv) {
65 - tbarArrowDiv.select('g') 54 + adiv.select('g')
66 .attr('transform', 'translate(50 0) rotate(90)'); 55 .attr('transform', 'translate(50 0) rotate(90)');
67 } 56 }
68 - function createArrow() { 57 +
69 - tbarArrowDiv = tbarDiv.append('div') 58 + function createArrow(panel) {
59 + var arrowDiv = panel.append('div')
70 .classed('tbarArrow', true) 60 .classed('tbarArrow', true)
71 - .style({'position': 'absolute', 61 + .style({
62 + 'position': 'absolute',
72 'top': '53%', 63 'top': '53%',
73 'left': '96%', 64 'left': '96%',
74 'margin-right': '-4%', 65 'margin-right': '-4%',
75 'transform': 'translate(-50%, -50%)', 66 'transform': 'translate(-50%, -50%)',
76 - 'cursor': 'pointer'}); 67 + 'cursor': 'pointer'
77 - is.loadEmbeddedIcon(tbarArrowDiv, 'tableColSortAsc', arrowSize); 68 + });
69 + is.loadIcon(arrowDiv, 'triangleUp', arrowSize, true);
70 + return arrowDiv;
71 + }
78 72
79 - tbarArrowDiv.on('click', toggleTools); 73 + function warn(msg, id) {
74 + $log.warn('createToolbar: ' + msg + ': [' + id + ']');
75 + return null;
80 } 76 }
81 77
82 - // === Adding to toolbar functions ----------------------------
83 78
84 - // TODO: these add functions look very similar -- combine them somehow? 79 + // ==================================
80 +
81 + function createToolbar(id, opts) {
82 + if (!id) return warn('no ID given', id);
83 + if (tbars[id]) return warn('duplicate ID given', id);
84 +
85 + var settings = angular.extend({}, defaultSettings, fs.isO(opts)),
86 + tbid = 'toolbar-' + id,
87 + panel = ps.createPanel(tbid, settings),
88 + arrowDiv = createArrow(panel),
89 + tbWidth = arrowSize + 2; // empty toolbar width
90 +
91 +
92 + arrowDiv.on('click', toggle);
93 +
94 + // add a descriptor for this toolbar
95 + tbars[id] = {
96 + settings: settings,
97 + panel: panel,
98 + panelId: tbid
99 + };
100 +
101 + panel.classed('toolbar', true)
102 + .style('top', settings.top);
103 +
104 +
105 + // API functions
106 +
85 function addButton(id, gid, cb, tooltip) { 107 function addButton(id, gid, cb, tooltip) {
86 - var btnId = tbarId + '-' + id, 108 + var bid = tbid + '-' + id,
87 - button; 109 + btn = bns.button(panel, bid, gid, cb, tooltip);
88 - if (!validId(btnId, 'addButton')) { return null; } 110 + tbWidth += btn.width();
89 - ids.push(btnId); 111 + panel.width(tbWidth);
90 - button = bns.button(tbarDiv, btnId, gid, cb, tooltip); 112 + return btn;
91 - if (button) { addToWidth(button.width()); }
92 - displayTools();
93 - return button;
94 } 113 }
95 114
96 function addToggle(id, gid, initState, cb, tooltip) { 115 function addToggle(id, gid, initState, cb, tooltip) {
97 - var togId = tbarId + '-' + id, 116 + var tid = tbid + '-' + id,
98 - toggle; 117 + tog = bns.toggle(panel, tid, gid, initState, cb, tooltip);
99 - if (!validId(togId, 'addToggle')) { return null; } 118 + tbWidth += tog.width();
100 - ids.push(togId); 119 + panel.width(tbWidth);
101 - toggle = bns.toggle(tbarDiv, togId, gid, initState, cb, tooltip); 120 + return tog;
102 - if (toggle) { addToWidth(toggle.width()); }
103 - displayTools();
104 - return toggle;
105 } 121 }
106 122
107 function addRadioSet(id, rset) { 123 function addRadioSet(id, rset) {
108 - var radId = tbarId + '-' + id, 124 + var rid = tbid + '-' + id,
109 - radios; 125 + rad = bns.radioSet(panel, rid, rset);
110 - if (!validId(radId, 'addRadioSet')) { return null; } 126 + tbWidth += rad.width();
111 - ids.push(radId); 127 + panel.width(tbWidth);
112 - radios = bns.radioSet(tbarDiv, radId, rset); 128 + return rad;
113 - if (radios) { addToWidth(radios.width()); }
114 - displayTools();
115 - return radios;
116 } 129 }
117 130
118 function addSeparator() { 131 function addSeparator() {
119 - if (!tbarDiv) { 132 + panel.append('div')
120 - $log.warn('Separator cannot append to div'); 133 + .classed('separator', true);
121 - return null; 134 + tbWidth += sepWidth;
122 - }
123 - addToWidth(2);
124 - displayTools();
125 - return tbarDiv.append('div')
126 - .classed('separator', true)
127 - .style({'height': '23px',
128 - 'width': '0px'});
129 } 135 }
130 136
131 - // === Main toolbar API functions ---------------------------- 137 + function show(cb) {
132 - 138 + rotateArrowLeft(arrowDiv);
133 - function createToolbar(id, opts) { 139 + panel.show(cb);
134 - if (!id) {
135 - $log.warn('createToolbar: no ID given');
136 - return null;
137 } 140 }
138 - tbarId = 'tbar-' + id;
139 - settings = angular.extend({}, defaultSettings, fs.isO(opts));
140 -
141 - if (!validId(tbarId, 'createToolbar')) { return null; }
142 - ids.push(tbarId);
143 141
144 - tbarPanel = ps.createPanel(tbarId, settings); 142 + function hide(cb) {
145 - tbarDiv = tbarPanel.classed('toolbar', true) 143 + rotateArrowRight(arrowDiv);
146 - .style('top', settings.top); 144 + panel.hide(cb);
145 + }
147 146
148 - createArrow(); 147 + function toggle(cb) {
149 - displayTools(); 148 + if (panel.isVisible()) {
149 + hide(cb);
150 + } else {
151 + show(cb);
152 + }
153 + }
150 154
151 return { 155 return {
152 addButton: addButton, 156 addButton: addButton,
...@@ -156,48 +160,20 @@ ...@@ -156,48 +160,20 @@
156 160
157 show: show, 161 show: show,
158 hide: hide, 162 hide: hide,
159 - toggleTools: toggleTools, 163 + toggle: toggle
160 - 164 + };
161 - width: width
162 - }
163 } 165 }
164 166
165 function destroyToolbar(id) { 167 function destroyToolbar(id) {
166 - ps.destroyPanel(id); 168 + var tb = tbars[id];
167 - tbarDiv = null; 169 + delete tbars[id];
168 - }
169 -
170 - function show(cb) {
171 - tbarPanel.show(cb);
172 - rotateArrowLeft();
173 - }
174 -
175 - function hide(cb) {
176 - tbarPanel.hide(cb);
177 - rotateArrowRight();
178 - }
179 -
180 - function toggleTools(cb) {
181 - if (tbarPanel.isVisible()) { hide(cb); }
182 - else { show(cb) }
183 - }
184 170
185 - function displayTools() { 171 + if (tb) {
186 - if (settings.shown) { show(); } 172 + ps.destroyPanel(tb.panelId);
187 - else { hide(); }
188 } 173 }
189 -
190 - function width(w) {
191 - if (w) { tbarPanel.width(w); }
192 - return tbarPanel.width();
193 } 174 }
194 175
195 - function addToWidth(size) { 176 + // === Module Definition ===
196 - if (!(settings.width > (fs.windowSize(0, 500).width))) {
197 - settings.width = width() + size + btnPadding;
198 - tbarPanel.width(settings.width);
199 - }
200 - }
201 177
202 angular.module('onosWidget') 178 angular.module('onosWidget')
203 .factory('ToolbarService', 179 .factory('ToolbarService',
...@@ -210,6 +186,11 @@ ...@@ -210,6 +186,11 @@
210 bns = _bns_; 186 bns = _bns_;
211 is = _is_; 187 is = _is_;
212 188
189 + // this function is only used in testing
190 + function init() {
191 + tbars = {};
192 + }
193 +
213 return { 194 return {
214 init: init, 195 init: init,
215 createToolbar: createToolbar, 196 createToolbar: createToolbar,
......
...@@ -87,6 +87,9 @@ ...@@ -87,6 +87,9 @@
87 toolbar.addToggle('demo-toggle', 'chain', false, togFn); 87 toolbar.addToggle('demo-toggle', 'chain', false, togFn);
88 toolbar.addSeparator(); 88 toolbar.addSeparator();
89 toolbar.addRadioSet('demo-radio', rset); 89 toolbar.addRadioSet('demo-radio', rset);
90 + toolbar.hide();
91 +
92 + checkFn();
90 93
91 $log.log('OvSampleCtrl has been created'); 94 $log.log('OvSampleCtrl has been created');
92 }]); 95 }]);
......