diff --git a/display/display.css b/display/display.css index 28c325ff3fee8f5ca994ac23a44693b185d247c6..1d8819c7b67dfa0cdafe6253b50f9858d0b6203f 100644 --- a/display/display.css +++ b/display/display.css @@ -334,3 +334,21 @@ bottom: 0; left: 0; } + +.open-status-marker { + position: absolute; + right: 20px; + font-size: 26px; + color: #595858; + top: 2px; + bottom: 2px; +} + +.open-status-marker-tab { + position: absolute; + right: 20px; + font-size: 15px; + color: #595858; + top: 10px; + bottom: 10px; +} diff --git a/display/overlays/neighbors.js b/display/overlays/neighbors.js index 46c755bab2aa17695a31af8230ecdd3391018d5e..9cb7f855643835b625722882453840de3d814a69 100644 --- a/display/overlays/neighbors.js +++ b/display/overlays/neighbors.js @@ -49,13 +49,23 @@ class NodeNeighborOverlay { ); this.contentTab = contentTabs; contentTabs.style.display = "flex"; + const openMarker = Helpers.createDiv( + "open-status-marker", + coll + ); + openMarker.innerText = '-'; coll.addEventListener("click", function() { if(contentTabs.style.display === "flex") { contentTabs.style.display = "none"; + openMarker.innerText = '+'; } else { contentTabs.style.display = "flex"; + openMarker.innerText = '-'; } }); + + + const colors = this.type === "link" ? this.graph.edgeColors @@ -79,6 +89,12 @@ class NodeNeighborOverlay { collTabMarker.style.borderColor = color; collTabMarker.style.backgroundColor = color; + const openMarkerTabs = Helpers.createDiv( + "open-status-marker-tab", + collTab + ); + openMarkerTabs.innerText = '+'; + // Content of the different tabs const collTabContent = Helpers.createDiv( "neighbor-content-links", @@ -89,8 +105,10 @@ class NodeNeighborOverlay { collTab.addEventListener("click", function() { if(collTabContent.style.display === "flex") { collTabContent.style.display = "none"; + openMarkerTabs.innerText = '+'; } else { collTabContent.style.display = "flex"; + openMarkerTabs.innerText = '-'; } }); }