Merge branch 'feature/editor-facelift'

# Please enter a commit message to explain why this merge is necessary, # especially if it merges an updated upstream into a topic branch. # # Lines starting with '#' will be ignored, and an empty message aborts # the commit.
aantakli · Apr 4, 2024 · 5536cad · 5536cad
2 parents c06ae16 + 4818ec2
commit 5536cad
Show file tree

Hide file tree

Showing 103 changed files with 1,235 additions and 697 deletions.
diff --git a/app/.vs/app/v17/workspaceFileList.bin b/app/.vs/app/v17/workspaceFileList.bin
diff --git a/app/components/domain/domain-view.js b/app/components/domain/domain-view.js
@@ -33,6 +33,7 @@ let that;
 export default Ember.Component.extend({
   repo: "",
   workbench: "",
+  searchText: "",
   rdfEditor: undefined,
   initialContent: "",
   classNames: ["full-width full-height"],
@@ -58,6 +59,22 @@ export default Ember.Component.extend({
 
   willDestroyElement() {
     this._super(...arguments);
+  },
+
+  actions: {
+    search() {
+      rdfSearch(this.get("searchText"));
+    },
+
+    next() {
+      let editor = that.get("rdfEditor");
+      editor.findNext();
+    },
+
+    previous() {
+      let editor = that.get("rdfEditor");
+      editor.findPrevious();
+    },
   }
 });
 
@@ -133,3 +150,15 @@ function removeAllMarkers(editor) {
     }
   }
 }
