From c5de82341f9443db2d2b131a6be55bf4a3186b33 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Wed, 16 May 2018 18:11:25 +0300
Subject: [PATCH] RuleChain UI improvements.

---
 ui/src/app/rulechain/rulechain.controller.js |  6 ++
 ui/src/app/rulechain/rulechain.scss          | 76 ++++++++++++++------
 ui/src/app/rulechain/rulenode.tpl.html       |  3 +
 3 files changed, 62 insertions(+), 23 deletions(-)

diff --git a/ui/src/app/rulechain/rulechain.controller.js b/ui/src/app/rulechain/rulechain.controller.js
index 130d5aeb5a..875bc5d59f 100644
--- a/ui/src/app/rulechain/rulechain.controller.js
+++ b/ui/src/app/rulechain/rulechain.controller.js
@@ -598,9 +598,15 @@ export function RuleChainController($state, $scope, $compile, $q, $mdUtil, $time
         edgeDoubleClick: function (event, edge) {
             openLinkDetails(edge);
         },
+        edgeEdit: function(event, edge) {
+            openLinkDetails(edge);
+        },
         nodeCallbacks: {
             'doubleClick': function (event, node) {
                 openNodeDetails(node);
+            },
+            'nodeEdit': function (event, node) {
+                openNodeDetails(node);
             }
         },
         isValidEdge: function (source, destination) {
diff --git a/ui/src/app/rulechain/rulechain.scss b/ui/src/app/rulechain/rulechain.scss
index a4a708cbc3..252ab3cadc 100644
--- a/ui/src/app/rulechain/rulechain.scss
+++ b/ui/src/app/rulechain/rulechain.scss
@@ -223,6 +223,7 @@
 .fc-node {
   z-index: 1;
   outline: none;
+  border-radius: 8px;
   &.fc-dragging {
     z-index: 10;
   }
@@ -239,6 +240,7 @@
     bottom: 0;
     background-color: #000;
     opacity: 0;
+    border-radius: 5px;
   }
   &.fc-hover {
     .fc-node-overlay {
@@ -250,6 +252,12 @@
       opacity: 0.25;
     }
   }
+  &.fc-selected {
+    &:not(.fc-edit) {
+      border: solid 3px red;
+      margin: -3px;
+    }
+  }
 }
 
 .fc-leftConnectors, .fc-rightConnectors {
@@ -340,27 +348,43 @@
 
 .fc-nodedelete {
   display: none;
+  font-size: 18px;
 }
 
-.fc-selected .fc-nodedelete {
-  outline: none;
-  display: block;
-  position: absolute;
-  right: -13px;
-  top: -16px;
-  border: solid 2px white;
-  border-radius: 50%;
-  font-weight: 600;
-  font-size: 18px;
-  line-height: 18px;
-  height: 20px;
-  padding-top: 2px;
-  width: 22px;
-  background: #494949;
-  color: #fff;
-  text-align: center;
-  vertical-align: bottom;
-  cursor: pointer;
+.fc-nodeedit {
+  display: none;
+  font-size: 15px;
+}
+
+.fc-edit {
+  .fc-nodedelete, .fc-nodeedit {
+    outline: none;
+    display: block;
+    position: absolute;
+    border: solid 2px white;
+    border-radius: 50%;
+    font-weight: 600;
+    line-height: 20px;
+    height: 20px;
+    padding-top: 2px;
+    width: 22px;
+    background: #f83e05;
+    color: #fff;
+    text-align: center;
+    vertical-align: bottom;
+    cursor: pointer;
+  }
+
+  .fc-nodeedit {
+    top: -24px;
+    right: 16px;
+  }
+
+  .fc-nodedelete {
+    top: -24px;
+    right: -13px;
+  }
+
 }
 
 .fc-noselect {
@@ -376,7 +400,7 @@
 .fc-edge-label {
   position: absolute;
   transition: transform .2s;
-  opacity: 0.8;
+//  opacity: 0.8;
   &.ng-leave {
     transition: 0s none;
   }
@@ -387,13 +411,19 @@
     .fc-edge-label-text {
       span {
         border: solid red;
-        color: red;
+        color: #fff;
+        font-weight: 600;
+        background-color: red;
       }
     }
   }
-  .fc-nodedelete {
-    right: -13px;
+  .fc-nodeedit {
     top: -30px;
+    right: 14px;
+  }
+  .fc-nodedelete {
+    top: -30px;
+    right: -13px;
   }
   &:focus {
     outline: 0;
diff --git a/ui/src/app/rulechain/rulenode.tpl.html b/ui/src/app/rulechain/rulenode.tpl.html
index d52d8e1ebd..6a82a7f7af 100644
--- a/ui/src/app/rulechain/rulenode.tpl.html
+++ b/ui/src/app/rulechain/rulenode.tpl.html
@@ -45,6 +45,9 @@
             </div>
         </div>
     </div>
+    <div ng-if="modelservice.isEditable() && !node.readonly" class="fc-nodeedit" ng-click="callbacks.nodeEdit($event, node)">
+        <i class="fa fa-pencil" aria-hidden="true"></i>
+    </div>
     <div ng-if="modelservice.isEditable() && !node.readonly" class="fc-nodedelete" ng-click="modelservice.nodes.delete(node)">
         &times;
     </div>