MT#13369 Add annotate possibility for narrowly positioned buttons

Change-Id: I23b0e1753a8a2ba2bf82606528a9072364fb10c5

share/static/css/ngcp-annotate.css

@@ -1,6 +1,8 @@
 .annotate.assigned,
 .annotate.assigned .arrow-top:after, .annotate.assigned .arrow-bottom:after,
-.annotate.assigned .arrow-left:after, .annotate.assigned .arrow-right:after {
+.annotate.assigned .arrow-left:after, .annotate.assigned .arrow-right:after,
+.annotate.assigned .arrow-bottomleft:after, .annotate.assigned .arrow-bottomright:after,
+.annotate.assigned .arrow-topleft:after, .annotate.assigned .arrow-topright:after  {
   background: white;
   color: #008800;
   border: 1px solid #008800;
@@ -8,7 +10,9 @@
 
 .annotate.unassigned,
 .annotate.unassigned .arrow-top:after, .annotate.unassigned .arrow-bottom:after, 
-.annotate.unassigned .arrow-left:after, .annotate.unassigned .arrow-right:after {
+.annotate.unassigned .arrow-left:after, .annotate.unassigned .arrow-right:after ,
+.annotate.unassigned .arrow-bottomleft:after, .annotate.unassigned .arrow-bottomright:after,
+.annotate.unassigned .arrow-topleft:after, .annotate.unassigned .arrow-topright:after {
   background: white;
   color: #ff9900;
   border: 1px solid #ff9900;
@@ -112,3 +116,91 @@
   -ms-transform:     rotate(45deg);
   -o-transform:      rotate(45deg);
 }
+
+.arrow-bottomleft {
+  width: 50px;
+  height: 10px;
+  overflow: hidden;
+  position: absolute;
+  left: 100%;
+  margin-left: -25px;
+  top: -10px;
+}
+.arrow-bottomleft:after {
+  content: "";
+  position: absolute;
+  left: 5px;
+  bottom: -25px;
+  width: 25px;
+  height: 25px;
+  border: 1px solid red;
+  -webkit-transform: rotate(45deg);
+  -moz-transform:    rotate(45deg);
+  -ms-transform:     rotate(45deg);
+  -o-transform:      rotate(45deg);
+}
+
+.arrow-bottomright {
+  width: 50px;
+  height: 10px;
+  overflow: hidden;
+  position: absolute;
+  left: 0;
+  margin-left: -25px;
+  top: -10px;
+}
+.arrow-bottomright:after {
+  content: "";
+  position: absolute;
+  left: 18px;
+  bottom: -25px;
+  width: 25px;
+  height: 25px;
+  border: 1px solid red;
+  -webkit-transform: rotate(45deg);
+  -moz-transform:    rotate(45deg);
+  -ms-transform:     rotate(45deg);
+  -o-transform:      rotate(45deg);
+}
+.arrow-topleft {
+  width: 50px;
+  height: 10px;
+  overflow: hidden;
+  position: absolute;
+  left: 100%;
+  margin-left: -25px;
+  bottom: -10px;
+}
+.arrow-topleft:after {
+  content: "";
+  position: absolute;
+  left: 6px;
+  top: -25px;
+  width: 25px;
+  height: 25px;
+  -webkit-transform: rotate(45deg);
+  -moz-transform:    rotate(45deg);
+  -ms-transform:     rotate(45deg);
+  -o-transform:      rotate(45deg);
+}
+.arrow-topright {
+  width: 50px;
+  height: 10px;
+  overflow: hidden;
+  position: absolute;
+  left: 0;
+  margin-left: -25px;
+  bottom: -10px;
+}
+.arrow-topright:after {
+  content: "";
+  position: absolute;
+  left: 18px;
+  top: -25px;
+  width: 25px;
+  height: 25px;
+  -webkit-transform: rotate(45deg);
+  -moz-transform:    rotate(45deg);
+  -ms-transform:     rotate(45deg);
+  -o-transform:      rotate(45deg);
+}

share/static/js/libs/ngcp-annotate.js

@@ -18,22 +18,38 @@
       };
       var top, left;
       switch(pos) {
-      	case "top":
+        case "top":
           top = linkPosition.top - 5 - $el.outerHeight();
           left = linkPosition.left - $el.outerWidth()/2;
-	  break;
-      	case "bottom":
+          break;
+        case "topleft":
+          top = linkPosition.top - 5 - $el.outerHeight();
+          left = linkPosition.left - $el.outerWidth() + 5 ;
+          break;
+        case "topright":
+          top = linkPosition.top - 5 - $el.outerHeight();
+          left = linkPosition.left - 5 ;
+          break;
+        case "bottom":
           top = linkPosition.top - 15 + $el.outerHeight();
           left = linkPosition.left - $el.outerWidth()/2;
-	  break;
-      	case "left":
+          break;
+        case "bottomleft":
+          top = linkPosition.top - 15 + $el.outerHeight();
+          left = linkPosition.left - $el.outerWidth() + 5 ;
+          break;
+        case "bottomright":
+          top = linkPosition.top - 15 + $el.outerHeight();
+          left = linkPosition.left - 5 ;
+          break;
+        case "left":
           top = linkPosition.top - $el.outerHeight()/2;
           left = linkPosition.left - 5 - $el.outerWidth();
-	  break;
-      	case "right":
+          break;
+        case "right":
           top = linkPosition.top - $el.outerHeight()/2;
           left = linkPosition.left + 5;
-	  break;
+          break;
       }
       $el.css({
         top: top,