menu buttons are now divs

editor.css

@@ -19,8 +19,6 @@ body {
   width: 100%;
   position: fixed;
   padding-left: 10px;
-  /* background-color: rgba(230, 230, 230, 0.8); */
-  /* transition: all 100ms ease-out 50ms; */
   z-index: 5;
   float: left;
   backdrop-filter: blur(10px);
@@ -32,10 +30,10 @@ body {
   cursor: pointer;
 }
 
-.menuitem button {
+.menuitem .menubutton {
   font-family: 'Inter';
   font-weight: 500;
-  padding: 10 0 10 0;
+  padding: 5 0 5 0;
   margin: 0 10 0 10;
   font-size: 1em;
   background-color: transparent;
@@ -48,11 +46,11 @@ body {
   color: inherit;
 }
 
-.menuitem:hover button {
+.menuitem:hover .menubutton {
   border-bottom: 4px solid rgb(75, 151, 151);
 }
 
-.menuitem:active button, .selectedmenuitem button {
+.menuitem:active .menubutton, .selectedmenuitem .menubutton {
   border-bottom: 4px solid rgb(75, 151, 151);
   color: rgb(75, 151, 151);
 }
@@ -75,13 +73,12 @@ body {
 .menuitem #filename {
   position: fixed;
   right: 10px;
-  padding: 10 0 10 0;
+  padding: 5 0 5 0;
   margin: 0 10 0 10;
   text-align: center;
   font-size: 1em;
   font-family: 'Inter';
   font-weight: normal;
-  /* color: rgba(120, 120, 120, 0.6); */
   background-color: transparent;
   border-top: 4px solid transparent;
   border-bottom: 4px solid transparent;
@@ -90,9 +87,7 @@ body {
 
 .submenu, #sidepanel, #filepanel {
   position:fixed;
-  /* background-color: rgba(230, 230, 230, 0.8); */
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-  /* transition: all 100ms ease-out 50ms; */
   padding: 20px;
   border-radius: 15px;
   backdrop-filter: blur(10px);
@@ -101,8 +96,8 @@ body {
 
 #sidepanel {
   top: 70px;
-  bottom:20px;
+  bottom:15px;
-  right:20px;
+  right:15px;
   width: 500px;
   z-index:10;
   overflow: hidden;
@@ -124,7 +119,6 @@ body {
   position: absolute;
   top: 10px;
   left: 20px;
-  /* color: rgba(120, 120, 120, 0.538); */
 }
 
 #sidecontentedge, #sidecontentnode {
@@ -184,8 +178,6 @@ body {
   padding-bottom: 5px;
   padding-left: 10px;
   padding-right: 10px;
-  /* background-color: rgba(230, 230, 230, 0.8); */
-  /* opacity: 0.95; */
   transition: all 100ms ease-out 50ms;
   -webkit-user-select: none;
   -ms-user-select: none;

editor.html

@@ -14,7 +14,7 @@
     <div id="submenu-backdrop"></div>
     <div id="mainmenu" class="menu-lightmode"> <!--Horizontal main menu-->
       <div class="menuitem" onclick="openFileMenu(this)">
-        <button>File</button>
+        <div class="menubutton">File</div>
         <div id="filemenu" class="submenu" onclick="event.stopPropagation()">
           <div class="menutop menu-lightmode">New Workflow</div>
           <div class="menucenter menu-lightmode" onclick="openFileDisplay()">Open</div>
@@ -24,7 +24,7 @@
         </div>
       </div>
       <div class="menuitem" onclick="openEditMenu(this)">
-        <button>Edit</button>
+        <div class="menubutton">Edit</div>
         <div id="editmenu" class="submenu" onclick="event.stopPropagation()">
           <div class="menutop menu-lightmode">Undo</div>
           <div class="menucenter menu-lightmode">Redo</div>
@@ -33,7 +33,7 @@
         </div>
       </div>
       <div class="menuitem" onclick="openViewMenu(this)">
-        <button>View</button>
+        <div class="menubutton">View</div>
         <div class="submenu menu-lightmode" onclick="event.stopPropagation()">
           <div>
             <label for="actor">Highlight actor: </label>
@@ -46,7 +46,7 @@
         </div>
       </div>
       <div class="menuitem" onclick="openSettingsMenu(this)">
-        <button>Settings</button> <!--Main settings menu-->
+        <div class="menubutton">Settings</div> <!--Main settings menu-->
         <div class="submenu menu-lightmode" onclick="event.stopPropagation()">
           <table id="settings-table">
             <tr>
@@ -89,7 +89,18 @@
                 </label>
               </td>
               <td>
-                draw @@init or not, collapse all edges between 2 states
+                draw @@init or not
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <label class="toggle" title="Foo">
+                  <input type="checkbox" disabled>
+                  <span class="toggle-slider"></span>
+                </label>
+              </td>
+              <td>
+                collapse all edges between 2 states
               </td>
             </tr>
           </table>
@@ -100,29 +111,29 @@
         </div>
       </div>
       <div class="menuitem" onclick="openAboutMenu(this)">
-        <button>About</button>
+        <div class="menubutton">About</div>
         <div class="submenu menu-lightmode">Visualiser & editor for Uni2work workflows</div>
       </div>
       <div class="menuitem" onclick="openSearchMenu(this)">
-        <button>Search</button>
+        <div class="menubutton">Search</div>
         <div class="submenu menu-lightmode">Search for states, edges and their contents</div>
       </div>
       <div class="menuitem">
-        <button id="filename" class="contenttype-lightmode"></button>
+        <div id="filename" class="contenttype-lightmode"></div>
       </div>
     </div>
     <div id="sidepanel" class="menu-lightmode"> <!--Pop-up panel on the right side for displaying/editing the selected state/action-->
       <div id="sideheader">
         <div id="sidecontentedge" class="sidecontenttype contenttype-lightmode">
-          <svg height="10" width="28" xmlns="http://www.w3.org/2000/svg" onclick="deselect()">
+          <svg height="10" width="28" xmlns="http://www.w3.org/2000/svg">
             <circle cx="4" cy="4" r="3" stroke-width="2" fill="none" />
             <polyline points="8,4 18,4" style="fill:none;stroke-width:2" stroke-linecap="round" />
-            <circle cx="22" cy="4" r="3" stroke-width="2" fill="none" /> />
+            <circle cx="22" cy="4" r="3" stroke-width="2" fill="none" />
           </svg>
           Edge
         </div>
         <div id="sidecontentnode" class="sidecontenttype contenttype-lightmode">
-          <svg height="10" width="22" xmlns="http://www.w3.org/2000/svg" onclick="deselect()">
+          <svg height="10" width="22" xmlns="http://www.w3.org/2000/svg">
             <polyline points="2,4 7,4" style="fill:none;stroke-width:2" stroke-linecap="round" />
             <circle cx="11" cy="4" r="3" stroke-width="2" fill="none" />
             <polyline points="15,4 20,4" style="fill:none;stroke-width:2" stroke-linecap="round" />

editor.js

@@ -50,6 +50,8 @@ function toggleTheme() {
 const mainMenu = document.getElementById('mainmenu');
 var selectedMenuItem = null;
 
+Array.from(document.getElementsByClassName('submenu')).forEach(subMenu => subMenu.style.top = mainMenu.offsetHeight + 15);
+
 /**
  * 
  * @param {HTMLElement} menuitem 
@@ -315,6 +317,8 @@ var actionIdCounter = 0;
 var stateAbbreviations = [];
 var newStateCoords = {'x': 0, 'y': 0}; //Initial coordinates of the next new state
 
+sidePanel.style.top = mainMenu.offsetHeight + 15;
+
 /**
  * Marks the given item as selected.
  * @param {*} item The node or edge to select.