Added graphics menu

client/components/help_entry/help_entry.js

@@ -30,8 +30,7 @@ class HelpEntry extends HTMLElement{
 
     render(){
         this.innerHTML = `
-        <link rel="stylesheet" href="./components/help_entry/help_entry.css">
-        <script src="./components/help_popup/help_popup.js"></script>
+        <link rel="stylesheet" href="components/help_entry/help_entry.css">
         <div class="help-entry">
             <span class="help-entry-title">${this.title}</span>
             <img src="res/arrow.png" class="help-entry-arrow">     

client/components/help_popup/help_popup.css

@@ -1,6 +1,6 @@
 .help-popup{
     width: 300px;
-    height: 200px;
+    height: fit-content;
     border: 2px solid black;
     background-color: white;
     border-radius: 10px;
@@ -13,6 +13,7 @@
     margin-left: 10px;
     margin-right: 10px;
     padding-top: 10px;
+    padding-bottom: 10px;
 }
 
 .help-popup-description{

client/components/menu_popup/menu_popup.css

@@ -1,28 +1,25 @@
-#menu{
+.menu{
     width: 300px;
-    height: 200px;
+    height: fit-content;
     background-color: white;
     position: absolute;
-    top: 28px;
-    right: 50%;
     z-index: 1;
     border: 2px solid black;
 }
 
-#menu_title_container{
+.menu-title-container{
     display: flex;
     width: 100%;
     height: 20px;
 }
 
-#menu_title_container span{
+.menu-title-container span{
     margin-top: auto;
     margin-bottom: auto;
     margin-left: 5px;
-    
 }
 
-#menu-popup-close{
+.menu-title-container img{
     margin-left: auto;
     margin-right: 2px;
     margin-top: auto;

client/components/menu_popup/menu_popup.js

@@ -1,6 +1,7 @@
 class MenuPopup extends HTMLElement{
     constructor(){
         super();
+        this.entries = [new HorizontalDivider()]
     }
 
     hide(){
@@ -11,31 +12,38 @@ class MenuPopup extends HTMLElement{
         this.style.visibility = "visible";
     }
 
+    getContainer(){
+        return this.getElementsByClassName("menu")[0];
+    }
+
+    addEntry(entry){
+        this.entries.push(entry);
+    }
+
+    addHorizontalDivider(){
+        this.entries.push(new HorizontalDivider());
+    }
+
     connectedCallback(){
         this.render();        
         this.hide();
-        document.getElementById("menu-popup-close").onclick = () => {this.hide()};
+        this.getElementsByClassName("menu-title-container")[0].getElementsByTagName("img")[0].onclick = () => {this.hide()};
     }
 
     render(){
         this.innerHTML = `
-        <div id="menu">
-            <div id="menu_title_container">
+        <link rel="stylesheet" href="components/menu_popup/menu_popup.css">
+        <div class="menu">
+            <div class="menu-title-container">
                 <span>Menu</span>
-                <img src="res/close.png" id="menu-popup-close">
+                <img src="res/close.png">
             </div>
         </div>
         `;
-        let cursorDescription = `
-            To remove the cursor, you can double click on any graph.
-        `
-        let menuContainer = document.getElementById("menu");      
-        
-        menuContainer.appendChild(new HorizontalDivider());
-
-        let cursorHelp = new HelpEntry("How to remove the cursor", cursorDescription);
-
-        menuContainer.appendChild(cursorHelp);
+        let menuContainer = this.getElementsByClassName("menu")[0];
+        for (let entry of this.entries){
+            menuContainer.appendChild(entry);
+        }
     }
 }