From 74ff512197d645e3e2c9a8180b3266e2ee95848f Mon Sep 17 00:00:00 2001
From: Christoph Dornieden <cdor@informatik.uni-kiel.de>
Date: Mon, 20 Jun 2016 16:46:07 +0200
Subject: [PATCH] possible style
---
.../component.js | 3 +-
.../style.js | 46 +++++++++++++++++--
2 files changed, 44 insertions(+), 5 deletions(-)
diff --git a/app/components/architecture-visualisation-cytoscape/component.js b/app/components/architecture-visualisation-cytoscape/component.js
index afef77c..0ceae58 100644
--- a/app/components/architecture-visualisation-cytoscape/component.js
+++ b/app/components/architecture-visualisation-cytoscape/component.js
@@ -69,7 +69,8 @@ export default Ember.Component.extend({
layout: {
name: 'cola',
- padding: 5
+ padding: 5,
+ maxSimulationTime: 1000
}
});
}
diff --git a/app/components/architecture-visualisation-cytoscape/style.js b/app/components/architecture-visualisation-cytoscape/style.js
index 9a6e644..b546c73 100644
--- a/app/components/architecture-visualisation-cytoscape/style.js
+++ b/app/components/architecture-visualisation-cytoscape/style.js
@@ -3,8 +3,26 @@
this is a .js file, because we can then use static imports which ember-cli can properly build.
Notice that this is only pseudo-css for cytoscape. See the cytoscape.js docs for more info.
*/
+
+/*https://color.adobe.com/anggo-djago-color-theme-2691053/*/
+const arrowBorderColor = '#002A4A';
+const arrowColor = arrowBorderColor;
+
+
+const nodeTextColor = '#002A4A';
+const nodeColor = '#17607D';
+
+const serviceColor = '#ED8910';
+const serviceTextColor = '#FFFEED';/* '#FFF1CE';*/
+
+const nodeGroupTextColor = nodeTextColor;
+const nodeGroupColor = 'white';
+const borderColor = '#D64700';
+
+
export default `
+
* {
font-size: 10pt;
}
@@ -14,6 +32,10 @@ node { /* all nodes */
shape: roundrectangle;
text-valign: center;
text-halign: center;
+ width: 100px;
+ height: 60px;
+ text-wrap: wrap;
+ text-max-width: 90px;
}
$node > node { /* compounds. "Nodes" in meta model. $ selects the parent node that has a node instead of the node (as css would) */
@@ -26,14 +48,30 @@ $node > node { /* compounds. "Nodes" in meta model. $ selects the parent node th
}
[type="node"] {
- background-color: #CCC;
+ background-color: ${nodeColor};
+ color: ${nodeTextColor};
+ font-weight: bold;
+
+}
+
+[type="serviceInstance"] {
+ background-color: ${serviceColor};
+ color: ${serviceTextColor};
+ font-weight: bold;
+}
+[type="communicationInstance"] {
+ color: #F4EFDC;
+ line-color: ${arrowBorderColor};
+ target-arrow-color: ${arrowColor};
}
[type="nodeGroup"] {
- background-color: white;
+ color: ${nodeGroupTextColor};
+ background-color: ${nodeGroupColor};
border-style: dotted;
- border-color: #999;
+ border-color: ${borderColor};
border-width: 2px;
+ font-weight: bold;
}
edge {
@@ -55,4 +93,4 @@ edge {
}
-`; /* js string end */
\ No newline at end of file
+`; /* js string end */
--
GitLab