홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
5000a754 1 parent d6612f95

GUI -- ToolbarService - showing and hiding the toolbar panel - WIP. 

Change-Id: Idf9ccbfdeb2b3906fefdf022c216eee2611787fa
Inline Side-by-side
Showing 7 changed files with 167 additions and 24 deletions
1 +/*
2 + * Copyright 2015 Open Networking Laboratory
3 + *
4 + * Licensed under the Apache License, Version 2.0 (the "License");
5 + * you may not use this file except in compliance with the License.
6 + * You may obtain a copy of the License at
7 + *
8 + * http://www.apache.org/licenses/LICENSE-2.0
9 + *
10 + * Unless required by applicable law or agreed to in writing, software
11 + * distributed under the License is distributed on an "AS IS" BASIS,
12 + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 + * See the License for the specific language governing permissions and
14 + * limitations under the License.
15 + */
16 +
17 +/*
18 + ONOS GUI -- Button Service -- CSS file
19 + */
20 +
21 +.btn svg.embeddedIcon,
22 +.tog svg.embeddedIcon,
23 +.rad svg.embeddedIcon {
24 + cursor: pointer;
25 +}
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
22 22
23 var $log, fs, is; 23 var $log, fs, is;
24 24
25 - var btnSize = 30; 25 + var btnSize = 25;
26 26
27 function noop() {} 27 function noop() {}
28 28
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
41 var btnDiv = createDiv(div, 'btn', id), 41 var btnDiv = createDiv(div, 'btn', id),
42 cbFnc = fs.isF(cb) || noop; 42 cbFnc = fs.isF(cb) || noop;
43 43
44 - is.loadIcon(btnDiv, gid, btnSize); 44 + is.loadIcon(btnDiv, gid, btnSize, true);
45 45
46 btnDiv.on('click', cbFnc); 46 btnDiv.on('click', cbFnc);
47 47
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
62 togDiv = createDiv(div, 'tog', id), 62 togDiv = createDiv(div, 'tog', id),
63 cbFnc = fs.isF(cb) || noop; 63 cbFnc = fs.isF(cb) || noop;
64 64
65 - is.loadIcon(togDiv, gid, btnSize); 65 + is.loadIcon(togDiv, gid, btnSize, true);
66 66
67 function _toggle(b) { 67 function _toggle(b) {
68 if (b === undefined) { 68 if (b === undefined) {
......
1 +/*
2 + * Copyright 2015 Open Networking Laboratory
3 + *
4 + * Licensed under the Apache License, Version 2.0 (the "License");
5 + * you may not use this file except in compliance with the License.
6 + * You may obtain a copy of the License at
7 + *
8 + * http://www.apache.org/licenses/LICENSE-2.0
9 + *
10 + * Unless required by applicable law or agreed to in writing, software
11 + * distributed under the License is distributed on an "AS IS" BASIS,
12 + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 + * See the License for the specific language governing permissions and
14 + * limitations under the License.
15 + */
16 +
17 +/*
18 + ONOS GUI -- Toolbar Service -- CSS file
19 + */
20 +
21 +.floatpanel.toolbar {
22 + position: absolute;
23 + z-index: 100;
24 + display: block;
25 + top: 75px; /* TODO: change this to proper height*/
26 + width: 200px;
27 + right: -220px;
28 + opacity: 0;
29 +
30 + padding: 10px;
31 + font-size: 10pt;
32 +
33 + -moz-border-radius: 6px;
34 + border-radius: 6px;
35 +}
...@@ -20,18 +20,27 @@ ...@@ -20,18 +20,27 @@
20 (function () { 20 (function () {
21 'use strict'; 21 'use strict';
22 22
23 - var $log, fs, ps, bns; 23 + var $log, fs, ps, bns, is;
24 24
25 var ids = [], 25 var ids = [],
26 + defaultSettings = {
27 + edge: 'left',
28 + width: 400
29 + },
30 + settings,
31 + arrowSize = 10,
26 tbarId, 32 tbarId,
27 tbarPanel, 33 tbarPanel,
28 tbarDiv, 34 tbarDiv,
29 tbarArrowDiv; 35 tbarArrowDiv;
30 36
37 + // this function is only used in testing
31 function init() { 38 function init() {
32 ids = []; 39 ids = [];
33 } 40 }
34 41
42 + // === Helper functions --------------------------------------
43 +
35 function validId(id, caller) { 44 function validId(id, caller) {
36 if (fs.inArray(id, ids) !== -1) { 45 if (fs.inArray(id, ids) !== -1) {
37 $log.warn(caller + ': ID already exists'); 46 $log.warn(caller + ': ID already exists');
...@@ -40,6 +49,34 @@ ...@@ -40,6 +49,34 @@
40 return true; 49 return true;
41 } 50 }
42 51
52 + // translate(0 50) looks good with arrowSize of 10
53 + function rotateArrowLeft() {
54 + tbarArrowDiv.select('g')
55 + .attr('transform', 'translate(0 50) rotate(-90)');
56 + }
57 +
58 + function rotateArrowRight() {
59 + tbarArrowDiv.select('g')
60 + .attr('transform', 'translate(0 50) rotate(90)');
61 + }
62 +
63 + function createArrow() {
64 + tbarArrowDiv = tbarDiv.append('div')
65 + .classed('tbarArrow', true)
66 + .style({'position': 'absolute',
67 + 'top': '50%',
68 + 'left': '98%',
69 + 'margin-right': '-2%',
70 + 'transform': 'translate(-50%, -50%)',
71 + 'cursor': 'pointer'});
72 + is.loadEmbeddedIcon(tbarArrowDiv, 'tableColSortAsc', arrowSize);
73 + rotateArrowLeft();
74 +
75 + tbarArrowDiv.on('click', toggleTools);
76 + }
77 +
78 + // === Adding to toolbar functions ----------------------------
79 +
43 function addButton(id, gid, cb, tooltip) { 80 function addButton(id, gid, cb, tooltip) {
44 var btnId = tbarId + '-' + id; 81 var btnId = tbarId + '-' + id;
45 if (!validId(btnId, 'addButton')) { return null; } 82 if (!validId(btnId, 'addButton')) { return null; }
...@@ -66,46 +103,72 @@ ...@@ -66,46 +103,72 @@
66 $log.warn('Separator cannot append to div'); 103 $log.warn('Separator cannot append to div');
67 return null; 104 return null;
68 } 105 }
69 - tbarArrowDiv = tbarDiv.append('div') 106 + return tbarDiv.append('div')
70 .classed('sep', true) 107 .classed('sep', true)
71 .style('width', '2px'); 108 .style('width', '2px');
72 } 109 }
73 110
74 - function createToolbar(id, settings) { 111 + // === Main toolbar API functions ----------------------------
112 +
113 + function createToolbar(id, opts) {
75 if (!id) { 114 if (!id) {
76 $log.warn('createToolbar: no ID given'); 115 $log.warn('createToolbar: no ID given');
77 return null; 116 return null;
78 } 117 }
79 tbarId = 'tbar-' + id; 118 tbarId = 'tbar-' + id;
80 - var opts = fs.isO(settings) || {}; // default settings should be put here 119 + settings = angular.extend({}, defaultSettings, fs.isO(opts));
81 120
82 if (!validId(tbarId, 'createToolbar')) { return null; } 121 if (!validId(tbarId, 'createToolbar')) { return null; }
83 ids.push(tbarId); 122 ids.push(tbarId);
84 123
85 - tbarPanel = ps.createPanel(tbarId, opts); 124 + tbarPanel = ps.createPanel(tbarId, settings);
86 - tbarDiv = tbarPanel.classed('toolbar', true); 125 + tbarDiv = tbarPanel.classed('toolbar', true)
126 + .style('position', 'relative');
127 +
128 + createArrow();
87 129
88 return { 130 return {
89 addButton: addButton, 131 addButton: addButton,
90 addToggle: addToggle, 132 addToggle: addToggle,
91 addRadioSet: addRadioSet, 133 addRadioSet: addRadioSet,
92 - addSeparator: addSeparator 134 + addSeparator: addSeparator,
135 +
136 + show: show,
137 + hide: hide,
138 + toggleTools: toggleTools
93 } 139 }
94 } 140 }
95 141
96 - //function currently not working
97 function destroyToolbar(id) { 142 function destroyToolbar(id) {
98 - //ps.destroyPanel(id); 143 + ps.destroyPanel(id);
144 + tbarDiv = null;
145 + }
146 +
147 + function show(cb) {
148 + tbarPanel.show(cb);
149 + rotateArrowLeft();
150 + }
151 +
152 + function hide(cb) {
153 + tbarPanel.hide(cb);
154 + //tbarPanel.style(opts.edge, (arrowSize + 4 + 'px'));
155 + rotateArrowRight();
156 + }
157 +
158 + function toggleTools(cb) {
159 + if (tbarPanel.isVisible()) { hide(cb); }
160 + else { show(cb) }
99 } 161 }
100 162
101 angular.module('onosWidget') 163 angular.module('onosWidget')
102 .factory('ToolbarService', ['$log', 'FnService', 164 .factory('ToolbarService', ['$log', 'FnService',
103 - 'PanelService', 'ButtonService', 165 + 'PanelService', 'ButtonService', 'IconService',
104 - function (_$log_, _fs_, _ps_, _bns_) { 166 + function (_$log_, _fs_, _ps_, _bns_, _is_) {
105 $log = _$log_; 167 $log = _$log_;
106 fs = _fs_; 168 fs = _fs_;
107 ps = _ps_; 169 ps = _ps_;
108 bns = _bns_; 170 bns = _bns_;
171 + is = _is_;
109 172
110 return { 173 return {
111 init: init, 174 init: init,
......
...@@ -20,13 +20,21 @@ ...@@ -20,13 +20,21 @@
20 20
21 (function () { 21 (function () {
22 'use strict'; 22 'use strict';
23 + var tbs;
24 +
23 angular.module('ovSample', ['onosUtil']) 25 angular.module('ovSample', ['onosUtil'])
24 - .controller('OvSampleCtrl', ['$log', function (_$log_) { 26 + .controller('OvSampleCtrl', ['$log', 'ToolbarService',
27 + function (_$log_, _tbs_) {
25 var self = this, 28 var self = this,
26 - $log = _$log_; 29 + $log = _$log_,
30 + tbs = _tbs_;
27 31
28 self.message = 'Hey there folks!'; 32 self.message = 'Hey there folks!';
29 33
34 + var toolbar = tbs.createToolbar('sample');
35 + toolbar.addButton('some-btn', 'crown', function () {});
36 + toolbar.show();
37 +
30 $log.log('OvSampleCtrl has been created'); 38 $log.log('OvSampleCtrl has been created');
31 }]); 39 }]);
32 }()); 40 }());
......
...@@ -79,6 +79,8 @@ ...@@ -79,6 +79,8 @@
79 <link rel="stylesheet" href="app/fw/layer/quickhelp.css"> 79 <link rel="stylesheet" href="app/fw/layer/quickhelp.css">
80 <link rel="stylesheet" href="app/fw/layer/veil.css"> 80 <link rel="stylesheet" href="app/fw/layer/veil.css">
81 <link rel="stylesheet" href="app/fw/nav/nav.css"> 81 <link rel="stylesheet" href="app/fw/nav/nav.css">
82 + <link rel="stylesheet" href="app/fw/widget/button.css">
83 + <link rel="stylesheet" href="app/fw/widget/toolbar.css">
82 84
83 <!-- This is where contributed javascript will get injected --> 85 <!-- This is where contributed javascript will get injected -->
84 <!-- {INJECTED-JAVASCRIPT-START} --> 86 <!-- {INJECTED-JAVASCRIPT-START} -->
......
...@@ -74,6 +74,16 @@ describe('factory: fw/widget/toolbar.js', function () { ...@@ -74,6 +74,16 @@ describe('factory: fw/widget/toolbar.js', function () {
74 expect($log.warn).not.toHaveBeenCalled(); 74 expect($log.warn).not.toHaveBeenCalled();
75 }); 75 });
76 76
77 + it('should verify the toolbar arrow div exists', function () {
78 + tbs.createToolbar('test');
79 +
80 + var arrow = d3Elem.select('.tbarArrow');
81 + expect(arrow).toBeTruthy();
82 + expect(arrow.select('svg')).toBeTruthy();
83 + expect(arrow.select('svg').select('g')
84 + .classed('tableColSortAsc')).toBeTruthy();
85 + });
86 +
77 it('should create a button', function () { 87 it('should create a button', function () {
78 spyOn($log, 'warn'); 88 spyOn($log, 'warn');
79 var toolbar = tbs.createToolbar('test'), 89 var toolbar = tbs.createToolbar('test'),
...@@ -140,13 +150,13 @@ describe('factory: fw/widget/toolbar.js', function () { ...@@ -140,13 +150,13 @@ describe('factory: fw/widget/toolbar.js', function () {
140 expect(d3Elem.select('.sep').style('width')).toBe('2px'); 150 expect(d3Elem.select('.sep').style('width')).toBe('2px');
141 }); 151 });
142 152
143 - //it('should not append to a destroyed toolbar', function () { 153 + it('should not append to a destroyed toolbar', function () {
144 - // spyOn($log, 'warn'); 154 + spyOn($log, 'warn');
145 - // var toolbar = tbs.createToolbar1('test'); 155 + var toolbar = tbs.createToolbar('test');
146 - // expect(toolbar).not.toBeNull(); 156 + expect(toolbar).not.toBeNull();
147 - // tbs.destroyToolbar('tbar-test'); 157 + tbs.destroyToolbar('tbar-test');
148 - // expect(toolbar.addButton1('btn', 'gid', function () {})).toBeNull(); 158 + expect(toolbar.addButton('btn', 'gid', function () {})).toBeNull();
149 - // expect($log.warn).toHaveBeenCalledWith('Button cannot append to div'); 159 + expect($log.warn).toHaveBeenCalledWith('Button cannot append to div');
150 - //}); 160 + });
151 161
152 }); 162 });
......