diff --git a/js/apps/system/_admin/aardvark/APP/frontend/js/views/graphViewer2.js b/js/apps/system/_admin/aardvark/APP/frontend/js/views/graphViewer2.js index 75d14c2594..da7bded52b 100644 --- a/js/apps/system/_admin/aardvark/APP/frontend/js/views/graphViewer2.js +++ b/js/apps/system/_admin/aardvark/APP/frontend/js/views/graphViewer2.js @@ -369,8 +369,6 @@ // clear events var c = document.getElementsByClassName('sigma-mouse')[0]; c.removeEventListener('mousemove', self.drawLine.bind(this), false); - - // clear info div }, trackCursorPosition: function (e) { @@ -1032,6 +1030,7 @@ self.contextState.fromY = y; var c = document.getElementsByClassName('sigma-mouse')[0]; + self.drawHelp('Now click destination node, or click background to cancel.'); c.addEventListener('mousemove', self.drawLine.bind(this), false); self.clearOldContextMenu(); @@ -1043,7 +1042,22 @@ self.expandNode(nodeId); }; - // on hover + // add menu hover functions + + var descriptions = [ + 'Edit the node.', + 'Delete node.', + 'Set as startnode.', + 'Draw edge.', + 'Expand the node.' + ]; + + // hover functions + _.each(descriptions, function (val, key) { + wheel.navItems[key].navTitle.mouseover(function () { self.drawHelp(val); }); + wheel.navItems[key].navTitle.mouseout(function () { self.removeHelp(); }); + }); + /* TODO wheel.navItems[0].navSlice.mouseover(function (a) { $(a.target).css('opacity', '1'); @@ -1072,6 +1086,20 @@ generateMenu(e, nodeId); }, + drawHelp: function (val) { + if (document.getElementById('helpTooltip') === null) { + $(this.el).append('
' + val + '
'); + } else { + $('#helpTooltip span').text(val); + } + + $('#helpTooltip').show(); + }, + + removeHelp: function () { + $('#helpTooltip').remove(); + }, + clearMouseCanvas: function () { var c = document.getElementsByClassName('sigma-mouse')[0]; var ctx = c.getContext('2d'); @@ -1188,7 +1216,7 @@ */ drawLine: function (e) { - var context = window.App.graphViewer2.contextState; + var context = window.App.graphViewer.contextState; if (context.createEdge) { var fromX = context.fromX; @@ -1535,6 +1563,9 @@ s.bind('clickNode', function (e) { if (self.contextState.createEdge === true) { + self.clearMouseCanvas(); + self.removeHelp(); + // create the edge self.contextState._to = e.data.node.id; var fromCollection = self.contextState._from.split('/')[0]; @@ -1543,6 +1574,7 @@ // validate edgeDefinitions var foundEdgeDefinitions = self.getEdgeDefinitionCollections(fromCollection, toCollection); self.addEdgeModal(foundEdgeDefinitions, self.contextState._from, self.contextState._to); + self.clearOldContextMenu(true); } else { if (!self.dragging) { if (self.contextState.createEdge === true) { @@ -1580,6 +1612,10 @@ if (e.data.captor.isDragging) { self.clearOldContextMenu(true); self.clearMouseCanvas(); + } else if (self.contextState.createEdge === true) { + self.clearOldContextMenu(true); + self.clearMouseCanvas(); + self.removeHelp(); } else { // stage menu if (!$('#nodeContextMenu').is(':visible')) { diff --git a/js/apps/system/_admin/aardvark/APP/frontend/scss/_graphViewer2.scss b/js/apps/system/_admin/aardvark/APP/frontend/scss/_graphViewer2.scss index 59e1ed62fe..5ba46f6020 100644 --- a/js/apps/system/_admin/aardvark/APP/frontend/scss/_graphViewer2.scss +++ b/js/apps/system/_admin/aardvark/APP/frontend/scss/_graphViewer2.scss @@ -246,3 +246,19 @@ padding-right: 10px; } } + +.helpTooltip { + position: fixed; + right: 0; + text-align: center; + top: 120px; + width: 100%; + + span { + background-color: $c-bluegrey-dark; + border-radius: 2px; + color: $c-white; + padding: 10px; + padding-left: 150px; + } +} diff --git a/js/apps/system/_admin/aardvark/APP/frontend/scss/_subNavbar.scss b/js/apps/system/_admin/aardvark/APP/frontend/scss/_subNavbar.scss index e36d4d92e2..9dabe77b4a 100644 --- a/js/apps/system/_admin/aardvark/APP/frontend/scss/_subNavbar.scss +++ b/js/apps/system/_admin/aardvark/APP/frontend/scss/_subNavbar.scss @@ -85,7 +85,6 @@ margin: 0; &.top { - //background-color: $c-navbar-main-color; background-color: $c-bluegrey-dark; height: 60px; width: 100%;