Added graphics menu

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);
+        }
     }
 }