ux: made progress on popover forms

public/app/core/services/popover_srv.ts

@@ -10,9 +10,14 @@ import Drop from 'tether-drop';
 function popoverSrv($compile, $rootScope) {
 
   this.show = function(options) {
+    var classNames = 'drop-popover';
     var popoverScope = _.extend($rootScope.$new(true), options.model);
     var drop;
 
+    if (options.classNames) {
+      classNames = options.classNames;
+    }
+
     function destroyDrop() {
       setTimeout(function() {
         if (drop.tether) {
@@ -35,11 +40,11 @@ function popoverSrv($compile, $rootScope) {
       target: options.element,
       content: contentElement,
       position: options.position,
-      classes: 'drop-popover',
+      classes: classNames,
       openOn: options.openOn || 'hover',
       hoverCloseDelay: 200,
       tetherOptions: {
-        constraints: [{to: 'window', pin: true, attachment: "both"}]
+        constraints: [{to: 'scrollParent', attachment: "none both"}]
       }
     });
 

public/app/features/dashboard/partials/event_editor.html

@@ -1,27 +1,27 @@
-<div class="gf-form-group">
-	<h5 class="section-heading">Add annotation event</h5>
 
-	<div class="gf-form">
-		<span class="gf-form-label width-8">Title</span>
-		<input type="text" ng-model="ctrl.event.title" class="gf-form-input max-width-20">
-	</div>
-	<div class="gf-form">
-		<span class="gf-form-label width-8">Time</span>
-		<input type="text" ng-model="ctrl.event.time" class="gf-form-input max-width-20">
-	</div>
-	<div class="gf-form" ng-if="ctrl.event.isRegion">
-		<span class="gf-form-label width-8">To</span>
-		<input type="text" ng-model="ctrl.event.endTime" class="gf-form-input max-width-20">
-	</div>
-	<div class="gf-form gf-form--v-stretch">
-		<span class="gf-form-label width-7">Description</span>
-		<textarea class="gf-form-input width-25" rows="3" ng-model="ctrl.event.description"  placeholder="Panel description, supports markdown & links"></textarea>
-	</div>
-</div>
+<h5 class="section-heading text-center">Create event</h5>
+
+<div class="text-center">
+	<div class="gf-form-group" style="display: inline-block">
+		<div class="gf-form">
+			<span class="gf-form-label width-7">Title</span>
+			<input type="text" ng-model="ctrl.event.title" class="gf-form-input max-width-20">
+		</div>
+		<div class="gf-form">
+			<span class="gf-form-label width-7">Time</span>
+			<input type="text" ng-model="ctrl.event.time" class="gf-form-input max-width-20">
+		</div>
+		<div class="gf-form" ng-if="ctrl.event.isRegion">
+			<span class="gf-form-label width-7">To</span>
+			<input type="text" ng-model="ctrl.event.endTime" class="gf-form-input max-width-20">
+		</div>
+		<div class="gf-form gf-form--v-stretch">
+			<span class="gf-form-label width-7">Description</span>
+			<textarea class="gf-form-input width-20" rows="3" ng-model="ctrl.event.description"  placeholder="Event description"></textarea>
+		</div>
 
-<div class="gf-form-button-row">
-	<button class="btn gf-form-btn width-10 btn-success" ng-click="ctrl.addAnnotation()">
-		<i class="fa fa-pencil"></i>
-		Add Annotation
-	</button>
+		<div class="gf-form-button-row">
+			<button class="btn gf-form-btn btn-success" ng-click="ctrl.addAnnotation()">Save</button>
+		</div>
+	</div>
 </div>

public/app/plugins/panel/graph/graph.ts

@@ -98,6 +98,7 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv, popoverSrv) {
       function showAddAnnotationView(timeRange) {
         popoverSrv.show({
           element: elem[0],
+          classNames: 'drop-popover drop-popover--form',
           position: 'bottom center',
           openOn: 'click',
           template: '<event-editor panelCtrl="ctrl" timeRange="timeRange"></event-editor>',
@@ -672,7 +673,7 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv, popoverSrv) {
           // Create new annotation from time range
           let timeRange = ranges.xaxis;
           showAddAnnotationView(timeRange);
-          plot.clearSelection();
+          //plot.clearSelection();
         } else {
           scope.$apply(function() {
             timeSrv.setTime({

public/sass/_variables.dark.scss

@@ -251,7 +251,7 @@ $infoText:                $blue-dark;
 $infoBackground:          $blue-dark;
 
 // popover
-$popover-bg:         $dark-4;
+$popover-bg:         $panel-bg;
 $popover-color:      $text-color;
 
 $popover-help-bg:         $btn-secondary-bg;

public/sass/components/_drop.scss

@@ -1,11 +1,18 @@
 $popover-arrow-size: 0.7rem;
 $color: inherit;
-$backgroundColor: $btn-secondary-bg;
 $color: $text-color;
 $useDropShadow: false;
 $attachmentOffset: 0%;
 $easing: cubic-bezier(0, 0, 0.265, 1.00);
 
+@include drop-theme("help", $popover-help-bg, $popover-help-color);
+@include drop-theme("error", $errorBackground, $popover-color);
+@include drop-theme("popover", $popover-bg, $popover-color, $brand-primary);
+
+@include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing);
+@include drop-animation-scale("drop", "error", $attachmentOffset: $attachmentOffset, $easing: $easing);
+@include drop-animation-scale("drop", "popover", $attachmentOffset: $attachmentOffset, $easing: $easing);
+
 .drop-element {
   z-index: 10000;
   position: absolute;
@@ -44,11 +51,8 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00);
   }
 }
 
-@include drop-theme("help", $popover-help-bg, $popover-help-color);
-@include drop-theme("error", $errorBackground, $popover-color);
-@include drop-theme("popover", $popover-bg, $popover-color);
-
-@include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing);
-@include drop-animation-scale("drop", "error", $attachmentOffset: $attachmentOffset, $easing: $easing);
-@include drop-animation-scale("drop", "popover", $attachmentOffset: $attachmentOffset, $easing: $easing);
-
+.drop-element.drop-popover--form {
+  .drop-content {
+    max-width: none;
+  }
+}

public/sass/mixins/_drop_element.scss

@@ -1,5 +1,5 @@
 
-@mixin drop-theme($themeName, $theme-bg, $theme-color) {
+@mixin drop-theme($themeName, $theme-bg, $theme-color, $border-color: $theme-color) {
   .drop-element.drop-#{$themeName} {
     max-width: 100%;
     max-height: 100%;
@@ -14,6 +14,8 @@
       font-size: $font-size-sm;
       word-wrap: break-word;
       max-width: 20rem;
+      border: 1px solid $border-color;
+      box-shadow: 0 0 10px #f86e06;
 
       &:before {
         content: "";
@@ -43,7 +45,7 @@
         top: 100%;
         left: 50%;
         margin-left: - $popover-arrow-size;
-        border-top-color: $theme-bg;
+        border-top-color: $border-color;
       }
     }
 
@@ -54,7 +56,7 @@
         bottom: 100%;
         left: 50%;
         margin-left: - $popover-arrow-size;
-        border-bottom-color: $theme-bg;
+        border-bottom-color: $border-color;
       }
     }
 
@@ -65,7 +67,7 @@
         left: 100%;
         top: 50%;
         margin-top: - $popover-arrow-size;
-        border-left-color: $theme-bg;
+        border-left-color: $border-color;
       }
     }
 
@@ -76,7 +78,7 @@
         right: 100%;
         top: 50%;
         margin-top: - $popover-arrow-size;
-        border-right-color: $theme-bg;
+        border-right-color: $border-color;
       }
     }
 
@@ -95,7 +97,7 @@
       &:before {
         bottom: 100%;
         left: $popover-arrow-size;
-        border-bottom-color: $theme-bg;
+        border-bottom-color: $border-color;
       }
     }
 
@@ -105,7 +107,7 @@
       &:before {
         bottom: 100%;
         right: $popover-arrow-size;
-        border-bottom-color: $theme-bg;
+        border-bottom-color: $border-color;
       }
     }
 
@@ -115,7 +117,7 @@
       &:before {
         top: 100%;
         left: $popover-arrow-size;
-        border-top-color: $theme-bg;
+        border-top-color: $border-color;
       }
     }
 
