diff --git a/editor.css b/editor.css index c3db1a4..98a7a91 100644 --- 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; diff --git a/editor.html b/editor.html index 6f9ec5c..977cc37 100644 --- a/editor.html +++ b/editor.html @@ -11,13 +11,14 @@
-
+
+
+ + + + /> + + Edge +
+
+ + + + + + Node +

Hello

- + X diff --git a/editor.js b/editor.js index 4610dc6..b331546 100644 --- 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 = '

' + workflowFiles[i].name + '

' + 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);