홍길동 / 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 91 additions and 32 deletions
......@@ -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_;
......
......@@ -163,10 +163,17 @@ div.ctrl-btns div.separator {
}
/* 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;
}
......
......@@ -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];
......
......@@ -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_;
init();
return {
showTooltip: showTooltip,
cancelTooltip: cancelTooltip
};
}]);
.directive('tooltip', ['$rootScope', 'FnService',
function (_$rootScope_, _fs_) {
$rootScope = _$rootScope_;
fs = _fs_;
init();
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
};
}]);
}());
......
......@@ -5,6 +5,7 @@
<div class="ctrl-btns">
<div class="refresh" ng-class="{active: autoRefresh}"
icon icon-size="36" icon-id="refresh"
tooltip tt-msg="autoRefreshTip"
ng-click="toggleRefresh()"></div>
<div class="separator"></div>
......@@ -14,18 +15,22 @@
file-model="appFile">
</form>
<div icon icon-size="36" icon-id="plus"
class="active" trigger-form>
class="active" trigger-form
tooltip tt-msg="uploadTip">
</div>
<div icon icon-size="36" icon-id="play"
ng-click="appAction('activate')"
tooltip tt-msg="activateTip"
ng-class="{active: ctrlBtnState.installed}">
</div>
<div icon icon-size="36" icon-id="stop"
ng-click="appAction('deactivate')"
tooltip tt-msg="deactivateTip"
ng-class="{active: ctrlBtnState.active}">
</div>
<div icon icon-size="36" icon-id="garbage"
ng-click="appAction('uninstall')"
tooltip tt-msg="uninstallTip"
ng-class="{active: ctrlBtnState.selection}">
</div>
</div>
......
......@@ -34,6 +34,10 @@
function ($log, $scope, $http, fs, tbs, wss, ufs) {
$scope.ctrlBtnState = {};
$scope.uploadTip = 'Upload an application';
$scope.activateTip = 'Activate selected application';
$scope.deactivateTip = 'Deactivate selected application';
$scope.uninstallTip = 'Uninstall selected application';
function selCb($event, row) {
// selId comes from tableBuilder
......
......@@ -21,6 +21,7 @@
<div class="ctrl-btns">
<div class="refresh" ng-class="{active: autoRefresh}"
icon icon-size="36" icon-id="refresh"
tooltip tt-msg="autoRefreshTip"
ng-click="toggleRefresh()"></div>
</div>
</div>
......
......@@ -5,19 +5,23 @@
<div class="ctrl-btns">
<div class="refresh" ng-class="{active: autoRefresh}"
icon icon-id="refresh" icon-size="36"
tooltip tt-msg="autoRefreshTip"
ng-click="toggleRefresh()"></div>
<div class="separator"></div>
<div ng-class="{active: !!selId}"
icon icon-id="flowTable" icon-size="36"
tooltip tt-msg="flowTip"
ng-click="nav('flow')"></div>
<div ng-class="{active: !!selId}"
icon icon-id="portTable" icon-size="36"
tooltip tt-msg="portTip"
ng-click="nav('port')"></div>
<div ng-class="{active: !!selId}"
icon icon-id="groupTable" icon-size="36"
tooltip tt-msg="groupTip"
ng-click="nav('group')"></div>
</div>
</div>
......
......@@ -203,6 +203,9 @@
ns = _ns_;
var handlers = {};
$scope.panelData = [];
$scope.flowTip = 'Show flow view for selected device';
$scope.portTip = 'Show port view for selected device';
$scope.groupTip = 'Show group view for selected device';
function selCb($event, row) {
selRow = angular.element($event.currentTarget);
......
......@@ -8,6 +8,7 @@
<div class="ctrl-btns">
<div class="refresh" ng-class="{active: autoRefresh}"
icon icon-size="36" icon-id="refresh"
tooltip tt-msg="autoRefreshTip"
ng-click="toggleRefresh()"></div>
<div class="separator"></div>
......@@ -17,10 +18,12 @@
<div class="active"
icon icon-id="portTable" icon-size="36"
tooltip tt-msg="portTip"
ng-click="nav('port')"></div>
<div class="active"
icon icon-id="groupTable" icon-size="36"
tooltip tt-msg="groupTip"
ng-click="nav('group')"></div>
</div>
</div>
......
......@@ -37,6 +37,8 @@
fs = _fs_;
tbs = _tbs_;
ns = _ns_;
$scope.portTip = 'Show port view for this device';
$scope.groupTip = 'Show group view for this device';
params = $location.search();
if (params.hasOwnProperty('devId')) {
......
......@@ -24,16 +24,19 @@
<div class="ctrl-btns">
<div class="refresh" ng-class="{active: autoRefresh}"
icon icon-size="36" icon-id="refresh"
tooltip tt-msg="autoRefreshTip"
ng-click="toggleRefresh()"></div>
<div class="separator"></div>
<div class="active"
icon icon-id="flowTable" icon-size="36"
tooltip tt-msg="flowTip"
ng-click="nav('flow')"></div>
<div class="active"
icon icon-id="portTable" icon-size="36"
tooltip tt-msg="portTip"
ng-click="nav('port')"></div>
<div class="current-view"
......
......@@ -37,6 +37,8 @@
fs = _fs_;
tbs = _tbs_;
ns = _ns_;
$scope.flowTip = 'Show flow view for this device';
$scope.portTip = 'Show port view for this device';
params = $location.search();
if (params.hasOwnProperty('devId')) {
......
......@@ -5,6 +5,7 @@
<div class="ctrl-btns">
<div class="refresh" ng-class="{active: autoRefresh}"
icon icon-size="36" icon-id="refresh"
tooltip tt-msg="autoRefreshTip"
ng-click="toggleRefresh()"></div>
</div>
</div>
......
......@@ -21,6 +21,7 @@
<div class="ctrl-btns">
<div class="refresh" ng-class="{active: autoRefresh}"
icon icon-size="36" icon-id="refresh"
tooltip tt-msg="autoRefreshTip"
ng-click="toggleRefresh()"></div>
</div>
</div>
......
......@@ -21,6 +21,7 @@
<div class="ctrl-btns">
<div class="refresh" ng-class="{active: autoRefresh}"
icon icon-size="36" icon-id="refresh"
tooltip tt-msg="autoRefreshTip"
ng-click="toggleRefresh()"></div>
</div>
</div>
......
......@@ -24,12 +24,14 @@
<div class="ctrl-btns">
<div class="refresh" ng-class="{active: autoRefresh}"
icon icon-size="36" icon-id="refresh"
tooltip tt-msg="autoRefreshTip"
ng-click="toggleRefresh()"></div>
<div class="separator"></div>
<div class="active"
icon icon-id="flowTable" icon-size="36"
tooltip tt-msg="flowTip"
ng-click="nav('flow')"></div>
<div class="current-view"
......@@ -37,6 +39,7 @@
<div class="active"
icon icon-id="groupTable" icon-size="36"
tooltip tt-msg="groupTip"
ng-click="nav('group')"></div>
</div>
</div>
......
......@@ -37,6 +37,8 @@
fs = _fs_;
tbs = _tbs_;
ns = _ns_;
$scope.flowTip = 'Show flow view for this device';
$scope.groupTip = 'Show group view for this device';
params = $location.search();
if (params.hasOwnProperty('devId')) {
......
......@@ -5,6 +5,7 @@
<div class="ctrl-btns">
<div class="refresh" ng-class="{active: autoRefresh}"
icon icon-size="36" icon-id="refresh"
tooltip tt-msg="autoRefreshTip"
ng-click="toggleRefresh()"></div>
</div>
</div>
......