@@ -125,7 +127,7 @@
       &:before {
         top: 100%;
         right: $popover-arrow-size;
-        border-top-color: $theme-bg;
+        border-top-color: $border-color;
       }
     }
 
@@ -136,7 +138,7 @@
       &:before {
         bottom: 100%;
         left: $popover-arrow-size;
-        border-bottom-color: $theme-bg;
+        border-bottom-color: $border-color;
       }
     }
 
@@ -146,7 +148,7 @@
       &:before {
         bottom: 100%;
         right: $popover-arrow-size;
-        border-bottom-color: $theme-bg;
+        border-bottom-color: $border-color;
       }
     }
 
@@ -166,7 +168,7 @@
       &:before {
         top: 100%;
         right: $popover-arrow-size;
-        border-top-color: $theme-bg;
+        border-top-color: $border-color;
       }
     }
 
@@ -177,7 +179,7 @@
       &:before {
         top: $popover-arrow-size;
         left: 100%;
-        border-left-color: $theme-bg;
+        border-left-color: $border-color;
       }
     }
 
@@ -187,7 +189,7 @@
       &:before {
         top: $popover-arrow-size;
         right: 100%;
-        border-right-color: $theme-bg;
+        border-right-color: $border-color;
       }
     }
 
@@ -197,7 +199,7 @@
       &:before {
         bottom: $popover-arrow-size;
         left: 100%;
-        border-left-color: $theme-bg;
+        border-left-color: $border-color;
       }
     }
 
@@ -207,7 +209,7 @@
       &:before {
         bottom: $popover-arrow-size;
         right: 100%;
-        border-right-color: $theme-bg;
+        border-right-color: $border-color;
       }
     }
   }