From 3c900e3bf800186d47b4b21d5067c4f40d42e421 Mon Sep 17 00:00:00 2001
From: Harm Kube <h.kube@tu-braunschweig.de>
Date: Fri, 11 Feb 2022 19:23:42 +0100
Subject: [PATCH] Rework of menu with unordered list for links
---
display/display.css | 47 +++++++++++++++++++++++++++--------
display/overlays/neighbors.js | 44 ++++++++++++++++----------------
2 files changed, 58 insertions(+), 33 deletions(-)
diff --git a/display/display.css b/display/display.css
index 0275120..5a839d5 100644
--- a/display/display.css
+++ b/display/display.css
@@ -277,7 +277,29 @@
font-size: 0.7vw;
}
-.collapsible {
+/*New Section */
+
+.neighbor-collapsible-title {
+ background-color: #ffffff;
+ color: #444;
+ cursor: pointer;
+ padding-top: 9px;
+ padding-bottom: 9px;
+ padding-right: 9px;
+ padding-left: 0;
+ width: 100%;
+ display: flex;
+ font-weight: bold;
+ text-align: left;
+ font-size: 20px;
+ opacity: 100%;
+ border: 2px solid white;
+ outline: none;
+ flex-direction: column;
+ position: relative;
+}
+
+.neighbor-collapsible-section {
background-color: #ffffff;
color: #444;
cursor: pointer;
@@ -294,10 +316,14 @@
flex-direction: column;
position: relative;
font-weight: bold;
- opacity: 85%;
+ opacity: 80%;
}
-.activation-hover, .collapsible:hover {
+.activation-hover-title, .neighbor-collapsible-title:hover {
+ background-color: #ccc;
+}
+
+.activation-hover-section, .neighbor-collapsible-section:hover {
background-color: #ccc;
}
@@ -309,8 +335,9 @@
flex-direction: column;
}
-.neighbor-content-links {
- padding: 5px;
+.neighbor-content-linksection {
+ padding-top: 0;
+ padding-left: 5px;
display: none;
background-color: #ffffff;
flex-direction: column;
@@ -319,9 +346,9 @@
overflow: hidden;
}
-.link-neighbor {
+.neighbor-content-link {
cursor: pointer;
- margin: 2px;
+ margin: 1px;
font-size: 14px;
}
@@ -329,7 +356,7 @@
color: red;
}
-.marker-div {
+.neighbor-collapsible-marker-div {
position: absolute;
width: 100%;
height: 2px;
@@ -338,7 +365,7 @@
left: 0;
}
-.open-status-marker {
+.neighbor-collapsible-open-status-marker {
position: absolute;
right: 20px;
font-size: 26px;
@@ -347,7 +374,7 @@
bottom: 2px;
}
-.open-status-marker-tab {
+.neighbor-tab-open-status-marker {
position: absolute;
right: 20px;
font-size: 15px;
diff --git a/display/overlays/neighbors.js b/display/overlays/neighbors.js
index 26b63c9..4e96e98 100644
--- a/display/overlays/neighbors.js
+++ b/display/overlays/neighbors.js
@@ -1,5 +1,6 @@
import * as Helpers from "../helpers";
import jQuery from "jquery";
+import { createHTMLElement } from "../helpers";
export { NodeNeighborOverlay };
@@ -35,13 +36,9 @@ class NodeNeighborOverlay {
"button",
bottomContainerDiv
);
- coll.className = "collapsible";
+ coll.className = "neighbor-collapsible-title";
coll.innerText = "Verwandte Inhalte";
- coll.style.display = "flex";
- coll.style.fontWeight = "bold";
coll.style.textAlign = "center";
- coll.style.fontSize = "20px";
- coll.style.opacity = "100%";
// Div that displays the information about all the chapters
var contentTabs = Helpers.createDiv(
@@ -50,18 +47,11 @@ 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 = '-';
}
});
@@ -79,20 +69,20 @@ class NodeNeighborOverlay {
"button",
contentTabs
);
- collTab.className = "collapsible";
+ collTab.className = "neighbor-collapsible-section";
collTab.innerText = cls;
collTab.type = cls;
this.tabNavHandles[cls] = collTab;
const collTabMarker = Helpers.createDiv(
- "marker-div",
+ "neighbor-collapsible-marker-div",
collTab
);
collTabMarker.style.borderColor = color;
collTabMarker.style.backgroundColor = color;
const openMarkerTabs = Helpers.createDiv(
- "open-status-marker-tab",
+ "neighbor-tab-open-status-marker",
collTab
);
openMarkerTabs.innerText = '+';
@@ -100,10 +90,18 @@ class NodeNeighborOverlay {
// Content of the different tabs
const collTabContent = Helpers.createDiv(
- "neighbor-content-links",
+ "neighbor-content-linksection",
contentTabs
);
collTabContent.type = cls;
+
+ const list = createHTMLElement(
+ "ul",
+ collTabContent
+ );
+ list.style.margin = 0;
+ collTabContent.list = list;
+
this.tabContentPages[cls] = collTabContent;
collTab.addEventListener("click", function() {
if(collTabContent.style.display === "flex") {
@@ -125,7 +123,7 @@ class NodeNeighborOverlay {
*/
clearTabContentPages() {
for (const page of Object.values(this.tabContentPages)) {
- jQuery(page).empty();
+ jQuery(page.list).empty();
if(page.style.display === "flex") {
page.style.display = "none";
}
@@ -138,9 +136,9 @@ class NodeNeighborOverlay {
* @returns {HTMLDivElement}
*/
createReference(target) {
- const linkDiv = document.createElement("div");
- var linkText = document.createTextNode("- " + target.name);
- linkDiv.className = "link-neighbor";
+ const linkDiv = document.createElement("li");
+ var linkText = document.createTextNode(target.name);
+ linkDiv.className = "neighbor-content-link";
linkDiv.appendChild(linkText);
jQuery(linkDiv).on("click", () => {
this.graph.focusOnNode(target);
@@ -159,9 +157,9 @@ class NodeNeighborOverlay {
const target = link.source == node ? link.target : link.source;
const reference = this.createReference(target);
if (this.type === "link") {
- this.tabContentPages[link.type].appendChild(reference);
+ this.tabContentPages[link.type].list.appendChild(reference);
} else {
- this.tabContentPages[target.type].appendChild(reference);
+ this.tabContentPages[target.type].list.appendChild(reference);
}
}
this.hideContentPages();
@@ -173,7 +171,7 @@ class NodeNeighborOverlay {
*/
hideContentPages () {
for (const page of Object.values(this.tabContentPages)) {
- if(!page.hasChildNodes()) {
+ if(!page.list.hasChildNodes()) {
this.tabNavHandles[page.type].style.display = "none";
} else {
this.tabNavHandles[page.type].style.display = "flex";
--
GitLab