added context infos to workspace areas

2023-05-30 21:57:56 +02:00 · 2023-05-30 21:57:56 +02:00 · 59541275c2
commit 59541275c2
parent cd2c624300
3 changed files with 75 additions and 18 deletions
--- a/editor.css
+++ b/editor.css
@ -12,7 +12,7 @@ body {
  margin: 0 0 0 0;
 }

-#settings {
+#mainmenu {
  line-height: 2;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  top: 0px;
@ -67,14 +67,26 @@ body {
  cursor: default;
 }

-/* .selectedmenuitem .submenu {
-  display: block;
-} */
-
 .submenu div {
  position: relative;
 }

+.menuitem #filename {
+  position: fixed;
+  right: 10px;
+  padding: 10 0 10 0;
+  margin: 0 10 0 10;
+  text-align: center;
+  font-size: 1em;
+  font-family: 'Inter';
+  font-weight: normal;
+  color: rgba(120, 120, 120, 0.668);
+  background-color: transparent;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  cursor: default;
+}
+
 .submenu, #sidepanel, #filepanel {
  position:fixed;
  background-color: rgb(230, 230, 230);
@ -98,7 +110,21 @@ body {
  width: 100%;
 }

-#sideheader svg {
+.sidecontenttype {
+  font-family: 'Inter';
+  float: left;
+  line-height: 2;
+  position: absolute;
+  top: 10px;
+  left: 20px;
+  color: rgba(120, 120, 120, 0.538);
+}
+
+#sidecontentedge, #sidecontentnode {
+  display: none;
+}
+
+.close {
  position: absolute;
  top: 20px;
  right: 20px;
--- a/editor.html
+++ b/editor.html
@ -11,13 +11,14 @@
 <body>
  <div id="editor">
    <div id="curtain" onclick="closeFileDisplay()"></div>
-    <div id="settings"> <!--Horizontal bar on top for selecting highlighting modes-->
+    <div id="mainmenu"> <!--Horizontal bar on top for selecting highlighting modes-->
      <div class="menuitem" onclick="openFileMenu(this)">
        <button>File</button>
        <div id="filemenu" class="submenu" onclick="event.stopPropagation()">
          <div class="menutop">Undo (Ctrl + Z)</div>
          <div class="menucenter">Redo (Ctrl + Y)</div>
-          <div class="menucenter">Save</div>
+          <div class="menucenter">Save (Ctrl + S)</div>
+          <div class="menucenter">Save As</div>
          <div class="menucenter">Export</div>
          <div class="menubottom" onclick="openFileDisplay()">Open</div>
        </div>
@ -37,21 +38,40 @@
      </div>
      <div class="menuitem" onclick="openSettingsMenu(this)">
        <button>Settings</button>
-        <div class="submenu">FOO</div>
+        <div class="submenu">Dark mode, visualisation settings, language</div>
      </div>
      <div class="menuitem" onclick="openAboutMenu(this)">
        <button>About</button>
-        <div class="submenu">FOO</div>
+        <div class="submenu">Visualiser & editor for Uni2work workflows</div>
      </div>
      <div class="menuitem" onclick="openSearchMenu(this)">
        <button>Search</button>
-        <div class="submenu">FOO</div>
+        <div class="submenu">Search for states, edges and their contents</div>
+      </div>
+      <div class="menuitem">
+        <button id="filename"></button>
      </div>
    </div>
    <div id="sidepanel"> <!--Pop-up panel on the right side for displaying/editing the selected state/action-->
      <div id="sideheader">
+        <div id="sidecontentedge" class="sidecontenttype">
+          <svg height="10" width="28" xmlns="http://www.w3.org/2000/svg" onclick="deselect()">
+            <circle cx="4" cy="4" r="3" stroke="rgba(120, 120, 120, 0.538)" stroke-width="2" fill="none" />
+            <polyline points="8,4 18,4" style="fill:none;stroke:rgba(120, 120, 120, 0.538);stroke-width:2" stroke-linecap="round" />
+            <circle cx="22" cy="4" r="3" stroke="rgba(120, 120, 120, 0.538)" stroke-width="2" fill="none" /> />
+          </svg>
+          Edge
+        </div>
+        <div id="sidecontentnode" class="sidecontenttype">
+          <svg height="10" width="22" xmlns="http://www.w3.org/2000/svg" onclick="deselect()">
+            <polyline points="2,4 7,4" style="fill:none;stroke:rgba(120, 120, 120, 0.538);stroke-width:2" stroke-linecap="round" />
+            <circle cx="11" cy="4" r="3" stroke="rgba(120, 120, 120, 0.538)" stroke-width="2" fill="none" />
+            <polyline points="15,4 20,4" style="fill:none;stroke:rgba(120, 120, 120, 0.538);stroke-width:2" stroke-linecap="round" />
+          </svg>
+          Node
+        </div>
        <h1 id="sideheading">Hello</h1>
-        <svg height="15" width="15" xmlns="http://www.w3.org/2000/svg" onclick="deselect()">
+        <svg class="close" height="15" width="15" xmlns="http://www.w3.org/2000/svg" onclick="deselect()">
          <polyline points="1,1 14,14" style="fill:none;stroke:rgb(183, 76, 76);stroke-width:2" stroke-linecap="round" />
          <polyline points="14,1 1,14" style="fill:none;stroke:rgb(183, 76, 76);stroke-width:2" stroke-linecap="round" />
          X
--- a/editor.js
+++ b/editor.js
@ -138,7 +138,8 @@ function defineOnClick(item, url, title) {
        workflow[key] = data[key];
      prepareWorkflow();
      updateGraph();
-      document.title = title;
+      document.getElementById('filename').innerText = title;
+      document.title = title + ' | Editor';
    });
  });
 }
