diff --git a/pandora_console/include/javascript/map/MapController.js b/pandora_console/include/javascript/map/MapController.js index 2837c63f32..be2c3be26b 100644 --- a/pandora_console/include/javascript/map/MapController.js +++ b/pandora_console/include/javascript/map/MapController.js @@ -122,7 +122,7 @@ MapController.prototype.click_event = function(event) { } MapController.prototype.popup_map = function(self, event) { - // Node position and dimension + // Node position and radius nodeX = parseInt($(event.currentTarget).attr("cx")); nodeY = parseInt($(event.currentTarget).attr("cy")); nodeR = parseInt($(event.currentTarget).attr("r")); @@ -141,28 +141,33 @@ MapController.prototype.popup_map = function(self, event) { //To know the position of the dialog box if (self.xOffset(map_width, nodeX, dialog_width) && self.yOffset(map_height, nodeY, dialog_height)) { + var dialogClass = "nodeDialogBottom"; var xPos = event.pageX - dialog_width + nodeR; var yPos = event.clientY - dialog_height - nodeR - self._dialogNodeMargin; } else if (self.yOffset(map_height, nodeY, dialog_height)) { + var dialogClass = "nodeDialogBottom"; var xPos = event.pageX - nodeR; var yPos = event.clientY + -dialog_height - nodeR - self._dialogNodeMargin; } else if (self.xOffset(map_width, nodeX, dialog_width)) { + var dialogClass = "nodeDialogTop"; var xPos = event.pageX - dialog_width + nodeR; var yPos = event.clientY + nodeR + self._dialogNodeMargin; } else { + var dialogClass = "nodeDialogTop"; var xPos = event.pageX - nodeR; var yPos = event.clientY + nodeR + self._dialogNodeMargin; } $(self._target + " svg").after($("
").attr("id", "dialog_popup")); $("#dialog_popup").dialog({ + dialogClass: dialogClass, modal: false, closeOnEscape: true, show: {effect: 'fade', speed: 1000}, - title: "Ventana Modarrl!!", + title: "Node dialog", resizable: false, position: [xPos,yPos], height: dialog_height, diff --git a/pandora_console/include/styles/pandora.css b/pandora_console/include/styles/pandora.css index d6833dad11..56e5127408 100644 --- a/pandora_console/include/styles/pandora.css +++ b/pandora_console/include/styles/pandora.css @@ -3123,3 +3123,87 @@ table#policy_modules td * { transform: rotate(359deg); } } + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +/*++++++++++++++++++++++++++++++ PROVISIONAL +++++++++++++++++++++++++++++*/ +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ + +/* Top arrow to nodes dialog (Networkmap) */ +.nodeDialogTop { + position: relative; + background: #82b92e; +} +.nodeDialogTop:after { + bottom: 100%; + left: 50%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-color: transparent; + border-bottom-color: #82b92e; + border-width: 15px; + margin-left: -15px; +} + +/* Bottom arrow to nodes dialog (Networkmap) */ +.nodeDialogBottom { + position: relative; + background: #82b92e; +} +.nodeDialogBottom:after { + top: 100%; + left: 50%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-color: transparent; + border-top-color: #82b92e; + border-width: 15px; + margin-left: -15px; +} + +/* Right arrow to nodes dialog (Networkmap) */ +.nodeDialogRight { + position: relative; + background: #82b92e; +} +.nodeDialogRight:after { + left: 100%; + top: 50%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-color: transparent; + border-left-color: #82b92e; + border-width: 15px; + margin-top: -15px; +} + +/* Left arrow to nodes dialog (Networkmap) */ +.nodeDialogLeft { + position: relative; + background: #82b92e; +} +.nodeDialogLeft:after { + right: 100%; + top: 50%; + border: #82b92e; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-color: transparent; + border-right-color: #82b92e; + border-width: 15px; + margin-top: -15px; +}