ux(): tweak to help popover annimation and fixed pull-right state

public/app/core/services/popover_srv.js → public/app/core/services/popover_srv.ts

-define([
-  'angular',
-  'lodash',
-  'jquery',
-  '../core_module',
-],
-function (angular, _, $, coreModule) {
-  'use strict';
-
-  coreModule.default.service('popoverSrv', function($templateCache, $timeout, $q, $http, $compile) {
-
-    this.getTemplate = function(url) {
-      return $q.when($templateCache.get(url) || $http.get(url, {cache: true}));
-    };
+///<reference path="../../headers/common.d.ts" />
+
+import config from 'app/core/config';
+import _ from 'lodash';
+import $ from 'jquery';
+import coreModule from 'app/core/core_module';
+
+/** @ngInject **/
+function popoverSrv($templateCache, $timeout, $q, $http, $compile) {
+
+  this.getTemplate = function(url) {
+    return $q.when($templateCache.get(url) || $http.get(url, {cache: true}));
+  };
+
+  this.show = function(options) {
 
-    this.show = function(options) {
-      var popover;
-
-      // hide other popovers
-      $('.popover').each(function() {
-        popover = $(this).prev().data('popover');
-        if (popover) {
-          popover.scope.$destroy();
-          popover.destroy();
-        }
-      });
-
-      options.scope.dismiss = function() {
-        popover = options.element.data('popover');
-        if (popover) {
-          popover.destroy();
-        }
-        options.scope.$destroy();
-      };
-
-      this.getTemplate(options.templateUrl).then(function(result) {
-        $timeout(function() {
-          var template = _.isString(result) ? result : result.data;
-
-          options.element.popover({
-            content: template,
-            placement: options.placement || 'bottom',
-            html: true
-          });
-
-          popover = options.element.data('popover');
-          popover.hasContent = function () {
-            return template;
-          };
-
-          popover.toggle();
-          popover.scope = options.scope;
-          $compile(popover.$tip)(popover.scope);
-        }, 1);
-      });
+    options.scope.dismiss = function() {
+      var popover = options.element.data('popover');
+      if (popover) {
+        popover.destroy();
+      }
+      options.scope.$destroy();
     };
 
-  });
+    this.getTemplate(options.templateUrl).then(function(result) {
+      $timeout(function() {
+        var template = _.isString(result) ? result : result.data;
+
+
+        options.element.popover({
+          content: template,
+          placement: options.placement || 'bottom',
+          html: true
+        });
+
+        var popover = options.element.data('popover');
+        popover.hasContent = function () {
+          return template;
+        };
+
+        popover.toggle();
+        popover.scope = options.scope;
+        $compile(popover.$tip)(popover.scope);
+      }, 1);
+    });
+  };
+}
 
-});
+coreModule.service('popoverSrv', popoverSrv);

public/app/plugins/panel/graph/legend.popover.html

 <div class="graph-legend-popover">
 	<a class="close" ng-click="dismiss();" href="">×</a>
 
-	<div class="editor-row small" style="padding-bottom: 0;">
+	<div class="editor-row" style="padding-bottom: 0;">
 		<label>Axis:</label>
 		<button ng-click="ctrl.toggleYAxis(series);dismiss();"
-			class="btn btn-mini"
-			ng-class="{'btn-success': series.yaxis === 1 }">
+			class="btn btn-small"
+			ng-class="{'btn-success': series.yaxis === 1, 'btn-inverse': series.yaxis === 2}">
 			Left
 		</button>
 		<button ng-click="ctrl.toggleYAxis(series);dismiss();"
-			class="btn btn-mini"
-			ng-class="{'btn-success': series.yaxis === 2 }">
+			class="btn btn-small"
+			ng-class="{'btn-success': series.yaxis === 2, 'btn-inverse': series.yaxis === 1}">
 			Right
 		</button>
 	</div>

public/sass/components/_drop.scss

@@ -3,12 +3,13 @@ $color: inherit;
 $backgroundColor: $btn-secondary-bg;
 $color: $text-color;
 $useDropShadow: false;
-$attachmentOffset: $popover-arrow-size;
-$easing: cubic-bezier(0, 0, 0.265, 1.55);
+$attachmentOffset: 0%;
+$easing: cubic-bezier(0, 0, 0.265, 1.00);
 
 .drop-element {
   position: absolute;
   display: none;
+  opacity: 0;
 
   &.drop-open {
     display: block;
@@ -26,3 +27,4 @@ $easing: cubic-bezier(0, 0, 0.265, 1.55);
 
 @include drop-theme("help", $popover-help-bg, $popover-help-color);
 @include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing);
+

public/sass/mixins/_drop_element.scss

@@ -213,7 +213,7 @@
     opacity: 0;
     .#{$themePrefix}-content {
       transition: transform 0.2s $easing;
-      transform: scale(0) translateZ(0);
+      transform: scale(0.8) translateZ(0);
     }
     &.#{$themePrefix}-open {
       display: none;

public/sass/utils/_utils.scss

@@ -45,10 +45,10 @@ button.close {
 
 // Quick floats
 .pull-right {
-  float: right;
+  float: right !important;
 }
 .pull-left {
-  float: left;
+  float: left !important;
 }
 
 // Toggling content