+
+function rdfSearch(search) {
+  let editor = that.get("rdfEditor");
+  let range = editor.find(search, {
+    backwards: false,
+    wrap: false,
+    caseSensitive: false,
+    wholeWord: false,
+    regExp: false
+  });
+  editor.session.addMarker(range, "info", "text");
+}
diff --git a/app/components/services/test-service.js b/app/components/services/test-service.js
@@ -45,7 +45,7 @@ export default Ember.Component.extend({
 
   actions: {
     connect() {
-      var socket = that.get('websockets').socketFor('ws://localhost:4201');
+      var socket = that.get('websockets').socketFor("ws://" + document.location.hostname + ":4201");
       socket.on('open', myOpenHandler, that);
       socket.on('message', myMessageHandler, that);
       socket.on('close', myCloseHandler, that);
@@ -59,7 +59,7 @@ export default Ember.Component.extend({
         socket.off('message', myMessageHandler);
         socket.off('close', myCloseHandler);
         that.set("wssConnection", false);
-        that.get('websockets').closeSocketFor('ws://localhost:4201');
+        that.get('websockets').closeSocketFor("ws://" + document.location.hostname + ":4201");
         that.set('socketRef', null);
       }
     },
@@ -96,7 +96,7 @@ function myMessageHandler(event) {
 
 function myCloseHandler(event) {
   console.log(`On close event has been called: ${event}`);
-  that.get('websockets').closeSocketFor('ws://localhost:4201');
+  that.get('websockets').closeSocketFor("ws://" + document.location.hostname + ":4201");
   that.set("wssConnection", false);
 }
 
@@ -113,13 +113,13 @@ function getResponseMessage() {
     console.log(data);
     that.set("response", data);
   }).catch(function (error) {
-    alert("No TestServiceAction Service is running on http://localhost/4201");
+    alert("No TestServiceAction Service is running on http://" + document.location.hostname + ":4201");
   });
 }
 
 function sendResponseMessage(content) {
   return $.ajax({
-    url: "http://localhost:4201/response",
+    url: "http://" + document.location.hostname + ":4201/response",
     type: "POST",
     contentType: "text/plain",
     data: content,

diff --git a/app/helpers/RDFServices/node-definitions/style.js b/app/helpers/RDFServices/node-definitions/style.js
@@ -38,6 +38,9 @@ function generateStyle(styleURI, defaultLabel, selector, fixedLabel = false) {
 	let style = {};
 	let icon = util.getObjectValue(quads, styleURI, ND.icon);
 	if (icon) icon = iconPrefix + icon;
+  let node_icon = util.getObjectValue(quads, styleURI, ND.node_icon);
+	if (node_icon) node_icon = iconPrefix + node_icon;
+  console.log(node_icon);
 	//TODO: Check whether label will be properly overwritten for dynamic labels later on
 	if (defaultLabel && fixedLabel) style["label"] = defaultLabel;
 	let bgColor = util.getObjectValue(quads, styleURI, ND.color);
@@ -73,6 +76,7 @@ function generateStyle(styleURI, defaultLabel, selector, fixedLabel = false) {
 	return {
 		selector: "node." + selector.replace(/ /g, ""),
 		style,
-		icon
+		icon,
+    node_icon
 	};
 }
diff --git a/app/helpers/RDFServices/vocabulary.js b/app/helpers/RDFServices/vocabulary.js
@@ -64,6 +64,7 @@ let ND = {
 	StyleDef: "http://www.ajan.de/behavior/nd-ns#StyleDef",
 	default: "http://www.ajan.de/behavior/nd-ns#default",
   icon: "http://www.ajan.de/behavior/nd-ns#icon",
+  node_icon: "http://www.ajan.de/behavior/nd-ns#node-icon",
   textarea: "http://www.ajan.de/behavior/nd-ns#textarea",
   optional: "http://www.ajan.de/behavior/nd-ns#optional"
 };

diff --git a/app/helpers/graph/generator/node-def.js b/app/helpers/graph/generator/node-def.js
@@ -32,7 +32,8 @@ export default function(id, label, uri, ndClass, ndType, pos) {
 			uri: uri,
 			type: ndType,
 			class: ndClass,
-			icon: (typeDef) ? typeDef.style.icon : undefined
+			icon: (typeDef) ? typeDef.style.icon : undefined,
+      node_icon: (typeDef) ? typeDef.style.node_icon : undefined,
 		},
 		// cytoscape classes, not node class!
 		classes: ndClass + " " + ndType,

diff --git a/app/helpers/graph/utility.js b/app/helpers/graph/utility.js
@@ -363,11 +363,19 @@ function errorText(node, error) {
     node.style("background-image", "/icons/error.png");
     node.style("color", "#F00");
   } else {
-    if (nodeDef.style.icon) {
-      node.style("background-image", nodeDef.style.icon);
+    if (nodeDef.style.node_icon) {
+      node.style("background-image", nodeDef.style.node_icon);
     } else {
-      node.style("background-image", "");
+      if (nodeDef.style.icon) {
+        node.style("background-image", nodeDef.style.icon);
+      } else {
+        node.style("background-image", "");
+      }
+    }
+    if (nodeDef.style.style.color) {
+        node.style("color", nodeDef.style.style.color);
+    } else {
+      node.style("color", "#000");
     }
-    node.style("color", "#000");
   }
 }
diff --git a/app/helpers/ui/export-modal.js b/app/helpers/ui/export-modal.js
@@ -352,7 +352,7 @@ function addActionsFile(zipWriter, actions, domain, definitions, callback) {
 
 function addDomainFile(zipWriter, domain, definitions, callback) {
   if (domain.size > 0) {
-    zipWriter.add('behaviors/domain.ttl', new zip.BlobReader(domain), function () {
+    zipWriter.add('domain/domain.trig', new zip.BlobReader(domain), function () {
       addDefinitionsFile(zipWriter, definitions, callback);
     });
   }

diff --git a/app/styles/_globals/colors.css b/app/styles/_globals/colors.css
@@ -1,10 +1,13 @@
 
-@value color-primary: #181940;
-@value color-primary-1: #383a94;
-@value color-primary-2: #595ac0;
-@value color-primary-3: #6b6dc7;
-@value color-primary-4: #a3a4dc;
-@value color-primary-5: #ccccff;
-@value color-primary-6: #ececff;
+@value color-primary: #D1D6D8;
+@value color-primary-1: linear-gradient(to top right, #1E1B55, #1E1B55, #1E1B55, #1B3284, #EA5B97, #F5A399);
+@value color-primary-2: linear-gradient(to top left, #5CB697, #8EC8B1, #FFF176);
+@value color-primary-3: #1E1B55;
+@value color-primary-4: #1B3284;
+@value color-primary-5: #EA5B97;
+@value color-primary-6: #f5f5f7;
+@value color-primary-7: #EA5B97;
+@value color-primary-8: #8EC8B1;
 @value color-secondary: #383a94;
 @value color-tertiary: #6b6dc7;
+@value color-headlines-bg: linear-gradient(to right, #1E1B55, #1E1B55, #1E1B55, #1B3284, #EA5B97, #F5A399);
diff --git a/app/styles/_globals/modal.css b/app/styles/_globals/modal.css
@@ -1,5 +1,5 @@
 @value color-primary, color-primary-1, color-primary-2, color-primary-3, color-primary-4, color-primary-5, color-primary-6 from 'ajan-editor/styles/_globals/colors';
-@value color-head: color-primary-2;
+@value color-head: color-primary-3;
 @value color-subtitle-bg: color-primary-5;
 
 :global(div.modal-parent) {
@@ -72,7 +72,7 @@
 
 :global(.modal-header) {
   padding: 0.5em 2em;
-  background-color: color-head;
+  background: color-head;
   color: white;
   align-items: center;
 }

diff --git a/app/styles/_globals/split.css b/app/styles/_globals/split.css
@@ -8,10 +8,22 @@
 }
 
 :global(.gutter) {
-    background-color: black;
-    background-repeat: no-repeat;
-    background-position: 50%;
-    opacity: 0.5;
+  background: none;
+  background-repeat: no-repeat;
+  background-position: 50%;
+  opacity: 0.5;
+}
+
+  /*:global(.gutter) {
+  box-shadow: inset 4px 2px 5px #d1d1e0;
+}*/
+
+:global(#split-left) + :global(.gutter) {
+  margin-top: 20px;
+}
+
+:global(#split-middle) + :global(.gutter) {
+  margin-top: 20px;
 }
 
 :global(.gutter.gutter-horizontal) {

diff --git a/app/styles/_globals/tables.css b/app/styles/_globals/tables.css
@@ -1,11 +1,11 @@
-@value color-primary, color-primary-1, color-primary-5, color-primary-6 from 'ajan-editor/styles/_globals/colors';
+@value color-primary, color-primary-1, color-primary-2, color-primary-4, color-primary-5, color-primary-6, color-headlines-bg from 'ajan-editor/styles/_globals/colors';
 /* @value color-select: color-primary-1; */
 @value color-select: color-primary-5;
 /* @value color-option: color-primary-2; */
 @value color-option: color-primary-6;
 /* @value color-option: #595ac0; */
 @value color-title-bg: color-primary-4;
-@value color-subtitle-bg: color-primary-5;
+@value color-subtitle-bg: color-primary-4;
 @value color-h-bg: color-primary;
 @value color-h-font: #ffffff;
 @value color-odd-bg: color-primary-6;
@@ -14,7 +14,8 @@
 @value color-odd-row: #f2f2f2;
 
 :global(.table-header), th {
-  background-color: color-subtitle-bg;
+  background: color-subtitle-bg;
+  color: color-h-font;
 }
 
 table {
@@ -23,7 +24,7 @@ table {
 }
 
 th, td {
-  padding: 3pt;
+  padding: 5pt;
   padding-top: 7pt;
   padding-bottom: 7pt;
   text-align: left;
@@ -54,13 +55,13 @@ tr:not(:global(.lt-expanded-row)):hover :not(th) {
 
 :global(div.table-title) {
   /* padding: 1em 0.8em; */
-  background-color: color-h-bg;
-  color: color-h-font;
+  background: color-h-bg;
+  color: color-font;
 }
 
 :global(.table-title div) {
   font-weight: bold;
-  font-size: 1.8em;
+  font-size: 1.5em;
 }
 
 :global(.table-title-text) {

diff --git a/app/styles/_globals/tabs.css b/app/styles/_globals/tabs.css
@@ -1,7 +1,8 @@
-@value color-primary, color-primary-1, color-primary-2, color-primary-3, color-primary-4, color-primary-5, color-primary-6 from 'ajan-editor/styles/_globals/colors';
+@value color-primary, color-primary-1, color-primary-2, color-primary-3, color-primary-4, color-primary-5, color-primary-6, color-primary-8 from 'ajan-editor/styles/_globals/colors';
 
-@value color-interaction-bg: color-primary-1;
-@value color-hover: color-primary-2;
+@value color-interaction-bg: color-primary-3;
+@value color-hover: color-primary-4;
+@value color-active-bg: color-primary-5;
 @value color-interaction-font: white;
 @value color-h-bg: color-primary;
 
@@ -13,33 +14,47 @@
 }
 
 :global(.tabbar-button) {
-  flex-basis: 10em;
+  flex-basis: 9em;
   text-align: center;
   vertical-align: middle;
-
   border: 0;
-  border-right: 2px;
+  border-right: 1px;
   border-style: solid;
-  border-color: lightgrey;
+  border-color: white;
+  color: black;
+  background: color-primary-8;
+}
 
-  font-weight: bold;
+:global(.tabbar-link) {
+  height: 100%;
+  font-size: 16px;
+  font-family: "Segoe UI", monospace, Arial,sans-serif;
+}
+
+:global(a.tabbar-link.active < .tabbar-button) {
+  background: color-hover;
 }
 
 :global(.tabbar-button > .ember-view) {
-  height: 100%
+  height: 100%;
+  width: 100%;
+  display: block;
+  line-height: 30px;
 }
 
-:global(.tabbar-button:hover, .tabbar-link:hover) {
-  color: color-interaction-font;
-  background-color: color-hover;
+:global(.tabbar-button:hover),
+:global(.tabbar-button a:hover) {
+  color: white;
+  background: color-hover;
 }
 
 
-:global(a.tabbar-link.active), :global(.tabbar-button:hover a.tabbar-link.active:hover){
-    /* background-color: white; */
-    /* color: color-interaction-bg; */
-    background-color: color-h-bg;
-    color: white;
+:global(a.tabbar-link.active), :global(.tabbar-button:hover a.tabbar-link.active:hover) {
+  /* background-color: white; */
+  /* color: color-interaction-bg; */
+  background: color-active-bg;
+  border-color: color-active-bg;
+  color: white;
 }
 
 :global(div.tab-box) {

diff --git a/app/styles/_globals/universal.css b/app/styles/_globals/universal.css
@@ -13,7 +13,8 @@
   /*  Vertically center text*/
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: end;
+  padding-bottom: 10px;
 }
 
 :global(.btn) {

diff --git a/app/styles/about.css b/app/styles/about.css
@@ -0,0 +1,33 @@
+.about-wrapper {
+  width: 100%;
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+}
+
+:global(#about) {
+  display: flex;
+  padding-bottom: 30px;
+  position: absolute;
+  height: 100%;
+  overflow: auto;
+}
+
+:global(#about-content) {
+  width: 80%;
+  margin-top: 35px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 30px;
+  box-shadow: 0px 5px 10px #d1d1e0;
+}
+
+:global(#about-content h1) {
+    padding-left: 15px;
+    height: 45px;
+    font-size: 35px;
+    margin-bottom: 20px;
+    width: 100% !important;
+    background: linear-gradient(to right, #1E1B55, #1E1B55, #1E1B55, #1B3284, #EA5B97, #F5A399);
+    color: #FFF;
+  }