@ -151,7 +152,7 @@ fetch('http://localhost:8080/index.json')
      var item = document.createElement('div');
      item.innerHTML = '<h3>' + workflowFiles[i].name + '</h3>' + workflowFiles[i].description;
      var url = 'http://localhost:8080' + workflowFiles[i].url;
-      defineOnClick(item, url, workflowFiles[i].name + ' | Editor');
+      defineOnClick(item, url, workflowFiles[i].name);
      fileContent.appendChild(item);
    }
    var url = 'http://localhost:8080' + workflowFiles[0].url;
@ -159,6 +160,7 @@ fetch('http://localhost:8080/index.json')
  })
  .then((response) => response.json())
  .then((data) => {
+    document.getElementById('filename').innerText = workflowFiles[0].name;
    document.title = workflowFiles[0].name + ' | Editor';
    for (var key in data) 
      workflow[key] = data[key];
@ -218,10 +220,12 @@ var edgeTo = null; // Target of an edge to be created.
 var edgeFrom = null; // Start on an edge to be created.
 const curtain = document.getElementById('curtain');
 //Side Panel
-const sidePanel   = document.getElementById('sidepanel');
-const sideContent = document.getElementById('sidecontent');
-const sideHeading = document.getElementById('sideheading');
-const sideButtons = document.getElementById('sidebuttons');
+const sidePanel    = document.getElementById('sidepanel');
+const sideContent  = document.getElementById('sidecontent');
+const sideHeading  = document.getElementById('sideheading');
+const sideButtons  = document.getElementById('sidebuttons');
+const sideInfoEdge = document.getElementById('sidecontentedge');
+const sideInfoNode = document.getElementById('sidecontentnode');
 //File panel
 const filePanel   = document.getElementById('filepanel');
 const fileHeading = document.getElementById('fileheading');
@ -249,6 +253,13 @@ function select(item) {
    while (sideContent.firstChild)
      sideContent.removeChild(sideContent.lastChild);
    function callback() {
+      if (item.actionData) {
+        sideInfoEdge.style.display = 'block';
+        sideInfoNode.style.display = 'none';
+      } else {
+        sideInfoEdge.style.display = 'none';
+        sideInfoNode.style.display = 'block';
+      }
      sideHeading.innerHTML = item.name;
      var data = document.createElement('div');
      var content = generatePanelContent(selection);