홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
eef67ae1 1 parent dfc3b861

GUI -- Directive for tooltips on icon elements created. Control buttons on table… 

… views now have tooltips.

Change-Id: I77d73efa25bfc3adeb5519d5ca087475f5523c7d
Inline Side-by-side
Showing 19 changed files with 81 additions and 22 deletions
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
21 'use strict'; 21 'use strict';
22 22
23 // injected refs 23 // injected refs
24 - var $log, $rootScope, fs, is, tts; 24 + var $log, fs, is, tts;
25 25
26 // configuration 26 // configuration
27 var btnSize = 25, 27 var btnSize = 25,
...@@ -49,15 +49,6 @@ ...@@ -49,15 +49,6 @@
49 return btnSize + 2 * btnPadding; 49 return btnSize + 2 * btnPadding;
50 } 50 }
51 51
52 - function addTooltip(elem, tooltip) {
53 - elem.on('mouseover', function () { tts.showTooltip(this, tooltip); });
54 - elem.on('mouseout', function () { tts.cancelTooltip(this); });
55 - $rootScope.$on('$routeChangeStart', function () {
56 - tts.cancelTooltip(elem.node());
57 - });
58 - }
59 -
60 -
61 // === BUTTON ================================================= 52 // === BUTTON =================================================
62 53
63 // div is where to put the button (d3.selection of a DIV element) 54 // div is where to put the button (d3.selection of a DIV element)
...@@ -72,7 +63,7 @@ ...@@ -72,7 +63,7 @@
72 cbFnc = fs.isF(cb) || noop; 63 cbFnc = fs.isF(cb) || noop;
73 64
74 is.loadIcon(btnDiv, gid, btnSize, true); 65 is.loadIcon(btnDiv, gid, btnSize, true);
75 - if (tooltip) { addTooltip(btnDiv, tooltip); } 66 + if (tooltip) { tts.addTooltip(btnDiv, tooltip); }
76 67
77 btnDiv.on('click', cbFnc); 68 btnDiv.on('click', cbFnc);
78 69
...@@ -100,7 +91,7 @@ ...@@ -100,7 +91,7 @@
100 91
101 is.loadIcon(togDiv, gid, btnSize, true); 92 is.loadIcon(togDiv, gid, btnSize, true);
102 togDiv.classed('selected', sel); 93 togDiv.classed('selected', sel);
103 - if (tooltip) { addTooltip(togDiv, tooltip); } 94 + if (tooltip) { tts.addTooltip(togDiv, tooltip); }
104 95
105 function _toggle(b, nocb) { 96 function _toggle(b, nocb) {
106 sel = (b === undefined) ? !sel : !!b; 97 sel = (b === undefined) ? !sel : !!b;
...@@ -190,7 +181,7 @@ ...@@ -190,7 +181,7 @@
190 rbdiv.classed('selected', initSel); 181 rbdiv.classed('selected', initSel);
191 rbdiv.on('click', rbclick); 182 rbdiv.on('click', rbclick);
192 is.loadIcon(rbdiv, btn.gid, btnSize, true); 183 is.loadIcon(rbdiv, btn.gid, btnSize, true);
193 - if (btn.tooltip) { addTooltip(rbdiv, btn.tooltip); } 184 + if (btn.tooltip) { tts.addTooltip(rbdiv, btn.tooltip); }
194 angular.extend(btn, { 185 angular.extend(btn, {
195 el: rbdiv, 186 el: rbdiv,
196 id: rid, 187 id: rid,
...@@ -254,11 +245,10 @@ ...@@ -254,11 +245,10 @@
254 245
255 angular.module('onosWidget') 246 angular.module('onosWidget')
256 .factory('ButtonService', 247 .factory('ButtonService',
257 - ['$log', '$rootScope', 'FnService', 'IconService', 'TooltipService', 248 + ['$log', 'FnService', 'IconService', 'TooltipService',
258 249
259 - function (_$log_, _$rootScope_, _fs_, _is_, _tts_) { 250 + function (_$log_, _fs_, _is_, _tts_) {
260 $log = _$log_; 251 $log = _$log_;
261 - $rootScope = _$rootScope_;
262 fs = _fs_; 252 fs = _fs_;
263 is = _is_; 253 is = _is_;
264 tts = _tts_; 254 tts = _tts_;
......
...@@ -163,10 +163,17 @@ div.ctrl-btns div.separator { ...@@ -163,10 +163,17 @@ div.ctrl-btns div.separator {
163 } 163 }
164 164
165 /* Refresh button specific */ 165 /* Refresh button specific */
166 +.light .ctrl-btns div.refresh.active g.icon rect {
167 + fill: #964949;
168 +}
169 +
170 +.dark .ctrl-btns div.refresh.active g.icon rect {
171 + fill: #9B4641;
172 +}
166 .light .ctrl-btns div.refresh:hover g.icon rect { 173 .light .ctrl-btns div.refresh:hover g.icon rect {
167 - fill: #800; 174 + fill: #964949;
168 } 175 }
169 176
170 .dark .ctrl-btns div.refresh:hover g.icon rect { 177 .dark .ctrl-btns div.refresh:hover g.icon rect {
171 - fill: #CE5650; 178 + fill: #9B4641;
172 } 179 }
......
...@@ -50,6 +50,7 @@ ...@@ -50,6 +50,7 @@
50 o.scope.tableData = []; 50 o.scope.tableData = [];
51 o.scope.sortParams = {}; 51 o.scope.sortParams = {};
52 o.scope.autoRefresh = true; 52 o.scope.autoRefresh = true;
53 + o.scope.autoRefreshTip = 'Toggle auto refresh';
53 54
54 function respCb(data) { 55 function respCb(data) {
55 o.scope.tableData = data[root]; 56 o.scope.tableData = data[root];
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
22 'use strict'; 22 'use strict';
23 23
24 // injected references 24 // injected references
25 - var $log, fs; 25 + var $log, $rootScope, fs;
26 26
27 // constants 27 // constants
28 var hoverHeight = 35, 28 var hoverHeight = 35,
...@@ -65,6 +65,14 @@ ...@@ -65,6 +65,14 @@
65 65
66 // === API functions ------------------------------------------------ 66 // === API functions ------------------------------------------------
67 67
68 + function addTooltip(elem, tooltip) {
69 + elem.on('mouseover', function () { showTooltip(this, tooltip); });
70 + elem.on('mouseout', function () { cancelTooltip(this); });
71 + $rootScope.$on('$routeChangeStart', function () {
72 + cancelTooltip(elem.node());
73 + });
74 + }
75 +
68 function showTooltip(el, msg) { 76 function showTooltip(el, msg) {
69 // tooltips don't make sense on mobile devices 77 // tooltips don't make sense on mobile devices
70 if (!el || !msg || fs.isMobile()) { 78 if (!el || !msg || fs.isMobile()) {
...@@ -105,15 +113,32 @@ ...@@ -105,15 +113,32 @@
105 } 113 }
106 114
107 angular.module('onosWidget') 115 angular.module('onosWidget')
108 - .factory('TooltipService', ['$log', 'FnService',
109 116
110 - function (_$log_, _fs_) { 117 + .directive('tooltip', ['$rootScope', 'FnService',
118 + function (_$rootScope_, _fs_) {
119 + $rootScope = _$rootScope_;
120 + fs = _fs_;
121 +
122 + init();
123 +
124 + return {
125 + restrict: 'A',
126 + link: function (scope, elem, attrs) {
127 + addTooltip(d3.select(elem[0]), scope[attrs.ttMsg]);
128 + }
129 + };
130 + }])
131 +
132 + .factory('TooltipService', ['$log', '$rootScope', 'FnService',
133 + function (_$log_, _$rootScope_, _fs_) {
111 $log = _$log_; 134 $log = _$log_;
135 + $rootScope = _$rootScope_;
112 fs = _fs_; 136 fs = _fs_;
113 137
114 init(); 138 init();
115 139
116 return { 140 return {
141 + addTooltip: addTooltip,
117 showTooltip: showTooltip, 142 showTooltip: showTooltip,
118 cancelTooltip: cancelTooltip 143 cancelTooltip: cancelTooltip
119 }; 144 };
......
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
5 <div class="ctrl-btns"> 5 <div class="ctrl-btns">
6 <div class="refresh" ng-class="{active: autoRefresh}" 6 <div class="refresh" ng-class="{active: autoRefresh}"
7 icon icon-size="36" icon-id="refresh" 7 icon icon-size="36" icon-id="refresh"
8 + tooltip tt-msg="autoRefreshTip"
8 ng-click="toggleRefresh()"></div> 9 ng-click="toggleRefresh()"></div>
9 <div class="separator"></div> 10 <div class="separator"></div>
10 11
...@@ -14,18 +15,22 @@ ...@@ -14,18 +15,22 @@
14 file-model="appFile"> 15 file-model="appFile">
15 </form> 16 </form>
16 <div icon icon-size="36" icon-id="plus" 17 <div icon icon-size="36" icon-id="plus"
17 - class="active" trigger-form> 18 + class="active" trigger-form
19 + tooltip tt-msg="uploadTip">
18 </div> 20 </div>
19 <div icon icon-size="36" icon-id="play" 21 <div icon icon-size="36" icon-id="play"
20 ng-click="appAction('activate')" 22 ng-click="appAction('activate')"
23 + tooltip tt-msg="activateTip"
21 ng-class="{active: ctrlBtnState.installed}"> 24 ng-class="{active: ctrlBtnState.installed}">
22 </div> 25 </div>
23 <div icon icon-size="36" icon-id="stop" 26 <div icon icon-size="36" icon-id="stop"
24 ng-click="appAction('deactivate')" 27 ng-click="appAction('deactivate')"
28 + tooltip tt-msg="deactivateTip"
25 ng-class="{active: ctrlBtnState.active}"> 29 ng-class="{active: ctrlBtnState.active}">
26 </div> 30 </div>
27 <div icon icon-size="36" icon-id="garbage" 31 <div icon icon-size="36" icon-id="garbage"
28 ng-click="appAction('uninstall')" 32 ng-click="appAction('uninstall')"
33 + tooltip tt-msg="uninstallTip"
29 ng-class="{active: ctrlBtnState.selection}"> 34 ng-class="{active: ctrlBtnState.selection}">
30 </div> 35 </div>
31 </div> 36 </div>
......
...@@ -34,6 +34,10 @@ ...@@ -34,6 +34,10 @@
34 34
35 function ($log, $scope, $http, fs, tbs, wss, ufs) { 35 function ($log, $scope, $http, fs, tbs, wss, ufs) {
36 $scope.ctrlBtnState = {}; 36 $scope.ctrlBtnState = {};
37 + $scope.uploadTip = 'Upload an application';
38 + $scope.activateTip = 'Activate selected application';
39 + $scope.deactivateTip = 'Deactivate selected application';
40 + $scope.uninstallTip = 'Uninstall selected application';
37 41
38 function selCb($event, row) { 42 function selCb($event, row) {
39 // selId comes from tableBuilder 43 // selId comes from tableBuilder
......
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
21 <div class="ctrl-btns"> 21 <div class="ctrl-btns">
22 <div class="refresh" ng-class="{active: autoRefresh}" 22 <div class="refresh" ng-class="{active: autoRefresh}"
23 icon icon-size="36" icon-id="refresh" 23 icon icon-size="36" icon-id="refresh"
24 + tooltip tt-msg="autoRefreshTip"
24 ng-click="toggleRefresh()"></div> 25 ng-click="toggleRefresh()"></div>
25 </div> 26 </div>
26 </div> 27 </div>
......
...@@ -5,19 +5,23 @@ ...@@ -5,19 +5,23 @@
5 <div class="ctrl-btns"> 5 <div class="ctrl-btns">
6 <div class="refresh" ng-class="{active: autoRefresh}" 6 <div class="refresh" ng-class="{active: autoRefresh}"
7 icon icon-id="refresh" icon-size="36" 7 icon icon-id="refresh" icon-size="36"
8 + tooltip tt-msg="autoRefreshTip"
8 ng-click="toggleRefresh()"></div> 9 ng-click="toggleRefresh()"></div>
9 <div class="separator"></div> 10 <div class="separator"></div>
10 11
11 <div ng-class="{active: !!selId}" 12 <div ng-class="{active: !!selId}"
12 icon icon-id="flowTable" icon-size="36" 13 icon icon-id="flowTable" icon-size="36"
14 + tooltip tt-msg="flowTip"
13 ng-click="nav('flow')"></div> 15 ng-click="nav('flow')"></div>
14 16
15 <div ng-class="{active: !!selId}" 17 <div ng-class="{active: !!selId}"
16 icon icon-id="portTable" icon-size="36" 18 icon icon-id="portTable" icon-size="36"
19 + tooltip tt-msg="portTip"
17 ng-click="nav('port')"></div> 20 ng-click="nav('port')"></div>
18 21
19 <div ng-class="{active: !!selId}" 22 <div ng-class="{active: !!selId}"
20 icon icon-id="groupTable" icon-size="36" 23 icon icon-id="groupTable" icon-size="36"
24 + tooltip tt-msg="groupTip"
21 ng-click="nav('group')"></div> 25 ng-click="nav('group')"></div>
22 </div> 26 </div>
23 </div> 27 </div>
......
...@@ -203,6 +203,9 @@ ...@@ -203,6 +203,9 @@
203 ns = _ns_; 203 ns = _ns_;
204 var handlers = {}; 204 var handlers = {};
205 $scope.panelData = []; 205 $scope.panelData = [];
206 + $scope.flowTip = 'Show flow view for selected device';
207 + $scope.portTip = 'Show port view for selected device';
208 + $scope.groupTip = 'Show group view for selected device';
206 209
207 function selCb($event, row) { 210 function selCb($event, row) {
208 selRow = angular.element($event.currentTarget); 211 selRow = angular.element($event.currentTarget);
......
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
8 <div class="ctrl-btns"> 8 <div class="ctrl-btns">
9 <div class="refresh" ng-class="{active: autoRefresh}" 9 <div class="refresh" ng-class="{active: autoRefresh}"
10 icon icon-size="36" icon-id="refresh" 10 icon icon-size="36" icon-id="refresh"
11 + tooltip tt-msg="autoRefreshTip"
11 ng-click="toggleRefresh()"></div> 12 ng-click="toggleRefresh()"></div>
12 13
13 <div class="separator"></div> 14 <div class="separator"></div>
...@@ -17,10 +18,12 @@ ...@@ -17,10 +18,12 @@
17 18
18 <div class="active" 19 <div class="active"
19 icon icon-id="portTable" icon-size="36" 20 icon icon-id="portTable" icon-size="36"
21 + tooltip tt-msg="portTip"
20 ng-click="nav('port')"></div> 22 ng-click="nav('port')"></div>
21 23
22 <div class="active" 24 <div class="active"
23 icon icon-id="groupTable" icon-size="36" 25 icon icon-id="groupTable" icon-size="36"
26 + tooltip tt-msg="groupTip"
24 ng-click="nav('group')"></div> 27 ng-click="nav('group')"></div>
25 </div> 28 </div>
26 </div> 29 </div>
......
...@@ -37,6 +37,8 @@ ...@@ -37,6 +37,8 @@
37 fs = _fs_; 37 fs = _fs_;
38 tbs = _tbs_; 38 tbs = _tbs_;
39 ns = _ns_; 39 ns = _ns_;
40 + $scope.portTip = 'Show port view for this device';
41 + $scope.groupTip = 'Show group view for this device';
40 42
41 params = $location.search(); 43 params = $location.search();
42 if (params.hasOwnProperty('devId')) { 44 if (params.hasOwnProperty('devId')) {
......
...@@ -24,16 +24,19 @@ ...@@ -24,16 +24,19 @@
24 <div class="ctrl-btns"> 24 <div class="ctrl-btns">
25 <div class="refresh" ng-class="{active: autoRefresh}" 25 <div class="refresh" ng-class="{active: autoRefresh}"
26 icon icon-size="36" icon-id="refresh" 26 icon icon-size="36" icon-id="refresh"
27 + tooltip tt-msg="autoRefreshTip"
27 ng-click="toggleRefresh()"></div> 28 ng-click="toggleRefresh()"></div>
28 29
29 <div class="separator"></div> 30 <div class="separator"></div>
30 31
31 <div class="active" 32 <div class="active"
32 icon icon-id="flowTable" icon-size="36" 33 icon icon-id="flowTable" icon-size="36"
34 + tooltip tt-msg="flowTip"
33 ng-click="nav('flow')"></div> 35 ng-click="nav('flow')"></div>
34 36
35 <div class="active" 37 <div class="active"
36 icon icon-id="portTable" icon-size="36" 38 icon icon-id="portTable" icon-size="36"
39 + tooltip tt-msg="portTip"
37 ng-click="nav('port')"></div> 40 ng-click="nav('port')"></div>
38 41
39 <div class="current-view" 42 <div class="current-view"
......
...@@ -37,6 +37,8 @@ ...@@ -37,6 +37,8 @@
37 fs = _fs_; 37 fs = _fs_;
38 tbs = _tbs_; 38 tbs = _tbs_;
39 ns = _ns_; 39 ns = _ns_;
40 + $scope.flowTip = 'Show flow view for this device';
41 + $scope.portTip = 'Show port view for this device';
40 42
41 params = $location.search(); 43 params = $location.search();
42 if (params.hasOwnProperty('devId')) { 44 if (params.hasOwnProperty('devId')) {
......
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
5 <div class="ctrl-btns"> 5 <div class="ctrl-btns">
6 <div class="refresh" ng-class="{active: autoRefresh}" 6 <div class="refresh" ng-class="{active: autoRefresh}"
7 icon icon-size="36" icon-id="refresh" 7 icon icon-size="36" icon-id="refresh"
8 + tooltip tt-msg="autoRefreshTip"
8 ng-click="toggleRefresh()"></div> 9 ng-click="toggleRefresh()"></div>
9 </div> 10 </div>
10 </div> 11 </div>
......
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
21 <div class="ctrl-btns"> 21 <div class="ctrl-btns">
22 <div class="refresh" ng-class="{active: autoRefresh}" 22 <div class="refresh" ng-class="{active: autoRefresh}"
23 icon icon-size="36" icon-id="refresh" 23 icon icon-size="36" icon-id="refresh"
24 + tooltip tt-msg="autoRefreshTip"
24 ng-click="toggleRefresh()"></div> 25 ng-click="toggleRefresh()"></div>
25 </div> 26 </div>
26 </div> 27 </div>
......
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
21 <div class="ctrl-btns"> 21 <div class="ctrl-btns">
22 <div class="refresh" ng-class="{active: autoRefresh}" 22 <div class="refresh" ng-class="{active: autoRefresh}"
23 icon icon-size="36" icon-id="refresh" 23 icon icon-size="36" icon-id="refresh"
24 + tooltip tt-msg="autoRefreshTip"
24 ng-click="toggleRefresh()"></div> 25 ng-click="toggleRefresh()"></div>
25 </div> 26 </div>
26 </div> 27 </div>
......
...@@ -24,12 +24,14 @@ ...@@ -24,12 +24,14 @@
24 <div class="ctrl-btns"> 24 <div class="ctrl-btns">
25 <div class="refresh" ng-class="{active: autoRefresh}" 25 <div class="refresh" ng-class="{active: autoRefresh}"
26 icon icon-size="36" icon-id="refresh" 26 icon icon-size="36" icon-id="refresh"
27 + tooltip tt-msg="autoRefreshTip"
27 ng-click="toggleRefresh()"></div> 28 ng-click="toggleRefresh()"></div>
28 29
29 <div class="separator"></div> 30 <div class="separator"></div>
30 31
31 <div class="active" 32 <div class="active"
32 icon icon-id="flowTable" icon-size="36" 33 icon icon-id="flowTable" icon-size="36"
34 + tooltip tt-msg="flowTip"
33 ng-click="nav('flow')"></div> 35 ng-click="nav('flow')"></div>
34 36
35 <div class="current-view" 37 <div class="current-view"
...@@ -37,6 +39,7 @@ ...@@ -37,6 +39,7 @@
37 39
38 <div class="active" 40 <div class="active"
39 icon icon-id="groupTable" icon-size="36" 41 icon icon-id="groupTable" icon-size="36"
42 + tooltip tt-msg="groupTip"
40 ng-click="nav('group')"></div> 43 ng-click="nav('group')"></div>
41 </div> 44 </div>
42 </div> 45 </div>
......
...@@ -37,6 +37,8 @@ ...@@ -37,6 +37,8 @@
37 fs = _fs_; 37 fs = _fs_;
38 tbs = _tbs_; 38 tbs = _tbs_;
39 ns = _ns_; 39 ns = _ns_;
40 + $scope.flowTip = 'Show flow view for this device';
41 + $scope.groupTip = 'Show group view for this device';
40 42
41 params = $location.search(); 43 params = $location.search();
42 if (params.hasOwnProperty('devId')) { 44 if (params.hasOwnProperty('devId')) {
......
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
5 <div class="ctrl-btns"> 5 <div class="ctrl-btns">
6 <div class="refresh" ng-class="{active: autoRefresh}" 6 <div class="refresh" ng-class="{active: autoRefresh}"
7 icon icon-size="36" icon-id="refresh" 7 icon icon-size="36" icon-id="refresh"
8 + tooltip tt-msg="autoRefreshTip"
8 ng-click="toggleRefresh()"></div> 9 ng-click="toggleRefresh()"></div>
9 </div> 10 </div>
10 </div> 11 </div>
......