Add creating a segment using mouse

Create new semicircles around the node after mouseover. These work as buttons
to create arrow and after clicking on another node the Add topology segment dialog
is opened. Also selecting segment works, if the segment already exists then
the segment is selected instead of opening the dialog.

https://fedorahosted.org/freeipa/ticket/5648

Reviewed-By: Petr Vobornik <pvoborni@redhat.com>

1 files changed, 39 insertions, 20 deletions

diff --git a/install/ui/less/widgets.less b/install/ui/less/widgets.less
index 56a310462..9ee79b9cb 100644
--- a/install/ui/less/widgets.less
+++ b/install/ui/less/widgets.less
@@ -150,42 +150,61 @@ tbody:empty { display: none; }
 
 .topology-view {
     svg {
-      background-color: #FFF;
-      cursor: default;
-      -webkit-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
-      -o-user-select: none;
-      user-select: none;
+        background-color: #FFF;
+        cursor: default;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        -o-user-select: none;
+        user-select: none;
     }
 
+
     path.link {
-      fill: none;
-      stroke-width: 4px;
-      cursor: pointer;
+        fill: none;
+        stroke: #000;
+        stroke-width: 4px;
+        cursor: pointer;
+        .dragline {
+            pointer-events: none;
+        }
     }
 
-    .marker {
-        stroke: rgba(0, 0, 0);
+    .plus {
+        font-size: .9em;
+        font-family: FontAwesome;
+        fill: #fff;
+    }
+
+    .adder_label {
+        font-weight: bold;
     }
 
-    path.link.selected {
-      stroke-dasharray: 10,2;
+    path.adder {
+        cursor: pointer;
+    }
+
+    .selected {
+        stroke-dasharray: 10,2;
+    }
+
+    .marker {
+        stroke: rgba(0, 0, 0);
     }
 
     circle.node {
-      stroke-width: 1.5px;
-      cursor: pointer;
+        stroke-width: 1.5px;
+        cursor: pointer;
     }
 
     text {
-      font: 16px sans-serif;
-      pointer-events: none;
+        font: 16px sans-serif;
+        pointer-events: none;
     }
 
     text.id {
-      text-anchor: middle;
-      font-weight: bold;
+        text-anchor: middle;
+        font-weight: bold;
     }
 }