added full navigation menu

2023-05-29 00:33:41 +02:00 · 2023-05-29 00:33:41 +02:00 · d4008c812f
commit d4008c812f
parent 411af0bd2f
3 changed files with 166 additions and 35 deletions
--- a/editor.css
+++ b/editor.css
@ -1,11 +1,3 @@
-/* .body {
-  margin: 50px 50px 50px 50px;
-}
-
-#editor {
-  border: 10px solid red;
-} */
-
 body {
  margin: 0 0 0 0;
 }
@ -16,34 +8,71 @@ body {
  top: 0px;
  width: 100%;
  position: fixed;
-  padding: 8 8 8 8;
+  /* padding: 8 8 8 8; */
+  padding-left: 10px;
  background-color: rgb(230, 230, 230);
  opacity: 0.95;
  z-index: 2;
  float: left;
  overflow: auto;
-  align-items: center;
 }

-#settings div {
-  width: fit-content;
-  position: relative;
-  overflow: hidden;
+.menuitem {
  float: left;
-  margin-right: 20;
 }

-#sidepanel {
+.menuitem button {
+  padding: 10 0 10 0;
+  margin: 0 10 0 10;
+  font-size: 1em;
+  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;
+}
+
+.menuitem:hover button {
+  border-bottom: 4px solid rgb(75, 151, 151);
+}
+
+.menuitem:active button, .selectedmenuitem button {
+  border-bottom: 4px solid rgb(75, 151, 151);
+  color: rgb(75, 151, 151);
+}
+
+.submenu {
+  width: fit-content;
+  position: fixed;
+  top: 60px;
+  overflow: hidden;
+  padding: 20 20 20 20;
+  display: none;
+}
+
+.selectedmenuitem .submenu {
+  display: block;
+}
+
+.submenu div {
+  position: relative;
+}
+
+.submenu, #sidepanel {
  position:fixed;
  background-color: rgb(230, 230, 230);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-  top: 80px;
-  bottom:30px;
-  right:20px;
-  width: 500px;
  opacity: 0.95;
  padding: 20px;
-  border-radius: 20px;
+  border-radius: 15px;
+}
+
+#sidepanel {
+  top: 70px;
+  bottom:20px;
+  right:20px;
+  width: 500px;
  z-index:10;
  overflow: hidden;
  display: none;
@ -101,7 +130,7 @@ body {
  padding: 5px;
  background-color: rgb(230, 230, 230);
  opacity: 0.95;
-  transition: background-color 100ms ease-out 50ms;
+  transition: all 100ms ease-out 50ms;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
@ -157,22 +186,37 @@ a:active {
  color: rgb(110, 212, 212);
 }

-button {
+#sidebuttons button {
  padding: 5 5 5 5;
  border-radius: 5px;
  border-style: solid;
  border-color: transparent;
  background: rgba(120, 120, 120, 0.555);
  color: white;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.082), 0 2px 10px 0 rgba(0, 0, 0, 0.068);
+  transition: all 100ms ease-in-out 0ms;
+  cursor: pointer;
 }

-button:disabled {
+#sidebuttons button:disabled {
  border-color: rgba(0, 0, 0, 0.267);
  background: rgba(120, 120, 120, 0.116);
  color: rgba(0, 0, 0, 0.267);
  border-width: 1px;
+  cursor: not-allowed;
 }

-select, option {
+#sidebuttons button:hover {
+  transform: scale(1.02);
+  /* transition: all 100ms ease-in-out 0ms; */
+  background: rgba(120, 120, 120, 0.651);
+  /* transition: box-shadow ease-in-out 100ms; */
+}
+
+#sidebuttons button:active {
+  background: rgba(105, 105, 105, 0.692);
+}
+
+select {
  padding: 2 2 2 2;
 }
--- a/editor.html
+++ b/editor.html
@ -11,13 +11,34 @@
 <body>
  <div id="editor">
    <div id="settings"> <!--Horizontal bar on top for selecting highlighting modes-->
-      <div>
-        <label for="actor">Highlight actor: </label>
-        <select name="actor" id="actor" onchange="selectActor();"></select>
+      <div class="menuitem" onclick="openFileMenu(this)">
+        <button>File</button>
+        <div class="submenu">FOO</div>
      </div>
