UX - Emphasise nodes user have not performed actions on

Bug: Rapid transition between states on hovering over nodes. @alon I
know you’ve dealt with such a bug so let’s discuss :)

1 files changed, 42 insertions, 26 deletions

diff --git a/res/client/css/by-view/graph-view.scss b/res/client/css/by-view/graph-view.scss
index fa385214..e7542561 100644
--- a/res/client/css/by-view/graph-view.scss
+++ b/res/client/css/by-view/graph-view.scss
@@ -1,3 +1,16 @@
+@mixin node-fill-color($color) {
+  fill: $color;
+  stroke: $color;
+  stroke-width: 11px;
+  stroke-opacity: 0.4;
+  &:hover { 
+    stroke: $color;
+    stroke-opacity: 0.5;
+    stroke-width: 5px;
+    }
+}
+
+
 .graph-view {
     background-color: $light-grey;
     height: 100%;
@@ -36,7 +49,7 @@
 
 .circle:hover {
     stroke: $orange;
-    stroke-opacity: 1;
+    stroke-opacity: 0.5;
     stroke-width: 5px;
     opacity: 1;
 }
@@ -44,7 +57,7 @@
 // [!] identical to :hover, used by activity
 .circle.hovering {
     stroke: $orange;
-    stroke-opacity: 1;
+    stroke-opacity: 0.5;
     stroke-width: 5px;
     opacity: 1;
 }
@@ -96,7 +109,7 @@
   }
   &.hovering {
       stroke: $orange;
-      stroke-opacity: 1;
+      stroke-opacity: 0.5;
       stroke-width: 2px;
       opacity: 1;
   }
@@ -116,6 +129,9 @@
   stroke-width: 15px;
   z-index:2; /* higher than link, lower than node */
 }
+.circle {
+  stroke-opacity: 0.5;
+}
 
 .circle.chosen {
   stroke: $cyan;
@@ -123,7 +139,7 @@
 }
 
 .circle.enter {
-  stroke-opacity: 1;
+  stroke-opacity: 0.5;
 }
 
 .circle.bubble {
@@ -133,7 +149,7 @@
 }
 
 .circle.exit {
-  stroke-opacity: 1;
+  stroke-opacity: 0.5;
 }
 
 .circle.chainlink {
@@ -157,72 +173,72 @@
  */
 
 .circle.person {
-  fill: $blue;
+  @include node-fill-color($blue);
 }
 
 .circle.beneficiary {
-  fill: $green;
+  @include node-fill-color($green);
 }
 
 .circle.completed-project {
-  fill: $purple;
+  @include node-fill-color($purple);
 }
 
 .circle.ongoing-project {
-  fill: $magenta
+  @include node-fill-color($magenta);
 }
 
 .circle.future-project {
-  fill: $cyan
+  @include node-fill-color($cyan);
 }
 .circle.collaborator {
-  fill: $blue;
+  @include node-fill-color($blue);
 }
 
 .circle.club {
-  fill: $magenta;
+  @include node-fill-color($magenta);
 }
 
 .circle.skill {
-  fill: $yellow;
+  @include node-fill-color($yellow);
 }
 
 .circle.interest {
-  fill: $purple;
+  @include node-fill-color($purple);
 }
 
 .circle.project {
-  fill: $green;
+  @include node-fill-color($green);
 }
 
 .circle.third-internship-proposal {
-  fill: $cyan;
+  @include node-fill-color($cyan);
 }
 
 .circle.internship {
-  fill: $orange;
+  @include node-fill-color($orange);
 }
 
 .circle.empty {
-  fill: $mid-grey;
+  @include node-fill-color($mid-grey);
 }
 
 // TODO: how to define type colors using the scss dollar attributes? injecting css is easy, scss - not sure
 
 .circle.project {
-  fill: $magenta;
+  @include node-fill-color($magenta);
 }
 
 .circle.keyword {
-  fill: $purple;
+  @include node-fill-color($purple);
 }
 
 .circle.idea {
-  fill: $green;
+  @include node-fill-color($green);
 }
 
 .circle.resource {
-  fill: $cyan;
+  @include node-fill-color($cyan);
 }
 
 
@@ -230,18 +246,18 @@
 
 .node.first-selected .circle {
     stroke: $yellow;
-    stroke-opacity: 1;
+    stroke-opacity: 0.5;
     stroke-width: 6px;
     z-index: 1;
     &:hover {
       stroke: $orange;
-      stroke-opacity: 1;
+      stroke-opacity: 0.5;
     }
 }
 
 .node.selected .circle {
     stroke: $yellow;
-    stroke-opacity: 1;
+    stroke-opacity: 0.5;
     stroke-width: 2px;
     z-index: 1;
 }
@@ -264,7 +280,7 @@
 
 g:focus circle {
     stroke: #ff0000;
-    stroke-opacity: 1;
+    stroke-opacity: 0.5;
     stroke-width: 3px;
     z-index: 1;
 }