Stylistic changes to visual representation of injector graph and rout…

…er tree (rangle#672) * Fixed marker arrow and component colors for dark and light modes. * included the use of variables for different modes and graphs
alex-craiu · Sep 15, 2016 · bb67829 · bb67829
1 parent b1926a4
commit bb67829
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 18 deletions.
diff --git a/src/frontend/components/router-tree/router-tree.ts b/src/frontend/components/router-tree/router-tree.ts
@@ -104,14 +104,7 @@ export class RouterTree {
       .attr('class', 'monospace');
 
     // Update the nodes
-    node.attr('transform', (d) => `translate(${d.y},${d.x})`)
-      .select('circle')
-      .style('fill', (d) => {
-        if (this.selectedRoute && (d.id === this.selectedRoute.id)) {
-          return d.isAux ? '#2828AB' : '#F05057';
-        }
-        return d.isAux ? '#EBF2FC' : '#FFF0F0';
-      });
+     node.attr('transform', (d) => `translate(${d.y},${d.x})`);
 
     // Declare the links
     const link = this.treeConfig.svg.selectAll('path.link')

diff --git a/src/styles/properties.css b/src/styles/properties.css
@@ -5,6 +5,35 @@
 :root {
   --bt-link-color: #2828AB;
 
+
+  /**
+   *  Light Mode (lmode) and Dark Mode (dmode) of Injector Graph (igraph) Colours
+   */
+  --lmode-igraph-component-primary: #2828AB;
+  --lmode-igraph-component-secondary: #EBF2FC;
+  --lmode-igraph-service-primary: #F05057;
+  --lmode-igraph-service-secondary: #FFF0F0;
+
+  --dmode-igraph-component-primary: #23a9ab;
+  --dmode-igraph-component-secondary: #EBF2FC;
+  --dmode-igraph-service-primary: #F05057;
+  --dmode-igraph-service-secondary: #FFF0F0;
+
+
+  /**
+   *  Light Mode (lmode) and Dark Mode (dmode) of Router Tree (rtree) Colours
+   */
+  --lmode-rtree-node-primary: #F05057;
+  --lmode-rtree-node-secondary: #FFF0F0;
+  --lmode-rtree-aux-node-primary: #2828AB;
+  --lmode-rtree-aux-node-secondary: #EBF2FC;
+
+  --dmode-rtree-node-primary: #F05057;
+  --dmode-rtree-node-secondary: #FFF0F0;
+  --dmode-rtree-aux-node-primary: #23a9ab;
+  --dmode-rtree-aux-node-secondary: #EBF2FC;
+
+
   --space-1: 0.1818rem;
   --space-2: 0.3636rem;
   --space-3: 0.7273rem;

diff --git a/src/styles/utils/colors.css b/src/styles/utils/colors.css
@@ -17,21 +17,21 @@ bt-router-tree .link {
 bt-injector-tree {
   & .stroke- {
     &root {
-      stroke: #9B9B9B;
+      stroke: var(--lmode-igraph-component-primary);
     }
 
     &component {
-      stroke: #2828AB;
+      stroke: var(--lmode-igraph-component-primary);
     }
 
     &service {
-      stroke: #FF0202;
+      stroke: var(--lmode-igraph-service-primary);
     }
   }
 
   & .fill- {
     &root {
-      fill: #9B9B9B;
+      fill: var(--lmode-igraph-component-primary);
     }
 
     &component {
@@ -142,11 +142,21 @@ bt-injector-tree {
 
   & bt-router-tree {
     & .node-route {
-      stroke: #F05057;
+      stroke: var(--lmode-rtree-node-primary);
+      fill: var(--lmode-rtree-node-secondary);
+    }
+
+    & .node-route:hover {
+      fill: var(--lmode-rtree-node-primary);
     }
 
     & .node-aux-route {
-      stroke: var(--bt-link-color);
+      stroke: var(--lmode-rtree-aux-node-primary);
+      fill: var(--lmode-rtree-aux-node-secondary);
+    }
+
+    & .node-aux-route:hover {
+      fill: var(--lmode-rtree-aux-node-primary);
     }
 
     & text {
@@ -159,7 +169,7 @@ bt-injector-tree {
   }
 
   & bt-injector-tree #suit > path {
-    stroke: #5A5A5A !important;
+    stroke: var(--lmode-igraph-component-primary) !important;
   }
 }
 
@@ -262,11 +272,21 @@ bt-injector-tree {
 
   & bt-router-tree {
     & .node-route {
-      stroke: #F05057;
+      stroke: var(--dmode-rtree-node-primary);
+      fill: var(--dmode-rtree-node-secondary);
+    }
+
+    & .node-route:hover {
+      fill: var(--dmode-rtree-node-primary);
     }
 
     & .node-aux-route {
-      stroke: var(--bt-link-color)
+      stroke: var(--dmode-rtree-aux-node-primary);
+      fill: var(--dmode-rtree-aux-node-secondary);
+    }
+
+    & .node-aux-route:hover {
+      fill: var(--dmode-rtree-aux-node-primary);
     }
 
     & text {
@@ -278,7 +298,20 @@ bt-injector-tree {
     fill: #A5A5A5;
   }
 
+  & bt-injector-tree {
+
+    & .stroke- {
+      &root, &component {
+        stroke: var(--dmode-igraph-component-primary);
+      }
+    }
+
+    & .fill-root {
+        fill: var(--dmode-igraph-component-primary);
+    }
+  }
+
   & bt-injector-tree #suit > path {
-    stroke: #A5A5A5 !important;
+    stroke: var(--dmode-igraph-component-primary) !important;
   }
 }