From dfe7a77d42ef6dc650b51cc3309567b3cc0c666d Mon Sep 17 00:00:00 2001
From: Harm Kube <h.kube@tu-braunschweig.de>
Date: Thu, 3 Feb 2022 14:55:23 +0100
Subject: [PATCH] Marker to indicate status of collapsible
---
display/display.css | 18 ++++++++++++++++++
display/overlays/neighbors.js | 18 ++++++++++++++++++
2 files changed, 36 insertions(+)
diff --git a/display/display.css b/display/display.css
index 28c325f..1d8819c 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 46c755b..9cb7f85 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 = '-';
}
});
}
--
GitLab