GUI -- Directive for tooltips on icon elements created. Control buttons on table views now have tooltips.
Change-Id: I77d73efa25bfc3adeb5519d5ca087475f5523c7d
diff --git a/web/gui/src/main/webapp/app/fw/widget/button.js b/web/gui/src/main/webapp/app/fw/widget/button.js
index 721f604..09cdd43 100644
--- a/web/gui/src/main/webapp/app/fw/widget/button.js
+++ b/web/gui/src/main/webapp/app/fw/widget/button.js
@@ -21,7 +21,7 @@
'use strict';
// injected refs
- var $log, $rootScope, fs, is, tts;
+ var $log, fs, is, tts;
// configuration
var btnSize = 25,
@@ -49,15 +49,6 @@
return btnSize + 2 * btnPadding;
}
- function addTooltip(elem, tooltip) {
- elem.on('mouseover', function () { tts.showTooltip(this, tooltip); });
- elem.on('mouseout', function () { tts.cancelTooltip(this); });
- $rootScope.$on('$routeChangeStart', function () {
- tts.cancelTooltip(elem.node());
- });
- }
-
-
// === BUTTON =================================================
// div is where to put the button (d3.selection of a DIV element)
@@ -72,7 +63,7 @@
cbFnc = fs.isF(cb) || noop;
is.loadIcon(btnDiv, gid, btnSize, true);
- if (tooltip) { addTooltip(btnDiv, tooltip); }
+ if (tooltip) { tts.addTooltip(btnDiv, tooltip); }
btnDiv.on('click', cbFnc);
@@ -100,7 +91,7 @@
is.loadIcon(togDiv, gid, btnSize, true);
togDiv.classed('selected', sel);
- if (tooltip) { addTooltip(togDiv, tooltip); }
+ if (tooltip) { tts.addTooltip(togDiv, tooltip); }
function _toggle(b, nocb) {
sel = (b === undefined) ? !sel : !!b;
@@ -190,7 +181,7 @@
rbdiv.classed('selected', initSel);
rbdiv.on('click', rbclick);
is.loadIcon(rbdiv, btn.gid, btnSize, true);
- if (btn.tooltip) { addTooltip(rbdiv, btn.tooltip); }
+ if (btn.tooltip) { tts.addTooltip(rbdiv, btn.tooltip); }
angular.extend(btn, {
el: rbdiv,
id: rid,
@@ -254,11 +245,10 @@
angular.module('onosWidget')
.factory('ButtonService',
- ['$log', '$rootScope', 'FnService', 'IconService', 'TooltipService',
+ ['$log', 'FnService', 'IconService', 'TooltipService',
- function (_$log_, _$rootScope_, _fs_, _is_, _tts_) {
+ function (_$log_, _fs_, _is_, _tts_) {
$log = _$log_;
- $rootScope = _$rootScope_;
fs = _fs_;
is = _is_;
tts = _tts_;
diff --git a/web/gui/src/main/webapp/app/fw/widget/table.css b/web/gui/src/main/webapp/app/fw/widget/table.css
index e1dc708..ae5ef03 100644
--- a/web/gui/src/main/webapp/app/fw/widget/table.css
+++ b/web/gui/src/main/webapp/app/fw/widget/table.css
@@ -163,10 +163,17 @@
}
/* Refresh button specific */
+.light .ctrl-btns div.refresh.active g.icon rect {
+ fill: #964949;
+}
+
+.dark .ctrl-btns div.refresh.active g.icon rect {
+ fill: #9B4641;
+}
.light .ctrl-btns div.refresh:hover g.icon rect {
- fill: #800;
+ fill: #964949;
}
.dark .ctrl-btns div.refresh:hover g.icon rect {
- fill: #CE5650;
+ fill: #9B4641;
}
diff --git a/web/gui/src/main/webapp/app/fw/widget/tableBuilder.js b/web/gui/src/main/webapp/app/fw/widget/tableBuilder.js
index ba04b30..4f418e7 100644
--- a/web/gui/src/main/webapp/app/fw/widget/tableBuilder.js
+++ b/web/gui/src/main/webapp/app/fw/widget/tableBuilder.js
@@ -50,6 +50,7 @@
o.scope.tableData = [];
o.scope.sortParams = {};
o.scope.autoRefresh = true;
+ o.scope.autoRefreshTip = 'Toggle auto refresh';
function respCb(data) {
o.scope.tableData = data[root];
diff --git a/web/gui/src/main/webapp/app/fw/widget/tooltip.js b/web/gui/src/main/webapp/app/fw/widget/tooltip.js
index 46b5f80..dd8a695 100644
--- a/web/gui/src/main/webapp/app/fw/widget/tooltip.js
+++ b/web/gui/src/main/webapp/app/fw/widget/tooltip.js
@@ -22,7 +22,7 @@
'use strict';
// injected references
- var $log, fs;
+ var $log, $rootScope, fs;
// constants
var hoverHeight = 35,
@@ -65,6 +65,14 @@
// === API functions ------------------------------------------------
+ function addTooltip(elem, tooltip) {
+ elem.on('mouseover', function () { showTooltip(this, tooltip); });
+ elem.on('mouseout', function () { cancelTooltip(this); });
+ $rootScope.$on('$routeChangeStart', function () {
+ cancelTooltip(elem.node());
+ });
+ }
+
function showTooltip(el, msg) {
// tooltips don't make sense on mobile devices
if (!el || !msg || fs.isMobile()) {
@@ -105,17 +113,34 @@
}
angular.module('onosWidget')
- .factory('TooltipService', ['$log', 'FnService',
- function (_$log_, _fs_) {
- $log = _$log_;
- fs = _fs_;
+ .directive('tooltip', ['$rootScope', 'FnService',
+ function (_$rootScope_, _fs_) {
+ $rootScope = _$rootScope_;
+ fs = _fs_;
- init();
+ init();
- return {
- showTooltip: showTooltip,
- cancelTooltip: cancelTooltip
- };
- }]);
+ return {
+ restrict: 'A',
+ link: function (scope, elem, attrs) {
+ addTooltip(d3.select(elem[0]), scope[attrs.ttMsg]);
+ }
+ };
+ }])
+
+ .factory('TooltipService', ['$log', '$rootScope', 'FnService',
+ function (_$log_, _$rootScope_, _fs_) {
+ $log = _$log_;
+ $rootScope = _$rootScope_;
+ fs = _fs_;
+
+ init();
+
+ return {
+ addTooltip: addTooltip,
+ showTooltip: showTooltip,
+ cancelTooltip: cancelTooltip
+ };
+ }]);
}());