added search bar

editor.css

@@ -32,18 +32,18 @@ body {
 
 .menuitem .menubutton {
   font-family: 'Inter';
-  font-weight: 500;
-  padding: 5 0 5 0;
   margin: 0 10 0 10;
+  padding: 5 0 5 0;
+  font-weight: 500;
   font-size: 1em;
+  transition: all 200ms ease-out 0ms;
+  color: inherit;
   background-color: transparent;
   border-top: 4px solid transparent;
   border-bottom: 4px solid transparent;
   border-left: none;
   border-right: none;
-  transition: all 200ms ease-out 0ms;
   cursor: pointer;
-  color: inherit;
 }
 
 .menuitem:hover .menubutton {
@@ -55,13 +55,77 @@ body {
   color: rgb(75, 151, 151);
 }
 
+.submenu #search-container {
+  /* position: fixed;
+  top: 0px;
+  bottom: 0px; */
+  padding: 5 5 5 5;
+  background-color: transparent;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: none;
+  border-right: none;
+  cursor: pointer;
+}
+
+#search-container input {
+  /* height: 100%; */
+  height: 40px;
+  width: 300px;
+  border-radius: 15px;
+  border: 1px solid rgb(117, 117, 117);
+  padding-left: 10px;
+  padding-right: 38px;
+  outline: none;
+  transition: all 100ms ease-out 50ms;
+}
+
+#search-container:hover input, #search-container input:active, #search-container input:focus {
+  border: 2px solid rgb(117, 117, 117);
+  /* box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); */
+  padding-left: 9px;
+  padding-right: 37px;
+}
+
+#search-container input:focus {
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+  transform: scale(1.02);
+}
+
+::selection {
+  background-color: rgba(75, 151, 151, 0.702);
+  color: white;
+}
+
+#search-container .search-button {
+  border-radius: 10px;
+  border: none;
+  /* box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); */
+  padding: 6 6 6 6;
+  display: inline-flex;
+  align-items: center;
+  position: absolute;
+  cursor: pointer;
+  top: 10;
+  right: 10;
+  background-color: transparent;
+  transition: all 100ms ease-out 50ms;
+  /* background-color: rgb(120, 120, 120); */
+}
+#search-container .search-button:hover {
+  transform: scale(1.1);
+}
+
+#search-container .search-button svg {
+  stroke: rgb(117, 117, 117);
+}
+
 .submenu {
   font-family: 'Inter';
   width: fit-content;
   position: fixed;
   top: 60px;
   overflow: hidden;
-  padding: 20 20 20 20;
   display: none;
   cursor: default;
 }
@@ -88,7 +152,7 @@ body {
 .submenu, #sidepanel, #filepanel {
   position:fixed;
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-  padding: 20px;
+  padding: 5px;
   border-radius: 15px;
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
@@ -214,13 +278,13 @@ body {
 #filemenu .menutop, #editmenu .menutop {
   border-top-left-radius: 15px;
   border-top-right-radius: 15px;
-  padding-top: 20px;
+  padding-top: 10px;
 }
 
 #filemenu .menubottom, #editmenu .menubottom {
   border-bottom-left-radius: 15px;
   border-bottom-right-radius: 15px;
-  padding-bottom: 20px;
+  padding-bottom: 10px;
 }
 
 #filemenu, #editmenu {
@@ -391,13 +455,17 @@ label {
   z-index: 3;
 }
 
-#settings-table {
+.submenu > table {
+  padding: 15px;
+}
+
+#settings-table, #view-table {
   line-height: 2;
   color: inherit;
   text-align: left;
 }
 
-#settings-table tr td:first-child {
+#settings-table tr td:first-child, #view-table tr td:first-child {
   padding-right: 10px;
 }
 
@@ -441,11 +509,11 @@ label {
   transition: 200ms;
 }
 
-input:checked + .toggle-slider {
+.toggle input:checked + .toggle-slider {
   background-color: rgb(75, 151, 151);
 }
 
-input:checked + .toggle-slider:before {
+.toggle input:checked + .toggle-slider:before {
   -webkit-transform: translateX(10px);
   -ms-transform: translateX(10px);
   transform: translateX(10px);
@@ -481,6 +549,16 @@ input:checked + .toggle-slider:before {
   stroke: rgb(192, 192, 192);
 }
 
+.menu-lightmode #search-container input {
+  background-color: rgba(255, 255, 255, 0.6);
+  color: black;
+}
+
+.menu-darkmode #search-container input {
+  background-color: rgba(0, 0, 0, 0.6);
+  color: white;
+}
+
 .contenttype-lightmode, .menuitem .contenttype-lightmode {
   color: rgba(120, 120, 120, 0.6);
 }

editor.html

@@ -35,14 +35,24 @@
       <div class="menuitem" onclick="openViewMenu(this)">
         <div class="menubutton">View</div>
         <div class="submenu menu-lightmode" onclick="event.stopPropagation()">
-          <div>
+          <table id="view-table">
-            <label for="actor">Highlight actor: </label>
+            <tr>
-            <select name="actor" id="actor" onchange="selectActor();"></select>
+              <td>
-          </div>
+                <label for="actor">Highlight actor:</label>
-          <div>
+              </td>
-            <label for="viewer">Highlight viewer: </label>
+              <td>
-            <select name="viewer" id="viewer" onchange="selectViewer();"></select>
+                <select name="actor" id="actor" onchange="selectActor();"></select>
-          </div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <label for="viewer">Highlight viewer:</label>
+              </td>
+              <td>
+                <select name="viewer" id="viewer" onchange="selectViewer();"></select>
+              </td>
+            </tr>
+          </table>
         </div>
       </div>
       <div class="menuitem" onclick="openSettingsMenu(this)">
@@ -116,7 +126,17 @@
       </div>
       <div class="menuitem" onclick="openSearchMenu(this)">
         <div class="menubutton">Search</div>
-        <div class="submenu menu-lightmode">Search for states, edges and their contents</div>
+        <div class="submenu menu-lightmode" onclick="event.stopPropagation()">
+          <div id="search-container">
+            <input type="text" placeholder="Nodes, Edges, ...">
+            <span class="search-button">
+              <svg height="18" width="18" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="11" cy="7" r="6" stroke-width="2" fill="none" />
+                <polyline points="8,10 2,16" style="fill:none;stroke-width:2" stroke-linecap="round" />
+              </svg>
+            </span>
+          </div>
+        </div>
       </div>
       <div class="menuitem">
         <div id="filename" class="contenttype-lightmode"></div>

editor.js

@@ -311,6 +311,7 @@ const fileButtons = document.getElementById('filebuttons');
 const contextMenuBg = document.getElementById('ctmenubg'); //Click on background
 const contextMenuSt = document.getElementById('ctmenust'); //Click on state
 const contextMenuEd = document.getElementById('ctmenued'); //Click on edge
+const searchContainer = document.getElementById('search-container');
 // Counters for placeholder IDs of states/actions added via GUI
 var stateIdCounter  = 0;
 var actionIdCounter = 0;
@@ -318,6 +319,7 @@ var stateAbbreviations = [];
 var newStateCoords = {'x': 0, 'y': 0}; //Initial coordinates of the next new state
 
 sidePanel.style.top = mainMenu.offsetHeight + 15;
+// searchContainer.style.left = mainMenu.offsetWidth / 2 - searchContainer.offsetWidth / 2;
 
 /**
  * Marks the given item as selected.