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">
+        <link rel="stylesheet" href="components/help_entry/help_entry.css">
-        <script src="./components/help_popup/help_popup.js"></script>
         <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">
+        <link rel="stylesheet" href="components/menu_popup/menu_popup.css">
-            <div id="menu_title_container">
+        <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 = `
+        let menuContainer = this.getElementsByClassName("menu")[0];
-            To remove the cursor, you can double click on any graph.
+        for (let entry of this.entries){
-        `
+            menuContainer.appendChild(entry);
-        let menuContainer = document.getElementById("menu");      
+        }
-        
-        menuContainer.appendChild(new HorizontalDivider());
-
-        let cursorHelp = new HelpEntry("How to remove the cursor", cursorDescription);
-
-        menuContainer.appendChild(cursorHelp);
     }
 }
 

client/cssFiles/SEAWebClientGraphics.css

@@ -3,13 +3,13 @@
 }
 
 
-.panel.graphics span:first-child{
+/* .panel.graphics span:nth-child(1){
     display: none;
-    /* margin: 0 1em;
+    margin: 0 1em;
     display: flex;
     user-select: none;
-    -webkit-user-select: none; */
+    -webkit-user-select: none;
-}
+} */
 
 /* .panel.graphics div{
     margin-left: 1em;

client/cssFiles/SEAWebClientSwiper.css

@@ -22,13 +22,13 @@
 /* PANEL */
 .panel {
 	background-color: #303030;
-	color: white;
 	position: absolute;
 	z-index: 20;
 	width: 100%;
 	height: 30px;
 }
 .panel:not(.graphics) {
+	color: white;
 	text-align: center;
 	padding: 6px 6px 6px 6px;
 }

client/jsFiles/SEAWebClientGraphics.js

@@ -262,6 +262,21 @@ let globalIndicators = (function (){
 
 })()
 
+function loadGraphicsMenu(panel){
+
+    let menuGraphicsPopup = new MenuPopup();
+    let removeCursorHelpEntry = new HelpEntry("How to remove the cursor", "You cam double click/tap on any graph.");
+    menuGraphicsPopup.addEntry(removeCursorHelpEntry);
+
+    let graphicsMenuControl = new Control("res/menu_white.png", "res/menu_white.png", "Menu", () => {menuGraphicsPopup.show()});
+    panel.appendChild(menuGraphicsPopup);
+    menuGraphicsPopup.getContainer().style.top = "28px";
+    menuGraphicsPopup.getContainer().style.right = "20px";
+    panel.appendChild(graphicsMenuControl);
+    graphicsMenuControl.style.marginLeft="6px";
+    graphicsMenuControl.style.marginRight="6px";
+}
+
 let graphs = (function (){
     let dataset_to_graph_map = {}; // a dictionnary mapping a variable name to a two values array, containing its graph index and its position inside the graph
     let blocks, liveMode=true, top_vars=[], bottom_vars=[];
@@ -925,7 +940,7 @@ let graphs = (function (){
 
         let graphicsPanel = container.parentNode.querySelector('.panel')
         graphicsPanel.classList.add('graphics');
-
+        graphicsPanel.childNodes[0].style.visibility = "hidden"; // hides the span added by the swippers
         // The cross to display "main" panel at the location of the graphs
         let gotoMainElm = document.createElement('div');
         gotoMainElm.innerHTML = "×";
@@ -938,11 +953,13 @@ let graphs = (function (){
         if(!created){            
             globalIndicators.loadIndicators(graphicsPanel);
             globalControls.loadControls(graphicsPanel);
+            loadGraphicsMenu(graphicsPanel);
             graphicsPanel.appendChild(gotoMainElm);
             gotoMainElm.style.marginTop = "auto";
             gotoMainElm.style.marginBottom = "auto";
             gotoMainElm.style.marginRight = "6px";
-            gotoMainElm.style.marginLeft = "6px";
+            gotoMainElm.style.color = "white";
+            gotoMainElm.style.cursor = "pointer";
             created = true;
         }