-      <div>
-        <label for="viewer">Highlight viewer: </label>
-        <select name="viewer" id="viewer" onchange="selectViewer();"></select>
+      <div class="menuitem" onclick="openViewMenu(this)">
+        <button>View</button>
+        <div class="submenu" onclick="event.stopPropagation()">
+          <div>
+            <label for="actor">Highlight actor: </label>
+            <select name="actor" id="actor" onchange="selectActor();"></select>
+          </div>
+          <div>
+            <label for="viewer">Highlight viewer: </label>
+            <select name="viewer" id="viewer" onchange="selectViewer();"></select>
+          </div>
+        </div>
+      </div>
+      <div class="menuitem" onclick="openSettingsMenu(this)">
+        <button>Settings</button>
+        <div class="submenu">FOO</div>
+      </div>
+      <div class="menuitem" onclick="openAboutMenu(this)">
+        <button>About</button>
+        <div class="submenu">FOO</div>
+      </div>
+      <div class="menuitem" onclick="openSearchMenu(this)">
+        <button>Search</button>
+        <div class="submenu">FOO</div>
      </div>
    </div>
    <div id="sidepanel"> <!--Pop-up panel on the right side for displaying/editing the selected state/action-->
@ -31,9 +52,9 @@
      </div>
      <div id="sidecontent"></div>
      <div id="sidebuttons">
-        <button type="submit" disabled="disabled">Save</button>
-        <button type="reset" disabled="disabled">Cancel</button>
-        <button type="submit" disabled="disabled" style="position: absolute; right: 0px;">Delete</button>
+        <button type="submit">Save</button>
+        <button type="reset" onclick="deselect()">Cancel</button>
+        <button type="submit" onclick="removeSelection()" style="position: absolute; right: 0px;">Delete</button>
      </div>
    </div>
    <div id="ctmenubg" class="contextmenu"> <!--Context menu displayed after right-clicking the background-->
--- a/editor.js
+++ b/editor.js
@ -1,3 +1,51 @@
+// Menu bar
+
+var selectedMenuItem = null;
+
+/**
+ * 
+ * @param {HTMLElement} menuitem 
+ */
+function openMenuItem(menuitem) {
+  edgeTo = edgeFrom = rightSelection = null;
+  contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none';
+  if (menuitem === selectedMenuItem) {
+    closeMenuItem();
+    return;
+  }
+  Array.from(document.getElementsByClassName('selectedmenuitem')).forEach(other => other.classList.remove('selectedmenuitem'));
+  menuitem.classList.add('selectedmenuitem');
+  selectedMenuItem = menuitem;
+}
+
+function closeMenuItem() {
+  if (!selectedMenuItem) return;
+  selectedMenuItem.classList.remove('selectedmenuitem');
+  selectedMenuItem = null;
+}
+
+function openFileMenu(menuitem) {
+  openMenuItem(menuitem);
+}
+
+function openViewMenu(menuitem) {
+  openMenuItem(menuitem);
+}
+
+function openSettingsMenu(menuitem) {
+  openMenuItem(menuitem);
+}
+
+function openAboutMenu(menuitem) {
+  openMenuItem(menuitem);
+}
+
+function openSearchMenu(menuitem) {
+  openMenuItem(menuitem);
+}
+
+// Workflow processing
+
 var workflow = {}

 // fetch('./test.json')
@ -394,6 +442,16 @@ function markEdgeFrom() {
  contextMenuSt.style.display = 'none';
 }

+function removeSelection() {
+  if (selection) {
+    if (selection.actionData) removeAction(selection);
+    else removeState(selection);
+    deselect();
+    edgeFrom = edgeTo = rightSelection = null;
+    contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none';
+  }
+}
+
 function removeRightSelection() {
  if (rightSelection) {
    if (rightSelection.actionData) removeAction(rightSelection);
@ -631,28 +689,36 @@ const Graph = ForceGraph()
        connect(node, edgeTo);
        edgeTo = null;
      } else select(node);
+      closeMenuItem();
    })
    .onNodeRightClick((node, event) => {
      openContextMenu(event.layerX, event.layerY, contextMenuSt);
      contextMenuBg.style.display = contextMenuEd.style.display = 'none';
      rightSelection = node;
+      closeMenuItem();
+    })
+    .onLinkClick((edge, _) => {
+      select(edge);
+      closeMenuItem();
    })
-    .onLinkClick((edge, _) => select(edge))
    .onLinkRightClick((edge, event) => {
      openContextMenu(event.layerX, event.layerY, contextMenuEd);
      contextMenuBg.style.display = contextMenuSt.style.display = 'none';
      rightSelection = edge;
+      closeMenuItem()
    })
    .onBackgroundClick(_ => {
      contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none';
      deselect();
      edgeFrom = edgeTo = rightSelection = null;
+      closeMenuItem();
    })
    .onBackgroundRightClick(event => {
      newStateCoords = Graph.screen2GraphCoords(event.layerX, event.layerY);
      openContextMenu(event.layerX, event.layerY, contextMenuBg);
      contextMenuEd.style.display = contextMenuSt.style.display = 'none';
      edgeFrom = edgeTo = rightSelection = null;
+      closeMenuItem()
    })
    .autoPauseRedraw(false);