linse/seweb
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added graphics menu

Browse Source
This commit is contained in:
l_samenv
2024-08-09 14:17:54 +02:00
parent 9c7fe9d622
commit faf4abced8
7 changed files with 54 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/components/help_entry/help_entry.js
View File

@ -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">

3
client/components/help_popup/help_popup.css
View File

@ -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{

13
client/components/menu_popup/menu_popup.css
View File

@ -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;

36
client/components/menu_popup/menu_popup.js
View File

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

8
client/cssFiles/SEAWebClientGraphics.css
View File

@ -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;

2
client/cssFiles/SEAWebClientSwiper.css
View File

@ -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;
}

21
client/jsFiles/SEAWebClientGraphics.js
View File

@ -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 = "&#215;";
@ -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;
}