From f8850058b6c53cb5d4df99171b1943c348d72263 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Mon, 7 Mar 2016 15:12:51 +0100
Subject: [PATCH] Simplify cloud selection

---
 client/app/scripts/charts/node-shape-cloud.js |  2 +-
 client/app/scripts/charts/node.js             |  4 ----
 client/app/styles/main.less                   | 24 +++++++++----------
 3 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/client/app/scripts/charts/node-shape-cloud.js b/client/app/scripts/charts/node-shape-cloud.js
index 4134c270d..2d9898956 100644
--- a/client/app/scripts/charts/node-shape-cloud.js
+++ b/client/app/scripts/charts/node-shape-cloud.js
@@ -34,7 +34,7 @@ export default function NodeShapeCloud({highlighted, size, color}) {
   };
 
   return (
-    <g className="shape">
+    <g className="shape shape-cloud">
       {highlighted &&
           <path className="highlighted" {...pathProps(0.7)} />}
       <path className="border" stroke={color} {...pathProps(0.5)} />
diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js
index 6a3cf4ebb..3413f2395 100644
--- a/client/app/scripts/charts/node.js
+++ b/client/app/scripts/charts/node.js
@@ -83,10 +83,6 @@ export default class Node extends React.Component {
     if (this.props.pseudo) {
       classNames.push('pseudo');
     }
-    if (this.props.shape === 'cloud') {
-      // need to identify cloud in CSS because it's stroke is not set via CSS
-      classNames.push('cloud');
-    }
 
     const classes = classNames.join(' ');
 
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index dbb416c2e..85305feab 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -313,20 +313,10 @@ h2 {
     }
   }
 
-  g.node {
+  .nodes > .node {
     cursor: pointer;
     transition: opacity .5s ease-in-out;
 
-    /* cloud paths have stroke-width set dynamically */
-    &:not(.cloud) .shape .border {
-      stroke-width: @node-border-stroke-width;
-      fill: @background-color;
-    }
-
-    &:not(.cloud) .stack .shape .border {
-      stroke-width: @node-border-stroke-width - 0.5;
-    }
-
     &.pseudo {
       cursor: default;
 
@@ -379,9 +369,14 @@ h2 {
     }
   }
 
-
   .shape {
 
+    /* cloud paths have stroke-width set dynamically */
+    &:not(.shape-cloud) .border {
+      stroke-width: @node-border-stroke-width;
+      fill: @background-color;
+    }
+
     .shadow {
       stroke: none;
       fill: @background-lighter-color;
@@ -399,6 +394,11 @@ h2 {
       stroke-opacity: @node-highlight-stroke-opacity;
     }
   }
+
+  .stack .shape .border {
+    stroke-width: @node-border-stroke-width - 0.5;
+  }
+
 }
 
 .details {