From 874d81b3af9bf2db4d4ba15be549e1ad0349cade Mon Sep 17 00:00:00 2001
From: David Mosbach <david.mosbach@live.de>
Date: Mon, 29 May 2023 22:50:04 +0200
Subject: [PATCH] fixed layout adjustments of fading elements

---
 editor.css           | 29 +++++++++++++++++++++++++++--
 editor.html          |  4 +++-
 editor.js            | 18 +++++++++++++++++-
 workflows/index.json | 17 +++++++++++++++++
 4 files changed, 64 insertions(+), 4 deletions(-)
 create mode 100644 workflows/index.json

diff --git a/editor.css b/editor.css
index 9c387ac..d452af2 100644
--- a/editor.css
+++ b/editor.css
@@ -94,7 +94,7 @@ body {
   display: none;
 }
 
-#sideheader {
+#sideheader, #fileheader {
   width: 100%;
 }
 
@@ -124,7 +124,6 @@ body {
   text-align: justify;
   hyphens: auto;
   word-wrap: break-word;
-  /* height: 80%; */
 }
 
 #sidebuttons, #filebuttons {
@@ -283,6 +282,32 @@ label {
   font-style: normal;
 }
 
+#filecontent {
+  font-family: 'OpenSans';
+  position: absolute;
+  top: 20px;
+  bottom: 20px;
+  left: 20px;
+  right: 20px;
+  padding-right: 10px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+#filecontent div {
+  background-color: red;
+  border-radius: 15px;
+  position: relative;
+  float: left;
+  width: 100px;
+  height: 100px;
+  margin: 10 10 10 10;
+  text-align: center;
+  padding: 10 10 10 10;
+  color: white;
+  align-items: baseline;
+}
+
 #curtain {
   z-index: 50;
   position: fixed;
diff --git a/editor.html b/editor.html
index 5a92f7f..4a22534 100644
--- a/editor.html
+++ b/editor.html
@@ -64,7 +64,9 @@
       </div>
     </div>
     <div id="filepanel"> <!--Pop-up panel covering the center of the screen for file interactions-->
-      <h2 id="fileheading">Hello</h2>
+      <div id="fileheader">
+        <h2 id="fileheading">Hello</h2>
+      </div>
       <div id="filecontent"></div>
       <div id="filebuttons">
         <button type="submit">Load</button>
diff --git a/editor.js b/editor.js
index 1fdc19e..4a4e3cf 100644
--- a/editor.js
+++ b/editor.js
@@ -65,8 +65,24 @@ document.getElementById('filepanel').style.opacity = 0;
 
 function openFileDisplay() {
   var panel = document.getElementById('filepanel');
+  var heading = document.getElementById('fileheading');
   var curtain = document.getElementById('curtain');
-  fadeIn(null, {element: panel, max: 1, step: 0.025}, {element: curtain, max: 0.5, step: 0.025});
+  var content = document.getElementById('filecontent');
+  var buttons = document.getElementById('filebuttons');
+  function callback() {
+    heading.innerHTML = 'Open Workflow Definition';
+    for (var i = 0; i < 100; i++) {
+      var item = document.createElement('div');
+      item.innerHTML = i;
+      content.appendChild(item);
+    }
+    var pStyle = window.getComputedStyle(panel);
+    var hStyle = window.getComputedStyle(heading);
+    content.style.top = heading.offsetHeight + parseFloat(pStyle.paddingTop) + parseFloat(hStyle.marginTop) + parseFloat(hStyle.marginBottom);
+    var bStyle = window.getComputedStyle(buttons);
+    content.style.bottom = buttons.offsetHeight + parseFloat(pStyle.paddingBottom) + parseFloat(bStyle.marginTop) + parseFloat(bStyle.marginBottom);
+  }
+  fadeIn(callback, {element: panel, max: 0.95, step: 0.025}, {element: curtain, max: 0.5, step: 0.025});
   closeMenuItem();
 }
 
diff --git a/workflows/index.json b/workflows/index.json
new file mode 100644
index 0000000..5b2baf2
--- /dev/null
+++ b/workflows/index.json
@@ -0,0 +1,17 @@
+[
+  {
+    "name": "Diploma",
+    "description": "",
+    "url": "/test.json"
+  },
+  {
+    "name": "Theses",
+    "description": "",
+    "url": "/test.json"
+  },
+  {
+    "name": "Recognitions",
+    "description": "",
+    "url": "/test.json"
+  }
+]
\ No newline at end of file